refactor(bridge-ui): storage services as modules (#13598)

Co-authored-by: jeff <[email protected]>

packages/bridge-ui/jest.config.js

@@ -41,7 +41,7 @@ export default {
     global: {
       statements: 95,
       branches: 85, // TODO: increase to 90
-      functions: 93,
+      functions: 94,
       lines: 95,
     },
   },

packages/bridge-ui/src/App.svelte

@@ -8,22 +8,19 @@
   import { MetaMaskConnector } from '@wagmi/core/connectors/metaMask';
 
   import { setupI18n } from './i18n';
-  import { transactioner, transactions } from './store/transactions';
+  import { transactions } from './store/transactions';
   import Navbar from './components/Navbar.svelte';
   import Toast, { successToast } from './components/Toast.svelte';
   import { signer } from './store/signer';
-  import type { BridgeTransaction, Transactioner } from './domain/transactions';
+  import type { BridgeTransaction } from './domain/transactions';
   import { wagmiClient } from './store/wagmi';
 
   setupI18n({ withLocale: 'en' });
   import SwitchEthereumChainModal from './components/modals/SwitchEthereumChainModal.svelte';
   import { ethers } from 'ethers';
-  import { StorageService } from './storage/StorageService';
   import { MessageStatus } from './domain/message';
   import BridgeABI from './constants/abi/Bridge';
-  import type { TokenService } from './domain/token';
-  import { CustomTokenService } from './storage/CustomTokenService';
-  import { userTokens, tokenService } from './store/userToken';
+  import { userTokens } from './store/userToken';
   import { RelayerAPIService } from './relayer-api/RelayerAPIService';
   import {
     DEFAULT_PAGE,
@@ -39,6 +36,7 @@
   import { providers } from './provider/providers';
   import { RELAYER_URL } from './constants/envVars';
   import Router from './components/Router.svelte';
+  import { storageService, tokenService } from './storage/services';
 
   const { chains: wagmiChains, provider } = configureChains(
     [mainnetWagmiChain, taikoWagmiChain],
@@ -74,21 +72,11 @@
     ],
   });
 
-  const storageTransactioner: Transactioner = new StorageService(
-    window.localStorage,
-    providers,
-  );
-
   const relayerApiService: RelayerAPI = new RelayerAPIService(
     RELAYER_URL,
     providers,
   );
 
-  const tokenStore: TokenService = new CustomTokenService(window.localStorage);
-
-  tokenService.set(tokenStore);
-
-  transactioner.set(storageTransactioner);
   relayerApi.set(relayerApiService);
 
   signer.subscribe(async (store) => {
@@ -106,7 +94,7 @@
       const blockInfoMap = await $relayerApi.getBlockInfo();
       relayerBlockInfoMap.set(blockInfoMap);
 
-      const txs = await $transactioner.getAllByAddress(userAddress);
+      const txs = await storageService.getAllByAddress(userAddress);
       const hashToApiTxsMap = new Map(
         apiTxs.map((tx) => {
           return [tx.hash.toLowerCase(), 1];
@@ -117,11 +105,11 @@
         return !hashToApiTxsMap.has(tx.hash.toLowerCase());
       });
 
-      $transactioner.updateStorageByAddress(userAddress, updatedStorageTxs);
+      storageService.updateStorageByAddress(userAddress, updatedStorageTxs);
 
       transactions.set([...updatedStorageTxs, ...apiTxs]);
 
-      const tokens = $tokenService.getTokens(userAddress);
+      const tokens = tokenService.getTokens(userAddress);
       userTokens.set(tokens);
     }
   });

packages/bridge-ui/src/components/buttons/Connect.svelte

@@ -20,9 +20,10 @@
   import MetaMask from '../icons/MetaMask.svelte';
   import WalletConnect from '../icons/WalletConnect.svelte';
   import CoinbaseWallet from '../icons/CoinbaseWallet.svelte';
-  import { transactioner, transactions } from '../../store/transactions';
+  import { transactions } from '../../store/transactions';
   import { mainnetChain, taikoChain } from '../../chain/chains';
   import { errorToast, successToast } from '../Toast.svelte';
+  import { storageService } from '../../storage/services';
 
   export let isConnectWalletModalOpen = false;
 
@@ -60,7 +61,7 @@
       const wagmiSigner = await setSigner();
       if (wagmiSigner) {
         const signerAddress = await wagmiSigner.getAddress();
-        const signerTransactions = await $transactioner.getAllByAddress(
+        const signerTransactions = await storageService.getAllByAddress(
           signerAddress,
         );
         transactions.set(signerTransactions);

packages/bridge-ui/src/components/buttons/SelectToken.svelte

@@ -8,12 +8,13 @@
   import { ethers } from 'ethers';
   import ERC20_ABI from '../../constants/abi/ERC20';
   import { signer } from '../../store/signer';
-  import { userTokens, tokenService } from '../../store/userToken';
+  import { userTokens } from '../../store/userToken';
   import { fromChain, toChain } from '../../store/chain';
   import Erc20 from '../icons/ERC20.svelte';
   import AddCustomErc20 from '../form/AddCustomERC20.svelte';
   import { ETHToken, tokens } from '../../token/tokens';
   import { errorToast, successToast } from '../Toast.svelte';
+  import { tokenService } from '../../storage/services';
 
   let dropdownElement: HTMLDivElement;
   let showAddressField = false;
@@ -84,7 +85,7 @@
         logoComponent: null,
       } as Token;
 
-      const updateTokensList = $tokenService.storeToken(token, userAddress);
+      const updateTokensList = tokenService.storeToken(token, userAddress);
 
       select(token);
 

packages/bridge-ui/src/components/form/AddCustomERC20.svelte

@@ -4,14 +4,15 @@
   import type { Token, TokenDetails } from '../../domain/token';
   import { signer } from '../../store/signer';
   import { token as tokenStore } from '../../store/token';
-  import { userTokens, tokenService } from '../../store/userToken';
+  import { userTokens } from '../../store/userToken';
   import Erc20 from '../icons/ERC20.svelte';
   import Modal from '../modals/Modal.svelte';
   import { LottiePlayer } from '@lottiefiles/svelte-lottie-player';
   import { ethers } from 'ethers';
   import ERC20 from '../../constants/abi/ERC20';
   import { ETHToken } from '../../token/tokens';
   import { errorToast } from '../Toast.svelte';
+  import { tokenService } from '../../storage/services';
 
   export let showAddressField: boolean = false;
   export let addERC20: (event: SubmitEvent) => Promise<void>;
@@ -26,7 +27,7 @@
 
   async function remove(token) {
     const address = await $signer.getAddress();
-    const updatedTokensList = $tokenService.removeToken(token, address);
+    const updatedTokensList = tokenService.removeToken(token, address);
     userTokens.set(updatedTokensList);
     tokenStore.set(ETHToken);
   }

packages/bridge-ui/src/components/form/BridgeForm.svelte

@@ -17,7 +17,6 @@
   import { truncateString } from '../../utils/truncateString';
   import {
     pendingTransactions,
-    transactioner,
     transactions as transactionsStore,
   } from '../../store/transactions';
   import Memo from './Memo.svelte';
@@ -39,6 +38,7 @@
   import { isOnCorrectChain } from '../../utils/isOnCorrectChain';
   import { ProcessingFeeMethod } from '../../domain/fee';
   import Button from '../buttons/Button.svelte';
+  import { storageService } from '../../storage/services';
 
   let amount: string;
   let amountInput: HTMLInputElement;
@@ -279,7 +279,7 @@
       tx.chainId = $fromChain.id;
       const userAddress = await $signer.getAddress();
       let transactions: BridgeTransaction[] =
-        await $transactioner.getAllByAddress(userAddress);
+        await storageService.getAllByAddress(userAddress);
 
       let bridgeTransaction: BridgeTransaction = {
         fromChainId: $fromChain.id,
@@ -297,12 +297,12 @@
         transactions.push(bridgeTransaction);
       }
 
-      $transactioner.updateStorageByAddress(userAddress, transactions);
+      storageService.updateStorageByAddress(userAddress, transactions);
 
       const allTransactions = $transactionsStore;
 
       // get full BridgeTransaction object
-      bridgeTransaction = await $transactioner.getTransactionByHash(
+      bridgeTransaction = await storageService.getTransactionByHash(
         userAddress,
         tx.hash,
       );

packages/bridge-ui/src/storage/services.ts

@@ -0,0 +1,7 @@
+import { providers } from '../provider/providers';
+import { CustomTokenService } from './CustomTokenService';
+import { StorageService } from './StorageService';
+
+export const storageService = new StorageService(localStorage, providers);
+
+export const tokenService = new CustomTokenService(localStorage);

packages/bridge-ui/src/store/transactions.ts

@@ -1,10 +1,9 @@
 import { writable } from 'svelte/store';
 import type { Signer, Transaction, ethers } from 'ethers';
-import type { BridgeTransaction, Transactioner } from '../domain/transactions';
+import type { BridgeTransaction } from '../domain/transactions';
 import { Deferred } from '../utils/Deferred';
 
 export const transactions = writable<BridgeTransaction[]>([]);
-export const transactioner = writable<Transactioner>();
 
 // Custom store: pendingTransactions
 const { subscribe, set, update } = writable<Transaction[]>([]);

packages/bridge-ui/src/store/userToken.ts

@@ -1,6 +1,4 @@
-import type { Token, TokenService } from '../domain/token';
+import type { Token } from '../domain/token';
 import { writable } from 'svelte/store';
 
-const tokenService = writable<TokenService>();
-const userTokens = writable<Token[]>([]);
-export { tokenService, userTokens };
+export const userTokens = writable<Token[]>([]);