From 7646e28e2978bcc5662d92983f3c34f15c0dcdb8 Mon Sep 17 00:00:00 2001 From: Francisco Ramos Date: Sun, 23 Apr 2023 21:53:08 +0200 Subject: [PATCH] refactor(bridge-ui): storage services as modules (#13598) Co-authored-by: jeff <113397187+cyberhorsey@users.noreply.github.com> --- packages/bridge-ui/jest.config.js | 2 +- packages/bridge-ui/src/App.svelte | 26 +++++-------------- .../src/components/buttons/Connect.svelte | 5 ++-- .../src/components/buttons/SelectToken.svelte | 5 ++-- .../src/components/form/AddCustomERC20.svelte | 5 ++-- .../src/components/form/BridgeForm.svelte | 8 +++--- packages/bridge-ui/src/storage/services.ts | 7 +++++ packages/bridge-ui/src/store/transactions.ts | 3 +-- packages/bridge-ui/src/store/userToken.ts | 6 ++--- 9 files changed, 31 insertions(+), 36 deletions(-) create mode 100644 packages/bridge-ui/src/storage/services.ts diff --git a/packages/bridge-ui/jest.config.js b/packages/bridge-ui/jest.config.js index a33f7f6db67..55572c288ac 100644 --- a/packages/bridge-ui/jest.config.js +++ b/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, }, }, diff --git a/packages/bridge-ui/src/App.svelte b/packages/bridge-ui/src/App.svelte index 09b2a91dd92..485295e18b6 100644 --- a/packages/bridge-ui/src/App.svelte +++ b/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); } }); diff --git a/packages/bridge-ui/src/components/buttons/Connect.svelte b/packages/bridge-ui/src/components/buttons/Connect.svelte index c1becafa744..18f57ba2403 100644 --- a/packages/bridge-ui/src/components/buttons/Connect.svelte +++ b/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); diff --git a/packages/bridge-ui/src/components/buttons/SelectToken.svelte b/packages/bridge-ui/src/components/buttons/SelectToken.svelte index 712e3e47844..4e11f5606fd 100644 --- a/packages/bridge-ui/src/components/buttons/SelectToken.svelte +++ b/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); diff --git a/packages/bridge-ui/src/components/form/AddCustomERC20.svelte b/packages/bridge-ui/src/components/form/AddCustomERC20.svelte index eba8033fb7f..84cfe0bf7b7 100644 --- a/packages/bridge-ui/src/components/form/AddCustomERC20.svelte +++ b/packages/bridge-ui/src/components/form/AddCustomERC20.svelte @@ -4,7 +4,7 @@ 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'; @@ -12,6 +12,7 @@ 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; @@ -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); } diff --git a/packages/bridge-ui/src/components/form/BridgeForm.svelte b/packages/bridge-ui/src/components/form/BridgeForm.svelte index 545c3bc87e4..b3762f45bcd 100644 --- a/packages/bridge-ui/src/components/form/BridgeForm.svelte +++ b/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, ); diff --git a/packages/bridge-ui/src/storage/services.ts b/packages/bridge-ui/src/storage/services.ts new file mode 100644 index 00000000000..7b1d48e89ab --- /dev/null +++ b/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); diff --git a/packages/bridge-ui/src/store/transactions.ts b/packages/bridge-ui/src/store/transactions.ts index ca062eb62a2..b03bce4c2b6 100644 --- a/packages/bridge-ui/src/store/transactions.ts +++ b/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([]); -export const transactioner = writable(); // Custom store: pendingTransactions const { subscribe, set, update } = writable([]); diff --git a/packages/bridge-ui/src/store/userToken.ts b/packages/bridge-ui/src/store/userToken.ts index e4556e7d7a7..a493fe71679 100644 --- a/packages/bridge-ui/src/store/userToken.ts +++ b/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(); -const userTokens = writable([]); -export { tokenService, userTokens }; +export const userTokens = writable([]);