Sys5 bridge (#50)

* feat: hiding sys5 changes behind feature toggle

* fix: filter deploy to stage for main only

* fix: filter deploy to stage for main only

* feat: add constants api

* fix: sys5 changes on testnet

* fix: remove unused import

* fix: renable steps on nevm to sys

* fix: add updated syscoinjs lib for mint sysx fix

* chore: update syscoinjs lib to latest

* fix: update switch wallet capabilities

Author: osiastedian

.github/workflows/ghcr.yaml

@@ -5,6 +5,7 @@ on:
     branches:
       - "main"
       - "support-pali-v1-backward-compatibility"
+      - "sys5-bridge"
 
 jobs:
   docker:
@@ -59,6 +60,7 @@ jobs:
 
   deploy-staging:
     needs: docker
+    if: github.ref_name == 'main'
     environment:
       name: staging
     permissions:

api/services/admin-transfer/constants.ts

@@ -1,4 +1,3 @@
-import { BlockbookAPIURL } from "@contexts/Transfer/constants";
 import { utils as syscoinUtils } from "syscoinjs-lib";
 
 export const CONFIRM_UTXO_TRANSACTION = "Confirm UTXO Transaction";
@@ -11,7 +10,7 @@ export const verifyTxTokenTransfer = async (
   tokenType: string
 ) => {
   const rawTransaction = await syscoinUtils.fetchBackendRawTx(
-    BlockbookAPIURL,
+    process.env.UTXO_RPC_URL!,
     txId
   );
 

api/services/admin-transfer/handle-freeze-burn.ts

@@ -44,7 +44,7 @@ export const handleFreezeBurn = async (
     const receipt = await validateTransactionReceipt(
       web3,
       txHash,
-      ERC20_MANAGER_CONTRACT_ADDRESS
+      ERC20_MANAGER_CONTRACT_ADDRESS!
     );
 
     if (clearAll) {

api/services/admin-transfer/handle-submit-proofs.ts

@@ -44,7 +44,7 @@ export const handleSubmitProofs = async (
     const receipt = await validateTransactionReceipt(
       web3,
       txHash,
-      RELAY_CONTRACT_ADDRESS
+      RELAY_CONTRACT_ADDRESS!
     );
     if (clearAll) {
       transfer.logs = transfer.logs.filter(

components/Bridge/NEVMStepWrapepr.tsx

@@ -1,8 +1,6 @@
-import {
-  MAINNET_CHAIN_ID,
-  useNEVM,
-} from "@contexts/ConnectedWallet/NEVMProvider";
+import { useNEVM } from "@contexts/ConnectedWallet/NEVMProvider";
 import { usePaliWalletV2 } from "@contexts/PaliWallet/usePaliWallet";
+import { useConstants } from "@contexts/useConstants";
 import { Button } from "@mui/material";
 import { isValidEthereumAddress } from "@pollum-io/sysweb3-utils";
 
@@ -14,6 +12,8 @@ const NEVMStepWrapper: React.FC<Props> = ({ children }) => {
   const { version, isBitcoinBased, switchTo, isEVMInjected, connectWallet } =
     usePaliWalletV2();
 
+  const { constants } = useConstants();
+
   const { connect, account, chainId, switchToMainnet } = useNEVM();
 
   if (version === "v2" && isBitcoinBased && isEVMInjected) {
@@ -38,7 +38,7 @@ const NEVMStepWrapper: React.FC<Props> = ({ children }) => {
     );
   }
 
-  if (chainId !== MAINNET_CHAIN_ID) {
+  if (chainId !== constants?.chain_id) {
     return (
       <Button variant="contained" onClick={switchToMainnet}>
         Switch to NEVM Network

components/Bridge/Stepper.tsx

@@ -6,25 +6,27 @@ import {
   SYS_TO_ETH_TRANSFER_STATUS,
 } from "@contexts/Transfer/types";
 
-const NEVMToSYSStepper: React.FC<{ activeStep: number }> = ({ activeStep }) => (
-  <Stepper activeStep={activeStep}>
-    <Step key="connect-and-validate">
-      <StepLabel>Connect and Validated</StepLabel>
-    </Step>
-    <Step key="freeze-and-burn">
-      <StepLabel>Freeze and Burn SYS</StepLabel>
-    </Step>
-    <Step key="mint-sysx">
-      <StepLabel>Mint SYSX</StepLabel>
-    </Step>
-    <Step key="burn-sysx">
-      <StepLabel>Burn SYSX</StepLabel>
-    </Step>
-    <Step key="Completed">
-      <StepLabel>Completed</StepLabel>
-    </Step>
-  </Stepper>
-);
+const NEVMToSYSStepper: React.FC<{ activeStep: number }> = ({ activeStep }) => {
+  return (
+    <Stepper activeStep={activeStep}>
+      <Step key="connect-and-validate">
+        <StepLabel>Connect and Validated</StepLabel>
+      </Step>
+      <Step key="freeze-and-burn">
+        <StepLabel>Freeze and Burn SYS</StepLabel>
+      </Step>
+      <Step key="mint-sysx">
+        <StepLabel>Mint SYSX</StepLabel>
+      </Step>
+      <Step key="burn-sysx">
+        <StepLabel>Burn SYSX</StepLabel>
+      </Step>
+      <Step key="Completed">
+        <StepLabel>Completed</StepLabel>
+      </Step>
+    </Stepper>
+  );
+};
 
 const SYSToNEVMStepper: React.FC<{ activeStep: number }> = ({ activeStep }) => {
   const { transfer } = useTransfer();

components/Bridge/Steps/CompleteNevmToSys.tsx

@@ -1,17 +1,19 @@
 import { ITransfer } from "@contexts/Transfer/types";
+import { useConstants } from "@contexts/useConstants";
 import { Alert, Box, Typography, Link } from "@mui/material";
 
 import React from "react";
 
-const SYSCOIN_TX_BLOCKCHAIN_URL = "https://blockbook.syscoin.org/tx/";
-const NEVM_TX_BLOCKCHAIN_URL = "https://explorer.syscoin.org/tx/";
-
 type Props = {
   transfer: ITransfer;
 };
 
 const BridgeCompleteNevmToSys: React.FC<Props> = ({ transfer }) => {
   const { logs } = transfer;
+  const { constants } = useConstants();
+  const SYSCOIN_TX_BLOCKCHAIN_URL = `${constants?.explorer.utxo}/tx/`;
+  const NEVM_TX_BLOCKCHAIN_URL = `${constants?.explorer.nevm}/tx/`;
+
   const mintSysTx = logs.find(
     (log) => log.status === "mint-sysx" && log.payload.data.tx !== undefined
   );

components/Bridge/Steps/CompleteSysToNevm.tsx

@@ -1,16 +1,17 @@
 import { ITransfer } from "@contexts/Transfer/types";
+import { useConstants } from "@contexts/useConstants";
 import { Alert, Box, Typography, Link } from "@mui/material";
 
 import React from "react";
 
-const SYSCOIN_TX_BLOCKCHAIN_URL = "https://blockbook.syscoin.org/tx/";
-const NEVM_TX_BLOCKCHAIN_URL = "https://explorer.syscoin.org/tx/";
-
 type Props = {
   transfer: ITransfer;
 };
 
 const BridgeCompleteSysToNevm: React.FC<Props> = ({ transfer }) => {
+  const { constants } = useConstants();
+  const SYSCOIN_TX_BLOCKCHAIN_URL = `${constants?.explorer.utxo}/tx/`;
+  const NEVM_TX_BLOCKCHAIN_URL = `${constants?.explorer.nevm}/tx/`;
   const { logs } = transfer;
   const burnSysTx =
     transfer.useSysx || transfer.utxoAssetType === "sysx"

components/Bridge/Steps/ConfirmNEVMTransaction.tsx

@@ -3,8 +3,8 @@ import { useTransfer } from "../context/TransferContext";
 import { Alert, CircularProgress, Link } from "@mui/material";
 import { useNevmTransaction } from "../hooks/useNevmTransaction";
 import { useEffect } from "react";
-import { NEVM_TX_BLOCKCHAIN_URL } from "@constants";
 import NEVMStepWrapper from "../NEVMStepWrapepr";
+import { useConstants } from "@contexts/useConstants";
 
 type Props = {
   successStatus: TransferStatus;
@@ -19,15 +19,18 @@ const BridgeConfirmNEVMTransaction: React.FC<Props> = ({
   invalidStateMessage,
   loadingMessage,
 }) => {
+  const { constants } = useConstants();
   const { transfer, saveTransfer } = useTransfer();
 
   const sourceLog: ITransferLog | undefined = transfer?.logs?.find(
-    (log) => log.status === sourceStatus && Boolean(log?.payload?.data.hash)
+    (log) => log.status === sourceStatus && Boolean(log?.payload?.data?.hash)
   );
 
   const sourceTxHash = sourceLog?.payload.data.hash;
 
-  const { data, isFetched } = useNevmTransaction(sourceTxHash, { refetch: true });
+  const { data, isFetched } = useNevmTransaction(sourceTxHash, {
+    refetch: true,
+  });
 
   useEffect(() => {
     if (!isFetched || !data) {
@@ -63,7 +66,10 @@ const BridgeConfirmNEVMTransaction: React.FC<Props> = ({
       {loadingMessage}
       <CircularProgress size={"1rem"} />
       <br />
-      <Link href={`${NEVM_TX_BLOCKCHAIN_URL}${sourceTxHash}`} target="_blank">
+      <Link
+        href={`${constants?.explorer.nevm}/tx/${sourceTxHash}`}
+        target="_blank"
+      >
         View on Explorer
       </Link>
     </Alert>

components/Bridge/Steps/ConfirmUTXOTransaction.tsx

@@ -3,8 +3,8 @@ import { useTransfer } from "../context/TransferContext";
 import { useUtxoTransaction } from "components/Bridge/hooks/useUtxoTransaction";
 import { ITransferLog, TransferStatus } from "@contexts/Transfer/types";
 import React, { useEffect } from "react";
-import { SYSCOIN_TX_BLOCKCHAIN_URL } from "@constants";
 import UTXOStepWrapper from "../UTXOStepWrapper";
+import { useConstants } from "@contexts/useConstants";
 
 type Props = {
   invalidStateMessage: string;
@@ -22,6 +22,7 @@ const BridgeStepConfirmUTXOTransaction: React.FC<Props> = ({
   confirmations,
 }) => {
   const { transfer, saveTransfer } = useTransfer();
+  const { constants } = useConstants();
 
   const utxoStepLog = transfer.logs.find(
     (log) => log.status === sourceStatus && Boolean(log.payload?.data?.tx)
@@ -70,7 +71,7 @@ const BridgeStepConfirmUTXOTransaction: React.FC<Props> = ({
       {loadingMessage} &nbsp;
       <CircularProgress size={"1rem"} />
       <br />
-      <Link href={`${SYSCOIN_TX_BLOCKCHAIN_URL}${txId}`} target="_blank">
+      <Link href={`${constants?.explorer.utxo}/tx/${txId}`} target="_blank">
         View on Explorer
       </Link>
     </Alert>

components/Bridge/Steps/ConnectValidate/StartTransferButton.tsx

@@ -10,6 +10,7 @@ import {
 import { useFormContext } from "react-hook-form";
 import { useNevmBalance, useUtxoBalance } from "utils/balance-hooks";
 import { useFeatureFlags } from "../../hooks/useFeatureFlags";
+import { useConstants } from "@contexts/useConstants";
 
 const ErrorMessage = ({ message }: { message: string }) => (
   <Box sx={{ display: "flex", mb: 2 }}>
@@ -23,6 +24,7 @@ export const ConnectValidateStartTransferButton: React.FC<{
   transfer: ITransfer;
   isSaving: boolean;
 }> = ({ isSaving, transfer }) => {
+  const { constants } = useConstants();
   const {
     watch,
     formState: { errors, isValid },
@@ -64,7 +66,7 @@ export const ConnectValidateStartTransferButton: React.FC<{
     (sysxBalance.data < MIN_AMOUNT || sysxBalance.data < amount);
 
   const isUtxoValid =
-    isValidSYSAddress(utxoAddress, 57) &&
+    isValidSYSAddress(utxoAddress, constants?.isTestnet ? 5700 : 57) &&
     !isUtxoNotEnoughGas &&
     !isSysxNotEnoughBalance &&
     utxoAssetType !== undefined;

components/Bridge/UTXOStepWrapper.tsx

@@ -2,6 +2,7 @@ import {
   usePaliWallet,
   usePaliWalletV2,
 } from "@contexts/PaliWallet/usePaliWallet";
+import { useConstants } from "@contexts/useConstants";
 import { Button } from "@mui/material";
 import { isValidSYSAddress } from "@pollum-io/sysweb3-utils";
 
@@ -10,6 +11,7 @@ type UTXOStepWrapperProps = {
 };
 
 const UTXOStepWrapper: React.FC<UTXOStepWrapperProps> = ({ children }) => {
+  const { constants } = useConstants();
   const { version, connectedAccount, connectWallet } = usePaliWallet();
 
   const { isBitcoinBased, switchTo, changeAccount } = usePaliWalletV2();
@@ -26,7 +28,7 @@ const UTXOStepWrapper: React.FC<UTXOStepWrapperProps> = ({ children }) => {
     return <Button onClick={connectWallet}>Connect Pali Wallet</Button>;
   }
 
-  if (!isValidSYSAddress(connectedAccount, 57)) {
+  if (!isValidSYSAddress(connectedAccount, constants?.isTestnet ? 5700 : 57)) {
     return (
       <>
         <Button variant="contained" onClick={changeAccount}>

components/Bridge/context/RelayContract.tsx

@@ -1,22 +1,33 @@
-import { BlockbookAPIURL } from "@contexts/Transfer/constants";
+import { useConstants } from "@contexts/useConstants";
 import { createContext, useContext, useMemo } from "react";
 
 import { syscoin, utils as syscoinUtils } from "syscoinjs-lib";
 
-export const SyscoinContext = createContext<syscoin>(
-  new syscoin(null, BlockbookAPIURL, syscoinUtils.syscoinNetworks.mainnet)
-);
+export const SyscoinContext = createContext({} as syscoin);
 
 export const useSyscoin = () => useContext(SyscoinContext);
 
 export const SyscoinProvider: React.FC<{ children: React.ReactNode }> = ({
   children,
 }) => {
-  const instance = useMemo(
-    () =>
-      new syscoin(null, BlockbookAPIURL, syscoinUtils.syscoinNetworks.mainnet),
-    []
-  );
+  const { data } = useConstants();
+  const instance = useMemo(() => {
+    if (!data) {
+      return null;
+    }
+    return new syscoin(
+      null,
+      data.rpc.utxo,
+      data.isTestnet
+        ? syscoinUtils.syscoinNetworks.testnet
+        : syscoinUtils.syscoinNetworks.mainnet
+    );
+  }, [data]);
+
+  if (!instance) {
+    return null;
+  }
+
   return (
     <SyscoinContext.Provider value={instance}>
       {children}

components/Bridge/context/Syscoin.tsx

@@ -1,15 +1,21 @@
 import { useMemo } from "react";
 import { useWeb3 } from "../context/Web";
 import SyscoinERC20ManagerABI from "@contexts/Transfer/abi/SyscoinERC20Manager";
+import { useFeatureFlags } from "./useFeatureFlags";
+import { useConstants } from "@contexts/useConstants";
 
 export const useErc20ManagerContract = () => {
   const web3 = useWeb3();
+  const flags = useFeatureFlags();
+  const { data: constants } = useConstants();
   return useMemo(
     () =>
       new web3.eth.Contract(
         SyscoinERC20ManagerABI,
-        "0xA738a563F9ecb55e0b2245D1e9E380f0fE455ea1"
+        flags.isEnabled("isSys5Enabled")
+          ? constants?.contracts.ecr20ManagerContract.address
+          : "0xA738a563F9ecb55e0b2245D1e9E380f0fE455ea1"
       ),
-    [web3]
+    [web3, flags, constants?.contracts.ecr20ManagerContract.address]
   );
 };

components/Bridge/hooks/useErc20ManagerContract.ts

@@ -3,6 +3,7 @@ import { useQuery } from "react-query";
 type FeatureFlags = {
   foundationFundingAvailable: boolean;
   adminEnabled: boolean;
+  isSys5Enabled: boolean;
 };
 
 export const useFeatureFlags = () => {