NDEV-830. Upgraded Wormhole portal for Neon transfer

.github/workflows/build.yaml

@@ -5,7 +5,7 @@ on:
       - main
 jobs:
   build-and-deploy:
-    runs-on: ubuntu-latest
+    runs-on: gha-runner-scale-set
     steps:
       - name: Checkout 🛎️
         uses: actions/checkout@v3

.github/workflows/prettier.yml

@@ -4,7 +4,7 @@ on: pull_request
 
 jobs:
   prettier:
-    runs-on: "ubuntu-latest"
+    runs-on: gha-runner-scale-set
     steps:
       - name: Checkout repository
         uses: actions/checkout@v3

.github/workflows/test.yaml

@@ -3,7 +3,7 @@ on:
   pull_request:
 jobs:
   test:
-    runs-on: ubuntu-latest
+    runs-on: gha-runner-scale-set
     steps:
       - uses: actions/checkout@v3
       - uses: actions/setup-node@v3

.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
+/src/ethers-contracts

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,13 +130,23 @@ 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));
       dispatch(setRelayerFee(undefined));
     }
   }, [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,6 +166,12 @@ 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) {
@@ -162,53 +185,67 @@ function FeeMethodSelector() {
     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 +360,11 @@ function FeeMethodSelector() {
       >
         How would you like to pay the target chain fees?
       </Typography>
-      {targetIsAcala ? acalaRelayerContent : relayerContent}
+      {targetIsAcala
+        ? acalaRelayerContent
+        : targetIsNeon
+        ? neonRelayerContent
+        : relayerContent}
       {manualRedeemContent}
     </div>
   );

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

src/hooks/useHandleRedeem.tsx

@@ -1,12 +1,13 @@
 import {
-  ChainId,
   CHAIN_ID_ALGORAND,
   CHAIN_ID_APTOS,
   CHAIN_ID_INJECTIVE,
   CHAIN_ID_KLAYTN,
   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),
       });

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;
+};