From 67ffbfa3b08b6fcdcaa207d9f6e0f30464b2eec3 Mon Sep 17 00:00:00 2001
From: Igor Prokopev <ip@neonlabs.org>
Date: Mon, 21 Nov 2022 10:25:32 +0400
Subject: [PATCH] NDEV-830. Upgraded Wormhole portal for Neon transfer

---
 .gitignore                           |   3 +-
 src/components/FeeMethodSelector.tsx | 135 +++++++++++++++++----------
 src/components/Transfer/Redeem.tsx   |   5 +-
 src/hooks/useHandleRedeem.tsx        |  17 +++-
 src/hooks/useNeonRelayerInfo.ts      |  88 +++++++++++++++++
 src/store/selectors.ts               |   9 +-
 src/store/transferSlice.ts           |  33 ++++++-
 src/utils/consts.ts                  |   9 +-
 8 files changed, 241 insertions(+), 58 deletions(-)
 create mode 100644 src/hooks/useNeonRelayerInfo.ts

diff --git a/.gitignore b/.gitignore
index a6d38d4..2be5a38 100644
--- a/.gitignore
+++ b/.gitignore
@@ -2,6 +2,7 @@
 
 # dependencies
 /node_modules
+.idea
 /.pnp
 .pnp.js
 
@@ -24,4 +25,4 @@ yarn-error.log*
 
 # ethereum contracts
 /contracts
-/src/ethers-contracts
\ No newline at end of file
+/src/ethers-contracts
diff --git a/src/components/FeeMethodSelector.tsx b/src/components/FeeMethodSelector.tsx
index f349e46..aa97e62 100644
--- a/src/components/FeeMethodSelector.tsx
+++ b/src/components/FeeMethodSelector.tsx
@@ -1,6 +1,7 @@
 import {
   CHAIN_ID_ACALA,
   CHAIN_ID_KARURA,
+  CHAIN_ID_NEON,
   CHAIN_ID_TERRA,
   hexToNativeAssetString,
   isEVMChain,
@@ -32,6 +33,7 @@ import {
 } from "../store/selectors";
 import { setRelayerFee, setUseRelayer } from "../store/transferSlice";
 import { CHAINS_BY_ID, getDefaultNativeCurrencySymbol } from "../utils/consts";
+import { useNeonRelayerInfo } from "../hooks/useNeonRelayerInfo";
 
 const useStyles = makeStyles((theme) => ({
   feeSelectorContainer: {
@@ -107,6 +109,11 @@ function FeeMethodSelector() {
     vaaNormalizedAmount,
     originChain ? hexToNativeAssetString(originAsset, originChain) : undefined
   );
+  const neonRelayerInfo = useNeonRelayerInfo(
+    targetChain,
+    vaaNormalizedAmount,
+    originChain ? hexToNativeAssetString(originAsset, originChain) : undefined
+  );
   const sourceChain = useSelector(selectTransferSourceChain);
   const dispatch = useDispatch();
   const relayerSelected = !!useSelector(selectTransferUseRelayer);
@@ -123,6 +130,9 @@ function FeeMethodSelector() {
     targetChain === CHAIN_ID_ACALA || targetChain === CHAIN_ID_KARURA;
   const acalaRelayerEligible = acalaRelayerInfo.data?.shouldRelay;
 
+  const targetIsNeon = targetChain === CHAIN_ID_NEON;
+  const neonRelayerEligible = neonRelayerInfo.data?.shouldRelay;
+
   const chooseAcalaRelayer = useCallback(() => {
     if (targetIsAcala && acalaRelayerEligible) {
       dispatch(setUseRelayer(true));
@@ -130,6 +140,13 @@ function FeeMethodSelector() {
     }
   }, [dispatch, targetIsAcala, acalaRelayerEligible]);
 
+  const chooseNeonRelayer = useCallback(() => {
+    if (targetIsNeon && neonRelayerEligible) {
+      dispatch(setUseRelayer(true));
+      dispatch(setRelayerFee(undefined));
+    }
+  }, [dispatch, targetIsNeon, neonRelayerEligible]);
+
   const chooseRelayer = useCallback(() => {
     if (relayerEligible) {
       dispatch(setUseRelayer(true));
@@ -149,66 +166,84 @@ function FeeMethodSelector() {
       } else {
         chooseManual();
       }
+    } else if (targetIsNeon) {
+      if (neonRelayerEligible) {
+        chooseNeonRelayer();
+      } else {
+        chooseManual();
+      }
     } else if (relayerInfo.data?.isRelayable === true) {
       chooseRelayer();
     } else if (relayerInfo.data?.isRelayable === false) {
       chooseManual();
     }
     //If it's undefined / null it's still loading, so no action is taken.
-  }, [
-    relayerInfo,
+  }, [relayerInfo,
     chooseRelayer,
     chooseManual,
     targetIsAcala,
     acalaRelayerEligible,
     chooseAcalaRelayer,
-  ]);
+    targetIsNeon,
+    neonRelayerEligible,
+    chooseNeonRelayer]);
 
-  const acalaRelayerContent = (
-    <Card
-      className={
-        classes.optionCardBase +
-        " " +
-        (relayerSelected ? classes.optionCardSelected : "") +
-        " " +
-        (acalaRelayerEligible ? classes.optionCardSelectable : "")
-      }
-      onClick={chooseAcalaRelayer}
-    >
-      <div className={classes.alignCenterContainer}>
-        <Checkbox
-          checked={relayerSelected}
-          disabled={!acalaRelayerEligible}
-          onClick={chooseAcalaRelayer}
-          className={classes.inlineBlock}
-        />
-        <div className={clsx(classes.inlineBlock, classes.alignLeft)}>
-          {acalaRelayerEligible ? (
-            <div>
-              <Typography variant="body1">
-                {CHAINS_BY_ID[targetChain].name}
-              </Typography>
-              <Typography variant="body2" color="textSecondary">
-                {CHAINS_BY_ID[targetChain].name} pays gas for you &#127881;
-              </Typography>
-            </div>
-          ) : (
-            <>
-              <Typography color="textSecondary" variant="body2">
-                {"Automatic redeem is unavailable for this token."}
-              </Typography>
-              <div />
-            </>
-          )}
+  const relayerContentFactory = (relayerEligible: any, chooseRelayer: any) => {
+    return (
+      <Card
+        className={
+          classes.optionCardBase +
+          " " +
+          (relayerSelected ? classes.optionCardSelected : "") +
+          " " +
+          (relayerEligible ? classes.optionCardSelectable : "")
+        }
+        onClick={chooseRelayer}
+      >
+        <div className={classes.alignCenterContainer}>
+          <Checkbox
+            checked={relayerSelected}
+            disabled={!relayerEligible}
+            onClick={chooseRelayer}
+            className={classes.inlineBlock}
+          />
+          <div className={clsx(classes.inlineBlock, classes.alignLeft)}>
+            {relayerEligible ? (
+              <>
+                <Typography variant="body1">
+                  {CHAINS_BY_ID[targetChain].name}
+                </Typography>
+                <Typography variant="body2" color="textSecondary">
+                  {CHAINS_BY_ID[targetChain].name} pays gas for you &#127881;
+                </Typography>
+              </>
+            ) : (
+              <>
+                <Typography color="textSecondary" variant="body2">
+                  {"Automatic redeem is unavailable for this token."}
+                </Typography>
+                <div />
+              </>
+            )}
+          </div>
         </div>
-      </div>
-      {acalaRelayerEligible ? (
-        <>
-          <div></div>
-          <div></div>
-        </>
-      ) : null}
-    </Card>
+        {relayerEligible ? (
+          <>
+            <div></div>
+            <div></div>
+          </>
+        ) : null}
+      </Card>
+    );
+  };
+
+  const acalaRelayerContent = relayerContentFactory(
+    acalaRelayerEligible,
+    chooseAcalaRelayer
+  );
+  const neonRelayerContent = relayerContentFactory(
+    neonRelayerEligible,
+    chooseNeonRelayer
   );
 
   const relayerContent = (
@@ -323,7 +358,11 @@ function FeeMethodSelector() {
       >
         How would you like to pay the target chain fees?
       </Typography>
-      {targetIsAcala ? acalaRelayerContent : relayerContent}
+      {targetIsAcala
+        ? acalaRelayerContent
+        : targetIsNeon
+        ? neonRelayerContent
+        : relayerContent}
       {manualRedeemContent}
     </div>
   );
diff --git a/src/components/Transfer/Redeem.tsx b/src/components/Transfer/Redeem.tsx
index 1cd49a3..7d7f16c 100644
--- a/src/components/Transfer/Redeem.tsx
+++ b/src/components/Transfer/Redeem.tsx
@@ -92,7 +92,9 @@ function Redeem() {
   }, [useRelayer]);
   const targetChain = useSelector(selectTransferTargetChain);
   const targetIsAcala =
-    targetChain === CHAIN_ID_ACALA || targetChain === CHAIN_ID_KARURA;
+    targetChain === CHAIN_ID_ACALA ||
+    targetChain === CHAIN_ID_KARURA ||
+    targetChain === CHAIN_ID_NEON;
   const targetAsset = useSelector(selectTransferTargetAsset);
   const isRecovery = useSelector(selectTransferIsRecovery);
   const { isTransferCompletedLoading, isTransferCompleted } =
@@ -273,7 +275,6 @@ function Redeem() {
         </ButtonWithLoader>
         <WaitingForWalletMessage />
       </>
-
       {useRelayer && !isTransferCompleted ? (
         <div className={classes.centered}>
           <Button
diff --git a/src/hooks/useHandleRedeem.tsx b/src/hooks/useHandleRedeem.tsx
index 9a83bdf..197d0b4 100644
--- a/src/hooks/useHandleRedeem.tsx
+++ b/src/hooks/useHandleRedeem.tsx
@@ -1,5 +1,4 @@
 import {
-  ChainId,
   CHAIN_ID_ALGORAND,
   CHAIN_ID_APTOS,
   CHAIN_ID_INJECTIVE,
@@ -7,6 +6,8 @@ import {
   CHAIN_ID_NEAR,
   CHAIN_ID_SOLANA,
   CHAIN_ID_XPLA,
+  ChainId,
+  CHAINS,
   isEVMChain,
   isTerraChain,
   postVaaSolanaWithRetry,
@@ -68,9 +69,10 @@ import {
   getTokenBridgeAddressForChain,
   MAX_VAA_UPLOAD_RETRIES_SOLANA,
   NEAR_TOKEN_BRIDGE_ACCOUNT,
-  SOLANA_HOST,
+  NEON_RELAY_URL,
   SOL_BRIDGE_ADDRESS,
   SOL_TOKEN_BRIDGE_ADDRESS,
+  SOLANA_HOST,
 } from "../utils/consts";
 import { broadcastInjectiveTx } from "../utils/injective";
 import {
@@ -530,13 +532,22 @@ export function useHandleRedeem() {
     injAddress,
   ]);
 
+  const getUrl = (targetChain: ChainId): string => {
+    switch (targetChain) {
+      case CHAINS.neon:
+        return NEON_RELAY_URL;
+      default:
+        return ACALA_RELAY_URL;
+    }
+  };
+
   const handleAcalaRelayerRedeemClick = useCallback(async () => {
     if (!signedVAA) return;
 
     dispatch(setIsRedeeming(true));
 
     try {
-      const res = await axios.post(ACALA_RELAY_URL, {
+      const res = await axios.post(getUrl(targetChain), {
         targetChain,
         signedVAA: uint8ArrayToHex(signedVAA),
       });
diff --git a/src/hooks/useNeonRelayerInfo.ts b/src/hooks/useNeonRelayerInfo.ts
new file mode 100644
index 0000000..8e590c8
--- /dev/null
+++ b/src/hooks/useNeonRelayerInfo.ts
@@ -0,0 +1,88 @@
+import { ChainId } from "@certusone/wormhole-sdk";
+import { CHAIN_ID_NEON } from "@certusone/wormhole-sdk/lib/cjs/utils/consts";
+import axios from "axios";
+import { useEffect, useState } from "react";
+import { useDispatch, useSelector } from "react-redux";
+import {
+  DataWrapper,
+  errorDataWrapper,
+  fetchDataWrapper,
+  getEmptyDataWrapper,
+  receiveDataWrapper,
+} from "../store/helpers";
+import { selectNeonRelayerInfo } from "../store/selectors";
+import {
+  errorNeonRelayerInfo,
+  fetchNeonRelayerInfo,
+  receiveNeonRelayerInfo,
+  setNeonRelayerInfo,
+} from "../store/transferSlice";
+import { NEON_RELAYER_URL, NEON_SHOULD_RELAY_URL } from "../utils/consts";
+
+export interface NeonRelayerInfo {
+  shouldRelay: boolean;
+  msg: string;
+}
+
+export const useNeonRelayerInfo = (
+  targetChain: ChainId,
+  vaaNormalizedAmount: string | undefined,
+  originAsset: string | undefined,
+  useStore: boolean = true
+) => {
+  // within flow, update the store
+  const dispatch = useDispatch();
+  // within recover, use internal state
+  const [state, setState] = useState<DataWrapper<NeonRelayerInfo>>(
+    getEmptyDataWrapper()
+  );
+  useEffect(() => {
+    let cancelled = false;
+    if (
+      !NEON_RELAYER_URL ||
+      !targetChain ||
+      targetChain !== CHAIN_ID_NEON ||
+      !vaaNormalizedAmount ||
+      !originAsset
+    ) {
+      useStore
+        ? dispatch(setNeonRelayerInfo())
+        : setState(getEmptyDataWrapper());
+      return;
+    }
+    useStore ? dispatch(fetchNeonRelayerInfo()) : setState(fetchDataWrapper());
+    (async () => {
+      try {
+        const result = await axios.get(NEON_SHOULD_RELAY_URL, {
+          params: {
+            targetChain,
+            originAsset,
+            amount: vaaNormalizedAmount,
+          },
+        });
+        if (!cancelled) {
+          useStore
+            ? dispatch(receiveNeonRelayerInfo(result.data))
+            : setState(receiveDataWrapper(result.data));
+        }
+      } catch (e) {
+        if (!cancelled) {
+          useStore
+            ? dispatch(
+                errorNeonRelayerInfo(
+                  "Failed to retrieve the Neon relayer info."
+                )
+              )
+            : setState(
+                errorDataWrapper("Failed to retrieve the Neon relayer info.")
+              );
+        }
+      }
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, [targetChain, vaaNormalizedAmount, originAsset, dispatch, useStore]);
+  const neonRelayerInfoFromStore = useSelector(selectNeonRelayerInfo);
+  return useStore ? neonRelayerInfoFromStore : state;
+};
diff --git a/src/store/selectors.ts b/src/store/selectors.ts
index c713de3..340eb5c 100644
--- a/src/store/selectors.ts
+++ b/src/store/selectors.ts
@@ -1,6 +1,7 @@
 import {
   CHAIN_ID_ACALA,
   CHAIN_ID_KARURA,
+  CHAIN_ID_NEON,
   CHAIN_ID_SOLANA,
   isEVMChain,
 } from "@certusone/wormhole-sdk";
@@ -296,14 +297,16 @@ export const selectTransferTargetError = (state: RootState) => {
     state.transfer.relayerFee === undefined &&
     // Acala offers relaying without a fee for qualified tokens
     state.transfer.targetChain !== CHAIN_ID_ACALA &&
-    state.transfer.targetChain !== CHAIN_ID_KARURA
+    state.transfer.targetChain !== CHAIN_ID_KARURA &&
+    state.transfer.targetChain !== CHAIN_ID_NEON
   ) {
     return "Invalid relayer fee.";
   }
   if (
     state.transfer.useRelayer &&
     (state.transfer.targetChain === CHAIN_ID_ACALA ||
-      state.transfer.targetChain === CHAIN_ID_KARURA) &&
+      state.transfer.targetChain === CHAIN_ID_KARURA ||
+      state.transfer.targetChain === CHAIN_ID_NEON) &&
     !state.transfer.acalaRelayerInfo.data?.shouldRelay
   ) {
     return "Token is ineligible for relay.";
@@ -357,6 +360,8 @@ export const selectTransferRelayerFee = (state: RootState) =>
   state.transfer.relayerFee;
 export const selectAcalaRelayerInfo = (state: RootState) =>
   state.transfer.acalaRelayerInfo;
+export const selectNeonRelayerInfo = (state: RootState) =>
+  state.transfer.neonRelayerInfo;
 export const selectSolanaTokenMap = (state: RootState) => {
   return state.tokens.solanaTokenMap;
 };
diff --git a/src/store/transferSlice.ts b/src/store/transferSlice.ts
index e83606d..e801e30 100644
--- a/src/store/transferSlice.ts
+++ b/src/store/transferSlice.ts
@@ -1,7 +1,7 @@
 import {
-  ChainId,
   CHAIN_ID_ETH,
   CHAIN_ID_SOLANA,
+  ChainId,
 } from "@certusone/wormhole-sdk";
 import { createSlice, PayloadAction } from "@reduxjs/toolkit";
 import { StateSafeWormholeWrappedInfo } from "../hooks/useCheckIfWormholeWrapped";
@@ -63,6 +63,7 @@ export interface TransferState {
   useRelayer: boolean;
   relayerFee: string | undefined;
   acalaRelayerInfo: DataWrapper<AcalaRelayerInfo>;
+  neonRelayerInfo: DataWrapper<AcalaRelayerInfo>;
 }
 
 const initialState: TransferState = {
@@ -91,6 +92,7 @@ const initialState: TransferState = {
   useRelayer: false,
   relayerFee: undefined,
   acalaRelayerInfo: getEmptyDataWrapper(),
+  neonRelayerInfo: getEmptyDataWrapper(),
 };
 
 export const transferSlice = createSlice({
@@ -308,6 +310,31 @@ export const transferSlice = createSlice({
     ) => {
       state.acalaRelayerInfo = receiveDataWrapper(action.payload);
     },
+    setNeonRelayerInfo: (
+      state,
+      action: PayloadAction<AcalaRelayerInfo | undefined>
+    ) => {
+      state.neonRelayerInfo = action.payload
+        ? receiveDataWrapper(action.payload)
+        : getEmptyDataWrapper();
+    },
+    fetchNeonRelayerInfo: (state) => {
+      state.neonRelayerInfo = fetchDataWrapper();
+    },
+    errorNeonRelayerInfo: (
+      state,
+      action: PayloadAction<string | undefined>
+    ) => {
+      state.neonRelayerInfo = errorDataWrapper(
+        action.payload || "An unknown error occurred."
+      );
+    },
+    receiveNeonRelayerInfo: (
+      state,
+      action: PayloadAction<AcalaRelayerInfo>
+    ) => {
+      state.neonRelayerInfo = receiveDataWrapper(action.payload);
+    },
   },
 });
 
@@ -344,6 +371,10 @@ export const {
   fetchAcalaRelayerInfo,
   errorAcalaRelayerInfo,
   receiveAcalaRelayerInfo,
+  setNeonRelayerInfo,
+  fetchNeonRelayerInfo,
+  errorNeonRelayerInfo,
+  receiveNeonRelayerInfo,
 } = transferSlice.actions;
 
 export default transferSlice.reducer;
diff --git a/src/utils/consts.ts b/src/utils/consts.ts
index 709f637..aa3cd50 100644
--- a/src/utils/consts.ts
+++ b/src/utils/consts.ts
@@ -1,5 +1,4 @@
 import {
-  ChainId,
   CHAIN_ID_ACALA,
   CHAIN_ID_ALGORAND,
   CHAIN_ID_APTOS,
@@ -23,6 +22,7 @@ import {
   CHAIN_ID_TERRA,
   CHAIN_ID_TERRA2,
   CHAIN_ID_XPLA,
+  ChainId,
   coalesceChainName,
   CONTRACTS,
   isEVMChain,
@@ -64,11 +64,13 @@ const urlParams = new URLSearchParams(window.location.search);
 const paramCluster = urlParams.get("cluster");
 export const CLUSTER: Cluster =
   paramCluster === "devnet" ? "devnet" : "testnet";
+
 export interface ChainInfo {
   id: ChainId;
   name: string;
   logo: string;
 }
+
 export const CHAINS: ChainInfo[] =
   CLUSTER === "testnet"
     ? [
@@ -858,6 +860,11 @@ export const ACALA_RELAYER_URL =
 export const ACALA_RELAY_URL = `${ACALA_RELAYER_URL}/relay`;
 export const ACALA_SHOULD_RELAY_URL = `${ACALA_RELAYER_URL}/shouldRelay`;
 
+export const NEON_RELAYER_URL =
+  CLUSTER === "testnet" ? "https://wormhole-relayer.neontest.xyz" : "";
+export const NEON_RELAY_URL = `${NEON_RELAYER_URL}/relay`;
+export const NEON_SHOULD_RELAY_URL = `${NEON_RELAYER_URL}/shouldRelay`;
+
 export const getChainShortName = (chainId: ChainId) => {
   return chainId === CHAIN_ID_BSC ? "BSC" : CHAINS_BY_ID[chainId]?.name;
 };