fix(centrifuge-js): Get chain ID from chain (#1535)

BREAKING CHANGE: Centrifuge->getChainId() now returns a Promise
centrifuge · Aug 15, 2023 · e36462f · e36462f
1 parent 9378158
commit e36462f
Show file tree

Hide file tree

Showing 14 changed files with 55 additions and 56 deletions.
diff --git a/centrifuge-app/src/components/DebugFlags/components/ConvertEvmAddress.tsx b/centrifuge-app/src/components/DebugFlags/components/ConvertEvmAddress.tsx
@@ -1,10 +1,10 @@
 import { evmToSubstrateAddress } from '@centrifuge/centrifuge-js'
-import { useCentrifuge, useWallet } from '@centrifuge/centrifuge-react'
+import { useCentrifugeUtils, useWallet } from '@centrifuge/centrifuge-react'
 import { isAddress } from '@ethersproject/address'
 
 export function ConvertEvmAddress() {
   const ctx = useWallet()
-  const cent = useCentrifuge()
+  const utils = useCentrifugeUtils()
   function convert() {
     const addr = window.prompt('EVM address')
     if (!addr || !isAddress(addr)) {
@@ -17,7 +17,7 @@ export function ConvertEvmAddress() {
       return
     }
     const converted = evmToSubstrateAddress(addr, Number(chainId))
-    const formatted = cent.utils.formatAddress(converted)
+    const formatted = utils.formatAddress(converted)
     window.alert(formatted)
     console.log('Substrate address', formatted)
   }

diff --git a/centrifuge-app/src/components/Identity.tsx b/centrifuge-app/src/components/Identity.tsx
@@ -1,5 +1,5 @@
 import { isSameAddress } from '@centrifuge/centrifuge-js'
-import { useCentrifuge, useWallet } from '@centrifuge/centrifuge-react'
+import { useCentrifugeUtils, useWallet } from '@centrifuge/centrifuge-react'
 import { Flex, Shelf, Text, TextProps } from '@centrifuge/fabric'
 import Identicon from '@polkadot/react-identicon'
 import * as React from 'react'
@@ -32,12 +32,12 @@ export const Identity: React.FC<Props> = ({
 }) => {
   const identity = useIdentity(address)
   const myAddress = useAddress('substrate')
-  const cent = useCentrifuge()
+  const utils = useCentrifugeUtils()
   const { selectedAccount } = useWallet().substrate
 
-  const addr = cent.utils.formatAddress(address)
+  const addr = utils.formatAddress(address)
   const isMe = React.useMemo(() => isSameAddress(addr, myAddress), [addr, myAddress])
-  const truncated = truncate(cent.utils.formatAddress(address))
+  const truncated = truncate(utils.formatAddress(address))
   const display = identity?.display || truncated
   const meLabel =
     !isMe || !labelForConnectedAddress

diff --git a/centrifuge-app/src/components/OnboardingAuthProvider.tsx b/centrifuge-app/src/components/OnboardingAuthProvider.tsx
@@ -1,6 +1,5 @@
 import Centrifuge from '@centrifuge/centrifuge-js'
-import { useCentrifuge, useEvmProvider, useWallet } from '@centrifuge/centrifuge-react'
-import { hexToU8a } from '@polkadot/util'
+import { useCentrifuge, useCentrifugeUtils, useEvmProvider, useWallet } from '@centrifuge/centrifuge-react'
 import { encodeAddress } from '@polkadot/util-crypto'
 import { Wallet } from '@subwallet/wallet-connect/types'
 import * as React from 'react'
@@ -21,11 +20,10 @@ export function OnboardingAuthProvider({ children }: { children: React.ReactNode
     isEvmOnSubstrate,
   } = useWallet()
   const cent = useCentrifuge()
+  const utils = useCentrifugeUtils()
   const provider = useEvmProvider()
   // onboarding-api expects the wallet address in the native substrate format
-  const address = selectedAccount?.address
-    ? encodeAddress(hexToU8a(selectedAccount?.address), cent.getChainId())
-    : selectedAddress
+  const address = selectedAccount?.address ? utils.formatAddress(selectedAccount?.address) : selectedAddress
   const proxy = selectedProxies?.[0]
 
   const { data: session, refetch: refetchSession } = useQuery(
@@ -133,7 +131,7 @@ export function useOnboardingAuth() {
 
 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 address = encodeAddress(hexAddress, await cent.getChainId())
   const nonceRes = await fetch(`${import.meta.env.REACT_APP_ONBOARDING_API_URL}/nonce`, {
     method: 'POST',
     headers: {

diff --git a/centrifuge-app/src/pages/IssuerPool/Configuration/AddAddressInput.tsx b/centrifuge-app/src/pages/IssuerPool/Configuration/AddAddressInput.tsx
@@ -1,5 +1,5 @@
 import { isSameAddress } from '@centrifuge/centrifuge-js'
-import { useCentrifuge } from '@centrifuge/centrifuge-react'
+import { useCentrifugeUtils } from '@centrifuge/centrifuge-react'
 import { Button, Grid, SearchInput, Shelf, Text } from '@centrifuge/fabric'
 import Identicon from '@polkadot/react-identicon'
 import { useState } from 'react'
@@ -14,10 +14,10 @@ export function AddAddressInput({
 }) {
   const [address, setAddress] = useState('')
 
-  const cent = useCentrifuge()
+  const utils = useCentrifugeUtils()
   let truncated
   try {
-    truncated = truncate(cent.utils.formatAddress(address))
+    truncated = truncate(utils.formatAddress(address))
   } catch (e) {
     //
   }

diff --git a/centrifuge-app/src/utils/usePodAuth.ts b/centrifuge-app/src/utils/usePodAuth.ts
@@ -1,5 +1,4 @@
-import { CombinedSubstrateAccount, useCentrifuge, useCentrifugeApi, useWallet } from '@centrifuge/centrifuge-react'
-import { encodeAddress } from '@polkadot/util-crypto'
+import { CombinedSubstrateAccount, useCentrifuge, useCentrifugeUtils, useWallet } from '@centrifuge/centrifuge-react'
 import { useMutation, useQuery } from 'react-query'
 import { useSuitableAccounts } from './usePermissions'
 import { usePodUrl } from './usePools'
@@ -12,7 +11,7 @@ export function usePodAuth(poolId: string, accountOverride?: CombinedSubstrateAc
   const suitableAccounts = useSuitableAccounts({ poolId, poolRole: ['Borrower'], proxyType: ['PodAuth'] })
   const account = accountOverride || selectedCombinedAccount || suitableAccounts[0]
   const cent = useCentrifuge()
-  const api = useCentrifugeApi()
+  const utils = useCentrifugeUtils()
 
   const proxy = account?.proxies?.at(-1)
   const proxyType = proxy?.types.includes('Any')
@@ -43,12 +42,12 @@ export function usePodAuth(poolId: string, accountOverride?: CombinedSubstrateAc
         const { address, signer } = account.signingAccount
 
         const { token, payload } = await cent.auth.generateJw3t(
-          encodeAddress(address, api.registry.chainSS58),
+          utils.formatAddress(address),
           // @ts-ignore
           signer,
           proxy
             ? {
-                onBehalfOf: encodeAddress(proxy.delegator, api.registry.chainSS58),
+                onBehalfOf: utils.formatAddress(proxy.delegator),
                 proxyType,
               }
             : undefined

diff --git a/centrifuge-js/src/CentrifugeBase.ts b/centrifuge-js/src/CentrifugeBase.ts
@@ -243,8 +243,8 @@ export class CentrifugeBase {
       this.config.network === 'centrifuge' ? this.config.centrifugeSubqueryUrl : this.config.altairSubqueryUrl
   }
 
-  getChainId() {
-    return this.config.network === 'centrifuge' ? 36 : 136
+  async getChainId() {
+    return this.getApiPromise().then((api) => api.registry.chainSS58 as number)
   }
 
   wrapSignAndSend<T extends TransactionOptions>(api: ApiRx, submittable: SubmittableExtrinsic<'rxjs'>, options?: T) {

diff --git a/centrifuge-js/src/modules/utils.ts b/centrifuge-js/src/modules/utils.ts
@@ -1,16 +1,10 @@
-import { encodeAddress } from '@polkadot/util-crypto'
 import { combineLatest, map, switchMap, take } from 'rxjs'
 import { CentrifugeBase } from '../CentrifugeBase'
-import { Account } from '../types'
 import * as utilsPure from '../utils'
 
 const RANGE_FOR_BLOCKTIME_AVG = 10
 
 export function getUtilsModule(inst: CentrifugeBase) {
-  function formatAddress(address: Account) {
-    return encodeAddress(address, inst.getChainId())
-  }
-
   function getAvgTimePerBlock() {
     const $currentBlock = inst.getBlocks().pipe(take(1))
     const $prevBlock = $currentBlock.pipe(
@@ -41,7 +35,6 @@ export function getUtilsModule(inst: CentrifugeBase) {
 
   return {
     ...utilsPure,
-    formatAddress,
     getAvgTimePerBlock,
     getCurrentBlock,
   }

diff --git a/centrifuge-react/src/components/CentrifugeProvider/CentrifugeProvider.tsx b/centrifuge-react/src/components/CentrifugeProvider/CentrifugeProvider.tsx
@@ -1,6 +1,7 @@
-import Centrifuge, { CurrencyBalance } from '@centrifuge/centrifuge-js'
+import Centrifuge, { Account, CurrencyBalance } from '@centrifuge/centrifuge-js'
 import type { UserProvidedConfig } from '@centrifuge/centrifuge-js/dist/CentrifugeBase'
 import { ApiRx } from '@polkadot/api'
+import { encodeAddress } from '@polkadot/util-crypto'
 import { BN } from 'bn.js'
 import * as React from 'react'
 import { useQuery } from 'react-query'
@@ -93,3 +94,15 @@ export function useCentrifugeConsts() {
     },
   }
 }
+
+export function useCentrifugeUtils() {
+  const cent = useCentrifuge()
+  const consts = useCentrifugeConsts()
+
+  return {
+    ...cent.utils,
+    formatAddress(address: Account) {
+      return encodeAddress(address, consts.ss58Prefix)
+    },
+  }
+}
diff --git a/centrifuge-react/src/components/CentrifugeProvider/index.tsx b/centrifuge-react/src/components/CentrifugeProvider/index.tsx
@@ -5,4 +5,5 @@ export {
   useCentrifugeApi,
   useCentrifugeConsts,
   useCentrifugeKey,
+  useCentrifugeUtils,
 } from './CentrifugeProvider'
diff --git a/centrifuge-react/src/components/WalletMenu/WalletMenu.tsx b/centrifuge-react/src/components/WalletMenu/WalletMenu.tsx
@@ -21,7 +21,7 @@ import { useBalances } from '../../hooks/useBalances'
 import { useEns } from '../../hooks/useEns'
 import { copyToClipboard } from '../../utils/copyToClipboard'
 import { formatBalanceAbbreviated, truncateAddress } from '../../utils/formatting'
-import { useCentrifuge, useCentrifugeConsts } from '../CentrifugeProvider'
+import { useCentrifugeConsts, useCentrifugeUtils } from '../CentrifugeProvider'
 import { useAddress, useGetExplorerUrl, useWallet } from '../WalletProvider'
 import { useNativeBalance, useNativeCurrency } from '../WalletProvider/evm/utils'
 import { Logo } from '../WalletProvider/SelectButton'
@@ -48,8 +48,8 @@ export function WalletMenu({ menuItems }: WalletMenuProps) {
 
 function ConnectedMenu({ menuItems }: WalletMenuProps) {
   const address = useAddress()!
-  const centrifuge = useCentrifuge()
   const consts = useCentrifugeConsts()
+  const utils = useCentrifugeUtils()
   const ctx = useWallet()
   const {
     evm,
@@ -62,8 +62,7 @@ function ConnectedMenu({ menuItems }: WalletMenuProps) {
     connectedNetworkName,
     isEvmOnSubstrate,
   } = ctx
-  const formattedAddress =
-    connectedType === 'evm' ? getAddress(evm.selectedAddress!) : centrifuge.utils.formatAddress(address)
+  const formattedAddress = connectedType === 'evm' ? getAddress(evm.selectedAddress!) : utils.formatAddress(address)
   const wallet = ctx[connectedType!]?.selectedWallet
   const { name: ensName, avatar } = useEns(connectedType === 'evm' ? evm.selectedAddress! : undefined)
   const balances = useBalances(connectedType !== 'evm' || isEvmOnSubstrate ? address : undefined)
@@ -129,14 +128,14 @@ function ConnectedMenu({ menuItems }: WalletMenuProps) {
                 <Shelf gap={1} justifyContent="space-between">
                   <Shelf gap={1}>
                     <Text variant="interactive1" fontWeight={400}>
-                      {truncateAddress(isEvmOnSubstrate ? centrifuge.utils.formatAddress(address) : formattedAddress)}
+                      {truncateAddress(isEvmOnSubstrate ? utils.formatAddress(address) : formattedAddress)}
                     </Text>
                   </Shelf>
 
                   <Shelf gap="2px">
                     <IconButton
                       onClick={() =>
-                        copyToClipboard(isEvmOnSubstrate ? centrifuge.utils.formatAddress(address) : formattedAddress)
+                        copyToClipboard(isEvmOnSubstrate ? utils.formatAddress(address) : formattedAddress)
                       }
                       title="Copy address to clipboard"
                     >

diff --git a/centrifuge-react/src/components/WalletProvider/AccountButton.tsx b/centrifuge-react/src/components/WalletProvider/AccountButton.tsx
@@ -6,7 +6,7 @@ import * as React from 'react'
 import styled, { useTheme } from 'styled-components'
 import { useBalances } from '../../hooks/useBalances'
 import { formatBalanceAbbreviated, truncateAddress } from '../../utils/formatting'
-import { useCentrifuge } from '../CentrifugeProvider'
+import { useCentrifugeUtils } from '../CentrifugeProvider'
 import { Proxy } from './types'
 import { useWallet } from './WalletProvider'
 
@@ -56,7 +56,7 @@ export function AccountButton({
   const balance = balances
     ? formatBalanceAbbreviated(balances.native.balance, balances.native.currency.symbol)
     : undefined
-  const cent = useCentrifuge()
+  const utils = useCentrifugeUtils()
 
   return (
     <Root
@@ -89,7 +89,7 @@ export function AccountButton({
               backgroundColor="accentPrimary"
               opacity={0.5}
             />
-            Multisig: {truncateAddress(cent.utils.formatAddress(multisig.address))}
+            Multisig: {truncateAddress(utils.formatAddress(multisig.address))}
           </Text>
         )}
         {proxyRights && (
@@ -131,7 +131,7 @@ export function AccountIcon({ id }: { id: string }) {
 }
 
 export function AccountName({ account, proxies }: { account: WalletAccount; proxies?: Proxy[] }) {
-  const cent = useCentrifuge()
+  const utils = useCentrifugeUtils()
   return (
     <Text as="span" variant="body2" fontWeight={300} style={{ display: 'block' }}>
       {account.name && (
@@ -146,7 +146,7 @@ export function AccountName({ account, proxies }: { account: WalletAccount; prox
           <Text as="span" color="textDisabled">
             |
           </Text>{' '}
-          {truncateAddress(cent.utils.formatAddress(p.delegator))}{' '}
+          {truncateAddress(utils.formatAddress(p.delegator))}{' '}
         </React.Fragment>
       ))}
     </Text>

diff --git a/centrifuge-react/src/components/WalletProvider/WalletProvider.tsx b/centrifuge-react/src/components/WalletProvider/WalletProvider.tsx
@@ -197,8 +197,8 @@ export function WalletProvider({
       firstValueFrom(cent.proxies.getAllProxies()).then((proxies) => {
         return Object.fromEntries(
           Object.entries(proxies).map(([delegatee, ps]) => [
-            cent.utils.formatAddress(delegatee),
-            ps.map((p) => ({ ...p, delegator: cent.utils.formatAddress(p.delegator) })),
+            utils.formatAddress(delegatee),
+            ps.map((p) => ({ ...p, delegator: utils.formatAddress(p.delegator) })),
           ])
         )
       }),

diff --git a/centrifuge-react/src/components/WalletProvider/utils.ts b/centrifuge-react/src/components/WalletProvider/utils.ts
@@ -1,7 +1,7 @@
 import centrifugeLogo from '@centrifuge/fabric/assets/logos/centrifuge.svg'
 import { Wallet } from '@subwallet/wallet-connect/types'
 import * as React from 'react'
-import { CentrifugeContext, useCentrifuge } from '../CentrifugeProvider/CentrifugeProvider'
+import { CentrifugeContext, useCentrifugeUtils } from '../CentrifugeProvider/CentrifugeProvider'
 import { EvmChains, getChainInfo } from './evm/chains'
 import { EvmConnectorMeta } from './evm/connectors'
 import { Network } from './types'
@@ -50,7 +50,7 @@ export function useGetExplorerUrl(network?: Network) {
     substrate: { subscanUrl },
     connectedNetwork,
   } = useWallet()
-  const centrifuge = useCentrifuge()
+  const utils = useCentrifugeUtils()
 
   function getEvmUrl(networkOverride?: Network) {
     const netw = networkOverride || network || connectedNetwork
@@ -64,7 +64,7 @@ export function useGetExplorerUrl(network?: Network) {
         return (
           evmUrl
             ? new URL(`/address/${address}`, evmUrl)
-            : new URL(`/account/${centrifuge.utils.formatAddress(address)}`, subscanUrl)
+            : new URL(`/account/${utils.formatAddress(address)}`, subscanUrl)
         ).toString()
       } catch {
         return ''

diff --git a/onboarding-api/src/utils/networks/centrifuge.ts b/onboarding-api/src/utils/networks/centrifuge.ts
@@ -1,7 +1,6 @@
 import Centrifuge, { CurrencyBalance, evmToSubstrateAddress } from '@centrifuge/centrifuge-js'
 import { Keyring } from '@polkadot/keyring'
-import { hexToU8a, isHex } from '@polkadot/util'
-import { cryptoWaitReady, decodeAddress, encodeAddress } from '@polkadot/util-crypto'
+import { cryptoWaitReady, encodeAddress } from '@polkadot/util-crypto'
 import { Request } from 'express'
 import { combineLatest, combineLatestWith, firstValueFrom, lastValueFrom, switchMap, take, takeWhile } from 'rxjs'
 import { InferType } from 'yup'
@@ -175,18 +174,15 @@ export const checkBalanceBeforeSigningRemark = async (wallet: Request['wallet'])
   return tx.txHash.toString()
 }
 
-// https://polkadot.js.org/docs/util-crypto/examples/validate-address/
 export const getValidSubstrateAddress = async (wallet: Request['wallet']) => {
   try {
+    const cent = getCentrifuge()
+    const centChainId = await cent.getChainId()
     if (wallet.network === 'evmOnSubstrate') {
-      const cent = getCentrifuge()
       const chainId = await firstValueFrom(cent.getApi().pipe(switchMap((api) => api.query.evmChainId.chainId())))
-      return cent.utils.formatAddress(evmToSubstrateAddress(wallet.address, Number(chainId.toString())))
+      return encodeAddress(evmToSubstrateAddress(wallet.address, Number(chainId.toString())), centChainId)
     }
-    const validAddress = encodeAddress(
-      isHex(wallet.address) ? hexToU8a(wallet.address) : decodeAddress(wallet.address),
-      getCentrifuge().getChainId()
-    )
+    const validAddress = encodeAddress(wallet.address, centChainId)
     return validAddress
   } catch (error) {
     throw new HttpError(400, 'Invalid substrate address')