feat: v3 migration (#399)

* feat: v3 migration

* fix: pretty

* feat: teleporter modal

* fix: polish position migration

* fix: update mainnet configuration

* fix: v2 snx price

* feat: migration success

* feat: migrate USD modal

* fix: convert usd button

* feat: pools page design updates

* feat: migration alert

* fix: update sepolia migration

* fix: ci

* mainnet wip

* fix: liquidity positions loading fix

* fix: migration for sepolia

* fix: v2 staked collateral amount

* fix: deps

* fix: typo

* fix: migration summary division error

* fix: circular dependency

* fix: deps

* feat: migration improvments

* fix: tests

* fix: alerts style

* feat: account migration QA

* fix: ui improvments

* fix: migration UI improvements

* fix: finilise migration ui

* fix: ui issues

* fix: migration ui issues

* feat: base undelegate alert

* fix: total assets value

* feat: migration open query param

* fix: tests

---------

Co-authored-by: jmzwar <james.zwar@protonmail.com>

contracts/importers/importLegacyMarket.js

@@ -0,0 +1,32 @@
+export async function importLegacyMarket(chainId, preset) {
+  if (!preset) {
+    throw new Error(`Missing preset`);
+  }
+  const deployment = `${Number(chainId).toFixed(0)}-${preset}`;
+  switch (deployment) {
+    case '1-main': {
+      const [{ default: meta }, { default: abi }] = await Promise.all([
+        import('@synthetixio/v3-contracts/1-main/meta.json'),
+        import('@synthetixio/v3-contracts/1-main/LegacyMarketProxy.readable.json'),
+      ]);
+      return { address: meta.contracts.LegacyMarketProxy, abi };
+    }
+    case '11155111-main': {
+      const [{ default: meta }, { default: abi }] = await Promise.all([
+        import('@synthetixio/v3-contracts/11155111-main/meta.json'),
+        import('@synthetixio/v3-contracts/11155111-main/LegacyMarketProxy.readable.json'),
+      ]);
+      return { address: meta.contracts.LegacyMarketProxy, abi };
+    }
+    /*case '10-main': {
+      const [{ default: meta }, { default: abi }] = await Promise.all([
+        import('@synthetixio/v3-contracts/10-main/meta.json'),
+        import('@synthetixio/v3-contracts/10-main/LegacyMarketProxy.readable.json'),
+      ]);
+      return { address: meta.contracts.LegacyMarketProxy, abi };
+		}*/
+    default: {
+      throw new Error(`Unsupported deployment ${deployment} for Extras`);
+    }
+  }
+}

contracts/importers/importPythERC7412Wrapper.js

@@ -18,6 +18,13 @@ export async function importPythERC7412Wrapper(chainId, preset) {
       ]);
       return { address: meta.contracts.PythERC7412Wrapper, abi };
     }
+    case '11155111-main': {
+      const [{ default: meta }, { default: abi }] = await Promise.all([
+        import('@synthetixio/v3-contracts/11155111-main/meta.json'),
+        import('@synthetixio/v3-contracts/11155111-main/PythERC7412Wrapper.readable.json'),
+      ]);
+      return { address: meta.contracts.PythERC7412Wrapper, abi };
+    }
     case '42161-main': {
       const [{ default: meta }, { default: abi }] = await Promise.all([
         import('@synthetixio/v3-contracts/42161-main/meta.json'),

contracts/importers/importSpotMarketProxy.js

@@ -11,13 +11,13 @@ export async function importSpotMarketProxy(chainId, preset) {
       ]);
       return { address: meta.contracts.SpotMarketProxy, abi };
     }
-    //    case '11155111-main': {
-    //      const [{default: meta}, {default: abi}] = await Promise.all([
-    //        import('@synthetixio/v3-contracts/11155111-main/meta.json'),
-    //        import('@synthetixio/v3-contracts/11155111-main/SpotMarketProxy.readable.json'),
-    //      ]);
-    //      return { address: meta.contracts.SpotMarketProxy, abi };
-    //    }
+    case '11155111-main': {
+      const [{ default: meta }, { default: abi }] = await Promise.all([
+        import('@synthetixio/v3-contracts/11155111-main/meta.json'),
+        import('@synthetixio/v3-contracts/11155111-main/SpotMarketProxy.readable.json'),
+      ]);
+      return { address: meta.contracts.SpotMarketProxy, abi };
+    }
     case '10-main': {
       const [{ default: meta }, { default: abi }] = await Promise.all([
         import('@synthetixio/v3-contracts/10-main/meta.json'),

contracts/importers/importV2x.js

@@ -0,0 +1,32 @@
+export async function importV2x(chainId, preset) {
+  if (!preset) {
+    throw new Error(`Missing preset`);
+  }
+  const deployment = `${Number(chainId).toFixed(0)}-${preset}`;
+  switch (deployment) {
+    case '1-main': {
+      const [{ default: meta }, { default: abi }] = await Promise.all([
+        import('@synthetixio/v3-contracts/1-main/meta.json'),
+        import('@synthetixio/v3-contracts/1-main/V2x.readable.json'),
+      ]);
+      return { address: meta.contracts.V2x, abi };
+    }
+    case '11155111-main': {
+      const [{ default: meta }, { default: abi }] = await Promise.all([
+        import('@synthetixio/v3-contracts/11155111-main/meta.json'),
+        import('@synthetixio/v3-contracts/11155111-main/V2x.readable.json'),
+      ]);
+      return { address: meta.contracts.V2x, abi };
+    }
+    /*case '10-main': {
+      const [{ default: meta }, { default: abi }] = await Promise.all([
+        import('@synthetixio/v3-contracts/10-main/meta.json'),
+        import('@synthetixio/v3-contracts/10-main/V2x.readable.json'),
+      ]);
+      return { address: meta.contracts.V2x, abi };
+		}*/
+    default: {
+      throw new Error(`Unsupported deployment ${deployment} for V2x`);
+    }
+  }
+}

contracts/index.js

@@ -4,6 +4,8 @@ export * from './importers/importCoreProxy';
 export * from './importers/importAccountProxy';
 export * from './importers/importUSDProxy';
 export * from './importers/importOracleManagerProxy';
+export * from './importers/importLegacyMarket';
+export * from './importers/importV2x';
 export * from './importers/importMulticall3';
 export * from './importers/importRewardDistributor';
 export * from './importers/importSpotMarketProxy';

liquidity/components/Multistep/Multistep.tsx

@@ -1,5 +1,5 @@
 import { PropsWithChildren, ReactNode } from 'react';
-import { Box, Checkbox, CheckboxProps, Flex, Text } from '@chakra-ui/react';
+import { Box, Checkbox, CheckboxProps, Flex, FlexProps, Text } from '@chakra-ui/react';
 import { Step } from './Step';
 import { statusColor } from './statusColor';
 import { MultistepStatus } from './MultistepStatus';
@@ -15,6 +15,15 @@ function StepCheckbox({ children, ...props }: PropsWithChildren<CheckboxProps>)
     </Flex>
   );
 }
+interface Props extends Omit<FlexProps, 'title'> {
+  step: number;
+  title: string | ReactNode;
+  subtitle?: string | ReactNode;
+  checkboxLabel?: string;
+  checkboxProps?: CheckboxProps;
+  status: MultistepStatus;
+  children?: ReactNode | undefined;
+}
 
 export function Multistep({
   step,
@@ -24,14 +33,8 @@ export function Multistep({
   checkboxProps,
   status,
   children,
-}: PropsWithChildren<{
-  step: number;
-  title: string | ReactNode;
-  subtitle?: string | ReactNode;
-  checkboxLabel?: string;
-  checkboxProps?: CheckboxProps;
-  status: MultistepStatus;
-}>) {
+  ...props
+}: Props) {
   return (
     <Flex
       position="relative"
@@ -40,10 +43,11 @@ export function Multistep({
       rounded="lg"
       mt="6"
       p="4"
-      border="2px solid"
+      border="1px solid"
       transitionProperty="border-color"
       transitionDuration="normal"
       borderColor={statusColor(status)}
+      {...props}
     >
       <Step status={status}>{step}</Step>
       <Flex direction="column">

liquidity/components/NumberInput/NumberInput.tsx

@@ -40,7 +40,7 @@ export function NumberInput({
   const onInputChange = useCallback(
     (e: ChangeEvent<HTMLInputElement>) => {
       // Define max length here
-      if (e.target.value.length > 15) return;
+      if (e.target.value.length > 24) return;
 
       let _value = e.target.value;
 

liquidity/components/TermsModal/TermsModal.tsx

@@ -26,7 +26,7 @@ export const TermsModal = ({ defaultOpen = true }: TermsModalProps) => {
 
   const onSubmit = () => {
     if (enabled) {
-      sessionStorage.setItem(SESSION_STORAGE_KEYS.TERMS_CONDITIONS_ACCEPTED, JSON.stringify(true));
+      localStorage.setItem(SESSION_STORAGE_KEYS.TERMS_CONDITIONS_ACCEPTED, JSON.stringify(true));
       setOpen(false);
     }
   };

liquidity/components/WithdrawIncrease/WithdrawIncrease.tsx

@@ -2,7 +2,7 @@ import { Alert, AlertIcon, Text } from '@chakra-ui/react';
 
 export function WithdrawIncrease() {
   return (
-    <Alert status="warning" mb="6">
+    <Alert borderRadius="6px" status="warning" mb="6">
       <AlertIcon />
       <Text>This action will reset the withdrawal waiting period to 24 hours</Text>
     </Alert>

liquidity/lib/constants/constants.ts

@@ -28,6 +28,8 @@ export const getSubgraphUrl = (networkName = 'optimism-mainnet') => {
 
 export const getAprUrl = (networkId = 8453) => {
   switch (networkId) {
+    case 1:
+      return 'https://api.synthetix.io/v3/mainnet/sc-pool-apy-all';
     case 8453:
       return 'https://api.synthetix.io/v3/base/sc-pool-apy-all';
     case 42161:

liquidity/lib/useApr/useApr.ts

@@ -1,5 +1,5 @@
 import { getAprUrl } from '@snx-v3/constants';
-import { ARBITRUM, BASE_ANDROMEDA, BASE_SEPOLIA, Network, useNetwork } from '@snx-v3/useBlockchain';
+import { ARBITRUM, BASE_ANDROMEDA, MAINNET, Network, useNetwork } from '@snx-v3/useBlockchain';
 import { useQuery } from '@tanstack/react-query';
 
 export function useApr(customNetwork?: Network) {
@@ -20,12 +20,14 @@ export function useApr(customNetwork?: Network) {
   });
 }
 
-const supportedAprNetworks = [BASE_ANDROMEDA.id, BASE_SEPOLIA.id, ARBITRUM.id];
+const supportedAprNetworks = [BASE_ANDROMEDA.id, ARBITRUM.id, MAINNET.id];
 
 export async function fetchApr(networkId?: number) {
   try {
     const isSupported = networkId && supportedAprNetworks.includes(networkId);
-    if (!isSupported) throw new Error('Apr endpoint not supported for this network');
+    if (!isSupported) {
+      throw new Error('Apr endpoint not supported for this network');
+    }
 
     const response = await fetch(getAprUrl(networkId));
 

liquidity/lib/useBlockchain/useBlockchain.tsx

@@ -287,7 +287,10 @@ export const appMetadata = {
 };
 
 export function useProviderForChain(network?: Network | null) {
-  return network ? new ethers.providers.JsonRpcProvider(network.rpcUrl()) : undefined;
+  return useMemo(
+    () => (network ? new ethers.providers.JsonRpcProvider(network.rpcUrl()) : undefined),
+    [network]
+  );
 }
 
 export function useDefaultProvider() {
@@ -301,23 +304,25 @@ export function useWallet() {
   const connect = useCallback(conn, [conn]);
   const disconnect = useCallback(disconn, [disconn]);
 
-  if (!wallet) {
+  return useMemo(() => {
+    if (!wallet) {
+      return {
+        activeWallet: null,
+        walletsInfo: null,
+        connect,
+        disconnect,
+      };
+    }
+
+    const activeWallet = wallet?.accounts[0];
+
     return {
-      activeWallet: null,
-      walletsInfo: null,
+      activeWallet: activeWallet,
+      walletsInfo: wallet,
       connect,
       disconnect,
     };
-  }
-
-  const activeWallet = wallet?.accounts[0];
-
-  return {
-    activeWallet: activeWallet,
-    walletsInfo: wallet,
-    connect,
-    disconnect,
-  };
+  }, [connect, disconnect, wallet]);
 }
 
 export function useGetNetwork(chainId: string) {
@@ -362,23 +367,27 @@ export function useIsConnected(): boolean {
 export function useSigner() {
   const [{ wallet }] = useConnectWallet();
 
-  if (!wallet) {
-    return null;
-  }
+  return useMemo(() => {
+    if (!wallet) {
+      return null;
+    }
 
-  const provider = new ethers.providers.Web3Provider(wallet.provider, 'any');
+    const provider = new ethers.providers.Web3Provider(wallet.provider, 'any');
 
-  return provider.getSigner();
+    return provider.getSigner();
+  }, [wallet]);
 }
 
 export function useProvider() {
   const [{ wallet }] = useConnectWallet();
 
-  if (!wallet) {
-    return null;
-  }
+  return useMemo(() => {
+    if (!wallet) {
+      return null;
+    }
 
-  const provider = new ethers.providers.Web3Provider(wallet.provider, 'any');
+    const provider = new ethers.providers.Web3Provider(wallet.provider, 'any');
 
-  return provider;
+    return provider;
+  }, [wallet]);
 }

liquidity/lib/useCollateralPriceUpdates/useCollateralPriceUpdates.ts

@@ -75,8 +75,6 @@ const getPriceUpdates = async (
   stalenessTolerance: number,
   network: Network | null
 ) => {
-  // network.id
-
   const signedOffchainData = await priceService.getPriceFeedsUpdateData(priceIds);
   const updateType = 1;
   const data = ethers.utils.defaultAbiCoder.encode(
@@ -108,6 +106,9 @@ export const useAllCollateralPriceUpdates = (customNetwork?: Network) => {
       const stalenessTolerance = 1;
 
       const pythFeedIds = (await getPythFeedIds(targetNetwork)) as string[];
+      if (!pythFeedIds.length) {
+        return null;
+      }
       const tx = await getPriceUpdates(pythFeedIds, stalenessTolerance, targetNetwork);
 
       return {

liquidity/lib/useCollateralTypes/useCollateralTypes.ts

@@ -43,7 +43,7 @@ async function loadCollateralTypes(chainId: number, preset: string): Promise<Col
 
   return tokenConfigs.map((config) => ({
     ...config,
-    displaySymbol: config.symbol === 'WETH' ? 'ETH' : config.symbol,
+    displaySymbol: config.symbol,
   }));
 }
 

liquidity/lib/useLegacyMarket/index.ts

@@ -0,0 +1 @@
+export * from './useLegacyMarket';

liquidity/lib/useLegacyMarket/package.json

@@ -0,0 +1,13 @@
+{
+  "name": "@snx-v3/useLegacyMarket",
+  "private": true,
+  "main": "index.ts",
+  "version": "0.0.1",
+  "dependencies": {
+    "@ethersproject/contracts": "^5.7.0",
+    "@snx-v3/contracts": "workspace:*",
+    "@snx-v3/useBlockchain": "workspace:*",
+    "@tanstack/react-query": "^5.8.3",
+    "react": "^18.2.0"
+  }
+}