Centrifuge App: Convert EVM address to Subtrate

centrifuge-app/src/components/DebugFlags/DebugFlags.tsx

@@ -112,6 +112,8 @@ const Panel: React.FC<{
                   ))}
                 </select>
               )
+            } else if (obj.type === 'component') {
+              el = <obj.Component value={value} onChange={(val) => onChange(key as Key, val)} />
             } else {
               el = (
                 <input

centrifuge-app/src/components/DebugFlags/components/ConvertEvmAddress.tsx

@@ -0,0 +1,25 @@
+import { evmToSubstrateAddress } from '@centrifuge/centrifuge-js'
+import { useCentrifuge, useWallet } from '@centrifuge/centrifuge-react'
+import { isAddress } from '@ethersproject/address'
+
+export function ConvertEvmAddress() {
+  const ctx = useWallet()
+  const cent = useCentrifuge()
+  function convert() {
+    const addr = window.prompt('EVM address')
+    if (!addr || !isAddress(addr)) {
+      window.alert('Invalid EVM address')
+      return
+    }
+    const chainId = window.prompt('Chain ID', String(ctx.substrate.evmChainId))
+    if (!chainId || !Number.isSafeInteger(Number(chainId))) {
+      window.alert('Invalid chain ID')
+      return
+    }
+    const converted = evmToSubstrateAddress(addr, Number(chainId))
+    const formatted = cent.utils.formatAddress(converted)
+    window.alert(formatted)
+    console.log('Substrate address', formatted)
+  }
+  return <button onClick={convert}>Convert EVM to Substrate</button>
+}

centrifuge-app/src/components/DebugFlags/config.ts

@@ -1,3 +1,6 @@
+import React from 'react'
+import { ConvertEvmAddress } from './components/ConvertEvmAddress'
+
 const params = new URLSearchParams(typeof window !== 'undefined' ? window.location.search : {})
 export const debug =
   import.meta.env.MODE === 'development' || params.get('debug') != null || !!localStorage.getItem('debugFlags')
@@ -8,6 +11,12 @@ export type DebugFlagConfig =
       default: string
       alwaysShow?: boolean
     }
+  | {
+      type: 'component'
+      Component: React.FC<{ value: any; onChange: (v: any) => void }>
+      default: null
+      alwaysShow?: boolean
+    }
   | {
       type: 'checkbox'
       default: boolean
@@ -35,6 +44,7 @@ export type Key =
   | 'showAdvancedAccounts'
   | 'editAdminConfig'
   | 'showPodAccountCreation'
+  | 'convertEvmAddress'
 
 export const flagsConfig: Record<Key, DebugFlagConfig> = {
   address: {
@@ -97,4 +107,10 @@ export const flagsConfig: Record<Key, DebugFlagConfig> = {
     default: false,
     alwaysShow: true,
   },
+  convertEvmAddress: {
+    type: 'component',
+    Component: ConvertEvmAddress,
+    default: null,
+    alwaysShow: true,
+  },
 }