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

@@ -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 <ChakraTooltip hasArrow bg="gray.900" p={3} borderRadius="4px" {...props} />;

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,15 +110,15 @@ export function WithdrawModal({
         const balance = await StaticAaveUSDCContract.balanceOf(activeWallet?.address);
         await unwrapStata(balance);
 
-        setTxState({
+        setState({
           step: 2,
           status: 'success',
         });
       }
 
       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 (
       <LiquidityPositionUpdated
@@ -180,7 +175,14 @@ export function WithdrawModal({
       <Multistep
         step={1}
         title="Withdraw"
-        subtitle={<Amount value={amount} suffix={` ${symbol} will be withdrawn`} />}
+        subtitle={
+          <Amount
+            value={withdrawAmount}
+            suffix={` ${
+              isDebtWithdrawal ? systemToken?.symbol : collateralType?.displaySymbol
+            } will be withdrawn`}
+          />
+        }
         status={{
           failed: state.step === 1 && state.status === 'error',
           success: state.step > 1,
@@ -200,7 +202,12 @@ export function WithdrawModal({
         />
       )}
       <Button
-        isDisabled={state.status === 'pending' || isPendingStaticAaveUSDC || !provider}
+        isDisabled={
+          (network?.preset === 'andromeda' && !isReadyWithdrawAndromeda) ||
+          (network?.preset !== 'andromeda' && !isReadyWithdrawMain) ||
+          state.status === 'pending' ||
+          isPendingStaticAaveUSDC
+        }
         onClick={onSubmit}
         width="100%"
         mt="6"

liquidity/cypress/cypress.config.js

@@ -29,6 +29,8 @@ module.exports = defineConfig({
       require('cypress-terminal-report/src/installLogsPrinter')(on, {
         printLogsToConsole: 'always',
         includeSuccessfulHookLogs: true,
+        defaultTrimLength: 10_000,
+        commandTrimLength: 10_000,
       });
       require('@cypress/code-coverage/task')(on, config);
       //      }

liquidity/cypress/cypress/e2e/8453-andromeda/stataUSDC_Withdraw.e2e.js

@@ -58,7 +58,7 @@ describe(__filename, () => {
     cy.get('[data-cy="withdraw confirm button"]').click();
 
     cy.contains('[data-status="success"]', 'Collateral successfully Withdrawn', {
-      timeout: 180_000,
+      timeout: 60_000,
     }).should('exist');
   });
 });

liquidity/lib/useWithdraw/useWithdraw.tsx

@@ -17,11 +17,11 @@ const log = debug('snx:useWithdraw');
 
 export const useWithdraw = ({
   accountId,
-  collateralTypeAddress,
+  token,
   amount,
 }: {
   accountId?: string;
-  collateralTypeAddress?: string;
+  token?: { address: string; decimals: number };
   amount: Wei;
 }) => {
   const [txnState, dispatch] = useReducer(reducer, initialState);
@@ -33,39 +33,22 @@ export const useWithdraw = ({
   const signer = useSigner();
   const provider = useProvider();
 
+  const isReady = signer && network && provider && CoreProxy && token && amount && amount.gt(0);
   const queryClient = useQueryClient();
   const mutation = useMutation({
     mutationFn: async () => {
-      if (!signer || !network || !provider) throw new Error('No signer or network');
-
-      if (!(CoreProxy && collateralTypeAddress && amount)) {
+      if (!isReady) {
         throw new Error('Not ready');
       }
-      if (amount?.eq(0)) {
-        throw new Error('Amount less than 0');
-      }
-
       const walletAddress = await signer.getAddress();
 
       dispatch({ type: 'prompting' });
 
-      const contract = new ethers.Contract(
-        collateralTypeAddress,
-        ['function decimals() view returns (uint8)'],
-        provider
-      );
-
-      const decimals = await contract.decimals();
-
-      const collateralAmount = amount.gt(0)
-        ? parseUnits(amount.toString(), decimals)
-        : BigNumber.from(0);
-
       const CoreProxyContract = new ethers.Contract(CoreProxy.address, CoreProxy.abi, signer);
       const populatedTxnPromised = CoreProxyContract.populateTransaction.withdraw(
         BigNumber.from(accountId),
-        collateralTypeAddress,
-        collateralAmount
+        token.address,
+        parseUnits(amount.toString(), token.decimals)
       );
 
       const callsPromise = Promise.all([populatedTxnPromised]);
@@ -122,6 +105,7 @@ export const useWithdraw = ({
     },
   });
   return {
+    isReady,
     mutation,
     txnState,
     settle: () => dispatch({ type: 'settled' }),

liquidity/lib/useWithdrawBaseAndromeda/useWithdrawBaseAndromeda.tsx

@@ -23,7 +23,7 @@ import { useReducer } from 'react';
 
 const log = debug('snx:useWithdrawBaseAndromeda');
 
-export const useWithdrawBaseAndromeda = ({ amountToWithdraw }: { amountToWithdraw: Wei }) => {
+export const useWithdrawBaseAndromeda = ({ amount }: { amount: Wei }) => {
   const [params] = useParams<PositionPageSchemaType>();
   const { data: collateralType } = useCollateralType(params.collateralSymbol);
   const { data: liquidityPosition } = useLiquidityPosition({
@@ -45,43 +45,42 @@ export const useWithdrawBaseAndromeda = ({ amountToWithdraw }: { amountToWithdra
   const signer = useSigner();
   const provider = useProvider();
 
+  const isReady =
+    signer &&
+    network &&
+    provider &&
+    CoreProxy &&
+    SpotMarketProxy &&
+    USDProxy &&
+    accountId &&
+    usdTokens &&
+    params.collateralSymbol &&
+    collateralType &&
+    liquidityPosition;
+
   const queryClient = useQueryClient();
   const mutation = useMutation({
     mutationFn: async () => {
-      if (!signer || !network || !provider) throw new Error('No signer or network');
-      if (
-        !(
-          CoreProxy &&
-          SpotMarketProxy &&
-          USDProxy &&
-          accountId &&
-          usdTokens?.sUSD &&
-          usdTokens.snxUSD &&
-          params.collateralSymbol &&
-          collateralType &&
-          liquidityPosition
-        )
-      ) {
+      if (!isReady) {
         throw new Error('Not ready');
       }
-
       const total = liquidityPosition.availableSystemToken.add(
         liquidityPosition.availableCollateral
       );
       log('total', total);
 
-      log('amountToWithdraw', amountToWithdraw);
-      if (total.lt(amountToWithdraw)) {
+      log('amountToWithdraw', amount);
+      if (total.lt(amount)) {
         throw new Error('Exceeds balance');
       }
 
-      const wrappedCollateralAmount = amountToWithdraw.gt(liquidityPosition.availableCollateral)
+      const wrappedCollateralAmount = amount.gt(liquidityPosition.availableCollateral)
         ? liquidityPosition.availableCollateral
-        : amountToWithdraw;
+        : amount;
       log('wrappedCollateralAmount', wrappedCollateralAmount);
 
-      const snxUSDAmount = amountToWithdraw.sub(wrappedCollateralAmount).gt(0)
-        ? amountToWithdraw.sub(wrappedCollateralAmount)
+      const snxUSDAmount = amount.sub(wrappedCollateralAmount).gt(0)
+        ? amount.sub(wrappedCollateralAmount)
         : ZEROWEI;
 
       log('snxUSDAmount', snxUSDAmount);
@@ -120,7 +119,7 @@ export const useWithdrawBaseAndromeda = ({ amountToWithdraw }: { amountToWithdra
       const withdraw_snxUSD = snxUSDAmount.gt(0)
         ? CoreProxyContract.populateTransaction.withdraw(
             ethers.BigNumber.from(accountId),
-            usdTokens?.snxUSD,
+            usdTokens.snxUSD,
             snxUSDAmount.toBN()
           )
         : undefined;
@@ -242,6 +241,7 @@ export const useWithdrawBaseAndromeda = ({ amountToWithdraw }: { amountToWithdra
   });
 
   return {
+    isReady,
     mutation,
     txnState,
     settle: () => dispatch({ type: 'settled' }),

liquidity/ui/.env.example

@@ -1,4 +1,3 @@
 INFURA_KEY=''
-WC_PROJECT_ID=''
 PYTH_MAINNET_ENDPOINT=https://hermes.pyth.network/
 PYTH_TESTNET_ENDPOINT=https://hermes.pyth.network/

liquidity/ui/src/App.tsx

@@ -63,22 +63,22 @@ export const App = () => {
     <>
       <Head>
         {/* open graph */}
-        <meta property="og:url" content="https://liquidity.synthetix.eth.limo/" />
+        <meta property="og:url" content="https://liquidity.synthetix.io/" />
         <meta property="og:type" content="website" />
         <meta property="og:title" content="Synthetix | Liquidity" />
         <meta
           property="og:description"
           content="The Liquidity Layer of DeFi. Provide liquidity for the next generation of permissionless protocols"
         />
-        <meta property="og:image" content="https://liquidity.synthetix.eth.limo/Liquidity.jpg" />
+        <meta property="og:image" content="https://liquidity.synthetix.io/Liquidity.jpg" />
         <meta property="og:image:alt" content="Synthetix | Liquidity" />
         <meta property="og:site_name" content="" />
         {/* twitter */}
         <meta name="twitter:card" content="summary_large_image" />
         <meta name="twitter:site" content="@synthetix_io" />
         <meta name="twitter:creator" content="@synthetix_io" />
-        <meta name="twitter:image" content="https://liquidity.synthetix.eth.limo/Liquidity.jpg" />
-        <meta name="twitter:url" content="https://liquidity.synthetix.eth.limo/" />
+        <meta name="twitter:image" content="https://liquidity.synthetix.io/Liquidity.jpg" />
+        <meta name="twitter:url" content="https://liquidity.synthetix.io/" />
       </Head>
       <QueryClientProvider client={queryClient}>
         <Web3OnboardProvider web3Onboard={onboard}>