chore(swap): buy/to asset list check (#2648)

Signed-off-by: banklesss <105349292+banklesss@users.noreply.github.com>
Emurgo · Aug 29, 2023 · eb59f74 · eb59f74
1 parent ac4ee0b
commit eb59f74
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 11 deletions.
diff --git a/apps/wallet-mobile/src/components/BottomSheetModal/BottomSheetModal.tsx b/apps/wallet-mobile/src/components/BottomSheetModal/BottomSheetModal.tsx
@@ -113,7 +113,7 @@ const styles = StyleSheet.create({
     justifyContent: 'flex-end',
   },
   sheetTitle: {
-    flex: 3,
+    flex: 4,
     fontSize: 20,
     fontWeight: 'bold',
     color: '#242838',

diff --git a/apps/wallet-mobile/src/features/Swap/common/strings.ts b/apps/wallet-mobile/src/features/Swap/common/strings.ts
@@ -56,6 +56,8 @@ export const useStrings = () => {
     poolFee: intl.formatMessage(messages.poolFee),
     batcherFee: intl.formatMessage(messages.batcherFee),
     assets: (qty: number) => intl.formatMessage(globalMessages.assets, {qty}),
+    asset: intl.formatMessage(messages.asset),
+    volume: intl.formatMessage(messages.volume),
     total: intl.formatMessage(globalMessages.total),
   }
 }
@@ -164,6 +166,10 @@ export const messages = defineMessages({
     id: 'swap.swapScreen.poolVerification',
     defaultMessage: '!!!{pool} verification',
   },
+  volume: {
+    id: 'swap.swapScreen.volume',
+    defaultMessage: '!!!Volume, 24h',
+  },
   poolVerificationInfo: {
     id: 'swap.swapScreen.poolVerificationInfo',
     defaultMessage:

diff --git a/...n/CreateOrder/EditBuyAmount/SelectBuyTokenFromListScreen/SelectBuyTokenFromListScreen.tsx b/...n/CreateOrder/EditBuyAmount/SelectBuyTokenFromListScreen/SelectBuyTokenFromListScreen.tsx
@@ -60,7 +60,17 @@ export const SelectBuyTokenFromListScreen = () => {
 
       <MyPortfolioCaption />
 
-      <Spacer height={24} />
+      <Spacer height={16} />
+
+      <View style={styles.labels}>
+        <Text style={styles.label}>{strings.asset}</Text>
+
+        <Text style={styles.label}>{strings.volume}</Text>
+      </View>
+
+      <Spacer height={16} />
+
+      <View style={styles.line} />
 
       <Boundary>
         <TokenList showOnlyVerifiedTokens={isOnlyVerifiedTokens} />
@@ -83,7 +93,7 @@ const VerifiedTokensToogle = ({onToogle, isToogled}: {onToogle: () => void; isTo
         <Spacer width={8} />
 
         <TouchableOpacity onPress={() => setShowVerifiedTokenInfo(true)}>
-          <Icon.Info size={24} />
+          <Icon.Info size={28} />
         </TouchableOpacity>
       </View>
 
@@ -105,7 +115,7 @@ const VerifiedTokenInfo = () => {
     <View>
       <Text style={styles.modalText}>{strings.poolVerificationInfo('MuesliSwap')}</Text>
 
-      <Spacer height={12} />
+      <Spacer height={28} />
 
       <Text>
         <Text style={styles.modalText}>{strings.eachVerifiedToken}</Text>
@@ -124,14 +134,12 @@ const MyPortfolioCaption = () => {
   const strings = useStrings()
 
   return (
-    <View>
-      <View style={[styles.row]}>
-        <Icon.Portfolio size={20} color={COLORS.LIGHT_GREEN} />
+    <View style={[styles.row]}>
+      <Icon.Portfolio size={20} color={COLORS.LIGHT_GREEN} />
 
-        <Spacer width={8} />
+      <Spacer width={8} />
 
-        <Text style={styles.topText}>{strings.assetsIn}</Text>
-      </View>
+      <Text style={styles.topText}>{strings.assetsIn}</Text>
     </View>
   )
 }
@@ -319,14 +327,28 @@ const styles = StyleSheet.create({
   item: {
     paddingVertical: 14,
   },
+  label: {
+    fontFamily: 'Rubik',
+    fontSize: 12,
+    fontStyle: 'normal',
+    fontWeight: '400',
+    lineHeight: 18,
+  },
+  labels: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+  },
   borderBottom: {
     borderBottomColor: COLORS.BORDER_GRAY,
     borderBottomWidth: StyleSheet.hairlineWidth,
   },
   list: {
     flex: 1,
   },
-
+  line: {
+    height: StyleSheet.hairlineWidth,
+    backgroundColor: '#DCE0E9',
+  },
   counter: {
     padding: 16,
     justifyContent: 'center',
@@ -355,6 +377,8 @@ const styles = StyleSheet.create({
     fontWeight: '400',
     lineHeight: 20,
     color: '#242838',
+    fontFamily: 'Rubik',
+    fontSize: 15,
   },
   image: {
     flex: 1,

diff --git a/apps/wallet-mobile/src/i18n/locales/en-US.json b/apps/wallet-mobile/src/i18n/locales/en-US.json
@@ -153,6 +153,7 @@
   "swap.swapScreen.swapMinReceivedTitle": "Min Received",
   "swap.swapScreen.enterSlippage": "Enter a value from 0% to 100%. You can also enter up to 1 decimal",
   "swap.swapScreen.poolVerification": "{pool} verification",
+  "swap.swapScreen.volume": "Volume, 24h",
   "swap.swapScreen.tvl": " TVL",
   "components.common.navigation.nftGallery": "NFT Gallery",
   "components.receive.addressmodal.BIP32path": "Derivation path",