feat: add mobile tokens list (#4994)

* feat: add tokens list * chore: update feature flags for mobile Co-authored-by: paul-boegelsack <paul.boegelsack@iota.org>
iotaledger · Oct 20, 2022 · a05cadf · a05cadf
1 parent 66230d4
commit a05cadf
Show file tree

Hide file tree

Showing 8 changed files with 87 additions and 25 deletions.
diff --git a/packages/mobile/components/AssetList.svelte b/packages/mobile/components/AssetList.svelte
@@ -0,0 +1,35 @@
+<script lang="typescript">
+    import { localize } from '@core/i18n'
+    import { IAccountAssets, IAsset } from '@core/wallet'
+    import VirtualList from '@sveltejs/svelte-virtual-list'
+    import { AssetTile, Text } from 'shared/components'
+
+    export let assets: IAccountAssets
+
+    let assetList: IAsset[]
+    $: assets, (assetList = getAssetList())
+
+    function getAssetList(): IAsset[] {
+        const list = []
+
+        if (assets?.baseCoin) {
+            list.push(assets.baseCoin)
+        }
+        list.push(...assets?.nativeTokens)
+        return list
+    }
+</script>
+
+{#if assets}
+    <div class="asset-list h-full flex flex-auto flex-col flex-grow flex-shrink-0">
+        {#if assetList.length > 0}
+            <VirtualList items={assetList} let:item>
+                <AssetTile classes="mb-2" onClick={() => {}} asset={item} />
+            </VirtualList>
+        {:else}
+            <div class="h-full flex flex-col items-center justify-center text-center">
+                <Text secondary>{localize('general.noAssets')}</Text>
+            </div>
+        {/if}
+    </div>
+{/if}
diff --git a/packages/mobile/components/TabPane.svelte b/packages/mobile/components/TabPane.svelte
@@ -0,0 +1,22 @@
+<script lang="typescript">
+    import { appSettings } from '@core/app'
+
+    let darkModeEnabled
+    $: darkModeEnabled = $appSettings.darkMode
+</script>
+
+<tab-pane
+    class:darkmode={darkModeEnabled}
+    class="w-full overflow-y-auto flex flex-auto h-1 p-5 pb-0 bg-white dark:bg-gray-800 rounded-t-2xl"
+>
+    <slot />
+</tab-pane>
+
+<style type="text/scss">
+    tab-pane {
+        box-shadow: 0px 4px 4px rgb(0 0 0 / 25%), 0px 2px 12px rgb(0 25 66 / 10%);
+        &.darkmode {
+            box-shadow: 0px 4px 4px rgb(0 0 0 / 25%), 0px 2px 12px rgb(0 25 66 / 20%);
+        }
+    }
+</style>
diff --git a/packages/mobile/components/index.js b/packages/mobile/components/index.js
@@ -1,5 +1,7 @@
-export * from './buttons'
-
+export { default as AssetList } from './AssetList.svelte'
 export { default as OnboardingLayout } from './OnboardingLayout.svelte'
 export { default as RecoveryPhrase } from './RecoveryPhrase.svelte'
 export { default as Route } from './Route.svelte'
+export { default as TabPane } from './TabPane.svelte'
+
+export * from './buttons'
diff --git a/packages/mobile/features/features.ts b/packages/mobile/features/features.ts
@@ -94,10 +94,7 @@ const features = {
         sendAndReceive: {
             enabled: false,
         },
-        assets: {
-            enabled: false,
-        },
-        activityHistory: {
+        activity: {
             enabled: false,
             sync: {
                 enabled: false,
@@ -106,18 +103,18 @@ const features = {
                 enabled: false,
             },
         },
-    },
-    tokens: {
-        enabled: false,
-    },
-    activity: {
-        enabled: false,
-    },
-    governance: {
-        enabled: false,
-    },
-    collectibles: {
-        enabled: false,
+        tokens: {
+            enabled: true,
+            search: {
+                enabled: false,
+            },
+        },
+        governance: {
+            enabled: false,
+        },
+        collectibles: {
+            enabled: false,
+        },
     },
 }
 

diff --git a/packages/mobile/lib/contexts/wallet/constants/initial-active-tab.constant.ts b/packages/mobile/lib/contexts/wallet/constants/initial-active-tab.constant.ts
@@ -4,9 +4,9 @@ import features from '../../../../features/features'
 export const INITIAL_ACTIVE_TAB: WalletTab | null = getInitialActiveTab()
 
 function getInitialActiveTab(): WalletTab | null {
-    if (features?.tokens?.enabled) {
+    if (features?.wallet?.tokens?.enabled) {
         return WalletTab.Tokens
-    } else if (features?.activity?.enabled) {
+    } else if (features?.wallet?.activity?.enabled) {
         return WalletTab.Activity
     } else {
         return null

diff --git a/packages/mobile/routes/dashboard/DashboardRouter.svelte b/packages/mobile/routes/dashboard/DashboardRouter.svelte
@@ -1,5 +1,6 @@
 <script lang="typescript">
     import { selectedAccount } from '@core/account'
+    import { TabPane } from '../../../mobile/components'
     import { activeWalletTab, WALLET_TAB_COMPONENT } from '../../lib/contexts/wallet'
     import { TabNavigator } from './wallet/tabs'
 
@@ -11,9 +12,9 @@
         <div class="w-full h-18">BALANCE PLACEHOLDER</div>
         {#if activeWalletTabComponent}
             <div class="relative flex flex-col flex-auto w-full">
-                <div class="flex-auto">
+                <TabPane>
                     <svelte:component this={WALLET_TAB_COMPONENT[$activeWalletTab]} />
-                </div>
+                </TabPane>
                 <TabNavigator />
             </div>
         {/if}

diff --git a/packages/mobile/routes/dashboard/wallet/tabs/TabNavigator.svelte b/packages/mobile/routes/dashboard/wallet/tabs/TabNavigator.svelte
@@ -9,7 +9,7 @@
     $: darkModeEnabled = $appSettings.darkMode
 
     const NAVIGATION_ITEMS: { icon: IconEnum; label: string; tab: WalletTab }[] = [
-        ...(features?.tokens?.enabled
+        ...(features?.wallet?.tokens?.enabled
             ? [
                   {
                       icon: IconEnum.Tokens,
@@ -18,7 +18,7 @@
                   },
               ]
             : []),
-        ...(features?.activity?.enabled
+        ...(features?.wallet?.activity?.enabled
             ? [
                   {
                       icon: IconEnum.Activity,

diff --git a/packages/mobile/routes/dashboard/wallet/tabs/TokensTab.svelte b/packages/mobile/routes/dashboard/wallet/tabs/TokensTab.svelte
@@ -1 +1,6 @@
-<h1>TokensTab</h1>
+<script lang="typescript">
+    import { selectedAccountAssets } from '@core/wallet'
+    import { AssetList } from '../../../../../mobile/components'
+</script>
+
+<AssetList assets={$selectedAccountAssets} />