feat: watch asset to SN wallet

src/hooks/useTransferToL2.js

@@ -5,6 +5,7 @@ import {allowance, approve, balanceOf, ethBalanceOf} from '../api/erc20';
 import {ActionType, stepOf, TransferError, TransferStep, TransferToL2Steps} from '../enums';
 import {starknet} from '../libs';
 import {useDepositListener} from '../providers/EventManagerProvider';
+import {useL2Token} from '../providers/TokensProvider';
 import {useSelectedToken} from '../providers/TransferProvider';
 import {useL1Wallet, useL2Wallet} from '../providers/WalletsProvider';
 import utils from '../utils';
@@ -19,14 +20,15 @@ export const useTransferToL2 = () => {
   const logger = useLogger('useTransferToL2');
   const [trackInitiated, trackSuccess, trackError, trackReject] = useTransferToL2Tracking();
   const {account: l1Account, chainId: l1ChainId, config: l1Config} = useL1Wallet();
-  const {account: l2Account} = useL2Wallet();
+  const {account: l2Account, chainId: l2ChainId} = useL2Wallet();
   const {handleProgress, handleData, handleError} = useTransfer(TransferToL2Steps);
   const selectedToken = useSelectedToken();
   const getTokenContract = useTokenContract();
   const getTokenBridgeContract = useTokenBridgeContract();
   const progressOptions = useTransferProgress();
   const {addListener, removeListener} = useDepositListener();
   const maxTotalBalance = useMaxTotalBalance();
+  const getL2Token = useL2Token();
 
   return useCallback(
     async amount => {
@@ -35,6 +37,7 @@ export const useTransferToL2 = () => {
       const bridgeContract = getTokenBridgeContract(bridgeAddress);
       const isEthToken = utils.token.isEth(symbol);
       const tokenBridgeAddress = bridgeAddress[l1ChainId];
+      const l2TokenAddress = getL2Token(symbol)?.tokenAddress[l2ChainId];
 
       const readAllowance = () => {
         return allowance({
@@ -98,6 +101,14 @@ export const useTransferToL2 = () => {
         }
       };
 
+      const maybeAddToken = async () => {
+        try {
+          await utils.token.addToken(l2TokenAddress);
+        } catch (ex) {
+          logger.warn(ex.message);
+        }
+      };
+
       const isMaxBalanceExceeded = async () => {
         const tokenBridgeBalance = await (isEthToken
           ? ethBalanceOf(tokenBridgeAddress)
@@ -138,6 +149,7 @@ export const useTransferToL2 = () => {
         addListener(onDeposit);
         logger.log('Calling deposit');
         await sendDeposit();
+        await maybeAddToken(l2TokenAddress);
       } catch (ex) {
         removeListener();
         trackError(ex);

src/utils/token.js

@@ -1,4 +1,5 @@
 import {NetworkType} from '../enums';
+import {getStarknet} from '../libs';
 
 export const isEth = tokenData => {
   let symbol = '';
@@ -10,3 +11,15 @@ export const isEth = tokenData => {
   }
   return symbol === NetworkType.L1.symbol;
 };
+
+export const addToken = async address => {
+  await getStarknet().request({
+    type: 'wallet_watchAsset',
+    params: {
+      type: 'ERC20',
+      options: {
+        address
+      }
+    }
+  });
+};