[Issue-1097]: Add Token Name to the Token Details and Import Token sc…

…reen for mobile app
Koniverse · Oct 27, 2023 · 44d4e93 · 44d4e93
1 parent 11e9dd0
commit 44d4e93
Show file tree

Hide file tree

Showing 5 changed files with 121 additions and 56 deletions.
diff --git a/src/components/TokenSelectItem.tsx b/src/components/TokenSelectItem.tsx
@@ -1,15 +1,17 @@
-import React from 'react';
-import { StyleProp, TouchableOpacity, TouchableOpacityProps, View } from 'react-native';
+import React, { useMemo } from 'react';
+import { StyleSheet, TouchableOpacity, TouchableOpacityProps, View } from 'react-native';
 import { getTokenLogo } from 'utils/index';
 import Text from 'components/Text';
 import { ColorMap } from 'styles/color';
 import { FontMedium, FontSemiBold } from 'styles/sharedStyles';
 import { CheckCircle } from 'phosphor-react-native';
-import { Icon } from 'components/design-system-ui';
+import { Icon, Typography } from 'components/design-system-ui';
 import { useSubWalletTheme } from 'hooks/useSubWalletTheme';
+import { ThemeTypes } from 'styles/themes';
 
 interface Props extends TouchableOpacityProps {
   symbol: string;
+  name: string;
   chain: string;
   logoKey: string;
   subLogoKey?: string;
@@ -19,41 +21,9 @@ interface Props extends TouchableOpacityProps {
   iconSize?: number;
 }
 
-const itemArea: StyleProp<any> = {
-  flexDirection: 'row',
-  justifyContent: 'space-between',
-  paddingVertical: 14,
-  alignItems: 'center',
-  paddingHorizontal: 12,
-  backgroundColor: '#1A1A1A',
-  marginHorizontal: 16,
-  marginBottom: 8,
-  borderRadius: 8,
-};
-
-const itemBodyArea: StyleProp<any> = {
-  flexDirection: 'row',
-  alignItems: 'center',
-};
-
-const itemTextStyle: StyleProp<any> = {
-  paddingLeft: 8,
-  color: ColorMap.light,
-  fontSize: 16,
-  lineHeight: 24,
-  ...FontSemiBold,
-};
-
-const subTextStyle: StyleProp<any> = {
-  paddingLeft: 8,
-  color: 'rgba(255, 255, 255, 0.45)',
-  fontSize: 12,
-  lineHeight: 20,
-  ...FontMedium,
-};
-
 export const TokenSelectItem = ({
   symbol,
+  name,
   chain,
   logoKey,
   subLogoKey,
@@ -63,31 +33,86 @@ export const TokenSelectItem = ({
   iconSize = 40,
 }: Props) => {
   const theme = useSubWalletTheme().swThemes;
+  const styles = useMemo(() => createStyle(theme), [theme]);
 
   return (
     <TouchableOpacity onPress={onSelectNetwork}>
-      <View style={itemArea}>
-        <View style={itemBodyArea}>
+      <View style={styles.itemArea}>
+        <View style={styles.itemBodyArea}>
           {getTokenLogo(logoKey, subLogoKey, iconSize, defaultItemKey)}
-          <View>
-            <Text style={itemTextStyle}>{symbol}</Text>
-            <Text style={subTextStyle}>{chain}</Text>
+          <View style={{ flex: 1 }}>
+            <View style={{ flexDirection: 'row', flex: 1 }}>
+              <Typography.Text style={styles.itemTextStyle} ellipsis>
+                {symbol}
+              </Typography.Text>
+              <Typography.Text style={styles.itemTokenNameStyle} ellipsis>{`(${name})`}</Typography.Text>
+            </View>
+
+            <Text style={styles.subTextStyle}>{chain}</Text>
           </View>
         </View>
 
         {isSelected && (
-          <View
-            style={{
-              width: 40,
-              height: 40,
-              alignItems: 'center',
-              justifyContent: 'center',
-              marginRight: -theme.marginXS,
-            }}>
+          <View style={styles.selectedIconWrapper}>
             <Icon phosphorIcon={CheckCircle} weight={'fill'} size={'sm'} iconColor={theme.colorSuccess} />
           </View>
         )}
       </View>
     </TouchableOpacity>
   );
 };
+
+function createStyle(theme: ThemeTypes) {
+  return StyleSheet.create({
+    itemArea: {
+      flexDirection: 'row',
+      flex: 1,
+      // justifyContent: 'space-between',
+      paddingVertical: theme.paddingSM + 2,
+      alignItems: 'center',
+      paddingHorizontal: theme.paddingSM,
+      backgroundColor: theme.colorBgSecondary,
+      marginHorizontal: theme.padding,
+      marginBottom: theme.marginXS,
+      borderRadius: theme.borderRadiusLG,
+    },
+
+    itemBodyArea: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      flex: 1,
+    },
+
+    itemTextStyle: {
+      paddingLeft: theme.marginXS,
+      color: ColorMap.light,
+      fontSize: theme.fontSizeLG,
+      lineHeight: theme.fontSizeLG * theme.lineHeightLG,
+      ...FontSemiBold,
+    },
+
+    itemTokenNameStyle: {
+      paddingLeft: theme.paddingXXS,
+      color: theme.colorTextTertiary,
+      fontSize: theme.fontSizeLG,
+      lineHeight: theme.fontSizeLG * theme.lineHeightLG,
+      flex: 1,
+      ...FontSemiBold,
+    },
+
+    subTextStyle: {
+      paddingLeft: theme.paddingXS,
+      color: theme.colorTextTertiary,
+      fontSize: theme.fontSizeSM,
+      lineHeight: theme.fontSizeSM * theme.lineHeightSM,
+      ...FontMedium,
+    },
+    selectedIconWrapper: {
+      width: 40,
+      height: 40,
+      alignItems: 'center',
+      justifyContent: 'center',
+      marginRight: -theme.marginXS,
+    },
+  });
+}
diff --git a/src/components/common/SelectModal/parts/TokenSelectItem.tsx b/src/components/common/SelectModal/parts/TokenSelectItem.tsx
@@ -13,10 +13,11 @@ interface Props<T> {
 
 export function _TokenSelectItem<T>({ item, selectedValueMap, onSelectItem, onCloseModal }: Props<T>) {
   const chainInfoMap = useSelector((state: RootState) => state.chainStore.chainInfoMap);
-  const { symbol, originChain, slug } = item as TokenItemType;
+  const { symbol, originChain, slug, name } = item as TokenItemType;
   return (
     <TokenSelectItem
       key={`${symbol}-${originChain}`}
+      name={name}
       symbol={symbol}
       chain={`${chainInfoMap[originChain]?.name || ''}`}
       logoKey={slug.toLowerCase()}

diff --git a/src/screens/Home/Crypto/TokenGroupsDetail.tsx b/src/screens/Home/Crypto/TokenGroupsDetail.tsx
@@ -53,7 +53,6 @@ export const TokenGroupsDetail = ({
     return '';
   }, [tokenGroupSlug, assetRegistryMap, multiChainAssetMap]);
 
-  console.log('groupSymbol', groupSymbol);
   const currentAccount = useSelector((state: RootState) => state.accountState.currentAccount);
 
   const {

diff --git a/src/screens/ImportToken/ImportToken.tsx b/src/screens/ImportToken/ImportToken.tsx
@@ -2,7 +2,7 @@ import React, { useCallback, useContext, useEffect, useMemo, useRef, useState }
 import { ContainerWithSubHeader } from 'components/ContainerWithSubHeader';
 import { useNavigation } from '@react-navigation/native';
 import { ImportTokenProps, RootNavigationProps } from 'routes/index';
-import { ScrollView, View } from 'react-native';
+import { ScrollView, StyleSheet, View } from 'react-native';
 import { ContainerHorizontalPadding, MarginBottomForSubmitButton } from 'styles/sharedStyles';
 import i18n from 'utils/i18n/i18n';
 import { FormState } from 'hooks/screen/useFormControl';
@@ -38,6 +38,8 @@ import { Plus } from 'phosphor-react-native';
 import { TokenTypeSelectField } from 'components/Field/TokenTypeSelect';
 import { ModalRef } from 'types/modalRef';
 import { ChainSelector } from 'components/Modal/common/ChainSelector';
+import { ThemeTypes } from 'styles/themes';
+import { useSubWalletTheme } from 'hooks/useSubWalletTheme';
 
 interface TokenTypeOption {
   label: string;
@@ -91,6 +93,8 @@ export const ImportToken = ({ route: { params: routeParams } }: ImportTokenProps
   const { isNetConnected, isReady } = useContext(WebRunnerContext);
   const [name, setName] = useState('');
   const [error, setError] = useState<string | undefined>(undefined);
+  const theme = useSubWalletTheme().swThemes;
+  const styles = useMemo(() => createStyle(theme), [theme]);
 
   const formConfig = {
     chain: {
@@ -109,6 +113,10 @@ export const ImportToken = ({ route: { params: routeParams } }: ImportTokenProps
       name: i18n.common.decimals,
       value: tokenInfo ? String(tokenInfo?.decimals) : '',
     },
+    tokenName: {
+      name: 'Token name',
+      value: tokenInfo ? String(tokenInfo?.name) : '',
+    },
     contractAddress: {
       require: true,
       name: i18n.importToken.contractAddress,
@@ -220,6 +228,7 @@ export const ImportToken = ({ route: { params: routeParams } }: ImportTokenProps
               } else {
                 onUpdateErrors('contractAddress')(undefined);
                 onChangeValue('symbol')(resp.symbol);
+                onChangeValue('tokenName')(resp.name);
                 setName(resp.name);
                 if (resp.decimals) {
                   onChangeValue('decimals')(String(resp.decimals));
@@ -360,9 +369,22 @@ export const ImportToken = ({ route: { params: routeParams } }: ImportTokenProps
             <Warning isDanger message={formState.errors.contractAddress[0]} style={{ marginBottom: 8 }} />
           )}
 
-          <TextField placeholder={i18n.placeholder.symbol} text={formState.data.symbol} />
+          <View style={styles.row}>
+            <TextField
+              outerStyle={{ flex: 1, marginBottom: 0 }}
+              placeholder={i18n.placeholder.symbol}
+              text={formState.data.symbol}
+            />
+
+            <TextField
+              outerStyle={{ flex: 1, marginBottom: 0 }}
+              placeholder={i18n.placeholder.decimals}
+              disabled={true}
+              text={formState.data.decimals}
+            />
+          </View>
 
-          <TextField placeholder={i18n.placeholder.decimals} disabled={true} text={formState.data.decimals} />
+          <TextField placeholder={'Token name'} disabled={true} text={formState.data.tokenName} />
 
           {!isNetConnected && (
             <Warning style={{ marginBottom: 8 }} isDanger message={i18n.warningMessage.noInternetMessage} />
@@ -419,3 +441,13 @@ export const ImportToken = ({ route: { params: routeParams } }: ImportTokenProps
     </ContainerWithSubHeader>
   );
 };
+
+function createStyle(theme: ThemeTypes) {
+  return StyleSheet.create({
+    row: {
+      flexDirection: 'row',
+      gap: theme.sizeSM,
+      marginBottom: theme.marginXS,
+    },
+  });
+}
diff --git a/src/screens/Tokens/ConfigureToken.tsx b/src/screens/Tokens/ConfigureToken.tsx
@@ -206,13 +206,21 @@ export const ConfigureToken = ({
               />
             )}
 
+            {tokenInfo && tokenInfo.name && (
+              <TextField disabled text={tokenInfo.name.toString()} outerStyle={{ flex: 1, marginBottom: 0 }} />
+            )}
+          </View>
+
+          <View style={styles.row}>
+            {!!tokenInfo?.priceId && (
+              <TextField outerStyle={{ flex: 1, marginBottom: 0 }} disabled text={tokenInfo.priceId} />
+            )}
+
             {tokenInfo && tokenInfo.decimals && (
               <TextField disabled text={tokenInfo.decimals.toString()} outerStyle={{ flex: 1, marginBottom: 0 }} />
             )}
           </View>
 
-          {!!tokenInfo?.priceId && <TextField disabled text={tokenInfo.priceId} />}
-
           {!isNetConnected && (
             <Warning style={{ marginBottom: 8 }} isDanger message={i18n.warningMessage.noInternetMessage} />
           )}