Onboarding: Support evm on subtrate

centrifuge-app/src/components/OnboardingAuthProvider.tsx

@@ -1,5 +1,7 @@
 import Centrifuge from '@centrifuge/centrifuge-js'
 import { useCentrifuge, useEvmProvider, useWallet } from '@centrifuge/centrifuge-react'
+import { hexToU8a } from '@polkadot/util'
+import { encodeAddress } from '@polkadot/util-crypto'
 import { Wallet } from '@subwallet/wallet-connect/types'
 import * as React from 'react'
 import { useMutation, useQuery } from 'react-query'
@@ -13,24 +15,30 @@ export const OnboardingAuthContext = React.createContext<{
 const AUTHORIZED_ONBOARDING_PROXY_TYPES = ['Any', 'Invest', 'NonTransfer', 'NonProxy']
 
 export function OnboardingAuthProvider({ children }: { children: React.ReactNode }) {
-  const { selectedWallet, selectedProxies, selectedAccount } = useWallet().substrate
-  const { selectedAddress } = useWallet().evm
+  const {
+    substrate: { selectedWallet, selectedProxies, selectedAccount, evmChainId },
+    evm: { selectedAddress },
+    isEvmOnSubstrate,
+  } = useWallet()
   const cent = useCentrifuge()
   const provider = useEvmProvider()
-  const walletAddress = selectedAccount?.address ?? selectedAddress
+  // onboarding-api expects the wallet address in the native substrate format
+  const address = selectedAccount?.address
+    ? encodeAddress(hexToU8a(selectedAccount?.address), cent.getChainId())
+    : selectedAddress
   const proxy = selectedProxies?.[0]
 
   const { data: session, refetch: refetchSession } = useQuery(
     ['session', selectedAccount?.address, proxy?.delegator, selectedAddress],
     () => {
-      if (selectedAccount?.address || selectedAddress) {
+      if (address) {
         if (proxy) {
-          const rawItem = sessionStorage.getItem(`centrifuge-onboarding-auth-${walletAddress}-${proxy.delegator}`)
+          const rawItem = sessionStorage.getItem(`centrifuge-onboarding-auth-${address}-${proxy.delegator}`)
           if (rawItem) {
             return JSON.parse(rawItem)
           }
         } else {
-          const rawItem = sessionStorage.getItem(`centrifuge-onboarding-auth-${walletAddress}`)
+          const rawItem = sessionStorage.getItem(`centrifuge-onboarding-auth-${address}`)
           if (rawItem) {
             return JSON.parse(rawItem)
           }
@@ -44,9 +52,12 @@ export function OnboardingAuthProvider({ children }: { children: React.ReactNode
     try {
       if (selectedAccount?.address && selectedWallet?.signer) {
         await loginWithSubstrate(selectedAccount?.address, selectedWallet.signer, cent, proxy)
+      } else if (isEvmOnSubstrate && selectedAddress && provider?.getSigner()) {
+        await loginWithEvm(selectedAddress, provider.getSigner(), evmChainId)
       } else if (selectedAddress && provider?.getSigner()) {
         await loginWithEvm(selectedAddress, provider.getSigner())
       }
+      throw new Error('network not supported')
     } catch {
     } finally {
       refetchSession()
@@ -118,7 +129,9 @@ export function useOnboardingAuth() {
   }
 }
 
-const loginWithSubstrate = async (address: string, signer: Wallet['signer'], cent: Centrifuge, proxy?: any) => {
+const loginWithSubstrate = async (hexAddress: string, signer: Wallet['signer'], cent: Centrifuge, proxy?: any) => {
+  // onboarding-api expects the wallet address in the native substrate format
+  const address = encodeAddress(hexToU8a(hexAddress), cent.getChainId())
   const nonceRes = await fetch(`${import.meta.env.REACT_APP_ONBOARDING_API_URL}/nonce`, {
     method: 'POST',
     headers: {
@@ -144,7 +157,7 @@ const loginWithSubstrate = async (address: string, signer: Wallet['signer'], cen
             'Content-Type': 'application/json',
           },
           credentials: 'include',
-          body: JSON.stringify({ jw3t: token, nonce }),
+          body: JSON.stringify({ jw3t: token, nonce, network: 'substrate' }),
         })
         if (authTokenRes.status !== 200) {
           throw new Error('Failed to authenticate wallet')
@@ -168,7 +181,7 @@ const loginWithSubstrate = async (address: string, signer: Wallet['signer'], cen
           'Content-Type': 'application/json',
         },
         credentials: 'include',
-        body: JSON.stringify({ jw3t: token, nonce }),
+        body: JSON.stringify({ jw3t: token, nonce, network: 'substrate' }),
       })
       if (authTokenRes.status !== 200) {
         throw new Error('Failed to authenticate wallet')
@@ -183,7 +196,7 @@ const loginWithSubstrate = async (address: string, signer: Wallet['signer'], cen
   }
 }
 
-const loginWithEvm = async (address: string, signer: any) => {
+const loginWithEvm = async (address: string, signer: any, evmChainId?: number) => {
   const nonceRes = await fetch(`${import.meta.env.REACT_APP_ONBOARDING_API_URL}/nonce`, {
     method: 'POST',
     headers: {
@@ -203,7 +216,7 @@ Please sign to authenticate your wallet
 
 URI: ${origin}
 Version: 1
-Chain ID: ${import.meta.env.REACT_APP_TINLAKE_NETWORK === 'mainnet' ? 1 : 5 /* goerli */}
+Chain ID: ${evmChainId ? evmChainId : import.meta.env.REACT_APP_TINLAKE_NETWORK === 'mainnet' ? 1 : 5 /* goerli */}
 Nonce: ${nonce}
 Issued At: ${new Date().toISOString()}`
 
@@ -214,7 +227,13 @@ Issued At: ${new Date().toISOString()}`
       'Content-Type': 'application/json',
     },
     credentials: 'include',
-    body: JSON.stringify({ message, signature: signedMessage, address, nonce }),
+    body: JSON.stringify({
+      message,
+      signature: signedMessage,
+      address,
+      nonce,
+      network: evmChainId ? 'evmOnSubstrate' : 'evm',
+    }),
   })
   if (tokenRes.status !== 200) {
     throw new Error('Failed to authenticate wallet')

centrifuge-app/src/pages/Onboarding/ApprovalStatus.tsx

@@ -20,15 +20,15 @@ export const ApprovalStatus = ({ signedAgreementUrl }: Props) => {
   const trancheId = pool.trancheId
   const poolName = pool.name
 
-  const onboardingStatus = onboardingUser?.poolSteps?.[poolId]?.[trancheId].status?.status
+  const onboardingStatus = onboardingUser?.poolSteps?.[poolId]?.[trancheId]?.status?.status
 
   const onFocus = () => {
     refetchOnboardingUser()
   }
 
   React.useEffect(() => {
     if (
-      onboardingUser.poolSteps?.[poolId]?.[trancheId].status.status === 'pending' ||
+      onboardingUser.poolSteps?.[poolId]?.[trancheId]?.status?.status === 'pending' ||
       (onboardingUser.investorType === 'entity' && onboardingUser?.manualKybStatus)
     ) {
       window.addEventListener('focus', onFocus)

centrifuge-app/src/pages/Onboarding/queries/useSignRemark.ts

@@ -13,6 +13,7 @@ import { lastValueFrom } from 'rxjs'
 import { useOnboardingAuth } from '../../../components/OnboardingAuthProvider'
 import { ethConfig } from '../../../config'
 import { Dec } from '../../../utils/Decimal'
+import { useSuitableAccounts } from '../../../utils/usePermissions'
 import RemarkerAbi from './abi/Remarker.abi.json'
 
 export const useSignRemark = (
@@ -22,6 +23,7 @@ export const useSignRemark = (
     {
       txHash: string
       blockNumber: string
+      isEvmOnSubstrate?: boolean
     },
     unknown
   >
@@ -33,64 +35,80 @@ export const useSignRemark = (
   const { updateTransaction, addOrUpdateTransaction } = useTransactions()
   const {
     connectedType,
+    isEvmOnSubstrate,
     substrate: { selectedAddress, selectedAccount },
   } = useWallet()
   const [expectedTxFee, setExpectedTxFee] = React.useState(Dec(0))
   const balances = useBalances(selectedAddress || '')
   const { authToken } = useOnboardingAuth()
+  const [account] = useSuitableAccounts({ actingAddress: [selectedAddress || ''] })
 
   const substrateMutation = useCentrifugeTransaction('Sign remark', (cent) => cent.remark.signRemark, {
     onSuccess: async (_, result) => {
-      const txHash = result.txHash.toHex()
-      // @ts-expect-error
-      const blockNumber = result.blockNumber.toString()
       try {
-        await sendDocumentsToIssuer({ txHash, blockNumber })
+        let txHash: string
+        let blockNumber: string
+        // @ts-expect-error
+        if (isEvmOnSubstrate && result?.[0]?.wait) {
+          // @ts-expect-error
+          const evmResult = await result[0].wait()
+          txHash = evmResult?.transactionHash
+          blockNumber = evmResult?.blockNumber.toString()
+        } else {
+          txHash = result.txHash.toHex()
+          // @ts-expect-error
+          blockNumber = result.blockNumber.toString()
+        }
+        await sendDocumentsToIssuer({ txHash, blockNumber, isEvmOnSubstrate })
         setIsSubstrateTxLoading(false)
       } catch (e) {
         setIsSubstrateTxLoading(false)
       }
     },
   })
 
-  const signSubstrateRemark = async (args: [message: string]) => {
+  const getBalanceForSigning = async () => {
     const txIdSignRemark = Math.random().toString(36).substr(2)
-    setIsSubstrateTxLoading(true)
-    if (balances?.native.balance?.toDecimal().lt(expectedTxFee.mul(1.1))) {
+    addOrUpdateTransaction({
+      id: txIdSignRemark,
+      title: `Get ${balances?.native.currency.symbol}`,
+      status: 'pending',
+      args: [],
+    })
+    // add just enough native currency to be able to sign remark
+    const response = await fetch(`${import.meta.env.REACT_APP_ONBOARDING_API_URL}/getBalanceForSigning`, {
+      method: 'POST',
+      headers: {
+        Authorization: `Bearer ${authToken}`,
+        'Content-Type': 'application/json',
+      },
+    })
+
+    if (response.status !== 201) {
       addOrUpdateTransaction({
         id: txIdSignRemark,
         title: `Get ${balances?.native.currency.symbol}`,
-        status: 'pending',
-        args,
+        status: 'failed',
+        args: [],
       })
-      // add just enough native currency to be able to sign remark
-      const response = await fetch(`${import.meta.env.REACT_APP_ONBOARDING_API_URL}/getBalanceForSigning`, {
-        method: 'POST',
-        headers: {
-          Authorization: `Bearer ${authToken}`,
-          'Content-Type': 'application/json',
-        },
+      setIsSubstrateTxLoading(false)
+      throw new Error('Insufficient funds')
+    } else {
+      addOrUpdateTransaction({
+        id: txIdSignRemark,
+        title: `Get ${balances?.native.currency.symbol}`,
+        status: 'succeeded',
+        args: [],
       })
+    }
+  }
 
-      if (response.status !== 201) {
-        addOrUpdateTransaction({
-          id: txIdSignRemark,
-          title: `Get ${balances?.native.currency.symbol}`,
-          status: 'failed',
-          args,
-        })
-        setIsSubstrateTxLoading(false)
-        throw new Error('Insufficient funds')
-      } else {
-        addOrUpdateTransaction({
-          id: txIdSignRemark,
-          title: `Get ${balances?.native.currency.symbol}`,
-          status: 'succeeded',
-          args,
-        })
-      }
+  const signSubstrateRemark = async (args: [message: string]) => {
+    setIsSubstrateTxLoading(true)
+    if (!isEvmOnSubstrate && balances?.native.balance?.toDecimal().lt(expectedTxFee.mul(1.1))) {
+      await getBalanceForSigning()
     }
-    substrateMutation.execute(args)
+    substrateMutation.execute(args, { account })
   }
 
   useEffect(() => {
@@ -150,7 +168,7 @@ export const useSignRemark = (
     }
   }
 
-  return connectedType === 'evm'
+  return connectedType === 'evm' && !isEvmOnSubstrate
     ? { execute: signEvmRemark, isLoading: isEvmTxLoading }
     : { execute: signSubstrateRemark, isLoading: isSubstrateTxLoading }
 }

centrifuge-js/src/modules/remark.ts

@@ -9,9 +9,23 @@ export function getRemarkModule(inst: CentrifugeBase) {
     return $api.pipe(switchMap((api) => inst.wrapSignAndSend(api, api.tx.system.remarkWithEvent(message), options)))
   }
 
-  function validateRemark(blockNumber: string, txHash: string, expectedRemark: string) {
+  // TODO: validate that the address that signed the remark is the same as the wallet making the request
+  function validateRemark(blockNumber: string, txHash: string, expectedRemark: string, isEvmOnSubstrate?: boolean) {
     return inst.getBlockByBlockNumber(Number(blockNumber)).pipe(
       switchMap((block) => {
+        if (isEvmOnSubstrate) {
+          const extrinsic = block.block.extrinsics.find((ex) => {
+            return ex.method.method.toString() === 'transact' && ex.method.section === 'ethereum'
+          })
+          // @ts-expect-error
+          const evmInput = extrinsic?.method.args?.[0].toJSON()?.eip1559?.input.slice(10)
+          const actualRemark = Buffer.from(`${evmInput}`, 'hex').toString()
+
+          if (actualRemark !== expectedRemark) {
+            throw new Error('Invalid remark')
+          }
+          return of(true)
+        }
         const extrinsic = block?.block.extrinsics.find((ex) => ex.hash.toString() === txHash)
         const actualRemark = extrinsic?.method.args[0].toHuman()
         if (actualRemark !== expectedRemark) {

onboarding-api/env-vars/altair.env

@@ -5,3 +5,4 @@ RELAY_WSS_URL=wss://kusama-rpc.polkadot.io
 INFURA_KEY=bf808e7d3d924fbeb74672d9341d0550
 EVM_NETWORK=goerli
 ONBOARDING_STORAGE_BUCKET=altair-onboarding-api
+EVM_ON_SUBSTRATE_CHAIN_ID=2000

onboarding-api/env-vars/catalyst.env

@@ -5,3 +5,4 @@ RELAY_WSS_URL=wss://rococo-rpc.polkadot.io
 INFURA_KEY=bf808e7d3d924fbeb74672d9341d0550
 EVM_NETWORK=goerli
 ONBOARDING_STORAGE_BUCKET=centrifuge-onboarding-api-dev
+EVM_ON_SUBSTRATE_CHAIN_ID=2000

onboarding-api/env-vars/demo.env

@@ -5,3 +5,4 @@ RELAY_WSS_URL=wss://fullnode-relay.demo.cntrfg.com
 INFURA_KEY=bf808e7d3d924fbeb74672d9341d0550
 EVM_NETWORK=goerli
 ONBOARDING_STORAGE_BUCKET=centrifuge-onboarding-api-dev
+EVM_ON_SUBSTRATE_CHAIN_ID=2000

onboarding-api/env-vars/development.env

@@ -5,3 +5,4 @@ RELAY_WSS_URL=wss://fullnode-relay.development.cntrfg.com
 INFURA_KEY=bf808e7d3d924fbeb74672d9341d0550
 EVM_NETWORK=goerli
 ONBOARDING_STORAGE_BUCKET=centrifuge-onboarding-api-dev
+EVM_ON_SUBSTRATE_CHAIN_ID=2000

onboarding-api/env-vars/production.env

@@ -5,3 +5,4 @@ RELAY_WSS_URL=wss://rpc.polkadot.io
 INFURA_KEY=bf808e7d3d924fbeb74672d9341d0550
 EVM_NETWORK=mainnet
 ONBOARDING_STORAGE_BUCKET=centrifuge-onboarding-api
+EVM_ON_SUBSTRATE_CHAIN_ID=2000