feat: wormhole bridge implementation

next.config.mjs

@@ -13,6 +13,10 @@ const nextConfig = {
         source: "/api/prod-rpc-helius",
         destination: `https://mainnet.helius-rpc.com/?api-key=${process.env.PROD_RPC_KEY_HELIUM}`,
       },
+      {
+        source: "/api/prod-rpc-drpc",
+        destination: `https://lb.drpc.org/ogrpc?network=solana&dkey=${process.env.PROD_RRC_KET_DRPC}`,
+      },
     ];
   },
 };

package.json

@@ -28,6 +28,7 @@
     "@solflare-wallet/wallet-adapter": "^1.0.3",
     "@tiplink/wallet-adapter": "^2.1.20",
     "@walletconnect/solana-adapter": "^0.0.6",
+    "@wormhole-foundation/wormhole-connect": "^1.1.2",
     "lodash.debounce": "^4.0.8",
     "next": "^14.2.15",
     "react": "^18",

src/components/Base/PageContainer.tsx

@@ -1,6 +1,7 @@
 import { Box, Container, styled, Typography } from "@mui/material";
 import { BaseInfoBox } from "@/components/Base/Boxes/StyledBoxes";
 import { BaseInfoIcon } from "@/components/Base/Icons/StyledIcons";
+import { FC, ReactNode } from "react";
 
 const PageInfoBox = styled(BaseInfoBox)`
   background: #071f2e;
@@ -28,17 +29,27 @@ const PageInfoBox = styled(BaseInfoBox)`
   }
 `;
 
-const PageContainer = ({ children }) => {
+type PageContainerProps = {
+  children: ReactNode;
+  displayNotice?: boolean;
+};
+
+const PageContainer: FC<PageContainerProps> = ({
+  children,
+  displayNotice = true,
+}) => {
   return (
     <Container>
-      <PageInfoBox>
-        <BaseInfoIcon />
-        <Box flexDirection="column">
-          <Typography width="100%">
-            This is test launch, use at your own risk
-          </Typography>
-        </Box>
-      </PageInfoBox>
+      {displayNotice && (
+        <PageInfoBox>
+          <BaseInfoIcon />
+          <Box flexDirection="column">
+            <Typography width="100%">
+              This is test launch, use at your own risk
+            </Typography>
+          </Box>
+        </PageInfoBox>
+      )}
       {children}
     </Container>
   );

src/components/Vaults/Detail/Forms/index.tsx

@@ -25,7 +25,7 @@ export const VaultFormWrapper = styled(FlexBox)`
 `;
 
 const VaultDetailForms = () => {
-  const [notLoading, setNotLoaded] = useState(false);
+  const [isLoaded, setIsLoaded] = useState<boolean>(false);
 
   const {
     vaultPosition,
@@ -39,15 +39,17 @@ const VaultDetailForms = () => {
 
   useEffect(() => {
     const timeout = setTimeout(() => {
-      setNotLoaded(vaultPosition && !vaultPositionLoading && !vaultLoading);
+      setIsLoaded(vaultPosition && !vaultPositionLoading && !vaultLoading);
     }, 300);
 
     return () => {
       clearTimeout(timeout);
     };
-  }, [vaultPosition, vaultPositionLoading, vaultLoading, setNotLoaded]);
+  }, [vaultPosition, vaultPositionLoading, vaultLoading, setIsLoaded]);
 
-  if (!notLoading) {
+  if (isTfVaultType && activeTfPeriod > 0) return null;
+
+  if (!isLoaded) {
     return (
       <VaultDepositPaper>
         <Typography variant="h3" sx={{ fontSize: isMobile ? "14px" : "16px" }}>
@@ -70,14 +72,13 @@ const VaultDetailForms = () => {
       </VaultDepositPaper>
     );
   }
-  if (isTfVaultType && activeTfPeriod > 0) return null;
 
   return (
     <VaultDepositPaper>
-      {notLoading && BigNumber(vaultPosition.balanceShares).isGreaterThan(0) ? (
+      {isLoaded && BigNumber(vaultPosition.balanceShares).isGreaterThan(0) ? (
         <VaultDetailManageForm />
       ) : !shutdown ? (
-        <VaultDetailDepositForm notLoading={notLoading} />
+        <VaultDetailDepositForm />
       ) : null}
     </VaultDepositPaper>
   );

src/components/Vaults/List/VaultListItem.tsx

@@ -1,4 +1,4 @@
-import { FC, memo, useCallback, useMemo } from "react";
+import { FC, memo, useCallback, useEffect, useMemo } from "react";
 import Image from "next/image";
 import { useRouter } from "next/router";
 import {
@@ -22,6 +22,8 @@ import VaultListItemManageModal from "@/components/Vaults/List/ManageVaultModal"
 
 import LockAquaSrc from "assets/svg/lock-aqua.svg";
 import LockSrc from "assets/svg/lock.svg";
+import useBridgeContext, { BridgeType } from "@/context/bridge";
+import { USDC_MINT_ADDRESSES } from "@/utils/addresses";
 
 export const VaultTitle = styled("div")`
   display: flex;
@@ -126,6 +128,7 @@ const VaultListItem: FC<VaultListItemProps> = ({
   const router = useRouter();
   const formattedApr = useApr(vaultItemData);
 
+  const { bridgeInfo, setBridgeInfo } = useBridgeContext();
   const {
     balanceEarned,
     manageVault,
@@ -149,6 +152,37 @@ const VaultListItem: FC<VaultListItemProps> = ({
     router.push(`/vaults/${vaultItemData.id}`);
   }, [vaultItemData.id]);
 
+  useEffect(() => {
+    if (
+      USDC_MINT_ADDRESSES.includes(vaultItemData.token.id.toLowerCase()) &&
+      bridgeInfo.type === BridgeType.CreateVaultDepositFromBridgedUSDC
+    ) {
+      if (
+        (!vaultPosition ||
+          !BigNumber(vaultPosition.balanceShares).isGreaterThan(0)) &&
+        !shutdown &&
+        activeTfPeriod !== 2 &&
+        !tfVaultDepositEndTimeLoading
+      ) {
+        setNewVaultDeposit(true);
+      } else if (
+        vaultPosition &&
+        BigNumber(vaultPosition.balanceShares).isGreaterThan(0) &&
+        !shutdown &&
+        activeTfPeriod !== 2
+      ) {
+        setManageVault(true);
+      }
+    }
+  }, [
+    vaultItemData,
+    bridgeInfo,
+    vaultPosition,
+    shutdown,
+    activeTfPeriod,
+    tfVaultDepositEndTimeLoading,
+  ]);
+
   const fxdPrice = 1;
 
   return (
@@ -340,7 +374,10 @@ const VaultListItem: FC<VaultListItemProps> = ({
               tfVaultLockEndDate={tfVaultLockEndDate}
               activeTfPeriod={activeTfPeriod}
               minimumDeposit={minimumDeposit}
-              onClose={() => setNewVaultDeposit(false)}
+              onClose={() => {
+                setNewVaultDeposit(false);
+                setBridgeInfo({});
+              }}
             />
           )
         );
@@ -357,7 +394,10 @@ const VaultListItem: FC<VaultListItemProps> = ({
               tfVaultLockEndDate={tfVaultLockEndDate}
               activeTfPeriod={activeTfPeriod}
               minimumDeposit={minimumDeposit}
-              onClose={() => setManageVault(false)}
+              onClose={() => {
+                setManageVault(false);
+                setBridgeInfo({});
+              }}
             />
           )
         );

src/components/Vaults/NestedNav.tsx

@@ -18,6 +18,11 @@ const VaultsNestedNav = () => {
     [location.pathname]
   );
 
+  const isFaucetBridge = useMemo(
+    () => ["/vaults/bridge"].includes(location.pathname),
+    [location.pathname]
+  );
+
   // const isTutorialActive = useMemo(() => {
   //   return location.pathname.includes('/vaults/tutorial')
   // }, [location.pathname])
@@ -35,6 +40,12 @@ const VaultsNestedNav = () => {
       >
         Faucet
       </NestedRouteLink>
+      <NestedRouteLink
+        className={isFaucetBridge ? "active" : ""}
+        href="/vaults/bridge"
+      >
+        Bridge
+      </NestedRouteLink>
       {/*<NestedRouteLink*/}
       {/*  className={isTutorialActive ? 'active' : ''}*/}
       {/*  href="/vaults/tutorial"*/}

src/context/bridge.tsx

@@ -0,0 +1,45 @@
+import {
+  createContext,
+  Dispatch,
+  FC,
+  ReactNode,
+  useContext,
+  useMemo,
+  useState,
+} from "react";
+
+type StakingProviderType = {
+  children: ReactNode;
+};
+
+type UseBridgeContextReturn = {
+  setBridgeInfo: Dispatch<any>;
+  bridgeInfo: any;
+};
+
+export const BridgeContext = createContext<UseBridgeContextReturn>(
+  {} as UseBridgeContextReturn
+);
+
+export enum BridgeType {
+  CreateVaultDepositFromBridgedUSDC = "CreateVaultDepositFromBridgedUSDC",
+}
+
+export const BridgeProvider: FC<StakingProviderType> = ({ children }) => {
+  const [bridgeInfo, setBridgeInfo] = useState<number>(0);
+
+  const values = useMemo(() => {
+    return {
+      bridgeInfo,
+      setBridgeInfo,
+    };
+  }, [bridgeInfo, setBridgeInfo]);
+
+  return (
+    <BridgeContext.Provider value={values}>{children}</BridgeContext.Provider>
+  );
+};
+
+const useBridgeContext = () => useContext(BridgeContext);
+
+export default useBridgeContext;

src/context/sync.tsx

@@ -8,8 +8,7 @@ import {
   useMemo,
   useState,
 } from "react";
-import { Connection } from "@solana/web3.js";
-import { defaultEndpoint } from "@/utils/network";
+import { connection } from "@/utils/network";
 
 type StakingProviderType = {
   children: ReactNode;
@@ -27,8 +26,6 @@ export const SyncContext = createContext<UseSyncContextReturn>(
 export const SyncProvider: FC<StakingProviderType> = ({ children }) => {
   const [lastTransactionBlock, setLastTransactionBlock] = useState<number>(0);
 
-  const connection = new Connection(defaultEndpoint, "confirmed");
-
   useEffect(() => {
     const getLatestSlot = async () => {
       if (connection === null) return;

src/hooks/Vaults/useVaultManageDeposit.ts

@@ -21,6 +21,8 @@ import { formatNumber } from "@/utils/format";
 import { MAX_PERSONAL_DEPOSIT } from "@/hooks/Vaults/useVaultOpenDeposit";
 import useSyncContext from "@/context/sync";
 import { getVaultIndex } from "@/utils/getVaultIndex";
+import { USDC_MINT_ADDRESSES } from "@/utils/addresses";
+import useBridgeContext, { BridgeType } from "@/context/bridge";
 
 export const defaultValues = {
   formToken: "",
@@ -43,6 +45,7 @@ const useVaultManageDeposit = (
   const { publicKey } = useWallet();
   const anchorWallet = useAnchorWallet() as AnchorWallet;
   const { lastTransactionBlock, setLastTransactionBlock } = useSyncContext();
+  const { bridgeInfo } = useBridgeContext();
 
   const methods = useForm({
     defaultValues,
@@ -58,6 +61,16 @@ const useVaultManageDeposit = (
     formState: { errors },
   } = methods;
 
+  useEffect(() => {
+    if (
+      USDC_MINT_ADDRESSES.includes(token.id.toLowerCase()) &&
+      bridgeInfo.type === BridgeType.CreateVaultDepositFromBridgedUSDC
+    ) {
+      console.log("set value", bridgeInfo.amount);
+      setValue("formToken", bridgeInfo.amount);
+    }
+  }, [bridgeInfo, token, setValue]);
+
   const [formType, setFormType] = useState<FormType>(
     shutdown ? FormType.WITHDRAW : FormType.DEPOSIT
   );

src/hooks/Vaults/useVaultOpenDeposit.ts

@@ -19,6 +19,8 @@ import {
 import useSyncContext from "@/context/sync";
 import { formatNumber } from "@/utils/format";
 import { getVaultIndex } from "@/utils/getVaultIndex";
+import useBridgeContext, { BridgeType } from "@/context/bridge";
+import { USDC_MINT_ADDRESSES } from "@/utils/addresses";
 
 export const MAX_PERSONAL_DEPOSIT = 50000;
 export const defaultValues = {
@@ -31,6 +33,7 @@ const useVaultOpenDeposit = (vault: IVault, onClose: () => void) => {
   const { publicKey, wallet } = useWallet();
   const anchorWallet = useAnchorWallet();
   const { lastTransactionBlock, setLastTransactionBlock } = useSyncContext();
+  const { bridgeInfo } = useBridgeContext();
 
   const [walletBalance, setWalletBalance] = useState<string>("0");
   const [isWalletFetching, setIsWalletFetching] = useState<boolean>(false);
@@ -53,6 +56,16 @@ const useVaultOpenDeposit = (vault: IVault, onClose: () => void) => {
   const deposit = watch("deposit");
   const sharedToken = watch("sharedToken");
 
+  useEffect(() => {
+    if (
+      USDC_MINT_ADDRESSES.includes(token.id.toLowerCase()) &&
+      bridgeInfo.type === BridgeType.CreateVaultDepositFromBridgedUSDC
+    ) {
+      console.log("set value", bridgeInfo.amount);
+      setValue("deposit", bridgeInfo.amount);
+    }
+  }, [bridgeInfo, token, setValue]);
+
   const getVaultTokenBalance = useCallback(async () => {
     if (!publicKey || !token?.id) {
       return;