Merge pull request #1100 from Koniverse/issue-1097

[issue-1097] Add Token Name to the Token Details and Import Token screen for mobile app

.github/workflows/build-release.yml

@@ -188,7 +188,7 @@ jobs:
       with:
         serviceAccountJson: ${{ secrets.SERVICE_ACCOUNT_JSON_CONTENT }}
         packageName: app.subwallet.mobile
-        releaseFiles: android/app/build/outputs/bundle/release/*.aab
+        releaseFiles: android/app/build/outputs/bundle/release/app-release.aab
         track: internal
         status: completed
         whatsNewDirectory: whatsNewDirectory

.github/workflows/test-android.yml

@@ -0,0 +1,92 @@
+name: Release builds
+
+on:
+  push:
+    branches: [ "upgrade-ui" ]
+
+jobs:
+  build-android:
+    name: Android builds
+    runs-on: macos-latest
+    env:
+      GH_PAT: ${{ secrets.GH_PAT }}
+      GH_RELEASE_GITHUB_API_TOKEN: ${{ secrets.GH_PAT }}
+      KS_PASSWORD: ${{ secrets.KS_PASSWORD }}
+      NEXTCLOUD_CONFIG: ${{ secrets.NEXTCLOUD_CONFIG }}
+      DISCORD_WEBHOOK: ${{ secrets.DISCORD_WEBHOOK }}
+      COMMIT_MESSAGE: ${{ github.event.pull_request.title }}
+      REF_NAME: ${{ github.ref_name }}
+      TRANSAK_API_KEY: ${{ secrets.TRANSAK_API_KEY }}
+      COINBASE_PAY_ID: ${{ secrets.COINBASE_PAY_ID }}
+      BUILD_PROVISION_PROFILE_BASE64: ${{ secrets.BUILD_PROVISION_PROFILE_BASE64 }}
+    steps:
+    - uses: actions/checkout@v4
+      with:
+        fetch-depth: 0
+        token: ${{ secrets.GH_PAT }}
+
+    # - name: Add APP ENV
+    #   run: |
+    #         cp .env.development.example .env.production
+    #         if [ -f .env.production ]; then
+    #           sed -i '' "s/^TRANSAK_API_KEY=.*/TRANSAK_API_KEY=$TRANSAK_API_KEY/" .env.production
+    #           sed -i '' "s/^COINBASE_PAY_ID=.*/COINBASE_PAY_ID=$COINBASE_PAY_ID/" .env.production
+    #         else
+    #           echo "TRANSAK_API_KEY=$TRANSAK_API_KEY" >> .env.production
+    #           echo "COINBASE_PAY_ID=$COINBASE_PAY_ID" >> .env.production
+    #         fi
+
+    # - name: Cache Dependencies
+    #   uses: actions/cache@v2
+    #   with:
+    #     path: ~/.cache/yarn
+    #     key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
+    #     restore-keys: |
+    #       ${{ runner.os }}-yarn-
+
+    # - name: Install dependencies
+    #   run: yarn install --immutable | grep -v 'YN0013'
+
+    # - uses: actions/setup-java@v1
+    #   with:
+    #     java-version: '11'
+
+    # - name: Cache Gradle Wrapper
+    #   uses: actions/cache@v2
+    #   with:
+    #     path: ~/.gradle/wrapper
+    #     key: ${{ runner.os }}-gradle-wrapper-${{ hashFiles('gradle/wrapper/gradle-wrapper.properties') }}
+
+    # - name: Cache Gradle Dependencies
+    #   uses: actions/cache@v2
+    #   with:
+    #     path: ~/.gradle/caches
+    #     key: ${{ runner.os }}-gradle-caches-${{ hashFiles('gradle/wrapper/gradle-wrapper.properties') }}
+    #     restore-keys: |
+    #       ${{ runner.os }}-gradle-caches-
+
+    # - name: Make Gradlew Executable
+    #   run: cd android && chmod +x ./gradlew
+
+    - name: Prepare sign datarun
+      run: |
+        recent_tag=$(git describe --tags --abbrev=0)
+        commit_messages=$(git log --pretty=format:"%s" $recent_tag..HEAD)
+        filtered_messages=$(echo "$commit_messages" | grep -oE '\[issue-[0-9]+\] .+' | sed -E 's/\[issue-([0-9]+)\] (.+)/- \2 (#\1)/')
+        mkdir -p whatsnew
+        echo "$filtered_messages" > whatsnew/whatsnew-en-US
+
+    # # Build AAB file
+    # - name: Generate App AAB
+    #   run: |
+    #     cd android && export ENVFILE=.env.production && ./gradlew bundleRelease -PMYAPP_UPLOAD_STORE_FILE=${{ secrets.MYAPP_UPLOAD_STORE_FILE }} -PMYAPP_UPLOAD_STORE_PASSWORD=${{ secrets.ANDROID_KEY_STORE_PASSWORD }} -PMYAPP_UPLOAD_KEY_PASSWORD=${{ secrets.ANDROID_KEY_PASSWORD }} -PMYAPP_UPLOAD_KEY_ALIAS=${{ secrets.ANDROID_ALIAS }}
+
+    - name: Upload to Play Store Internal Testing
+      uses: r0adkll/upload-google-play@v1
+      with:
+        serviceAccountJsonPlainText: ${{ secrets.SERVICE_ACCOUNT_JSON_CONTENT }}
+        packageName: app.subwallet.mobile
+        releaseFiles: app-release.aab
+        track: internal
+        status: completed
+        whatsNewDirectory: whatsnew

android/app/build.gradle

@@ -75,7 +75,7 @@ android {
         applicationId "app.subwallet.mobile"
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
-        versionCode 228
+        versionCode 229
         versionName "1.1.5"
         missingDimensionStrategy 'react-native-camera', 'general'
     }

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,
+    },
+  });
+}

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()}

src/hooks/screen/Home/Crypto/useBuyToken.ts

@@ -45,6 +45,7 @@ const getServiceItems = (tokenSlug: string | undefined): ServiceItem[] => {
 
 export default function useBuyToken(currentSymbol?: string) {
   const { accounts, isAllAccount, currentAccount } = useSelector((state: RootState) => state.accountState);
+  const { assetRegistry } = useSelector((state: RootState) => state.assetRegistry);
   const { isLocked } = useAppLock();
   const { walletReference } = useSelector((state: RootState) => state.settings);
   const chainInfoMap = useSelector((state: RootState) => state.chainStore.chainInfoMap);
@@ -155,7 +156,7 @@ export default function useBuyToken(currentSymbol?: string) {
       if (ledgerNetwork) {
         if (info.network === ledgerNetwork) {
           result.push({
-            name: info.symbol,
+            name: assetRegistry[info.slug].name,
             slug: info.slug,
             symbol: info.symbol,
             originChain: info.network,
@@ -164,7 +165,7 @@ export default function useBuyToken(currentSymbol?: string) {
       } else {
         if (accountType === 'ALL' || accountType === info.support) {
           result.push({
-            name: info.symbol,
+            name: assetRegistry[info.slug].name,
             slug: info.slug,
             symbol: info.symbol,
             originChain: info.network,
@@ -174,7 +175,7 @@ export default function useBuyToken(currentSymbol?: string) {
     });
 
     return result;
-  }, [accountType, currentSymbol, ledgerNetwork]);
+  }, [accountType, assetRegistry, currentSymbol, ledgerNetwork]);
 
   const openSelectBuyAccount = useCallback((account: AccountJson) => {
     setSelectedService({ selectedService: undefined });

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 {