app/src/component/floatingWalletBalance/view.js

@@ -16,13 +16,20 @@ class FloatingWalletBalance extends React.PureComponent<Props> {
     const { balance, navigation } = this.props;
 
     return (
-      <TouchableOpacity style={[floatingButtonStyle.container, floatingButtonStyle.bottomRight]}
-                        onPress={() => navigation && navigation.navigate({ routeName: 'WalletStack' })}>
-        {isNaN(balance) && <ActivityIndicator size="small" color={Colors.White} />}
-        <Text style={floatingButtonStyle.text}>
-          {(balance || balance === 0) && (formatCredits(parseFloat(balance), 2) + ' LBC')}
-        </Text>
-      </TouchableOpacity>
+      <View style={[floatingButtonStyle.view, floatingButtonStyle.bottomRight]}>
+        <TouchableOpacity style={floatingButtonStyle.container}
+                          onPress={() => navigation && navigation.navigate({ routeName: 'WalletStack' })}>
+          {isNaN(balance) && <ActivityIndicator size="small" color={Colors.White} />}
+          <Text style={floatingButtonStyle.text}>
+            {(balance || balance === 0) && (formatCredits(parseFloat(balance), 2) + ' LBC')}
+          </Text>
+        </TouchableOpacity>
+        <TouchableOpacity style={floatingButtonStyle.pendingContainer}>
+          <Text style={floatingButtonStyle.text}>
+            get 40
+          </Text>
+        </TouchableOpacity>
+      </View>
     );
   }
 }

app/src/styles/floatingButton.js

@@ -2,8 +2,15 @@ import { StyleSheet } from 'react-native';
 import Colors from './colors';
 
 const floatingButtonStyle = StyleSheet.create({
-  container: {
+  view: {
     position: 'absolute',
+    zIndex: 100,
+    borderRadius: 24,
+    padding: 14,
+    justifyContent: 'flex-end',
+    flexDirection: 'row'
+  },
+  container: {
     zIndex: 100,
     borderRadius: 24,
     padding: 14,
@@ -11,7 +18,7 @@ const floatingButtonStyle = StyleSheet.create({
     paddingRight: 20,
     alignItems: 'center',
     justifyContent: 'center',
-    backgroundColor: Colors.BrighterLbryGreen,
+    backgroundColor: Colors.LbryGreen,
     shadowColor: 'black',
     shadowOpacity: 0.1,
     shadowRadius: StyleSheet.hairlineWidth,
@@ -20,6 +27,17 @@ const floatingButtonStyle = StyleSheet.create({
     },
     elevation: 4
   },
+  pendingContainer: {
+    borderRadius: 24,
+    padding: 14,
+    paddingLeft: 70,
+    paddingRight: 20,
+    marginLeft: -60,
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: Colors.BrighterLbryGreen,
+    elevation: 3
+  },
   text: {
     color: Colors.White,
     fontFamily: 'Inter-UI-Bold',