From 88c653effa98d4dc8dbc51063db14ab5aba88c40 Mon Sep 17 00:00:00 2001 From: Noisekit <28145325+noisekit@users.noreply.github.com> Date: Wed, 18 Dec 2024 14:43:17 +1100 Subject: [PATCH] Remove network selector when wallet not connected (#113) * Update WC for new domain * More eth.limo -> io * Hide Network selector for unconnected wallet * Add network label for larger screens * Longer cypress log * Disable witheraw button if cannot withdraw * Fix cypress logs collector config --- liquidity/components/Tooltip/Tooltip.tsx | 2 +- .../WithdrawModal/WithdrawModal.tsx | 47 +- liquidity/cypress/cypress.config.js | 2 + .../8453-andromeda/stataUSDC_Withdraw.e2e.js | 2 +- liquidity/lib/useWithdraw/useWithdraw.tsx | 30 +- .../useWithdrawBaseAndromeda.tsx | 46 +- liquidity/ui/.env.example | 1 - liquidity/ui/src/App.tsx | 8 +- liquidity/ui/src/NetworkController.tsx | 444 +++++++++--------- liquidity/ui/src/utils/onboard.ts | 4 +- liquidity/ui/webpack.config.js | 1 - 11 files changed, 293 insertions(+), 294 deletions(-) diff --git a/liquidity/components/Tooltip/Tooltip.tsx b/liquidity/components/Tooltip/Tooltip.tsx index 0559962a0..6006fbf3a 100644 --- a/liquidity/components/Tooltip/Tooltip.tsx +++ b/liquidity/components/Tooltip/Tooltip.tsx @@ -1,4 +1,4 @@ -import { Tooltip as ChakraTooltip, TooltipProps } from '@chakra-ui/react'; +import { Tooltip as ChakraTooltip, type TooltipProps } from '@chakra-ui/react'; export const Tooltip = ({ ...props }: TooltipProps) => { return ; diff --git a/liquidity/components/WithdrawModal/WithdrawModal.tsx b/liquidity/components/WithdrawModal/WithdrawModal.tsx index 4c174c9ae..94134a8ee 100644 --- a/liquidity/components/WithdrawModal/WithdrawModal.tsx +++ b/liquidity/components/WithdrawModal/WithdrawModal.tsx @@ -26,7 +26,7 @@ export function WithdrawModal({ onClose: () => void; isDebtWithdrawal?: boolean; }) { - const [txState, setTxState] = useState({ + const [state, setState] = useState({ step: 1, status: 'idle', }); @@ -50,25 +50,24 @@ export function WithdrawModal({ const { mutateAsync: unwrapStata } = useUnwrapStataUSDC(); - const { mutation: withdrawMain } = useWithdraw({ + const { mutation: withdrawMain, isReady: isReadyWithdrawMain } = useWithdraw({ amount: withdrawAmount, accountId: params.accountId, - collateralTypeAddress: isDebtWithdrawal ? systemToken?.address : collateralType?.tokenAddress, + token: isDebtWithdrawal ? systemToken : collateralType, }); - const { mutation: withdrawAndromeda } = useWithdrawBaseAndromeda({ - amountToWithdraw: withdrawAmount, - }); + const { mutation: withdrawAndromeda, isReady: isReadyWithdrawAndromeda } = + useWithdrawBaseAndromeda({ amount: withdrawAmount }); const onSubmit = async () => { try { - if (txState.status === 'success') { + if (state.status === 'success') { onClose(); } - let step = txState.step; + let step = state.step; if (step === 1) { - setTxState({ + setState({ step: 1, status: 'pending', }); @@ -81,12 +80,12 @@ export function WithdrawModal({ if (isStataUSDC) { step = 2; - setTxState({ + setState({ step: 2, status: 'pending', }); } else { - setTxState({ + setState({ step: 2, status: 'success', }); @@ -97,7 +96,7 @@ export function WithdrawModal({ throw new Error('Not ready'); } - setTxState({ + setState({ step: 2, status: 'pending', }); @@ -111,7 +110,7 @@ export function WithdrawModal({ const balance = await StaticAaveUSDCContract.balanceOf(activeWallet?.address); await unwrapStata(balance); - setTxState({ + setState({ step: 2, status: 'success', }); @@ -119,7 +118,7 @@ export function WithdrawModal({ setWithdrawAmount(ZEROWEI); } catch (error) { - setTxState((state) => ({ + setState((state) => ({ ...state, status: 'error', })); @@ -143,10 +142,6 @@ export function WithdrawModal({ } }; - const amount = withdrawAmount; - const symbol = isDebtWithdrawal ? systemToken?.symbol : collateralType?.displaySymbol; - const state = txState; - if (state.status === 'success') { return ( } + subtitle={ + + } status={{ failed: state.step === 1 && state.status === 'error', success: state.step > 1, @@ -200,7 +202,12 @@ export function WithdrawModal({ /> )} + ); + } return ( - - span': { display: 'flex', alignItems: 'center' } }} - mr={1} - px={3} - > - - - - {mainnets.map(({ id, preset, label }) => ( - setNetwork(id)} - isDisabled={window.$chainId ? window.$chainId !== id : false} - > - - - {label} - - - ))} - - {showTestnets && } - - - - - Show Testnets - - setShowTestnets(!showTestnets)} - /> - - - - {(showTestnets ? testnets : []).map(({ id, preset, label }) => ( - setNetwork(id)} - isDisabled={window.$chainId ? window.$chainId !== id : false} - > - - - {label} - - - ))} - - - {activeWallet ? ( - + {activeNetwork ? ( + span': { display: 'flex', alignItems: 'center' } }} + mr={1} + px={3} > - - - {activeWallet.ens?.name || prettyString(activeWallet.address)} + + + {activeNetwork.label} - - - - - - Connected with {walletsInfo?.label} - - + ) : null} + + + + + {activeWallet.ens?.name || prettyString(activeWallet.address)} + + + + + + + + Connected with {walletsInfo?.label} + + + + + + {prettyString(activeWallet.address)} + + + { - if (walletsInfo) { - disconnect(walletsInfo); - } + navigator.clipboard.writeText(activeWallet.address); + setTooltipLabel('Copied'); + setTimeout(() => { + setTooltipLabel('Copy'); + }, 10000); + }} + /> + + + + + + Account(s) + + { + e.preventDefault(); + setParams({ page: 'settings', accountId: params.accountId }); }} - size="xs" - variant="outline" - colorScheme="gray" - color="white" > - Disconnect - - - - {prettyString(activeWallet.address)}{' '} - - { - navigator.clipboard.writeText(activeWallet.address); - setTooltipLabel('Copied'); - setTimeout(() => { - setTooltipLabel('Copy'); - }, 10000); - }} + } + aria-label="account settings" /> - - - - - - Account(s) - - + + + {accounts?.map((accountId) => ( + { - e.preventDefault(); - setParams({ page: 'settings', accountId: params.accountId }); + e.stopPropagation(); + setParams({ ...params, accountId: accountId.toString() }); }} > - } - aria-label="account settings" - /> - - - - {accounts?.map((accountId) => ( - { - e.stopPropagation(); - setParams({ ...params, accountId: accountId.toString() }); - }} - > - {renderAccountId(accountId)} - {paramsAccountId && accountId.eq(paramsAccountId) ? ( - - Connected - - ) : null} - - ))} - - - + {renderAccountId(accountId)} + {paramsAccountId && accountId.eq(paramsAccountId) ? ( + + Connected + + ) : null} + + ))} + + - - - ) : ( - - )} + + + ); } diff --git a/liquidity/ui/src/utils/onboard.ts b/liquidity/ui/src/utils/onboard.ts index 3266cb060..18432743e 100644 --- a/liquidity/ui/src/utils/onboard.ts +++ b/liquidity/ui/src/utils/onboard.ts @@ -41,7 +41,7 @@ export const onboard = init({ coinbaseModule(), injectedModule({ displayUnavailable: [ProviderLabel.MetaMask, ProviderLabel.Trust] }), trezorModule({ - appUrl: 'https://liquidity.synthetix.eth.limo', + appUrl: 'https://liquidity.synthetix.io', email: 'info@synthetix.io', }), ledgerModule({ @@ -51,7 +51,7 @@ export const onboard = init({ walletConnectModule({ version: 2, projectId: 'd6eac005846a1c3be1f8eea3a294eed9', - dappUrl: 'liquidity.synthetix.eth.limo', + dappUrl: 'liquidity.synthetix.io', }), gnosisModule(), ], diff --git a/liquidity/ui/webpack.config.js b/liquidity/ui/webpack.config.js index 645e9a3a3..502f14f95 100644 --- a/liquidity/ui/webpack.config.js +++ b/liquidity/ui/webpack.config.js @@ -154,7 +154,6 @@ module.exports = { .concat( new webpack.DefinePlugin({ 'process.env.INFURA_KEY': JSON.stringify(process.env.INFURA_KEY), - 'process.env.WC_PROJECT_ID': JSON.stringify(process.env.WC_PROJECT_ID), 'process.env.PYTH_MAINNET_ENDPOINT': JSON.stringify(process.env.PYTH_MAINNET_ENDPOINT), 'process.env.PYTH_TESTNET_ENDPOINT': JSON.stringify(process.env.PYTH_TESTNET_ENDPOINT), })