From 3d458dbe00d0ee1122e11c14813d6f73a19ee61c Mon Sep 17 00:00:00 2001 From: Dan Ziv Date: Wed, 12 Jan 2022 17:46:15 +0200 Subject: [PATCH 1/9] chore --- src/abis/ethereum/index.js | 6 -- src/abis/{ethereum => l1}/erc20-bridge.json | 0 src/abis/{ethereum => l1}/erc20.json | 0 src/abis/{ethereum => l1}/eth-bridge.json | 0 src/abis/l1/index.js | 6 ++ src/abis/{ethereum => l1}/messaging.json | 0 src/abis/{starknet => l2}/bridge.json | 0 src/abis/{starknet => l2}/erc20.json | 0 src/abis/l2/index.js | 4 + src/abis/starknet/index.js | 4 - src/api/bridge.js | 10 +- src/api/erc20.js | 16 ++-- .../Containers/Header/Header.constants.js | 2 +- src/components/Containers/Header/Header.js | 50 ++++------ src/components/Containers/Main/Main.js | 8 +- src/components/Features/Account/Account.js | 8 +- src/components/Features/Login/Login.js | 20 ++-- .../Features/SelectToken/SelectToken.js | 8 +- .../Features/ToastProvider/ToastProvider.js | 8 +- .../Features/Transfer/Transfer.hooks.js | 37 ++++--- src/components/Features/Transfer/Transfer.js | 50 ++++------ .../Features/Transfer/Transfer.selectors.js | 14 +-- .../Features/Transfer/Transfer.slice.js | 4 +- .../Features/TransferLog/TransferLog.js | 24 ++--- .../TransactionSubmittedModal.js | 18 ++-- .../WithdrawalTransferToast.js | 4 +- ...{contracts.ethereum.js => contracts.l1.js} | 0 src/config/addresses/index.js | 6 +- .../{tokens.ethereum.js => tokens.l1.js} | 6 +- .../{tokens.starknet.js => tokens.l2.js} | 6 +- src/config/strings.json | 24 ++--- src/config/wallets.js | 4 +- src/constants.js | 8 +- src/enums/ActionType.js | 4 +- src/enums/ChainType.js | 12 +-- src/enums/NetworkType.js | 4 +- src/enums/WalletType.js | 4 +- src/hooks/useContract.js | 82 ++++++---------- src/hooks/useEventListener.js | 41 +++----- src/hooks/useTokenBalance.js | 26 +++-- src/hooks/useTransfer.js | 96 +++++++++---------- .../TokensProvider/TokensProvider.js | 14 +-- src/providers/TokensProvider/tokens-hooks.js | 40 ++++---- .../TokensProvider/tokens-reducer.js | 8 +- .../TransfersProvider/TransfersProvider.js | 8 +- .../WalletsProvider/WalletsProvider.js | 88 ++++++++--------- .../WalletsProvider/wallets-context.js | 8 +- .../WalletsProvider/wallets-hooks.js | 26 ++--- .../WalletsProvider/wallets-reducer.js | 32 +++---- src/utils/contract.js | 21 ++-- src/utils/hash.js | 8 +- src/utils/token.js | 2 +- 52 files changed, 395 insertions(+), 484 deletions(-) delete mode 100644 src/abis/ethereum/index.js rename src/abis/{ethereum => l1}/erc20-bridge.json (100%) rename src/abis/{ethereum => l1}/erc20.json (100%) rename src/abis/{ethereum => l1}/eth-bridge.json (100%) create mode 100644 src/abis/l1/index.js rename src/abis/{ethereum => l1}/messaging.json (100%) rename src/abis/{starknet => l2}/bridge.json (100%) rename src/abis/{starknet => l2}/erc20.json (100%) create mode 100644 src/abis/l2/index.js delete mode 100644 src/abis/starknet/index.js rename src/config/addresses/contracts/{contracts.ethereum.js => contracts.l1.js} (100%) rename src/config/addresses/tokens/{tokens.ethereum.js => tokens.l1.js} (94%) rename src/config/addresses/tokens/{tokens.starknet.js => tokens.l2.js} (95%) diff --git a/src/abis/ethereum/index.js b/src/abis/ethereum/index.js deleted file mode 100644 index 06d1bf11..00000000 --- a/src/abis/ethereum/index.js +++ /dev/null @@ -1,6 +0,0 @@ -import ERC20_BRIDGE_ABI from './erc20-bridge.json'; -import ERC20_ABI from './erc20.json'; -import ETH_BRIDGE_ABI from './eth-bridge.json'; -import MESSAGING_ABI from './messaging.json'; - -export {ERC20_ABI, ERC20_BRIDGE_ABI, ETH_BRIDGE_ABI, MESSAGING_ABI}; diff --git a/src/abis/ethereum/erc20-bridge.json b/src/abis/l1/erc20-bridge.json similarity index 100% rename from src/abis/ethereum/erc20-bridge.json rename to src/abis/l1/erc20-bridge.json diff --git a/src/abis/ethereum/erc20.json b/src/abis/l1/erc20.json similarity index 100% rename from src/abis/ethereum/erc20.json rename to src/abis/l1/erc20.json diff --git a/src/abis/ethereum/eth-bridge.json b/src/abis/l1/eth-bridge.json similarity index 100% rename from src/abis/ethereum/eth-bridge.json rename to src/abis/l1/eth-bridge.json diff --git a/src/abis/l1/index.js b/src/abis/l1/index.js new file mode 100644 index 00000000..41ce55c6 --- /dev/null +++ b/src/abis/l1/index.js @@ -0,0 +1,6 @@ +import L1_ERC20_BRIDGE_ABI from './erc20-bridge.json'; +import L1_ERC20_ABI from './erc20.json'; +import L1_ETH_BRIDGE_ABI from './eth-bridge.json'; +import L1_MESSAGING_ABI from './messaging.json'; + +export {L1_ERC20_ABI, L1_ERC20_BRIDGE_ABI, L1_ETH_BRIDGE_ABI, L1_MESSAGING_ABI}; diff --git a/src/abis/ethereum/messaging.json b/src/abis/l1/messaging.json similarity index 100% rename from src/abis/ethereum/messaging.json rename to src/abis/l1/messaging.json diff --git a/src/abis/starknet/bridge.json b/src/abis/l2/bridge.json similarity index 100% rename from src/abis/starknet/bridge.json rename to src/abis/l2/bridge.json diff --git a/src/abis/starknet/erc20.json b/src/abis/l2/erc20.json similarity index 100% rename from src/abis/starknet/erc20.json rename to src/abis/l2/erc20.json diff --git a/src/abis/l2/index.js b/src/abis/l2/index.js new file mode 100644 index 00000000..58d01b2e --- /dev/null +++ b/src/abis/l2/index.js @@ -0,0 +1,4 @@ +import L2_BRIDGE_ABI from './bridge.json'; +import L2_ERC20_ABI from './erc20.json'; + +export {L2_ERC20_ABI, L2_BRIDGE_ABI}; diff --git a/src/abis/starknet/index.js b/src/abis/starknet/index.js deleted file mode 100644 index 2ef20fe2..00000000 --- a/src/abis/starknet/index.js +++ /dev/null @@ -1,4 +0,0 @@ -import STARKNET_BRIDGE_ABI from './bridge.json'; -import STARKNET_ERC20_ABI from './erc20.json'; - -export {STARKNET_ERC20_ABI, STARKNET_BRIDGE_ABI}; diff --git a/src/api/bridge.js b/src/api/bridge.js index 0af89384..ff52bfc0 100644 --- a/src/api/bridge.js +++ b/src/api/bridge.js @@ -1,9 +1,9 @@ import {parseToDecimals, parseToFelt, parseToUint256} from '../utils'; -import {eth_sendTransaction, starknet_sendTransaction} from '../utils/contract'; +import {l1_sendTransaction, l2_sendTransaction} from '../utils/contract'; export const deposit = async ({recipient, amount, decimals, contract, options, emitter}) => { try { - return eth_sendTransaction( + return l1_sendTransaction( contract, 'deposit', [parseToDecimals(amount, decimals), recipient], @@ -17,7 +17,7 @@ export const deposit = async ({recipient, amount, decimals, contract, options, e export const depositEth = async ({recipient, amount, contract, options, emitter}) => { try { - return eth_sendTransaction( + return l1_sendTransaction( contract, 'deposit', [recipient], @@ -34,7 +34,7 @@ export const depositEth = async ({recipient, amount, contract, options, emitter} export const withdraw = async ({recipient, amount, decimals, contract, emitter}) => { try { - return eth_sendTransaction( + return l1_sendTransaction( contract, 'withdraw', [parseToDecimals(amount, decimals), recipient], @@ -50,7 +50,7 @@ export const withdraw = async ({recipient, amount, decimals, contract, emitter}) export const initiateWithdraw = async ({recipient, amount, decimals, contract}) => { try { - return starknet_sendTransaction(contract, 'initiate_withdraw', { + return l2_sendTransaction(contract, 'initiate_withdraw', { l1Recipient: parseToFelt(recipient), amount: parseToUint256(amount, decimals) }); diff --git a/src/api/erc20.js b/src/api/erc20.js index 09d30610..9afe28e9 100644 --- a/src/api/erc20.js +++ b/src/api/erc20.js @@ -1,10 +1,10 @@ import {parseFromDecimals, parseFromUint256} from '../utils'; -import {eth_callContract, eth_sendTransaction, starknet_callContract} from '../utils/contract'; +import {l1_callContract, l1_sendTransaction, l2_callContract} from '../utils/contract'; import {web3} from '../web3'; export const approve = async ({spender, value, contract, options}) => { try { - return await eth_sendTransaction(contract, 'approve', [spender, value], options); + return await l1_sendTransaction(contract, 'approve', [spender, value], options); } catch (ex) { return Promise.reject(ex); } @@ -12,20 +12,20 @@ export const approve = async ({spender, value, contract, options}) => { export const allowance = async ({owner, spender, decimals, contract}) => { try { - const allow = await eth_callContract(contract, 'allowance', [owner, spender]); + const allow = await l1_callContract(contract, 'allowance', [owner, spender]); return parseFromDecimals(allow, decimals); } catch (ex) { return Promise.reject(ex); } }; -export const balanceOf = async ({account, decimals, contract}, isEthereum = true) => { +export const balanceOf = async ({account, decimals, contract}, isL1 = true) => { try { - if (isEthereum) { - const balance = await eth_callContract(contract, 'balanceOf', [account]); + if (isL1) { + const balance = await l1_callContract(contract, 'balanceOf', [account]); return parseFromDecimals(balance, decimals); } else { - const {balance} = await starknet_callContract(contract, 'balanceOf', [{account}]); + const {balance} = await l2_callContract(contract, 'balanceOf', [{account}]); return parseFromUint256(balance, decimals); } } catch (ex) { @@ -33,7 +33,7 @@ export const balanceOf = async ({account, decimals, contract}, isEthereum = true } }; -export const eth_ethBalanceOf = async account => { +export const l1_ethBalanceOf = async account => { try { const balance = await web3.eth.getBalance(account); return parseFromDecimals(balance); diff --git a/src/components/Containers/Header/Header.constants.js b/src/components/Containers/Header/Header.constants.js index fb520bb8..5e7c0472 100644 --- a/src/components/Containers/Header/Header.constants.js +++ b/src/components/Containers/Header/Header.constants.js @@ -1 +1 @@ -export const STARKNET_LOGO_SIZE = 30; +export const L2_LOGO_SIZE = 30; diff --git a/src/components/Containers/Header/Header.js b/src/components/Containers/Header/Header.js index 928a87cb..7e8fb377 100644 --- a/src/components/Containers/Header/Header.js +++ b/src/components/Containers/Header/Header.js @@ -1,38 +1,30 @@ import React from 'react'; -import StarkNetLogoPath from '../../../assets/img/starknet.png'; -import {useEthereumWallet, useStarknetWallet, useWallets} from '../../../providers/WalletsProvider'; +import L2LogoPath from '../../../assets/img/starknet.png'; +import {useL1Wallet, useL2Wallet, useWallets} from '../../../providers/WalletsProvider'; import {toClasses} from '../../../utils'; import {useBridgeActions} from '../../Features/Bridge/Bridge.hooks'; -import {useIsEthereum, useIsStarknet} from '../../Features/Transfer/Transfer.hooks'; +import {useIsL1, useIsL2} from '../../Features/Transfer/Transfer.hooks'; import {WalletButton} from '../../UI'; -import {STARKNET_LOGO_SIZE} from './Header.constants'; +import {L2_LOGO_SIZE} from './Header.constants'; import styles from './Header.module.scss'; import {CHAIN_TXT} from './Header.strings'; export const Header = () => { const {chainName, isConnected} = useWallets(); const {showAccountMenu, showTransferMenu} = useBridgeActions(); - const [, setEthereum] = useIsEthereum(); - const [, setStarknet] = useIsStarknet(); - const { - account: ethereumAccount, - isConnected: isEthereumConnected, - config: ethereumConfig - } = useEthereumWallet(); - const { - account: starknetAccount, - isConnected: isStarknetConnected, - config: starknetConfig - } = useStarknetWallet(); + const [, setL1] = useIsL1(); + const [, setL2] = useIsL2(); + const {account: l1Account, isConnected: isL1AccountConnected, config: l1Config} = useL1Wallet(); + const {account: l2Account, isConnected: isL2AccountConnected, config: l2Config} = useL2Wallet(); - const onStarknetWalletButtonClick = () => { - setStarknet(); + const onL2WalletButtonClick = () => { + setL2(); showAccountMenu(); }; - const onEthereumWalletButtonClick = () => { - setEthereum(); + const onL1WalletButtonClick = () => { + setL1(); showAccountMenu(); }; @@ -44,7 +36,7 @@ export const Header = () => {
- +
Bridge
{isConnected && ( @@ -53,18 +45,18 @@ export const Header = () => {
- {isEthereumConnected && ( + {isL1AccountConnected && ( )} - {isStarknetConnected && ( + {isL2AccountConnected && ( )}
diff --git a/src/components/Containers/Main/Main.js b/src/components/Containers/Main/Main.js index a8e3b20b..12993bf6 100644 --- a/src/components/Containers/Main/Main.js +++ b/src/components/Containers/Main/Main.js @@ -2,15 +2,15 @@ import React, {useEffect, useState} from 'react'; import {useVars, useWindowSize} from '../../../hooks'; import {TokensProvider} from '../../../providers/TokensProvider'; -import {useEthereumWallet, useStarknetWallet} from '../../../providers/WalletsProvider'; +import {useL1Wallet, useL2Wallet} from '../../../providers/WalletsProvider'; import {Bridge, Login} from '../../Features'; import styles from './Main.module.scss'; export const Main = () => { const windowSize = useWindowSize(); const {mainOffset} = useVars(); - const {isConnected: isEthereumConnected} = useEthereumWallet(); - const {isConnected: isStarknetConnected} = useStarknetWallet(); + const {isConnected: isL1Connected} = useL1Wallet(); + const {isConnected: isL2Connected} = useL2Wallet(); const [height, setHeight] = useState(null); useEffect(() => { @@ -19,7 +19,7 @@ export const Main = () => { return (
- {isEthereumConnected && isStarknetConnected ? ( + {isL1Connected && isL2Connected ? ( diff --git a/src/components/Features/Account/Account.js b/src/components/Features/Account/Account.js index 21219be9..478ae45a 100644 --- a/src/components/Features/Account/Account.js +++ b/src/components/Features/Account/Account.js @@ -23,7 +23,7 @@ export const Account = () => { const {showTransferMenu} = useBridgeActions(); const {account, chainId, resetWallet} = useWallets(); const transfers = useAccountTransfers(account); - const {isEthereum, isStarknet, fromNetwork} = useTransferData(); + const {isL1, isL2, fromNetwork} = useTransferData(); const completeTransferToL1 = useCompleteTransferToL1(); const renderTransfers = () => { @@ -44,17 +44,17 @@ export const Account = () => { - {isEthereum && ( + {isL1 && ( )} - {isStarknet && ( + {isL2 && ( )} {renderTransfers()} - +
); diff --git a/src/components/Features/Login/Login.js b/src/components/Features/Login/Login.js index b771ef57..dc534fc7 100644 --- a/src/components/Features/Login/Login.js +++ b/src/components/Features/Login/Login.js @@ -3,7 +3,7 @@ import {ChainUnsupportedError} from 'use-wallet'; import {NetworkType, toChainName, WalletStatus, WalletType} from '../../../enums'; import {useConfig, useWalletHandlerProvider} from '../../../hooks'; -import {useEthereumWallet, useStarknetWallet, useWallets} from '../../../providers/WalletsProvider'; +import {useL1Wallet, useL2Wallet, useWallets} from '../../../providers/WalletsProvider'; import {capitalize, toClasses} from '../../../utils'; import {Menu, WalletLogin} from '../../UI'; import {useHideModal, useProgressModal} from '../ModalProvider/ModalProvider.hooks'; @@ -15,14 +15,14 @@ export const Login = () => { const {autoConnect} = useConfig(); const [selectedWalletName, setSelectedWalletName] = useState(''); const [errorMsg, setErrorMsg] = useState(''); - const [walletType, setWalletType] = useState(WalletType.ETHEREUM); + const [walletType, setWalletType] = useState(WalletType.L1); const modalTimeoutId = useRef(null); const hideModal = useHideModal(); const showProgressModal = useProgressModal(); const getWalletHandlers = useWalletHandlerProvider(); const {status, error} = useWallets(); - const {connectWallet: connectEthereumWallet, isConnected} = useEthereumWallet(); - const {connectWallet: connectStarknetWallet} = useStarknetWallet(); + const {connectWallet: connectL1Wallet, isConnected} = useL1Wallet(); + const {connectWallet: connectL2Wallet} = useL2Wallet(); useEffect(() => { let timeoutId; @@ -36,7 +36,7 @@ export const Login = () => { }, [walletType, getWalletHandlers]); useEffect(() => { - isConnected && setWalletType(WalletType.STARKNET); + isConnected && setWalletType(WalletType.L2); }, [isConnected]); useEffect(() => { @@ -69,9 +69,7 @@ export const Login = () => { } const {config} = walletHandler; setSelectedWalletName(config.name); - return walletType === WalletType.ETHEREUM - ? connectEthereumWallet(config) - : connectStarknetWallet(config); + return walletType === WalletType.L1 ? connectL1Wallet(config) : connectL2Wallet(config); }; const onDownloadClick = () => { @@ -129,11 +127,7 @@ export const Login = () => {
{TITLE_TXT}

- {SUBTITLE_TXT( - walletType === WalletType.ETHEREUM - ? NetworkType.ETHEREUM.name - : NetworkType.STARKNET.name - )} + {SUBTITLE_TXT(walletType === WalletType.L1 ? NetworkType.L1.name : NetworkType.L2.name)}

{renderLoginWallets()}
{errorMsg &&
{errorMsg}
} diff --git a/src/components/Features/SelectToken/SelectToken.js b/src/components/Features/SelectToken/SelectToken.js index e2b3e270..b1249d1b 100644 --- a/src/components/Features/SelectToken/SelectToken.js +++ b/src/components/Features/SelectToken/SelectToken.js @@ -1,7 +1,7 @@ import React, {useEffect, useState} from 'react'; -import EthereumLogo from '../../../assets/svg/tokens/eth.svg'; -import StarkNetLogo from '../../../assets/svg/tokens/starknet.svg'; +import L1Logo from '../../../assets/svg/tokens/eth.svg'; +import L2Logo from '../../../assets/svg/tokens/starknet.svg'; import {useColors} from '../../../hooks'; import {useTokens} from '../../../providers/TokensProvider'; import {BackButton, Menu, MenuTitle, SearchToken, SelectTokenList} from '../../UI'; @@ -14,7 +14,7 @@ export const SelectToken = () => { const {tokens} = useTokens(); const {colorBeta} = useColors(); const {showTransferMenu} = useBridgeActions(); - const {isEthereum, fromNetwork} = useTransferData(); + const {isL1, fromNetwork} = useTransferData(); const {selectToken} = useTransferActions(); const [searchTokens, setSearchTokens] = useState(tokens); @@ -42,7 +42,7 @@ export const SelectToken = () => {
diff --git a/src/components/Features/ToastProvider/ToastProvider.js b/src/components/Features/ToastProvider/ToastProvider.js index bc079faa..4ecdea31 100644 --- a/src/components/Features/ToastProvider/ToastProvider.js +++ b/src/components/Features/ToastProvider/ToastProvider.js @@ -43,7 +43,7 @@ export const ToastProvider = () => { if (isChanged && isRejected(status)) { return showRejectedTransferToast(transfer); } - if (!transfer.eth_hash && type === ActionType.TRANSFER_FROM_STARKNET && isOnChain(status)) { + if (!transfer.l1hash && type === ActionType.TRANSFER_TO_L1 && isOnChain(status)) { return showWithdrawalToast(transfer); } }; @@ -131,9 +131,9 @@ export const TransferData = ({transfer, style}) => { <> ${NetworkType.STARKNET.name}` - : `${NetworkType.STARKNET.name} -> ${NetworkType.ETHEREUM.name}` + transfer.type === ActionType.TRANSFER_TO_L2 + ? `${NetworkType.L1.name} -> ${NetworkType.L2.name}` + : `${NetworkType.L2.name} -> ${NetworkType.L1.name}` } style={style} /> diff --git a/src/components/Features/Transfer/Transfer.hooks.js b/src/components/Features/Transfer/Transfer.hooks.js index 38b2096b..350cf92e 100644 --- a/src/components/Features/Transfer/Transfer.hooks.js +++ b/src/components/Features/Transfer/Transfer.hooks.js @@ -2,15 +2,15 @@ import {useCallback, useMemo} from 'react'; import {useDispatch, useSelector} from 'react-redux'; import {ActionType} from '../../../enums'; -import {useEthereumToken, useStarknetToken} from '../../../providers/TokensProvider'; +import {useL1Token, useL2Token} from '../../../providers/TokensProvider'; import { fromNetworkSelector, - fromStarknetSelector, + toL1Selector, getCurrentAmountSelector, selectSymbol, selectTransfer, toNetworkSelector, - toStarknetSelector + toL2Selector } from './Transfer.selectors'; import {resetAction, selectTokenAction, setAmountAction, setTransferAction} from './Transfer.slice'; @@ -25,8 +25,8 @@ export const useTransferData = () => { return { ...useSelector(selectTransfer), selectedToken: useSelectedToken(), - isEthereum: useSelector(toStarknetSelector), - isStarknet: useSelector(fromStarknetSelector), + isL1: useSelector(toL2Selector), + isL2: useSelector(toL1Selector), fromNetwork: useSelector(fromNetworkSelector), toNetwork: useSelector(toNetworkSelector) }; @@ -34,13 +34,10 @@ export const useTransferData = () => { export const useSelectedToken = () => { const symbol = useSelector(selectSymbol); - const isEthereum = useSelector(toStarknetSelector); - const ethereumToken = useEthereumToken()(symbol); - const starknetToken = useStarknetToken()(symbol); - return useMemo( - () => (isEthereum ? ethereumToken : starknetToken), - [symbol, isEthereum, ethereumToken, starknetToken] - ); + const isL1 = useSelector(toL2Selector); + const l1Token = useL1Token()(symbol); + const l2Token = useL2Token()(symbol); + return useMemo(() => (isL1 ? l1Token : l2Token), [symbol, isL1, l1Token, l2Token]); }; export const useAmount = () => { @@ -50,16 +47,16 @@ export const useAmount = () => { return [amount, setAmount, clearAmount]; }; -export const useIsEthereum = () => { - const isEthereum = useSelector(toStarknetSelector); - const setEthereum = useSetActionType(ActionType.TRANSFER_TO_STARKNET); - return [isEthereum, setEthereum]; +export const useIsL1 = () => { + const isL1 = useSelector(toL2Selector); + const setL1 = useSetActionType(ActionType.TRANSFER_TO_L2); + return [isL1, setL1]; }; -export const useIsStarknet = () => { - const isStarknet = useSelector(fromStarknetSelector); - const setStarknet = useSetActionType(ActionType.TRANSFER_FROM_STARKNET); - return [isStarknet, setStarknet]; +export const useIsL2 = () => { + const isL2 = useSelector(toL1Selector); + const setL2 = useSetActionType(ActionType.TRANSFER_TO_L1); + return [isL2, setL2]; }; const useSetAmount = () => { diff --git a/src/components/Features/Transfer/Transfer.js b/src/components/Features/Transfer/Transfer.js index 88aab60b..fad1f68f 100644 --- a/src/components/Features/Transfer/Transfer.js +++ b/src/components/Features/Transfer/Transfer.js @@ -2,7 +2,7 @@ import React, {useEffect, useState} from 'react'; import {ActionType, NetworkType} from '../../../enums'; import {useTransferToL1, useTransferToL2} from '../../../hooks'; -import {useEthereumToken, useStarknetToken, useTokens} from '../../../providers/TokensProvider'; +import {useL1Token, useL2Token, useTokens} from '../../../providers/TokensProvider'; import { Loading, Menu, @@ -14,19 +14,13 @@ import { } from '../../UI'; import {LoadingSize} from '../../UI/Loading/Loading.enums'; import {useBridgeActions} from '../Bridge/Bridge.hooks'; -import { - useAmount, - useIsEthereum, - useIsStarknet, - useTransferActions, - useTransferData -} from './Transfer.hooks'; +import {useAmount, useIsL1, useIsL2, useTransferActions, useTransferData} from './Transfer.hooks'; import styles from './Transfer.module.scss'; import {INSUFFICIENT_BALANCE_ERROR_MSG} from './Transfer.strings'; export const Transfer = () => { - const [isEthereum, setEthereum] = useIsEthereum(); - const [isStarknet, setStarknet] = useIsStarknet(); + const [isL1, setL1] = useIsL1(); + const [isL2, setL2] = useIsL2(); const [amount, setAmount] = useAmount(); const [hasInputError, setHasInputError] = useState(false); const [isButtonDisabled, setIsButtonDisabled] = useState(true); @@ -36,8 +30,8 @@ export const Transfer = () => { const transferToL2 = useTransferToL2(); const transferToL1 = useTransferToL1(); const {tokens} = useTokens(); - const getEthereumToken = useEthereumToken(); - const getStarknetToken = useStarknetToken(); + const getL1Token = useL1Token(); + const getL2Token = useL2Token(); useEffect(() => { if (!selectedToken) { @@ -70,10 +64,10 @@ export const Transfer = () => { }; const onSwapClick = () => { - isStarknet ? setEthereum() : setStarknet(); + isL2 ? setL1() : setL2(); }; - const onTransferClick = async () => (isEthereum ? transferToL2(amount) : transferToL1(amount)); + const onTransferClick = async () => (isL1 ? transferToL2(amount) : transferToL1(amount)); const renderTabs = () => { return Object.values(ActionType).map((tab, index) => { @@ -81,31 +75,27 @@ export const Transfer = () => { action !== tab && onSwapClick()} /> ); }); }; - const renderEthereumNetwork = () => { - const tokenData = getEthereumToken(selectedToken.symbol); + const renderL1Network = () => { + const tokenData = getL1Token(selectedToken.symbol); return ( - - {isEthereum && renderTransferInput()} + + {isL1 && renderTransferInput()} ); }; - const renderStarknetNetwork = () => { - const tokenData = getStarknetToken(selectedToken.symbol); + const renderL2Network = () => { + const tokenData = getL2Token(selectedToken.symbol); return ( - - {isStarknet && renderTransferInput()} + + {isL2 && renderTransferInput()} ); }; @@ -138,9 +128,9 @@ export const Transfer = () => { )} {selectedToken && ( <> - {isEthereum ? renderEthereumNetwork() : renderStarknetNetwork()} - - {isEthereum ? renderStarknetNetwork() : renderEthereumNetwork()} + {isL1 ? renderL1Network() : renderL2Network()} + + {isL1 ? renderL2Network() : renderL1Network()} )}
diff --git a/src/components/Features/Transfer/Transfer.selectors.js b/src/components/Features/Transfer/Transfer.selectors.js index 1f493dd1..636267f2 100644 --- a/src/components/Features/Transfer/Transfer.selectors.js +++ b/src/components/Features/Transfer/Transfer.selectors.js @@ -12,28 +12,28 @@ export const selectWithdrawAmount = state => state.transfer.withdrawAmount; export const selectDepositAmount = state => state.transfer.depositAmount; -export const toStarknetSelector = createSelector( +export const toL2Selector = createSelector( selectTransferAction, - action => action === ActionType.TRANSFER_TO_STARKNET + action => action === ActionType.TRANSFER_TO_L2 ); -export const fromStarknetSelector = createSelector( +export const toL1Selector = createSelector( selectTransferAction, - action => action === ActionType.TRANSFER_FROM_STARKNET + action => action === ActionType.TRANSFER_TO_L1 ); export const fromNetworkSelector = createSelector(selectTransferAction, action => - action === ActionType.TRANSFER_TO_STARKNET ? NetworkType.ETHEREUM : NetworkType.STARKNET + action === ActionType.TRANSFER_TO_L2 ? NetworkType.L1 : NetworkType.L2 ); export const toNetworkSelector = createSelector(selectTransferAction, action => - action === ActionType.TRANSFER_TO_STARKNET ? NetworkType.STARKNET : NetworkType.ETHEREUM + action === ActionType.TRANSFER_TO_L2 ? NetworkType.L2 : NetworkType.L1 ); export const getCurrentAmountSelector = createSelector( [selectTransferAction, selectDepositAmount, selectWithdrawAmount], (action, depositAmount, withdrawAmount) => { - if (action === ActionType.TRANSFER_TO_STARKNET) { + if (action === ActionType.TRANSFER_TO_L2) { return depositAmount; } return withdrawAmount; diff --git a/src/components/Features/Transfer/Transfer.slice.js b/src/components/Features/Transfer/Transfer.slice.js index 18a1b930..c2cecf5a 100644 --- a/src/components/Features/Transfer/Transfer.slice.js +++ b/src/components/Features/Transfer/Transfer.slice.js @@ -3,7 +3,7 @@ import {createSlice} from '@reduxjs/toolkit'; import {ActionType} from '../../../enums'; const initialState = { - action: ActionType.TRANSFER_TO_STARKNET, + action: ActionType.TRANSFER_TO_L2, symbol: '', depositAmount: '', withdrawAmount: '' @@ -20,7 +20,7 @@ const transferSlice = createSlice({ state.symbol = action.payload; }, setAmountAction(state, action) { - if (state.action === ActionType.TRANSFER_TO_STARKNET) { + if (state.action === ActionType.TRANSFER_TO_L2) { state.depositAmount = action.payload; } else { state.withdrawAmount = action.payload; diff --git a/src/components/Features/TransferLog/TransferLog.js b/src/components/Features/TransferLog/TransferLog.js index 01b5c778..fe79ceb4 100644 --- a/src/components/Features/TransferLog/TransferLog.js +++ b/src/components/Features/TransferLog/TransferLog.js @@ -20,9 +20,9 @@ import styles from './TransferLog.module.scss'; import {WITHDRAWAL_BTN_TXT} from './TransferLog.strings'; export const TransferLog = ({transfer, onWithdrawClick}) => { - const {symbol, timestamp, name, amount, status, eth_hash, starknet_hash} = transfer; + const {symbol, timestamp, name, amount, status, l1hash, l2hash} = transfer; const [sign, setSign] = useState(''); - const {action, isEthereum} = useTransferData(); + const {action, isL1} = useTransferData(); const {chainId} = useWallets(); useEffect(() => { @@ -37,25 +37,25 @@ export const TransferLog = ({transfer, onWithdrawClick}) => { ) : null; }; - const renderEthereumTxButton = () => { - return !eth_hash && isEthereum && isOnChain(status) ? ( + const renderL1TxButton = () => { + return !l1hash && isL1 && isOnChain(status) ? ( ) : ( ); }; - const renderStarknetTxButton = () => { + const renderL2TxButton = () => { return ( <> ); @@ -77,8 +77,8 @@ export const TransferLog = ({transfer, onWithdrawClick}) => { {renderTransferStatus()}
- {renderEthereumTxButton()} - {renderStarknetTxButton()} + {renderL1TxButton()} + {renderL2TxButton()}
diff --git a/src/components/UI/Modal/TransactionSubmittedModal/TransactionSubmittedModal.js b/src/components/UI/Modal/TransactionSubmittedModal/TransactionSubmittedModal.js index d1d5e382..51e9e325 100644 --- a/src/components/UI/Modal/TransactionSubmittedModal/TransactionSubmittedModal.js +++ b/src/components/UI/Modal/TransactionSubmittedModal/TransactionSubmittedModal.js @@ -2,7 +2,7 @@ import PropTypes from 'prop-types'; import React, {useEffect, useState} from 'react'; import {ReactComponent as EtherscanLogo} from '../../../../assets/svg/etherscan.svg'; -import {ReactComponent as StarknetLogo} from '../../../../assets/svg/tokens/starknet.svg'; +import {ReactComponent as L2Logo} from '../../../../assets/svg/tokens/starknet.svg'; import {LINKS} from '../../../../constants'; import {ActionType} from '../../../../enums'; import {useColors} from '../../../../hooks'; @@ -23,14 +23,14 @@ const TransactionSubmittedModal = ({transfer}) => { const [networkData, setNetworkData] = useState({}); useEffect(() => { - const {type, starknet_hash, eth_hash} = transfer; - const isCompletedWithdrawal = eth_hash && starknet_hash; - if (type === ActionType.TRANSFER_TO_STARKNET || isCompletedWithdrawal) { + const {type, l2hash, l1hash} = transfer; + const isCompletedWithdrawal = l1hash && l2hash; + if (type === ActionType.TRANSFER_TO_L2 || isCompletedWithdrawal) { setNetworkData({ - message: type === ActionType.TRANSFER_TO_STARKNET ? DEPOSIT_TXT : COMPLETE_WITHDRAWAL_TXT, - showStatusMsg: type === ActionType.TRANSFER_TO_STARKNET, + message: type === ActionType.TRANSFER_TO_L2 ? DEPOSIT_TXT : COMPLETE_WITHDRAWAL_TXT, + showStatusMsg: type === ActionType.TRANSFER_TO_L2, explorerName: LINKS.ETHERSCAN.text, - explorerUrl: LINKS.ETHERSCAN.txUrl(chainId, eth_hash), + explorerUrl: LINKS.ETHERSCAN.txUrl(chainId, l1hash), explorerLogo: }); } else { @@ -38,8 +38,8 @@ const TransactionSubmittedModal = ({transfer}) => { message: WITHDRAWAL_TXT, showStatusMsg: true, explorerName: LINKS.VOYAGER.text, - explorerUrl: LINKS.VOYAGER.txUrl(chainId, starknet_hash), - explorerLogo: + explorerUrl: LINKS.VOYAGER.txUrl(chainId, l2hash), + explorerLogo: }); } }, []); diff --git a/src/components/UI/Toast/WithdrawalTransferToast/WithdrawalTransferToast.js b/src/components/UI/Toast/WithdrawalTransferToast/WithdrawalTransferToast.js index 0e2a88d6..924c2a41 100644 --- a/src/components/UI/Toast/WithdrawalTransferToast/WithdrawalTransferToast.js +++ b/src/components/UI/Toast/WithdrawalTransferToast/WithdrawalTransferToast.js @@ -2,7 +2,7 @@ import {Transition} from '@headlessui/react'; import PropTypes from 'prop-types'; import React from 'react'; -import {ReactComponent as EthereumLogo} from '../../../../assets/svg/tokens/eth.svg'; +import {ReactComponent as L1Logo} from '../../../../assets/svg/tokens/eth.svg'; import {useColors} from '../../../../hooks'; import {TransferData} from '../../../Features'; import {ToastBody} from '../ToastBody/ToastBody'; @@ -33,7 +33,7 @@ export const WithdrawalTransferToast = ({t, transfer, onDismiss, onWithdrawal, o
- +
diff --git a/src/config/addresses/contracts/contracts.ethereum.js b/src/config/addresses/contracts/contracts.l1.js similarity index 100% rename from src/config/addresses/contracts/contracts.ethereum.js rename to src/config/addresses/contracts/contracts.l1.js diff --git a/src/config/addresses/index.js b/src/config/addresses/index.js index f4205e90..79d935c7 100644 --- a/src/config/addresses/index.js +++ b/src/config/addresses/index.js @@ -1,3 +1,3 @@ -export * from './contracts/contracts.ethereum'; -export * from './tokens/tokens.ethereum'; -export * from './tokens/tokens.starknet'; +export * from './contracts/contracts.l1'; +export * from './tokens/tokens.l1'; +export * from './tokens/tokens.l2'; diff --git a/src/config/addresses/tokens/tokens.ethereum.js b/src/config/addresses/tokens/tokens.l1.js similarity index 94% rename from src/config/addresses/tokens/tokens.ethereum.js rename to src/config/addresses/tokens/tokens.l1.js index 1929fd01..5a579ab7 100644 --- a/src/config/addresses/tokens/tokens.ethereum.js +++ b/src/config/addresses/tokens/tokens.l1.js @@ -1,9 +1,9 @@ import {ChainType, NetworkType} from '../../../enums'; -export const EthereumTokens = [ +export const L1Tokens = [ { - name: NetworkType.ETHEREUM.tokenName, - symbol: NetworkType.ETHEREUM.symbol, + name: NetworkType.L1.tokenName, + symbol: NetworkType.L1.symbol, decimals: 18, bridgeAddress: { [ChainType.MAIN.id]: '', diff --git a/src/config/addresses/tokens/tokens.starknet.js b/src/config/addresses/tokens/tokens.l2.js similarity index 95% rename from src/config/addresses/tokens/tokens.starknet.js rename to src/config/addresses/tokens/tokens.l2.js index ec6d8dfa..e357c35f 100644 --- a/src/config/addresses/tokens/tokens.starknet.js +++ b/src/config/addresses/tokens/tokens.l2.js @@ -1,9 +1,9 @@ import {ChainType, NetworkType} from '../../../enums'; -export const StarknetTokens = [ +export const L2Tokens = [ { - name: NetworkType.ETHEREUM.tokenName, - symbol: NetworkType.ETHEREUM.symbol, + name: NetworkType.L1.tokenName, + symbol: NetworkType.L1.symbol, decimals: 18, bridgeAddress: { [ChainType.MAIN.id]: '', diff --git a/src/config/strings.json b/src/config/strings.json index dbdddcfc..eea2cf4d 100644 --- a/src/config/strings.json +++ b/src/config/strings.json @@ -48,9 +48,9 @@ "transactionSubmitted": { "title_txt": "Transaction sent", "btn_txt": "View on {{explorer}}", - "withdrawal_txt": "Your transaction is now being processing on StarkNet. When it will be accepted on-chain, we will promote you to complete your transfer.", - "complete_withdrawal_txt": "Your transaction is completed on Ethereum!", - "deposit_txt": "Your transaction has been sent to StarkNet!", + "withdrawal_txt": "Your transaction is now being processing on L2. When it will be accepted on-chain, we will promote you to complete your transfer.", + "complete_withdrawal_txt": "Your transaction is completed on L1!", + "deposit_txt": "Your transaction has been sent to L2!", "status_txt": "Follow the transaction status on the right side of the browser." }, "transferProgress": { @@ -60,19 +60,19 @@ }, "deposit": { "type": "Transfer in progress", - "message": "Transferring {{amount}} {{symbol}} to StarkNet..." + "message": "Transferring {{amount}} {{symbol}} to L2..." }, "initiateWithdraw": { "type": "Initiate transfer", - "message": "Initiating transfer of {{amount}} {{symbol}} from StarkNet..." + "message": "Initiating transfer of {{amount}} {{symbol}} from L2..." }, "waitForAccept": { "type": "Transaction sent", - "message": "Waiting for transaction to be accepted on StarkNet..." + "message": "Waiting for transaction to be accepted on L2..." }, "withdraw": { "type": "Transfer in progress", - "message": "Transferring {{amount}} {{symbol}} to Ethereum..." + "message": "Transferring {{amount}} {{symbol}} to L1..." }, "waitForConfirm": { "type": "{{walletName}}", @@ -84,13 +84,13 @@ }, "toasts": { "pendingTransfer": { - "pending_txt": "Waiting for transaction to be accepted on StarkNet", - "consumed_txt": "Transaction accepted on StarkNet", - "rejected_txt": "Transaction rejected on StarkNet" + "pending_txt": "Waiting for transaction to be accepted on L2", + "consumed_txt": "Transaction accepted on L2", + "rejected_txt": "Transaction rejected on L2" }, "withdrawalTransfer": { - "title_txt": "StarkNet finished processing your transfer!", - "body_txt": "Click on Complete Transfer to transfer the funds from StarkNet Bridge to your Ethereum address.", + "title_txt": "L2 finished processing your transfer!", + "body_txt": "Click on Complete Transfer to transfer the funds from L2 Bridge to your L1 address.", "dismiss_btn_txt": "Dismiss", "withdrawal_btn_txt": "Complete Transfer" } diff --git a/src/config/wallets.js b/src/config/wallets.js index 4eac68c2..b7889711 100644 --- a/src/config/wallets.js +++ b/src/config/wallets.js @@ -5,14 +5,14 @@ export default [ id: 'metamask', name: 'MetaMask', connectorId: 'injected', - type: WalletType.ETHEREUM, + type: WalletType.L1, description: 'Login using a browser wallet', logoPath: 'wallets/metamask/logo.svg' }, { id: 'argent', name: 'Argent X', - type: WalletType.STARKNET, + type: WalletType.L2, description: 'Login using a browser wallet', logoPath: 'wallets/argent/logo.svg' } diff --git a/src/constants.js b/src/constants.js index d341d096..7f8c6f50 100644 --- a/src/constants.js +++ b/src/constants.js @@ -1,8 +1,8 @@ import {byChainId} from './enums'; import {evaluate} from './utils'; -export const LOCAL_STORAGE_TRANSFERS_KEY = 'STARKNET_BRIDGE_TRANSFERS'; -export const STARKNET_INVOKE_TX_PREFIX = '115923154332517'; +export const LOCAL_STORAGE_TRANSFERS_KEY = 'STARKGATE_TRANSFERS'; +export const L2_INVOKE_TX_PREFIX = '115923154332517'; export const ETHERSCAN_URL = 'etherscan.io'; export const VOYAGER_URL = 'voyager.online'; export const LINKS = { @@ -23,12 +23,12 @@ export const LINKS = { text: 'voyager', txUrl: (chainId, hash) => evaluate('{{url}}/tx/{{hash}}', { - url: byChainId(chainId).starknetBlockExplorerUrl, + url: byChainId(chainId).l2BlockExplorerUrl, hash }), accountUrl: (chainId, account) => evaluate('{{url}}/contract/{{account}}', { - url: byChainId(chainId).starknetBlockExplorerUrl, + url: byChainId(chainId).l2BlockExplorerUrl, account }) } diff --git a/src/enums/ActionType.js b/src/enums/ActionType.js index 363f8a67..6e5f31aa 100644 --- a/src/enums/ActionType.js +++ b/src/enums/ActionType.js @@ -1,4 +1,4 @@ export const ActionType = { - TRANSFER_TO_STARKNET: 1, - TRANSFER_FROM_STARKNET: 2 + TRANSFER_TO_L2: 1, + TRANSFER_TO_L1: 2 }; diff --git a/src/enums/ChainType.js b/src/enums/ChainType.js index 43301f7f..c7df6276 100644 --- a/src/enums/ChainType.js +++ b/src/enums/ChainType.js @@ -5,17 +5,17 @@ export const ChainType = { id: 1, name: 'main', blockExplorerUrl: `https://${ETHERSCAN_URL}`, - starknetId: 'SN_MAIN', - starknetIdPrefix: '23448594291968334', - starknetBlockExplorerUrl: `https://${VOYAGER_URL}` + l2Id: 'SN_MAIN', + l2IdPrefix: '23448594291968334', + l2BlockExplorerUrl: `https://${VOYAGER_URL}` }, GOERLI: { id: 5, name: 'goerli', blockExplorerUrl: `https://goerli.${ETHERSCAN_URL}`, - starknetId: 'SN_GOERLI', - starknetIdPrefix: '1536727068981429685321', - starknetBlockExplorerUrl: `https://goerli.${VOYAGER_URL}` + l2Id: 'SN_GOERLI', + l2IdPrefix: '1536727068981429685321', + l2BlockExplorerUrl: `https://goerli.${VOYAGER_URL}` } }; diff --git a/src/enums/NetworkType.js b/src/enums/NetworkType.js index 3d6ce357..2868d82a 100644 --- a/src/enums/NetworkType.js +++ b/src/enums/NetworkType.js @@ -1,10 +1,10 @@ export const NetworkType = { - ETHEREUM: { + L1: { name: 'Ethereum', tokenName: 'Ether', symbol: 'ETH' }, - STARKNET: { + L2: { name: 'StarkNet', symbol: 'STARKNET' } diff --git a/src/enums/WalletType.js b/src/enums/WalletType.js index b60b12b7..32de2873 100644 --- a/src/enums/WalletType.js +++ b/src/enums/WalletType.js @@ -1,4 +1,4 @@ export const WalletType = { - ETHEREUM: 'ethereum', - STARKNET: 'starknet' + L1: 'ethereum', + L2: 'starknet' }; diff --git a/src/hooks/useContract.js b/src/hooks/useContract.js index c02d898d..2dfdc547 100644 --- a/src/hooks/useContract.js +++ b/src/hooks/useContract.js @@ -1,29 +1,15 @@ import {useCallback, useMemo} from 'react'; -import {ERC20_ABI, ERC20_BRIDGE_ABI, ETH_BRIDGE_ABI, MESSAGING_ABI} from '../abis/ethereum'; -import {STARKNET_BRIDGE_ABI, STARKNET_ERC20_ABI} from '../abis/starknet'; +import {L1_ERC20_ABI, L1_ERC20_BRIDGE_ABI, L1_ETH_BRIDGE_ABI, L1_MESSAGING_ABI} from '../abis/l1'; +import {L2_BRIDGE_ABI, L2_ERC20_ABI} from '../abis/l2'; import {useTransferData} from '../components/Features/Transfer/Transfer.hooks'; import {MESSAGING_CONTRACT_ADDRESS} from '../config/addresses'; import {NetworkType} from '../enums'; -import {useEthereumToken} from '../providers/TokensProvider'; -import {useEthereumWallet, useWallets} from '../providers/WalletsProvider'; -import {eth_getContract, starknet_getContract} from '../utils/contract'; +import {useL1Token} from '../providers/TokensProvider'; +import {useL1Wallet, useWallets} from '../providers/WalletsProvider'; +import {l1_getContract, l2_getContract} from '../utils/contract'; -export const useContracts = (ABI, getContractHandler = eth_getContract) => { - const getContract = useContract(ABI, getContractHandler); - return useCallback( - tokensAddresses => - tokensAddresses.map(tokenAddresses => { - if (tokenAddresses) { - return getContract(tokenAddresses); - } - return null; - }), - [ABI, getContract] - ); -}; - -export const useContract = (ABI, getContractHandler = eth_getContract) => { +export const useContract = (ABI, getContractHandler = l1_getContract) => { const {chainId} = useWallets(); return useCallback( addresses => { @@ -40,62 +26,52 @@ export const useContract = (ABI, getContractHandler = eth_getContract) => { }; export const useTokenContract = () => { - const getTokenContract = useEthereumTokenContract(); - const getStarknetTokenContract = useStarknetTokenContract(); - const {isEthereum} = useTransferData(); + const getL1TokenContract = useL1TokenContract(); + const getL2TokenContract = useL2TokenContract(); + const {isL1} = useTransferData(); return useCallback( tokenAddresses => - isEthereum ? getTokenContract(tokenAddresses) : getStarknetTokenContract(tokenAddresses), - [isEthereum, getStarknetTokenContract, getTokenContract] + isL1 ? getL1TokenContract(tokenAddresses) : getL2TokenContract(tokenAddresses), + [isL1, getL2TokenContract, getL1TokenContract] ); }; export const useTokenBridgeContract = () => { - const getTokenBridgeContract = useEthereumTokenBridgeContract(); - const getStarknetTokenBridgeContract = useStarknetTokenBridgeContract(); - const {isEthereum} = useTransferData(); + const getL1TokenBridgeContract = useL1TokenBridgeContract(); + const getL2TokenBridgeContract = useL2TokenBridgeContract(); + const {isL1} = useTransferData(); return useCallback( bridgeAddress => - isEthereum - ? getTokenBridgeContract(bridgeAddress) - : getStarknetTokenBridgeContract(bridgeAddress), - [isEthereum, getTokenBridgeContract, getStarknetTokenBridgeContract] + isL1 ? getL1TokenBridgeContract(bridgeAddress) : getL2TokenBridgeContract(bridgeAddress), + [isL1, getL1TokenBridgeContract, getL2TokenBridgeContract] ); }; -export const useStarknetTokenContract = () => { - const getContract = useContract(STARKNET_ERC20_ABI, starknet_getContract); - return useCallback(tokenAddresses => getContract(tokenAddresses), [getContract]); -}; -export const useStarknetTokenContracts = () => { - const getContracts = useContracts(STARKNET_ERC20_ABI, starknet_getContract); - return useCallback(tokensAddresses => getContracts(tokensAddresses), [getContracts]); -}; -export const useEthereumTokenContract = () => { - const getContract = useContract(ERC20_ABI); +export const useL2TokenContract = () => { + const getContract = useContract(L2_ERC20_ABI, l2_getContract); return useCallback(tokenAddresses => getContract(tokenAddresses), [getContract]); }; -export const useEthereumTokenContracts = () => { - const getContracts = useContracts(ERC20_ABI); - return useCallback(tokensAddresses => getContracts(tokensAddresses), [getContracts]); +export const useL1TokenContract = () => { + const getContract = useContract(L1_ERC20_ABI); + return useCallback(tokenAddresses => getContract(tokenAddresses), [getContract]); }; export const useMessagingContract = () => { - const getContract = useContract(MESSAGING_ABI); + const getContract = useContract(L1_MESSAGING_ABI); return useMemo(() => getContract(MESSAGING_CONTRACT_ADDRESS), [getContract]); }; -export const useStarknetTokenBridgeContract = () => { - const getContract = useContract(STARKNET_BRIDGE_ABI, starknet_getContract); +export const useL2TokenBridgeContract = () => { + const getContract = useContract(L2_BRIDGE_ABI, l2_getContract); return useCallback(bridgeAddress => getContract(bridgeAddress), [getContract]); }; -export const useEthereumTokenBridgeContract = () => { - const getTokenBridgeContract = useContract(ERC20_BRIDGE_ABI); - const getEthBridgeContract = useContract(ETH_BRIDGE_ABI); - const ethToken = useEthereumToken()(NetworkType.ETHEREUM.symbol); - const {chainId} = useEthereumWallet(); +export const useL1TokenBridgeContract = () => { + const getTokenBridgeContract = useContract(L1_ERC20_BRIDGE_ABI); + const getEthBridgeContract = useContract(L1_ETH_BRIDGE_ABI); + const ethToken = useL1Token()(NetworkType.L1.symbol); + const {chainId} = useL1Wallet(); return useCallback( bridgeAddress => bridgeAddress[chainId] === ethToken.bridgeAddress[chainId] diff --git a/src/hooks/useEventListener.js b/src/hooks/useEventListener.js index ef4eff52..fb82fa1b 100644 --- a/src/hooks/useEventListener.js +++ b/src/hooks/useEventListener.js @@ -2,8 +2,8 @@ import {useCallback} from 'react'; import {stark} from 'starknet'; import {useSelectedToken} from '../components/Features/Transfer/Transfer.hooks'; -import {useEthereumToken, useStarknetToken} from '../providers/TokensProvider'; -import {useEthereumWallet, useStarknetWallet} from '../providers/WalletsProvider'; +import {useL1Token, useL2Token} from '../providers/TokensProvider'; +import {useL1Wallet, useL2Wallet} from '../providers/WalletsProvider'; import {txHash} from '../utils'; import {useMessagingContract, useTokenBridgeContract} from './useContract'; import {useLogger} from './useLogger'; @@ -13,17 +13,17 @@ const HOOK_MODULE = 'useEventListener'; export const useLogMessageToL2Listener = () => { const logger = useLogger(`${HOOK_MODULE}:useLogMessageToL2Listener`); const selectedToken = useSelectedToken(); - const getEthereumToken = useEthereumToken(); - const getStarknetToken = useStarknetToken(); + const getL1Token = useL1Token(); + const getL2Token = useL2Token(); const messagingContract = useMessagingContract(); const addEventListener = useEventListener(); - const {chainId} = useEthereumWallet(); + const {chainId} = useL1Wallet(); return useCallback(async () => { logger.log('Registering to LogMessageToL2 event'); const {symbol} = selectedToken; - const snBridgeAddress = getStarknetToken(symbol).bridgeAddress[chainId]; - const ethBridgeAddress = getEthereumToken(symbol).bridgeAddress[chainId]; + const snBridgeAddress = getL2Token(symbol).bridgeAddress[chainId]; + const ethBridgeAddress = getL1Token(symbol).bridgeAddress[chainId]; try { const event = await addEventListener(messagingContract, 'LogMessageToL2', { filter: { @@ -39,15 +39,7 @@ export const useLogMessageToL2Listener = () => { logger.error('Event error', {ex}); return Promise.reject(ex.message); } - }, [ - addEventListener, - chainId, - getEthereumToken, - getStarknetToken, - logger, - messagingContract, - selectedToken - ]); + }, [addEventListener, chainId, getL1Token, getL2Token, logger, messagingContract, selectedToken]); }; export const useLogDepositListener = () => { @@ -55,8 +47,8 @@ export const useLogDepositListener = () => { const selectedToken = useSelectedToken(); const getTokenBridgeContract = useTokenBridgeContract(); const addEventListener = useEventListener(); - const {account: ethereumAccount} = useEthereumWallet(); - const {account: starknetAccount} = useStarknetWallet(); + const {account: l1Account} = useL1Wallet(); + const {account: l2Account} = useL2Wallet(); return useCallback(async () => { logger.log('Registering to LogDeposit event'); @@ -65,8 +57,8 @@ export const useLogDepositListener = () => { try { const event = await addEventListener(contract, 'LogDeposit', { filter: { - l2Recipient: starknetAccount, - sender: ethereumAccount + l2Recipient: l2Account, + sender: l1Account } }); logger.log('Event received', {event}); @@ -75,14 +67,7 @@ export const useLogDepositListener = () => { logger.error('Event error', {ex}); return Promise.reject(ex.message); } - }, [ - addEventListener, - ethereumAccount, - starknetAccount, - getTokenBridgeContract, - logger, - selectedToken - ]); + }, [addEventListener, l1Account, l2Account, getTokenBridgeContract, logger, selectedToken]); }; export const useEventListener = () => { diff --git a/src/hooks/useTokenBalance.js b/src/hooks/useTokenBalance.js index 8dabc9d9..2eb5d359 100644 --- a/src/hooks/useTokenBalance.js +++ b/src/hooks/useTokenBalance.js @@ -1,24 +1,22 @@ import {useCallback} from 'react'; -import {balanceOf, eth_ethBalanceOf} from '../api/erc20'; +import {balanceOf, l1_ethBalanceOf} from '../api/erc20'; import {useTransferData} from '../components/Features/Transfer/Transfer.hooks'; -import {useEthereumTokenContract, useStarknetTokenContract} from './useContract'; +import {useL1TokenContract, useL2TokenContract} from './useContract'; export const useTokenBalance = account => { - const getStarknetTokenBalance = useStarknetTokenBalance(account); - const getEthereumTokenBalance = useEthereumTokenBalance(account); - const {isEthereum} = useTransferData(); + const getL2TokenBalance = useL2TokenBalance(account); + const getL1TokenBalance = useL1TokenBalance(account); + const {isL1} = useTransferData(); return useCallback( tokenAddresses => - isEthereum - ? getEthereumTokenBalance(tokenAddresses) - : getStarknetTokenBalance(tokenAddresses), - [isEthereum, account, getEthereumTokenBalance, getStarknetTokenBalance] + isL1 ? getL1TokenBalance(tokenAddresses) : getL2TokenBalance(tokenAddresses), + [isL1, account, getL1TokenBalance, getL2TokenBalance] ); }; -export const useStarknetTokenBalance = account => { - const getContract = useStarknetTokenContract(); +export const useL2TokenBalance = account => { + const getContract = useL2TokenContract(); return useCallback( async tokenAddresses => await balanceOf({account, contract: getContract(tokenAddresses)}, false), @@ -26,13 +24,13 @@ export const useStarknetTokenBalance = account => { ); }; -export const useEthereumTokenBalance = account => { - const getContract = useEthereumTokenContract(); +export const useL1TokenBalance = account => { + const getContract = useL1TokenContract(); return useCallback( async tokenAddresses => tokenAddresses ? await balanceOf({account, contract: getContract(tokenAddresses)}, true) - : await eth_ethBalanceOf(account), + : await l1_ethBalanceOf(account), [account, getContract] ); }; diff --git a/src/hooks/useTransfer.js b/src/hooks/useTransfer.js index 45e37daa..b06e4658 100644 --- a/src/hooks/useTransfer.js +++ b/src/hooks/useTransfer.js @@ -11,16 +11,12 @@ import { } from '../components/Features/ModalProvider/ModalProvider.hooks'; import {useAmount, useSelectedToken} from '../components/Features/Transfer/Transfer.hooks'; import {ActionType, TransactionStatus} from '../enums'; -import {useEthereumToken, useTokens} from '../providers/TokensProvider'; +import {useL1Token, useTokens} from '../providers/TokensProvider'; import {useTransfers} from '../providers/TransfersProvider'; -import {useEthereumWallet, useStarknetWallet} from '../providers/WalletsProvider'; +import {useL1Wallet, useL2Wallet} from '../providers/WalletsProvider'; import {isEth} from '../utils'; -import {starknet_waitForTransaction} from '../utils/contract'; -import { - useEthereumTokenBridgeContract, - useTokenBridgeContract, - useTokenContract -} from './useContract'; +import {l2_waitForTransaction} from '../utils/contract'; +import {useL1TokenBridgeContract, useTokenBridgeContract, useTokenContract} from './useContract'; import {useLogDepositListener, useLogMessageToL2Listener} from './useEventListener'; import {useLogger} from './useLogger'; import {useTransferProgress} from './useTransferProgress'; @@ -29,8 +25,8 @@ const HOOK_MODULE = 'useTransfer'; export const useTransferToL2 = () => { const logger = useLogger(`${HOOK_MODULE}:useTransferToL2`); - const {account: ethereumAccount, chainId, config: ethereumConfig} = useEthereumWallet(); - const {account: starknetAccount} = useStarknetWallet(); + const {account: l1Account, chainId, config: l1Config} = useL1Wallet(); + const {account: l2Account} = useL2Wallet(); const {handleProgress, handleData, handleError} = useTransfer(); const selectedToken = useSelectedToken(); const getTokenContract = useTokenContract(); @@ -53,7 +49,7 @@ export const useTransferToL2 = () => { const tokenContract = getTokenContract(tokenAddress); handleProgress(progressOptions.approval(symbol)); const allow = await allowance({ - owner: ethereumAccount, + owner: l1Account, spender: bridgeAddress[chainId], decimals, contract: tokenContract @@ -65,19 +61,19 @@ export const useTransferToL2 = () => { spender: bridgeAddress[chainId], value: constants.MASK_250, contract: tokenContract, - options: {from: ethereumAccount} + options: {from: l1Account} }); } } - handleProgress(progressOptions.waitForConfirm(ethereumConfig.name)); + handleProgress(progressOptions.waitForConfirm(l1Config.name)); const logMessageToL2EventPromise = addLogMessageToL2Listener(); logger.log('Calling deposit'); const depositPromise = await depositHandler({ - recipient: starknetAccount, + recipient: l2Account, amount, decimals, contract: bridgeContract, - options: {from: ethereumAccount}, + options: {from: l1Account}, emitter: (error, transactionHash) => { if (!error) { logger.log('Tx hash received', {transactionHash}); @@ -91,14 +87,14 @@ export const useTransferToL2 = () => { ]); logger.log('Done', {l1hash, l2hash}); handleData({ - type: ActionType.TRANSFER_TO_STARKNET, - sender: ethereumAccount, - recipient: starknetAccount, + type: ActionType.TRANSFER_TO_L2, + sender: l1Account, + recipient: l2Account, name, symbol, amount, - eth_hash: l1hash, - starknet_hash: l2hash + l1hash, + l2hash }); } catch (ex) { logger.error(ex.message, {ex}); @@ -110,8 +106,8 @@ export const useTransferToL2 = () => { addLogDepositListener, addLogMessageToL2Listener, chainId, - ethereumAccount, - ethereumConfig, + l1Account, + l1Config, getTokenBridgeContract, getTokenContract, handleData, @@ -119,15 +115,15 @@ export const useTransferToL2 = () => { handleProgress, logger, progressOptions, - starknetAccount + l2Account ] ); }; export const useTransferToL1 = () => { const logger = useLogger(`${HOOK_MODULE}:useTransferToL1`); - const {account: ethereumAccount} = useEthereumWallet(); - const {account: starknetAccount, config: starknetConfig} = useStarknetWallet(); + const {account: l1Account} = useL1Wallet(); + const {account: l2Account, config: l2Config} = useL2Wallet(); const selectedToken = useSelectedToken(); const getTokenBridgeContract = useTokenBridgeContract(); const {handleProgress, handleData, handleError} = useTransfer(); @@ -140,10 +136,10 @@ export const useTransferToL1 = () => { const {decimals, bridgeAddress, name, symbol} = selectedToken; const bridgeContract = getTokenBridgeContract(bridgeAddress); logger.log('Prepared contract', {bridgeContract}); - handleProgress(progressOptions.waitForConfirm(starknetConfig.name)); + handleProgress(progressOptions.waitForConfirm(l2Config.name)); logger.log('Calling initiate withdraw'); const {transaction_hash} = await initiateWithdraw({ - recipient: ethereumAccount, + recipient: l1Account, amount, decimals, contract: bridgeContract @@ -151,19 +147,19 @@ export const useTransferToL1 = () => { logger.log('Tx hash received', {transaction_hash}); handleProgress(progressOptions.initiateWithdraw(amount, symbol)); logger.log('Waiting for tx to be received on L2'); - await starknet_waitForTransaction(transaction_hash, TransactionStatus.RECEIVED); + await l2_waitForTransaction(transaction_hash, TransactionStatus.RECEIVED); handleProgress(progressOptions.waitForAccept()); logger.log('Waiting for tx to be accepted on L2'); - await starknet_waitForTransaction(transaction_hash); + await l2_waitForTransaction(transaction_hash); logger.log('Done', {transaction_hash}); handleData({ - type: ActionType.TRANSFER_FROM_STARKNET, - sender: starknetAccount, - recipient: ethereumAccount, + type: ActionType.TRANSFER_TO_L1, + sender: l2Account, + recipient: l1Account, name, symbol, amount, - starknet_hash: transaction_hash + l2hash: transaction_hash }); } catch (ex) { logger.error(ex.message, {ex}); @@ -171,7 +167,7 @@ export const useTransferToL1 = () => { } }, [ - ethereumAccount, + l1Account, getTokenBridgeContract, handleData, handleError, @@ -179,33 +175,33 @@ export const useTransferToL1 = () => { logger, progressOptions, selectedToken, - starknetAccount, - starknetConfig + l2Account, + l2Config ] ); }; export const useCompleteTransferToL1 = () => { const logger = useLogger(`${HOOK_MODULE}:useCompleteTransferToL1`); - const {account: ethereumAccount, config: ethereumConfig} = useEthereumWallet(); + const {account: l1Account, config: l1Config} = useL1Wallet(); const {handleProgress, handleData, handleError} = useTransfer(); const progressOptions = useTransferProgress(); - const getEthereumToken = useEthereumToken(); - const getEthereumTokenBridgeContract = useEthereumTokenBridgeContract(); + const getL1Token = useL1Token(); + const getL1TokenBridgeContract = useL1TokenBridgeContract(); return useCallback( async transfer => { try { logger.log('CompleteTransferToL1 called'); const {symbol, amount} = transfer; - const ethereumToken = getEthereumToken(symbol); - const {bridgeAddress, decimals} = ethereumToken; - const tokenBridgeContract = getEthereumTokenBridgeContract(bridgeAddress); - logger.log('Prepared token and bridge contract', {ethereumToken, tokenBridgeContract}); - handleProgress(progressOptions.waitForConfirm(ethereumConfig.name)); + const l1Token = getL1Token(symbol); + const {bridgeAddress, decimals} = l1Token; + const tokenBridgeContract = getL1TokenBridgeContract(bridgeAddress); + logger.log('Prepared token and bridge contract', {l1Token, tokenBridgeContract}); + handleProgress(progressOptions.waitForConfirm(l1Config.name)); logger.log('Calling withdraw'); const {transactionHash} = await withdraw({ - recipient: ethereumAccount, + recipient: l1Account, amount, decimals, contract: tokenBridgeContract, @@ -217,17 +213,17 @@ export const useCompleteTransferToL1 = () => { } }); logger.log('Done', {transactionHash}); - handleData({...transfer, eth_hash: transactionHash}); + handleData({...transfer, l1hash: transactionHash}); } catch (ex) { logger.error(ex.message, {ex}); handleError(progressOptions.error(ex)); } }, [ - ethereumAccount, - ethereumConfig, - getEthereumToken, - getEthereumTokenBridgeContract, + l1Account, + l1Config, + getL1Token, + getL1TokenBridgeContract, handleData, handleError, handleProgress, diff --git a/src/providers/TokensProvider/TokensProvider.js b/src/providers/TokensProvider/TokensProvider.js index 845ae88f..5dc595a1 100644 --- a/src/providers/TokensProvider/TokensProvider.js +++ b/src/providers/TokensProvider/TokensProvider.js @@ -2,8 +2,8 @@ import PropTypes from 'prop-types'; import React, {useEffect, useReducer} from 'react'; import {useLogger, useConfig} from '../../hooks'; -import {useEthereumTokenBalance, useStarknetTokenBalance} from '../../hooks/useTokenBalance'; -import {useEthereumWallet, useStarknetWallet} from '../WalletsProvider'; +import {useL1TokenBalance, useL2TokenBalance} from '../../hooks/useTokenBalance'; +import {useL1Wallet, useL2Wallet} from '../WalletsProvider'; import {TokensContext} from './tokens-context'; import {actions, initialState, reducer} from './tokens-reducer'; @@ -11,10 +11,10 @@ export const TokensProvider = ({children}) => { const {pollBalanceInterval} = useConfig(); const logger = useLogger(TokensProvider.displayName); const [tokens, dispatch] = useReducer(reducer, initialState); - const {account: ethereumAccount} = useEthereumWallet(); - const {account: starknetAccount} = useStarknetWallet(); - const getEthereumTokenBalance = useEthereumTokenBalance(ethereumAccount); - const getStarknetTokenBalance = useStarknetTokenBalance(starknetAccount); + const {account: l1Account} = useL1Wallet(); + const {account: l2Account} = useL2Wallet(); + const getL1TokenBalance = useL1TokenBalance(l1Account); + const getL2TokenBalance = useL2TokenBalance(l2Account); useEffect(() => { updateTokens(); @@ -38,7 +38,7 @@ export const TokensProvider = ({children}) => { } else { logger.log(`Token already have a balance of ${token.balance}, don't set isLoading prop`); } - const getBalance = token.isEthereum ? getEthereumTokenBalance : getStarknetTokenBalance; + const getBalance = token.isL1 ? getL1TokenBalance : getL2TokenBalance; getBalance(token.tokenAddress) .then(balance => { logger.log(`New ${token.symbol} token balance is ${balance}`); diff --git a/src/providers/TokensProvider/tokens-hooks.js b/src/providers/TokensProvider/tokens-hooks.js index d1a19f43..b772ee76 100644 --- a/src/providers/TokensProvider/tokens-hooks.js +++ b/src/providers/TokensProvider/tokens-hooks.js @@ -4,39 +4,35 @@ import {useTransferData} from '../../components/Features/Transfer/Transfer.hooks import {TokensContext} from './tokens-context'; export const useTokens = () => { - const {isEthereum} = useTransferData(); - const starknetTokens = useStarknetTokens(); - const ethereumTokens = useEthereumTokens(); + const {isL1} = useTransferData(); + const l2Tokens = useL2Tokens(); + const l1Tokens = useL1Tokens(); const {updateTokens} = useContext(TokensContext); - const [tokens, setTokens] = useState(isEthereum ? ethereumTokens : starknetTokens); + const [tokens, setTokens] = useState(isL1 ? l1Tokens : l2Tokens); + useEffect(() => { - setTokens(isEthereum ? ethereumTokens : starknetTokens); - }, [isEthereum, starknetTokens, ethereumTokens]); + setTokens(isL1 ? l1Tokens : l2Tokens); + }, [isL1, l2Tokens, l1Tokens]); + return {tokens, updateTokens}; }; -export const useStarknetTokens = () => { +export const useL2Tokens = () => { const {tokens} = useContext(TokensContext); - return useMemo(() => tokens.filter(t => t.isStarknet), [tokens]); + return useMemo(() => tokens.filter(t => t.isL2), [tokens]); }; -export const useEthereumTokens = () => { +export const useL1Tokens = () => { const {tokens} = useContext(TokensContext); - return useMemo(() => tokens.filter(t => t.isEthereum), [tokens]); + return useMemo(() => tokens.filter(t => t.isL1), [tokens]); }; -export const useStarknetToken = () => { - const starknetTokens = useStarknetTokens(); - return useCallback( - symbol => starknetTokens.find(token => token.symbol === symbol), - [starknetTokens] - ); +export const useL2Token = () => { + const l2Tokens = useL2Tokens(); + return useCallback(symbol => l2Tokens.find(token => token.symbol === symbol), [l2Tokens]); }; -export const useEthereumToken = () => { - const ethereumTokens = useEthereumTokens(); - return useCallback( - symbol => ethereumTokens.find(token => token.symbol === symbol), - [ethereumTokens] - ); +export const useL1Token = () => { + const l1Tokens = useL1Tokens(); + return useCallback(symbol => l1Tokens.find(token => token.symbol === symbol), [l1Tokens]); }; diff --git a/src/providers/TokensProvider/tokens-reducer.js b/src/providers/TokensProvider/tokens-reducer.js index 59c06943..0d66ee43 100644 --- a/src/providers/TokensProvider/tokens-reducer.js +++ b/src/providers/TokensProvider/tokens-reducer.js @@ -1,12 +1,12 @@ -import {EthereumTokens, StarknetTokens} from '../../config/addresses'; +import {L1Tokens, L2Tokens} from '../../config/addresses'; export const actions = { UPDATE_TOKEN_STATE: 'Tokens/UPDATE_TOKEN_STATE' }; -const ethereumTokens = EthereumTokens.map(t => ({...t, isEthereum: true})); -const starknetTokens = StarknetTokens.map(t => ({...t, isStarknet: true})); -export const initialState = [...ethereumTokens, ...starknetTokens]; +const l1Tokens = L1Tokens.map(t => ({...t, isL1: true})); +const l2Tokens = L2Tokens.map(t => ({...t, isL2: true})); +export const initialState = [...l1Tokens, ...l2Tokens]; export const reducer = (state, action) => { switch (action.type) { diff --git a/src/providers/TransfersProvider/TransfersProvider.js b/src/providers/TransfersProvider/TransfersProvider.js index 736d33a2..20bac27e 100644 --- a/src/providers/TransfersProvider/TransfersProvider.js +++ b/src/providers/TransfersProvider/TransfersProvider.js @@ -37,10 +37,8 @@ export const TransfersProvider = ({children}) => { return transfer; } try { - logger.log(`Checking tx status ${transfer.starknet_hash}`); - const newStatus = await getStarknet().provider.getTransactionStatus( - transfer.starknet_hash - ); + logger.log(`Checking tx status ${transfer.l2hash}`); + const newStatus = await getStarknet().provider.getTransactionStatus(transfer.l2hash); if (transfer.status !== newStatus.tx_status) { logger.log( !transfer.status @@ -54,7 +52,7 @@ export const TransfersProvider = ({children}) => { lastChecked: blockHash }; } catch (error) { - logger.error(`Failed to check transaction status: ${transfer.starknet_hash}`); + logger.error(`Failed to check transaction status: ${transfer.l2hash}`); } return transfer; }; diff --git a/src/providers/WalletsProvider/WalletsProvider.js b/src/providers/WalletsProvider/WalletsProvider.js index 6de60825..485f5026 100644 --- a/src/providers/WalletsProvider/WalletsProvider.js +++ b/src/providers/WalletsProvider/WalletsProvider.js @@ -3,7 +3,7 @@ import PropTypes from 'prop-types'; import React, {useEffect, useReducer} from 'react'; import {useWallet} from 'use-wallet'; -import {useIsEthereum, useIsStarknet} from '../../components/Features/Transfer/Transfer.hooks'; +import {useIsL1, useIsL2} from '../../components/Features/Transfer/Transfer.hooks'; import {WalletStatus} from '../../enums'; import {useConfig} from '../../hooks'; import {web3} from '../../web3'; @@ -14,69 +14,69 @@ export const WalletsProvider = ({children}) => { const {autoConnect} = useConfig(); const [state, dispatch] = useReducer(reducer, initialState); const {status, connect, reset, isConnected, error, account, chainId, networkName} = useWallet(); - const {selectedAddress, isConnected: isStarknetConnected, enable} = getStarknet(); - const [isEthereum, setEthereum] = useIsEthereum(); - const [isStarknet, setStarknet] = useIsStarknet(); + const {selectedAddress, isConnected: isL2Connected, enable} = getStarknet(); + const [isL1, setL1] = useIsL1(); + const [isL2, setL2] = useIsL2(); // Handles starknet wallet changes useEffect(() => { - (isStarknet || state.starknetWallet.config) && maybeUpdateStarknetWallet(); - }, [selectedAddress, isStarknetConnected]); + (isL2 || state.l2Wallet.config) && maybeUpdateL2Wallet(); + }, [selectedAddress, isL2Connected]); // Handles ethereum wallet changes useEffect(() => { - (isEthereum || state.ethereumWallet.config) && maybeUpdateEthereumWallet(); + (isL1 || state.l1Wallet.config) && maybeUpdateL1Wallet(); }, [status, error, account, chainId, networkName]); const connectWallet = async walletConfig => { - if (isEthereum) { - return connectEthereumWallet(walletConfig); + if (isL1) { + return connectL1Wallet(walletConfig); } - return connectStarknetWallet(walletConfig); + return connectL2Wallet(walletConfig); }; - const connectEthereumWallet = async walletConfig => { + const connectL1Wallet = async walletConfig => { const {connectorId} = walletConfig; await connect(connectorId); - setEthereumWalletConfig(walletConfig); + setL1WalletConfig(walletConfig); }; - const connectStarknetWallet = async walletConfig => { + const connectL2Wallet = async walletConfig => { await getStarknet(!autoConnect && {showModal: true}).enable(); - setStarknetWalletConfig(walletConfig); + setL2WalletConfig(walletConfig); }; const resetWallet = () => { - if (isEthereum) { - return resetEthereumWallet(); + if (isL1) { + return resetL1Wallet(); } - return resetStarknetWallet(); + return resetL2Wallet(); }; - const resetEthereumWallet = () => { - setEthereumWalletConfig(null); + const resetL1Wallet = () => { + setL1WalletConfig(null); return reset(); }; - const resetStarknetWallet = () => { - setStarknetWalletConfig(null); + const resetL2Wallet = () => { + setL2WalletConfig(null); return null; }; const swapWallets = async () => { - if (state.ethereumWallet.config && !state.starknetWallet.config) { - setEthereum(); - maybeUpdateEthereumWallet(); - } else if (state.starknetWallet.config && !state.ethereumWallet.config) { - setStarknet(); - await maybeUpdateStarknetWallet(); + if (state.l1Wallet.config && !state.l2Wallet.config) { + setL1(); + maybeUpdateL1Wallet(); + } else if (state.l2Wallet.config && !state.l1Wallet.config) { + setL2(); + await maybeUpdateL2Wallet(); } }; - const maybeUpdateEthereumWallet = () => { + const maybeUpdateL1Wallet = () => { // To support serializable object in the store let serialError = error ? {...error} : null; - updateEthereumWallet({ + updateL1Wallet({ account, status, chainId, @@ -87,7 +87,7 @@ export const WalletsProvider = ({children}) => { }); }; - const maybeUpdateStarknetWallet = async () => { + const maybeUpdateL2Wallet = async () => { let status, error = null; try { @@ -97,11 +97,11 @@ export const WalletsProvider = ({children}) => { error = ex; status = WalletStatus.ERROR; } finally { - updateStarknetWallet({ + updateL2Wallet({ status, chainId, error, - isConnected: isStarknetConnected, + isConnected: isL2Connected, account: selectedAddress, chainName: networkName, library: getStarknet() @@ -110,30 +110,30 @@ export const WalletsProvider = ({children}) => { }; // Dispatchers - const updateEthereumWallet = payload => { + const updateL1Wallet = payload => { dispatch({ - type: actions.UPDATE_ETHEREUM_WALLET, + type: actions.UPDATE_L1_WALLET, payload }); }; - const updateStarknetWallet = payload => { + const updateL2Wallet = payload => { dispatch({ - type: actions.UPDATE_STARKNET_WALLET, + type: actions.UPDATE_L2_WALLET, payload }); }; - const setEthereumWalletConfig = payload => { + const setL1WalletConfig = payload => { dispatch({ - type: actions.SET_ETHEREUM_WALLET_CONFIG, + type: actions.SET_L1_WALLET_CONFIG, payload }); }; - const setStarknetWalletConfig = payload => { + const setL2WalletConfig = payload => { dispatch({ - type: actions.SET_STARKNET_WALLET_CONFIG, + type: actions.SET_L2_WALLET_CONFIG, payload }); }; @@ -142,11 +142,11 @@ export const WalletsProvider = ({children}) => { const context = { ...state, connectWallet, - connectEthereumWallet, - connectStarknetWallet, + connectL1Wallet, + connectL2Wallet, resetWallet, - resetEthereumWallet, - resetStarknetWallet, + resetL1Wallet, + resetL2Wallet, swapWallets }; diff --git a/src/providers/WalletsProvider/wallets-context.js b/src/providers/WalletsProvider/wallets-context.js index 1d4f7f16..78896b0c 100644 --- a/src/providers/WalletsProvider/wallets-context.js +++ b/src/providers/WalletsProvider/wallets-context.js @@ -4,11 +4,11 @@ import {initialState} from './wallets-reducer'; export const WalletsContext = createContext({ ...initialState, - connectEthereumWallet: () => {}, - connectStarknetWallet: () => {}, + connectL1Wallet: () => {}, + connectL2Wallet: () => {}, connectWallet: () => {}, resetWallet: () => {}, - resetEthereumWallet: () => {}, - resetStarknetWallet: () => {}, + resetL1Wallet: () => {}, + resetL2Wallet: () => {}, swapWallets: () => {} }); diff --git a/src/providers/WalletsProvider/wallets-hooks.js b/src/providers/WalletsProvider/wallets-hooks.js index e9f76285..9718c995 100644 --- a/src/providers/WalletsProvider/wallets-hooks.js +++ b/src/providers/WalletsProvider/wallets-hooks.js @@ -5,16 +5,16 @@ import {WalletsContext} from './wallets-context'; export const useWallets = () => { const wallets = useContext(WalletsContext); - const [activeWallet, setActiveWallet] = useState(wallets.ethereumWallet); - const {isEthereum} = useTransferData(); + const [activeWallet, setActiveWallet] = useState(wallets.l1Wallet); + const {isL1} = useTransferData(); const connectWallet = useCallback(walletConfig => wallets.connectWallet(walletConfig), []); const resetWallet = useCallback(() => wallets.resetWallet(), []); const swapWallets = useCallback(() => wallets.swapWallets(), []); useEffect(() => { - setActiveWallet(isEthereum ? wallets.ethereumWallet : wallets.starknetWallet); - }, [isEthereum, wallets]); + setActiveWallet(isL1 ? wallets.l1Wallet : wallets.l2Wallet); + }, [isL1, wallets]); return { ...activeWallet, @@ -24,28 +24,22 @@ export const useWallets = () => { }; }; -export const useEthereumWallet = () => { +export const useL1Wallet = () => { const wallets = useContext(WalletsContext); - const connectWallet = useCallback( - walletConfig => wallets.connectEthereumWallet(walletConfig), - [] - ); + const connectWallet = useCallback(walletConfig => wallets.connectL1Wallet(walletConfig), []); return { connectWallet, - ...wallets.ethereumWallet + ...wallets.l1Wallet }; }; -export const useStarknetWallet = () => { +export const useL2Wallet = () => { const wallets = useContext(WalletsContext); - const connectWallet = useCallback( - walletConfig => wallets.connectStarknetWallet(walletConfig), - [] - ); + const connectWallet = useCallback(walletConfig => wallets.connectL2Wallet(walletConfig), []); return { connectWallet, - ...wallets.starknetWallet + ...wallets.l2Wallet }; }; diff --git a/src/providers/WalletsProvider/wallets-reducer.js b/src/providers/WalletsProvider/wallets-reducer.js index 43ecc6d7..2d2902a5 100644 --- a/src/providers/WalletsProvider/wallets-reducer.js +++ b/src/providers/WalletsProvider/wallets-reducer.js @@ -1,10 +1,10 @@ import {WalletStatus} from '../../enums'; export const actions = { - UPDATE_ETHEREUM_WALLET: 'CombineWallets/UPDATE_ETHEREUM_WALLET', - UPDATE_STARKNET_WALLET: 'CombineWallets/UPDATE_STARKNET_WALLET', - SET_ETHEREUM_WALLET_CONFIG: 'CombineWallets/SET_ETHEREUM_WALLET_CONFIG', - SET_STARKNET_WALLET_CONFIG: 'CombineWallets/SET_STARKNET_WALLET_CONFIG' + UPDATE_L1_WALLET: 'Wallets/UPDATE_L1_WALLET', + UPDATE_L2_WALLET: 'Wallets/UPDATE_L2_WALLET', + SET_L1_WALLET_CONFIG: 'Wallets/SET_L1_WALLET_CONFIG', + SET_L2_WALLET_CONFIG: 'Wallets/SET_L2_WALLET_CONFIG' }; const initialWalletState = { @@ -19,42 +19,42 @@ const initialWalletState = { }; export const initialState = { - ethereumWallet: { + l1Wallet: { ...initialWalletState }, - starknetWallet: { + l2Wallet: { ...initialWalletState } }; export const reducer = (state, action) => { switch (action.type) { - case actions.UPDATE_ETHEREUM_WALLET: + case actions.UPDATE_L1_WALLET: return { ...state, - ethereumWallet: {...state.ethereumWallet, ...action.payload} + l1Wallet: {...state.l1Wallet, ...action.payload} }; - case actions.UPDATE_STARKNET_WALLET: + case actions.UPDATE_L2_WALLET: return { ...state, - starknetWallet: {...state.starknetWallet, ...action.payload} + l2Wallet: {...state.l2Wallet, ...action.payload} }; - case actions.SET_ETHEREUM_WALLET_CONFIG: + case actions.SET_L1_WALLET_CONFIG: return { ...state, - ethereumWallet: { - ...state.ethereumWallet, + l1Wallet: { + ...state.l1Wallet, config: action.payload } }; - case actions.SET_STARKNET_WALLET_CONFIG: + case actions.SET_L2_WALLET_CONFIG: return { ...state, - starknetWallet: { - ...state.starknetWallet, + l2Wallet: { + ...state.l2Wallet, config: action.payload } }; diff --git a/src/utils/contract.js b/src/utils/contract.js index 45b44517..f06f22d7 100644 --- a/src/utils/contract.js +++ b/src/utils/contract.js @@ -5,9 +5,9 @@ import {TransactionConsumedStatuses} from '../enums'; import {getLogger} from '../services'; import {web3} from '../web3'; -export const eth_getContract = (address, ABI) => new web3.eth.Contract(ABI, address); +export const l1_getContract = (address, ABI) => new web3.eth.Contract(ABI, address); -export const eth_callContract = async (contract, method, args = []) => { +export const l1_callContract = async (contract, method, args = []) => { try { return await contract.methods?.[method](...args).call(); } catch (ex) { @@ -15,7 +15,7 @@ export const eth_callContract = async (contract, method, args = []) => { } }; -export const eth_sendTransaction = async ( +export const l1_sendTransaction = async ( contract, method, args = [], @@ -29,14 +29,9 @@ export const eth_sendTransaction = async ( } }; -export const eth_listenOnce = async (contract, event, callback) => { - contract.once(event, null, (error, event) => callback(error, event)); -}; - -export const starknet_getContract = (address, ABI) => - new Contract(ABI, address, getStarknet().provider); +export const l2_getContract = (address, ABI) => new Contract(ABI, address, getStarknet().provider); -export const starknet_callContract = async (contract, method, args = []) => { +export const l2_callContract = async (contract, method, args = []) => { try { return await contract.call(method, ...args); } catch (ex) { @@ -44,7 +39,7 @@ export const starknet_callContract = async (contract, method, args = []) => { } }; -export const starknet_sendTransaction = async (contract, method, args = {}) => { +export const l2_sendTransaction = async (contract, method, args = {}) => { try { const methodSelector = stark.getSelectorFromName(method); const compiledCalldata = compileCalldata(args); @@ -58,8 +53,8 @@ export const starknet_sendTransaction = async (contract, method, args = {}) => { } }; -export const starknet_waitForTransaction = async (hash, customStatus, retryInterval = 5000) => { - const logger = getLogger('starknet_waitForTransaction'); +export const l2_waitForTransaction = async (hash, customStatus, retryInterval = 5000) => { + const logger = getLogger('l2_waitForTransaction'); return new Promise(resolve => { let processing = false; const waitingForStatuses = customStatus ? [customStatus] : TransactionConsumedStatuses; diff --git a/src/utils/hash.js b/src/utils/hash.js index 377c26ec..cae90d11 100644 --- a/src/utils/hash.js +++ b/src/utils/hash.js @@ -1,18 +1,18 @@ import {hash, number} from 'starknet'; -import {STARKNET_INVOKE_TX_PREFIX} from '../constants'; +import {L2_INVOKE_TX_PREFIX} from '../constants'; import {byChainId} from '../enums'; export const txHash = (fromAddress, toAddress, selector, payload, chainId) => { const calldata = [number.hexToDecimalString(fromAddress), ...payload]; const calldataHash = hash.hashCalldata(calldata); - const {starknetIdPrefix} = byChainId(chainId); + const {l2IdPrefix} = byChainId(chainId); return hash.computeHashOnElements([ - STARKNET_INVOKE_TX_PREFIX, + L2_INVOKE_TX_PREFIX, toAddress, selector, calldataHash, - starknetIdPrefix + l2IdPrefix ]); }; diff --git a/src/utils/token.js b/src/utils/token.js index 3718e981..bf82c3d0 100644 --- a/src/utils/token.js +++ b/src/utils/token.js @@ -8,5 +8,5 @@ export const isEth = tokenData => { } else if (typeof tokenData === 'string') { symbol = tokenData; } - return symbol === NetworkType.ETHEREUM.symbol; + return symbol === NetworkType.L1.symbol; }; From f55d1005050d0a4b1f830abb514cfb7cdca7bb75 Mon Sep 17 00:00:00 2001 From: Dan Ziv Date: Wed, 12 Jan 2022 17:47:08 +0200 Subject: [PATCH 2/9] update logo --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 31a02ecb..044d7198 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@

- +

Token Bridge for StarkNet

From cf3b07c0aab42da5be3efe11f81ef75167b90fc5 Mon Sep 17 00:00:00 2001 From: Dan Ziv Date: Wed, 12 Jan 2022 20:59:42 +0200 Subject: [PATCH 3/9] change setL1/2 naming --- src/components/Containers/Header/Header.js | 8 ++++---- src/components/Features/Transfer/Transfer.hooks.js | 8 ++++---- src/components/Features/Transfer/Transfer.js | 6 +++--- src/providers/WalletsProvider/WalletsProvider.js | 8 ++++---- 4 files changed, 15 insertions(+), 15 deletions(-) diff --git a/src/components/Containers/Header/Header.js b/src/components/Containers/Header/Header.js index 7e8fb377..58bc89c5 100644 --- a/src/components/Containers/Header/Header.js +++ b/src/components/Containers/Header/Header.js @@ -13,18 +13,18 @@ import {CHAIN_TXT} from './Header.strings'; export const Header = () => { const {chainName, isConnected} = useWallets(); const {showAccountMenu, showTransferMenu} = useBridgeActions(); - const [, setL1] = useIsL1(); - const [, setL2] = useIsL2(); + const [, swapToL1] = useIsL1(); + const [, swapToL2] = useIsL2(); const {account: l1Account, isConnected: isL1AccountConnected, config: l1Config} = useL1Wallet(); const {account: l2Account, isConnected: isL2AccountConnected, config: l2Config} = useL2Wallet(); const onL2WalletButtonClick = () => { - setL2(); + swapToL2(); showAccountMenu(); }; const onL1WalletButtonClick = () => { - setL1(); + swapToL1(); showAccountMenu(); }; diff --git a/src/components/Features/Transfer/Transfer.hooks.js b/src/components/Features/Transfer/Transfer.hooks.js index 350cf92e..ca624f7d 100644 --- a/src/components/Features/Transfer/Transfer.hooks.js +++ b/src/components/Features/Transfer/Transfer.hooks.js @@ -49,14 +49,14 @@ export const useAmount = () => { export const useIsL1 = () => { const isL1 = useSelector(toL2Selector); - const setL1 = useSetActionType(ActionType.TRANSFER_TO_L2); - return [isL1, setL1]; + const swapToL1 = useSetActionType(ActionType.TRANSFER_TO_L2); + return [isL1, swapToL1]; }; export const useIsL2 = () => { const isL2 = useSelector(toL1Selector); - const setL2 = useSetActionType(ActionType.TRANSFER_TO_L1); - return [isL2, setL2]; + const swapToL2 = useSetActionType(ActionType.TRANSFER_TO_L1); + return [isL2, swapToL2]; }; const useSetAmount = () => { diff --git a/src/components/Features/Transfer/Transfer.js b/src/components/Features/Transfer/Transfer.js index fad1f68f..b978e84f 100644 --- a/src/components/Features/Transfer/Transfer.js +++ b/src/components/Features/Transfer/Transfer.js @@ -19,8 +19,8 @@ import styles from './Transfer.module.scss'; import {INSUFFICIENT_BALANCE_ERROR_MSG} from './Transfer.strings'; export const Transfer = () => { - const [isL1, setL1] = useIsL1(); - const [isL2, setL2] = useIsL2(); + const [isL1, swapToL1] = useIsL1(); + const [isL2, swapToL2] = useIsL2(); const [amount, setAmount] = useAmount(); const [hasInputError, setHasInputError] = useState(false); const [isButtonDisabled, setIsButtonDisabled] = useState(true); @@ -64,7 +64,7 @@ export const Transfer = () => { }; const onSwapClick = () => { - isL2 ? setL1() : setL2(); + isL2 ? swapToL1() : swapToL2(); }; const onTransferClick = async () => (isL1 ? transferToL2(amount) : transferToL1(amount)); diff --git a/src/providers/WalletsProvider/WalletsProvider.js b/src/providers/WalletsProvider/WalletsProvider.js index 485f5026..8428ddb8 100644 --- a/src/providers/WalletsProvider/WalletsProvider.js +++ b/src/providers/WalletsProvider/WalletsProvider.js @@ -15,8 +15,8 @@ export const WalletsProvider = ({children}) => { const [state, dispatch] = useReducer(reducer, initialState); const {status, connect, reset, isConnected, error, account, chainId, networkName} = useWallet(); const {selectedAddress, isConnected: isL2Connected, enable} = getStarknet(); - const [isL1, setL1] = useIsL1(); - const [isL2, setL2] = useIsL2(); + const [isL1, swapToL1] = useIsL1(); + const [isL2, swapToL2] = useIsL2(); // Handles starknet wallet changes useEffect(() => { @@ -65,10 +65,10 @@ export const WalletsProvider = ({children}) => { const swapWallets = async () => { if (state.l1Wallet.config && !state.l2Wallet.config) { - setL1(); + swapToL1(); maybeUpdateL1Wallet(); } else if (state.l2Wallet.config && !state.l1Wallet.config) { - setL2(); + swapToL2(); await maybeUpdateL2Wallet(); } }; From 769ee593217b364cf5cdc96cfaeca0bce8ecbcea Mon Sep 17 00:00:00 2001 From: Dan Ziv Date: Wed, 12 Jan 2022 21:31:54 +0200 Subject: [PATCH 4/9] update abis --- src/abis/l1/{erc20.json => ERC20.json} | 0 ...h-bridge.json => StarknetERC20Bridge.json} | 33 ++++++++++++++++++- ...c20-bridge.json => StarknetEthBridge.json} | 33 +++++++++++++++---- ...{messaging.json => StarknetMessaging.json} | 0 src/abis/l1/index.js | 8 ++--- src/abis/l2/{erc20.json => ERC20.json} | 0 src/abis/l2/index.js | 4 +-- .../l2/{bridge.json => token_bridge.json} | 14 ++++---- 8 files changed, 72 insertions(+), 20 deletions(-) rename src/abis/l1/{erc20.json => ERC20.json} (100%) rename src/abis/l1/{eth-bridge.json => StarknetERC20Bridge.json} (90%) rename src/abis/l1/{erc20-bridge.json => StarknetEthBridge.json} (93%) rename src/abis/l1/{messaging.json => StarknetMessaging.json} (100%) rename src/abis/l2/{erc20.json => ERC20.json} (100%) rename src/abis/l2/{bridge.json => token_bridge.json} (87%) diff --git a/src/abis/l1/erc20.json b/src/abis/l1/ERC20.json similarity index 100% rename from src/abis/l1/erc20.json rename to src/abis/l1/ERC20.json diff --git a/src/abis/l1/eth-bridge.json b/src/abis/l1/StarknetERC20Bridge.json similarity index 90% rename from src/abis/l1/eth-bridge.json rename to src/abis/l1/StarknetERC20Bridge.json index 85c0ed78..b371dbcd 100644 --- a/src/abis/l1/eth-bridge.json +++ b/src/abis/l1/StarknetERC20Bridge.json @@ -129,6 +129,11 @@ }, { "inputs": [ + { + "internalType": "uint256", + "name": "amount", + "type": "uint256" + }, { "internalType": "uint256", "name": "l2Recipient", @@ -137,7 +142,7 @@ ], "name": "deposit", "outputs": [], - "stateMutability": "payable", + "stateMutability": "nonpayable", "type": "function" }, { @@ -166,6 +171,32 @@ "stateMutability": "view", "type": "function" }, + { + "inputs": [], + "name": "maxDeposit", + "outputs": [ + { + "internalType": "uint256", + "name": "", + "type": "uint256" + } + ], + "stateMutability": "view", + "type": "function" + }, + { + "inputs": [], + "name": "maxTotalBalance", + "outputs": [ + { + "internalType": "uint256", + "name": "", + "type": "uint256" + } + ], + "stateMutability": "view", + "type": "function" + }, { "inputs": [ { diff --git a/src/abis/l1/erc20-bridge.json b/src/abis/l1/StarknetEthBridge.json similarity index 93% rename from src/abis/l1/erc20-bridge.json rename to src/abis/l1/StarknetEthBridge.json index a303ef24..198423a3 100644 --- a/src/abis/l1/erc20-bridge.json +++ b/src/abis/l1/StarknetEthBridge.json @@ -129,11 +129,6 @@ }, { "inputs": [ - { - "internalType": "uint256", - "name": "amount", - "type": "uint256" - }, { "internalType": "uint256", "name": "l2Recipient", @@ -142,7 +137,7 @@ ], "name": "deposit", "outputs": [], - "stateMutability": "nonpayable", + "stateMutability": "payable", "type": "function" }, { @@ -171,6 +166,32 @@ "stateMutability": "view", "type": "function" }, + { + "inputs": [], + "name": "maxDeposit", + "outputs": [ + { + "internalType": "uint256", + "name": "", + "type": "uint256" + } + ], + "stateMutability": "view", + "type": "function" + }, + { + "inputs": [], + "name": "maxTotalBalance", + "outputs": [ + { + "internalType": "uint256", + "name": "", + "type": "uint256" + } + ], + "stateMutability": "view", + "type": "function" + }, { "inputs": [ { diff --git a/src/abis/l1/messaging.json b/src/abis/l1/StarknetMessaging.json similarity index 100% rename from src/abis/l1/messaging.json rename to src/abis/l1/StarknetMessaging.json diff --git a/src/abis/l1/index.js b/src/abis/l1/index.js index 41ce55c6..7ec6db8f 100644 --- a/src/abis/l1/index.js +++ b/src/abis/l1/index.js @@ -1,6 +1,6 @@ -import L1_ERC20_BRIDGE_ABI from './erc20-bridge.json'; -import L1_ERC20_ABI from './erc20.json'; -import L1_ETH_BRIDGE_ABI from './eth-bridge.json'; -import L1_MESSAGING_ABI from './messaging.json'; +import L1_ERC20_ABI from './ERC20.json'; +import L1_ERC20_BRIDGE_ABI from './StarknetERC20Bridge.json'; +import L1_ETH_BRIDGE_ABI from './StarknetEthBridge.json'; +import L1_MESSAGING_ABI from './StarknetMessaging.json'; export {L1_ERC20_ABI, L1_ERC20_BRIDGE_ABI, L1_ETH_BRIDGE_ABI, L1_MESSAGING_ABI}; diff --git a/src/abis/l2/erc20.json b/src/abis/l2/ERC20.json similarity index 100% rename from src/abis/l2/erc20.json rename to src/abis/l2/ERC20.json diff --git a/src/abis/l2/index.js b/src/abis/l2/index.js index 58d01b2e..3b1acb7d 100644 --- a/src/abis/l2/index.js +++ b/src/abis/l2/index.js @@ -1,4 +1,4 @@ -import L2_BRIDGE_ABI from './bridge.json'; -import L2_ERC20_ABI from './erc20.json'; +import L2_ERC20_ABI from './ERC20.json'; +import L2_BRIDGE_ABI from './token_bridge.json'; export {L2_ERC20_ABI, L2_BRIDGE_ABI}; diff --git a/src/abis/l2/bridge.json b/src/abis/l2/token_bridge.json similarity index 87% rename from src/abis/l2/bridge.json rename to src/abis/l2/token_bridge.json index 1c19e58a..5b21bd99 100644 --- a/src/abis/l2/bridge.json +++ b/src/abis/l2/token_bridge.json @@ -19,7 +19,7 @@ { "inputs": [ { - "name": "governance_account_address", + "name": "governor_address", "type": "felt" } ], @@ -29,7 +29,7 @@ }, { "inputs": [], - "name": "governance_address", + "name": "get_governor", "outputs": [ { "name": "res", @@ -41,7 +41,7 @@ }, { "inputs": [], - "name": "l1_contract_address", + "name": "get_l1_bridge", "outputs": [ { "name": "res", @@ -53,7 +53,7 @@ }, { "inputs": [], - "name": "l2_token_contract_address", + "name": "get_l2_token", "outputs": [ { "name": "res", @@ -66,11 +66,11 @@ { "inputs": [ { - "name": "l1_contract_address", + "name": "l1_bridge_address", "type": "felt" } ], - "name": "set_l1_bridge_address", + "name": "set_l1_bridge", "outputs": [], "type": "function" }, @@ -81,7 +81,7 @@ "type": "felt" } ], - "name": "set_l2_token_address", + "name": "set_l2_token", "outputs": [], "type": "function" }, From c783e6206282108c0018b1b5f1fb25946c12de7e Mon Sep 17 00:00:00 2001 From: Dan Ziv Date: Wed, 12 Jan 2022 21:51:19 +0200 Subject: [PATCH 5/9] feat --- src/api/bridge.js | 13 +++++++++++-- src/hooks/useTransfer.js | 13 ++++++++++++- 2 files changed, 23 insertions(+), 3 deletions(-) diff --git a/src/api/bridge.js b/src/api/bridge.js index ff52bfc0..7b038543 100644 --- a/src/api/bridge.js +++ b/src/api/bridge.js @@ -1,5 +1,5 @@ -import {parseToDecimals, parseToFelt, parseToUint256} from '../utils'; -import {l1_sendTransaction, l2_sendTransaction} from '../utils/contract'; +import {parseFromDecimals, parseToDecimals, parseToFelt, parseToUint256} from '../utils'; +import {l1_callContract, l1_sendTransaction, l2_sendTransaction} from '../utils/contract'; export const deposit = async ({recipient, amount, decimals, contract, options, emitter}) => { try { @@ -48,6 +48,15 @@ export const withdraw = async ({recipient, amount, decimals, contract, emitter}) } }; +export const maxDeposit = async ({decimals, contract}) => { + try { + const maxDeposit = await l1_callContract(contract, 'maxDeposit'); + return parseFromDecimals(maxDeposit, decimals); + } catch (ex) { + return Promise.reject(ex); + } +}; + export const initiateWithdraw = async ({recipient, amount, decimals, contract}) => { try { return l2_sendTransaction(contract, 'initiate_withdraw', { diff --git a/src/hooks/useTransfer.js b/src/hooks/useTransfer.js index b06e4658..1aaa85f7 100644 --- a/src/hooks/useTransfer.js +++ b/src/hooks/useTransfer.js @@ -1,7 +1,7 @@ import {useCallback} from 'react'; import {constants} from 'starknet'; -import {deposit, depositEth, initiateWithdraw, withdraw} from '../api/bridge'; +import {deposit, depositEth, initiateWithdraw, maxDeposit, withdraw} from '../api/bridge'; import {allowance, approve} from '../api/erc20'; import { useErrorModal, @@ -65,6 +65,17 @@ export const useTransferToL2 = () => { }); } } + const maxAmount = await maxDeposit({decimals, contract: bridgeContract}); + logger.log(`Max amount to transfer for token is ${maxAmount}`); + if (amount > maxAmount) { + logger.log(`Transfer amount is bigger then max amount`, {amount, maxAmount}); + handleError( + progressOptions.error( + new Error(`You are not allow to transfer more then ${maxAmount} ${symbol}`) + ) + ); + return; + } handleProgress(progressOptions.waitForConfirm(l1Config.name)); const logMessageToL2EventPromise = addLogMessageToL2Listener(); logger.log('Calling deposit'); From c8d68f4a8d79fcc6fe5627c0821ce6223f712718 Mon Sep 17 00:00:00 2001 From: Dan Ziv Date: Wed, 12 Jan 2022 22:01:30 +0200 Subject: [PATCH 6/9] fix imports --- src/api/bridge.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/api/bridge.js b/src/api/bridge.js index 5e50e335..7b038543 100644 --- a/src/api/bridge.js +++ b/src/api/bridge.js @@ -1,5 +1,5 @@ -import {parseToDecimals, parseToFelt, parseToUint256} from '../utils'; -import {l1_sendTransaction, l2_sendTransaction} from '../utils/contract'; +import {parseFromDecimals, parseToDecimals, parseToFelt, parseToUint256} from '../utils'; +import {l1_callContract, l1_sendTransaction, l2_sendTransaction} from '../utils/contract'; export const deposit = async ({recipient, amount, decimals, contract, options, emitter}) => { try { From 6e745d62ef295e2c7f48225da73b411297ae5ad0 Mon Sep 17 00:00:00 2001 From: Dan Ziv Date: Mon, 17 Jan 2022 12:34:53 +0200 Subject: [PATCH 7/9] move validation to user input --- package.json | 1 + .../Features/Transfer/Transfer.hooks.js | 1 + src/components/Features/Transfer/Transfer.js | 38 +++++++++++++++---- .../Features/Transfer/Transfer.strings.js | 2 + src/config/strings.json | 1 + src/hooks/useTransfer.js | 13 +------ yarn.lock | 5 +++ 7 files changed, 42 insertions(+), 19 deletions(-) diff --git a/package.json b/package.json index 6b6cf5a6..a0e54760 100644 --- a/package.json +++ b/package.json @@ -56,6 +56,7 @@ "react-redux": "^7.2.6", "react-scripts": "4.0.3", "starknet": "^2.5.0", + "use-async-memo": "^1.2.3", "use-deep-compare-effect": "^1.8.1", "use-wallet": "^0.13.4", "uuid": "^8.3.2", diff --git a/src/components/Features/Transfer/Transfer.hooks.js b/src/components/Features/Transfer/Transfer.hooks.js index ca624f7d..040de3eb 100644 --- a/src/components/Features/Transfer/Transfer.hooks.js +++ b/src/components/Features/Transfer/Transfer.hooks.js @@ -25,6 +25,7 @@ export const useTransferData = () => { return { ...useSelector(selectTransfer), selectedToken: useSelectedToken(), + symbol: useSelector(selectSymbol), isL1: useSelector(toL2Selector), isL2: useSelector(toL1Selector), fromNetwork: useSelector(fromNetworkSelector), diff --git a/src/components/Features/Transfer/Transfer.js b/src/components/Features/Transfer/Transfer.js index b978e84f..5408274b 100644 --- a/src/components/Features/Transfer/Transfer.js +++ b/src/components/Features/Transfer/Transfer.js @@ -1,8 +1,11 @@ import React, {useEffect, useState} from 'react'; +import {useAsyncMemo} from 'use-async-memo'; +import {maxDeposit} from '../../../api/bridge'; import {ActionType, NetworkType} from '../../../enums'; -import {useTransferToL1, useTransferToL2} from '../../../hooks'; +import {useTokenBridgeContract, useTransferToL1, useTransferToL2} from '../../../hooks'; import {useL1Token, useL2Token, useTokens} from '../../../providers/TokensProvider'; +import {evaluate} from '../../../utils'; import { Loading, Menu, @@ -16,22 +19,33 @@ import {LoadingSize} from '../../UI/Loading/Loading.enums'; import {useBridgeActions} from '../Bridge/Bridge.hooks'; import {useAmount, useIsL1, useIsL2, useTransferActions, useTransferData} from './Transfer.hooks'; import styles from './Transfer.module.scss'; -import {INSUFFICIENT_BALANCE_ERROR_MSG} from './Transfer.strings'; +import {INSUFFICIENT_BALANCE_ERROR_MSG, MAX_AMOUNT_ERROR_MSG} from './Transfer.strings'; export const Transfer = () => { const [isL1, swapToL1] = useIsL1(); const [isL2, swapToL2] = useIsL2(); const [amount, setAmount] = useAmount(); + const [maxAmount, setMaxAmount] = useState(null); const [hasInputError, setHasInputError] = useState(false); + const [errorMsg, setErrorMsg] = useState(''); const [isButtonDisabled, setIsButtonDisabled] = useState(true); const {showSelectTokenMenu} = useBridgeActions(); - const {selectedToken, action} = useTransferData(); + const {selectedToken, action, symbol} = useTransferData(); const {selectToken} = useTransferActions(); const transferToL2 = useTransferToL2(); const transferToL1 = useTransferToL1(); const {tokens} = useTokens(); const getL1Token = useL1Token(); const getL2Token = useL2Token(); + const getTokenBridgeContract = useTokenBridgeContract(); + + const memoizedMaxAmount = useAsyncMemo(async () => { + if (symbol) { + const {decimals, bridgeAddress} = selectedToken; + const contract = getTokenBridgeContract(bridgeAddress); + return await maxDeposit({decimals, contract}); + } + }, [symbol]); useEffect(() => { if (!selectedToken) { @@ -40,23 +54,33 @@ export const Transfer = () => { }, []); useEffect(() => { + setMaxAmount(isL1 ? memoizedMaxAmount : null); if (selectedToken) { setHasInputError(false); - if (selectedToken.isLoading || Math.ceil(amount) === 0) { + if (selectedToken.isLoading || Math.ceil(amount) === 0 || (isL1 && !maxAmount)) { setIsButtonDisabled(true); } else { if (amount > selectedToken.balance) { setHasInputError(true); + setErrorMsg(INSUFFICIENT_BALANCE_ERROR_MSG); + setIsButtonDisabled(true); + } else if (isL1 && amount > maxAmount) { + setHasInputError(true); + setErrorMsg(evaluate(MAX_AMOUNT_ERROR_MSG, {maxAmount, symbol})); setIsButtonDisabled(true); } else { setIsButtonDisabled(false); } } } - }, [amount, selectedToken]); + }, [amount, selectedToken, memoizedMaxAmount, maxAmount, isL1]); const onMaxClick = () => { - setAmount(selectedToken.balance.toString()); + try { + setAmount(Math.min(selectedToken.balance, Number(memoizedMaxAmount))); + } catch (ex) { + setAmount(selectedToken.balance); + } }; const onInputChange = event => { @@ -111,7 +135,7 @@ export const Transfer = () => { onMaxClick={onMaxClick} onTokenSelect={showSelectTokenMenu} /> - {hasInputError &&
{INSUFFICIENT_BALANCE_ERROR_MSG}
} + {hasInputError &&
{errorMsg}
} ); diff --git a/src/components/Features/Transfer/Transfer.strings.js b/src/components/Features/Transfer/Transfer.strings.js index f58096de..d5a2419c 100644 --- a/src/components/Features/Transfer/Transfer.strings.js +++ b/src/components/Features/Transfer/Transfer.strings.js @@ -3,3 +3,5 @@ import {getString} from '../../../utils'; export const INSUFFICIENT_BALANCE_ERROR_MSG = getString( 'menus.transfer.insufficient_balance_error_msg' ); + +export const MAX_AMOUNT_ERROR_MSG = getString('menus.transfer.max_amount_error_msg'); diff --git a/src/config/strings.json b/src/config/strings.json index eea2cf4d..ee3f6369 100644 --- a/src/config/strings.json +++ b/src/config/strings.json @@ -38,6 +38,7 @@ "to_txt": "to", "from_txt": "from", "insufficient_balance_error_msg": "Insufficient balance", + "max_amount_error_msg": "StarkNet Alpha Limitations: max allowed transfer to StarkNet is {{maxAmount}} {{symbol}}.", "max_btn_txt": "Max", "balance_title_txt": "Available balance", "input_placeholder_txt": "0.00", diff --git a/src/hooks/useTransfer.js b/src/hooks/useTransfer.js index 1aaa85f7..b06e4658 100644 --- a/src/hooks/useTransfer.js +++ b/src/hooks/useTransfer.js @@ -1,7 +1,7 @@ import {useCallback} from 'react'; import {constants} from 'starknet'; -import {deposit, depositEth, initiateWithdraw, maxDeposit, withdraw} from '../api/bridge'; +import {deposit, depositEth, initiateWithdraw, withdraw} from '../api/bridge'; import {allowance, approve} from '../api/erc20'; import { useErrorModal, @@ -65,17 +65,6 @@ export const useTransferToL2 = () => { }); } } - const maxAmount = await maxDeposit({decimals, contract: bridgeContract}); - logger.log(`Max amount to transfer for token is ${maxAmount}`); - if (amount > maxAmount) { - logger.log(`Transfer amount is bigger then max amount`, {amount, maxAmount}); - handleError( - progressOptions.error( - new Error(`You are not allow to transfer more then ${maxAmount} ${symbol}`) - ) - ); - return; - } handleProgress(progressOptions.waitForConfirm(l1Config.name)); const logMessageToL2EventPromise = addLogMessageToL2Listener(); logger.log('Calling deposit'); diff --git a/yarn.lock b/yarn.lock index c7b47687..af9a52de 100644 --- a/yarn.lock +++ b/yarn.lock @@ -16366,6 +16366,11 @@ usb@^1.6.0: node-addon-api "^4.2.0" node-gyp-build "^4.3.0" +use-async-memo@^1.2.3: + version "1.2.3" + resolved "https://registry.yarnpkg.com/use-async-memo/-/use-async-memo-1.2.3.tgz#fe49d7ae1cd850199cf9e4a8ee483e31ed85659f" + integrity sha512-AjZ1Wy1vfOSlaxohqoLIpauV+jwph/p0N72PBzxeEcjrZ4Mf/4o1Vav4bLaAPYuHLJZo+4M/4TIcAk7XC6H98g== + use-deep-compare-effect@^1.8.1: version "1.8.1" resolved "https://registry.yarnpkg.com/use-deep-compare-effect/-/use-deep-compare-effect-1.8.1.tgz#ef0ce3b3271edb801da1ec23bf0754ef4189d0c6" From 0be6f7f97f7b8085a249ec22b5e1f9596b0d0454 Mon Sep 17 00:00:00 2001 From: Dan Ziv Date: Mon, 17 Jan 2022 14:12:30 +0200 Subject: [PATCH 8/9] move evaluate to string --- src/components/Features/Transfer/Transfer.js | 6 ++---- src/components/Features/Transfer/Transfer.strings.js | 5 +++-- 2 files changed, 5 insertions(+), 6 deletions(-) diff --git a/src/components/Features/Transfer/Transfer.js b/src/components/Features/Transfer/Transfer.js index 5408274b..b7dbb306 100644 --- a/src/components/Features/Transfer/Transfer.js +++ b/src/components/Features/Transfer/Transfer.js @@ -5,7 +5,6 @@ import {maxDeposit} from '../../../api/bridge'; import {ActionType, NetworkType} from '../../../enums'; import {useTokenBridgeContract, useTransferToL1, useTransferToL2} from '../../../hooks'; import {useL1Token, useL2Token, useTokens} from '../../../providers/TokensProvider'; -import {evaluate} from '../../../utils'; import { Loading, Menu, @@ -32,13 +31,12 @@ export const Transfer = () => { const {showSelectTokenMenu} = useBridgeActions(); const {selectedToken, action, symbol} = useTransferData(); const {selectToken} = useTransferActions(); + const {tokens} = useTokens(); const transferToL2 = useTransferToL2(); const transferToL1 = useTransferToL1(); - const {tokens} = useTokens(); const getL1Token = useL1Token(); const getL2Token = useL2Token(); const getTokenBridgeContract = useTokenBridgeContract(); - const memoizedMaxAmount = useAsyncMemo(async () => { if (symbol) { const {decimals, bridgeAddress} = selectedToken; @@ -66,7 +64,7 @@ export const Transfer = () => { setIsButtonDisabled(true); } else if (isL1 && amount > maxAmount) { setHasInputError(true); - setErrorMsg(evaluate(MAX_AMOUNT_ERROR_MSG, {maxAmount, symbol})); + setErrorMsg(MAX_AMOUNT_ERROR_MSG(maxAmount, symbol)); setIsButtonDisabled(true); } else { setIsButtonDisabled(false); diff --git a/src/components/Features/Transfer/Transfer.strings.js b/src/components/Features/Transfer/Transfer.strings.js index d5a2419c..392f5ff4 100644 --- a/src/components/Features/Transfer/Transfer.strings.js +++ b/src/components/Features/Transfer/Transfer.strings.js @@ -1,7 +1,8 @@ -import {getString} from '../../../utils'; +import {evaluate, getString} from '../../../utils'; export const INSUFFICIENT_BALANCE_ERROR_MSG = getString( 'menus.transfer.insufficient_balance_error_msg' ); -export const MAX_AMOUNT_ERROR_MSG = getString('menus.transfer.max_amount_error_msg'); +export const MAX_AMOUNT_ERROR_MSG = (maxAmount, symbol) => + evaluate(getString('menus.transfer.max_amount_error_msg'), {maxAmount, symbol}); From 7fd73ea8a15e3e2f18763d74f63d265cbf3eab0e Mon Sep 17 00:00:00 2001 From: Dan Ziv Date: Tue, 18 Jan 2022 00:01:00 +0200 Subject: [PATCH 9/9] fixes --- src/components/Features/Transfer/Transfer.js | 19 +++---------- src/config/strings.json | 2 +- src/hooks/index.js | 1 + src/hooks/useMaxAmount.js | 30 ++++++++++++++++++++ 4 files changed, 36 insertions(+), 16 deletions(-) create mode 100644 src/hooks/useMaxAmount.js diff --git a/src/components/Features/Transfer/Transfer.js b/src/components/Features/Transfer/Transfer.js index b7dbb306..9d4e1b97 100644 --- a/src/components/Features/Transfer/Transfer.js +++ b/src/components/Features/Transfer/Transfer.js @@ -1,9 +1,7 @@ import React, {useEffect, useState} from 'react'; -import {useAsyncMemo} from 'use-async-memo'; -import {maxDeposit} from '../../../api/bridge'; import {ActionType, NetworkType} from '../../../enums'; -import {useTokenBridgeContract, useTransferToL1, useTransferToL2} from '../../../hooks'; +import {useMaxAmount, useTransferToL1, useTransferToL2} from '../../../hooks'; import {useL1Token, useL2Token, useTokens} from '../../../providers/TokensProvider'; import { Loading, @@ -24,7 +22,6 @@ export const Transfer = () => { const [isL1, swapToL1] = useIsL1(); const [isL2, swapToL2] = useIsL2(); const [amount, setAmount] = useAmount(); - const [maxAmount, setMaxAmount] = useState(null); const [hasInputError, setHasInputError] = useState(false); const [errorMsg, setErrorMsg] = useState(''); const [isButtonDisabled, setIsButtonDisabled] = useState(true); @@ -36,14 +33,7 @@ export const Transfer = () => { const transferToL1 = useTransferToL1(); const getL1Token = useL1Token(); const getL2Token = useL2Token(); - const getTokenBridgeContract = useTokenBridgeContract(); - const memoizedMaxAmount = useAsyncMemo(async () => { - if (symbol) { - const {decimals, bridgeAddress} = selectedToken; - const contract = getTokenBridgeContract(bridgeAddress); - return await maxDeposit({decimals, contract}); - } - }, [symbol]); + const maxAmount = useMaxAmount(); useEffect(() => { if (!selectedToken) { @@ -52,7 +42,6 @@ export const Transfer = () => { }, []); useEffect(() => { - setMaxAmount(isL1 ? memoizedMaxAmount : null); if (selectedToken) { setHasInputError(false); if (selectedToken.isLoading || Math.ceil(amount) === 0 || (isL1 && !maxAmount)) { @@ -71,11 +60,11 @@ export const Transfer = () => { } } } - }, [amount, selectedToken, memoizedMaxAmount, maxAmount, isL1]); + }, [amount, selectedToken, maxAmount, isL1]); const onMaxClick = () => { try { - setAmount(Math.min(selectedToken.balance, Number(memoizedMaxAmount))); + setAmount(Math.min(selectedToken.balance, Number(maxAmount))); } catch (ex) { setAmount(selectedToken.balance); } diff --git a/src/config/strings.json b/src/config/strings.json index ee3f6369..5dd57a83 100644 --- a/src/config/strings.json +++ b/src/config/strings.json @@ -38,7 +38,7 @@ "to_txt": "to", "from_txt": "from", "insufficient_balance_error_msg": "Insufficient balance", - "max_amount_error_msg": "StarkNet Alpha Limitations: max allowed transfer to StarkNet is {{maxAmount}} {{symbol}}.", + "max_amount_error_msg": "StarkNet Alpha Limitation: transfer to StarkNet limited to {{maxAmount}} {{symbol}}.", "max_btn_txt": "Max", "balance_title_txt": "Available balance", "input_placeholder_txt": "0.00", diff --git a/src/hooks/index.js b/src/hooks/index.js index 064b9ad4..509acce1 100644 --- a/src/hooks/index.js +++ b/src/hooks/index.js @@ -12,3 +12,4 @@ export * from './useTransfer'; export * from './useConfig'; export * from './useEventListener'; export * from './useTransferProgress'; +export * from './useMaxAmount'; diff --git a/src/hooks/useMaxAmount.js b/src/hooks/useMaxAmount.js new file mode 100644 index 00000000..c6aa0fd4 --- /dev/null +++ b/src/hooks/useMaxAmount.js @@ -0,0 +1,30 @@ +import {useAsyncMemo} from 'use-async-memo'; + +import {maxDeposit} from '../api/bridge'; +import {useTransferData} from '../components/Features/Transfer/Transfer.hooks'; +import {useTokenBridgeContract} from './useContract'; + +const cache = {}; + +export const useMaxAmount = () => { + const {symbol, isL1, selectedToken} = useTransferData(); + const getTokenBridgeContract = useTokenBridgeContract(); + + const fetchMaxAmount = async () => { + const {decimals, bridgeAddress} = selectedToken; + const contract = getTokenBridgeContract(bridgeAddress); + return await maxDeposit({decimals, contract}); + }; + + return useAsyncMemo(async () => { + if (symbol && isL1) { + if (!cache[symbol]) { + const value = await fetchMaxAmount(); + cache[symbol] = value; + return value; + } + return cache[symbol]; + } + return null; + }, [symbol, isL1]); +};