feature(mobile): Prepaid cards support

tonkeeper · Apr 1, 2024 · 5c6af2f · 5c6af2f
1 parent 37dde4c
commit 5c6af2f
Show file tree

Hide file tree

Showing 5 changed files with 46 additions and 9 deletions.
diff --git a/packages/mobile/src/components/CardsWidget/CardsWidget.tsx b/packages/mobile/src/components/CardsWidget/CardsWidget.tsx
@@ -15,7 +15,7 @@ export const CardsWidget = memo(() => {
       ) : null}
       {state.accounts.filter((account) => account.state === 'ACTIVE').length ? (
         <>
-          <CardsList accounts={state.accounts} />
+          <CardsList prepaidCards={state.prepaidCards} accounts={state.accounts} />
           <Spacer y={16} />
         </>
       ) : null}

diff --git a/packages/mobile/src/components/CardsWidget/components/CardsList.tsx b/packages/mobile/src/components/CardsWidget/components/CardsList.tsx
@@ -1,5 +1,5 @@
 import React, { memo, useCallback } from 'react';
-import { AccountState } from '$wallet/managers/CardsManager';
+import { AccountState, PrepaidCard } from '$wallet/managers/CardsManager';
 import { List, Steezy, TonIcon, View } from '@tonkeeper/uikit';
 import { formatter } from '@tonkeeper/shared/formatter';
 import { MainStackRouteNames } from '$navigation';
@@ -18,6 +18,7 @@ const CARD_DESIGN_3 = require('../../../../../uikit/assets/cardDesigns/design-3.
 
 export interface CardsListProps {
   accounts: AccountState[];
+  prepaidCards: PrepaidCard[];
 }
 
 const fontFamily = Platform.select({
@@ -71,6 +72,23 @@ export const CardsList = memo<CardsListProps>((props) => {
           </View>
         </List.Item>
       ))}
+      {props.prepaidCards.map((card) => (
+        <List.Item
+          onPress={openWebView(props.accounts[0]?.id)}
+          leftContent={
+            <View key={card.lastFourDigits} style={[styles.cardIcon]}>
+              <Image source={CARD_DESIGN_3} style={styles.cardCover.static} />
+              <Text style={cardNumberStyle}>{card.lastFourDigits}</Text>
+              <View style={styles.mastercardLogoContainer}>
+                <Image source={MC_LOGO_IMAGE} style={styles.mastercardLogo.static} />
+              </View>
+            </View>
+          }
+          value={card.fiatBalance}
+          subtitle={'Prepaid card'}
+          title={`* ${card.lastFourDigits}`}
+        />
+      ))}
     </List>
   );
 });

diff --git a/packages/mobile/src/screens/HoldersWebView/HoldersWebView.tsx b/packages/mobile/src/screens/HoldersWebView/HoldersWebView.tsx
@@ -65,8 +65,11 @@ export const HoldersWebView = memo<HoldersWebViewProps>((props) => {
   });
   const { isLoading: isAccountStateLoading, data: accountState } =
     useHoldersAccountState();
-  const { isLoading: isAccountsPrivateLoading, data: accountsPrivate } =
-    useHoldersAccountsPrivate();
+  const {
+    isLoading: isAccountsPrivateLoading,
+    data: accountsPrivate,
+    prepaidCards,
+  } = useHoldersAccountsPrivate();
   const currency = useWalletCurrency();
   const endpoint = config.get('holdersAppEndpoint', tk.wallet.isTestnet);
 
@@ -217,7 +220,7 @@ export const HoldersWebView = memo<HoldersWebViewProps>((props) => {
           suspended: accountState?.suspended || false,
         },
       },
-      ...(accountsPrivate?.length ? { accountsList: accountsPrivate } : {}),
+      ...(accountsPrivate?.length ? { accountsList: accountsPrivate, prepaidCards } : {}),
     };
 
     return createInjectSource({

diff --git a/packages/mobile/src/wallet/hooks/useHoldersAccountsPrivate.ts b/packages/mobile/src/wallet/hooks/useHoldersAccountsPrivate.ts
@@ -5,10 +5,13 @@ import { tk } from '$wallet';
 export function useHoldersAccountsPrivate() {
   const isLoading = useCardsState((state) => state.accountsPrivateLoading);
   const data = useCardsState((state) => state.accountsPrivate);
-
+  const prepaidCards = useCardsState((state) => state.prepaidCards);
   useEffect(() => {
     tk.wallet.cards.fetchAccountsPrivate();
   }, []);
 
-  return useMemo(() => ({ isLoading, data }), [isLoading, data]);
+  return useMemo(
+    () => ({ isLoading, data, prepaidCards }),
+    [isLoading, data, prepaidCards],
+  );
 }
diff --git a/packages/mobile/src/wallet/managers/CardsManager.tsx b/packages/mobile/src/wallet/managers/CardsManager.tsx
@@ -14,6 +14,8 @@ export interface AccountCard {
   kind: string;
 }
 
+export type PrepaidCard = AccountCard & { type: 'PREPAID'; fiatBalance: string };
+
 export interface AccountState {
   id: string;
   address: string;
@@ -82,6 +84,7 @@ export type IAccountState =
 export interface CardsState {
   onboardBannerDismissed: boolean;
   accounts: AccountState[];
+  prepaidCards: PrepaidCard[];
   token?: string;
   accountsLoading: boolean;
   accountState?: IAccountState;
@@ -100,6 +103,7 @@ export class CardsManager {
     accountStateLoading: false,
     accountsPrivate: null,
     accountsPrivateLoading: false,
+    prepaidCards: [],
   };
   public state = new State<CardsState>(CardsManager.INITIAL_STATE);
 
@@ -118,12 +122,14 @@ export class CardsManager {
         accountState,
         accountsPrivate,
         token,
+        prepaidCards,
       }) => ({
         onboardBannerDismissed,
         accounts,
         token,
         accountState,
         accountsPrivate,
+        prepaidCards,
       }),
       storage: this.storage,
       key: `${this.persistPath}/cards`,
@@ -234,8 +240,12 @@ export class CardsManager {
         this.state.set({ accountsPrivateLoading: false, accountsPrivate: undefined });
         return null;
       }
-      this.state.set({ accountsPrivateLoading: false, accountsPrivate: data.list });
-    } catch {
+      this.state.set({
+        accountsPrivateLoading: false,
+        accountsPrivate: data.list,
+        prepaidCards: data.prepaidCards,
+      });
+    } catch (e) {
       this.state.set({ accountsPrivateLoading: false });
     }
   }
@@ -244,6 +254,9 @@ export class CardsManager {
     if (!this.isEnabled) {
       return;
     }
+    if (this.state.data.token) {
+      await this.fetchAccountsPrivate();
+    }
     return await this.fetchAccount();
   }