feat: include support for ink v6 contracts (#571)

Co-authored-by: Peter White <[email protected]>

Author: AlexD10S

package.json

@@ -33,9 +33,10 @@
   "dependencies": {
     "@headlessui/react": "^1.7.18",
     "@heroicons/react": "^1.0.6",
-    "@polkadot/api": "15.8.1",
-    "@polkadot/api-contract": "15.8.1",
+    "@polkadot/api": "^16.2.1",
+    "@polkadot/api-contract": "^16.2.1",
     "@polkadot/extension-dapp": "^0.58.6",
+    "@polkadot/types": "^16.2.1",
     "@polkadot/ui-keyring": "^3.12.2",
     "@polkadot/ui-shared": "^3.12.2",
     "big.js": "^6.2.1",
@@ -44,6 +45,7 @@
     "date-fns": "^2.30.0",
     "dexie": "^3.2.4",
     "dexie-react-hooks": "1.1.7",
+    "ethers": "^6.13.5",
     "json5": "^2.2.3",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
@@ -66,7 +68,8 @@
     "@types/bcryptjs": "^2.4.6",
     "@types/big.js": "^6.2.2",
     "@types/node": "^22.5.0",
-    "@types/react-dom": "^18.3.0",
+    "@types/react": "^19.1.2",
+    "@types/react-dom": "^19.1.2",
     "@typescript-eslint/eslint-plugin": "^8.2.0",
     "@typescript-eslint/parser": "^8.2.0",
     "@vitejs/plugin-react": "^4.3.1",

src/constants/index.ts

@@ -8,6 +8,7 @@ export const LOCAL_STORAGE_KEY = {
   CUSTOM_ENDPOINT: 'contractsUiCustomEndpoint',
   PREFERRED_ENDPOINT: 'contractsUiPreferredEndpoint',
   THEME: 'theme',
+  VERSION: 'inkVersion',
 } as const;
 
 export type LocalStorageKey = (typeof LOCAL_STORAGE_KEY)[keyof typeof LOCAL_STORAGE_KEY];
@@ -19,19 +20,18 @@ export const LOCAL = {
   rpc: CUSTOM_ENDPOINT ? (JSON.parse(CUSTOM_ENDPOINT) as string) : 'ws://127.0.0.1:9944',
 };
 
-// https://docs.peaq.network/networks-overview
-// const PEAQ_AGUNG = {
-//   relay: 'Rococo',
-//   name: 'Peaq Agung',
-//   rpc: 'wss://wss.agung.peaq.network',
-// };
-
 export const POP_NETWORK_TESTNET = {
   relay: 'Paseo',
   name: 'Pop Network Testnet',
   rpc: 'wss://rpc2.paseo.popnetwork.xyz',
 };
 
+export const ASSET_HUB_WESTEND = {
+  relay: 'Westend',
+  name: 'Westend Asset Hub',
+  rpc: 'wss://westend-asset-hub-rpc.polkadot.io',
+};
+
 const PHALA_TESTNET = {
   relay: undefined,
   name: 'Phala PoC-6',
@@ -96,9 +96,13 @@ const ZEITGEIST_BATTERY_STATION = {
   rpc: 'wss://bsr.zeitgeist.pm',
 };
 
-export const TESTNETS = [
+export const TESTNETS_V6 = [
+  ...[ASSET_HUB_WESTEND, POP_NETWORK_TESTNET].sort((a, b) => a.name.localeCompare(b.name)),
+  LOCAL,
+];
+
+export const TESTNETS_V5 = [
   ...[
-    // PEAQ_AGUNG,
     PHALA_TESTNET,
     ASTAR_SHIBUYA,
     ALEPH_ZERO_TESTNET,
@@ -111,7 +115,7 @@ export const TESTNETS = [
   LOCAL,
 ];
 
-export const MAINNETS = [ASTAR, SHIDEN, ALEPH_ZERO].sort((a, b) => a.name.localeCompare(b.name));
+export const MAINNETS_V5 = [ASTAR, SHIDEN, ALEPH_ZERO].sort((a, b) => a.name.localeCompare(b.name));
 
 export const DEFAULT_DECIMALS = 12;
 

src/lib/address.test.ts

@@ -0,0 +1,33 @@
+// Copyright 2022-2024 use-ink/contracts-ui authors & contributors
+// SPDX-License-Identifier: GPL-3.0-only
+
+import { describe, expect, it } from 'vitest';
+import { getAddress } from 'ethers';
+import { decodeAddress } from '@polkadot/keyring';
+import { create1, create2, toEthAddress } from './address';
+
+// Similar to pallet_revive tests: https://github.com/paritytech/polkadot-sdk/blob/65ade498b63bf2216d1c444f28c1b48085417f13/substrate/frame/revive/src/address.rs#L257
+describe('address utilities', () => {
+  const deployer = '0x' + '01'.repeat(20);
+  const code = Uint8Array.from([0x60, 0x00, 0x60, 0x00, 0x55, 0x60, 0x01, 0x60, 0x00]);
+  const inputData = Uint8Array.from([0x55]);
+  const salt = '0x1234567890123456789012345678901234567890123456789012345678901234';
+
+  it('should compute correct address with create1', () => {
+    const address = create1(deployer, 1);
+    expect(getAddress(address)).toBe(getAddress('0xc851da37e4e8d3a20d8d56be2963934b4ad71c3b'));
+  });
+
+  it('should compute correct address with create2', () => {
+    const address = create2(deployer, code, inputData, salt);
+    expect(getAddress(address)).toBe(getAddress('0x7f31e795e5836a19a8f919ab5a9de9a197ecd2b6'));
+  });
+
+  it('should convert Substrate account ID to Ethereum address', () => {
+    const accountId = '5GrwvaEF5zXb26Fz9rcQpDWS57CtERHpNehXCPcNoHGKutQY';
+    const ethAddress = toEthAddress(decodeAddress(accountId));
+
+    expect(ethAddress.startsWith('0x')).toBe(true);
+    expect(getAddress(ethAddress)).toBe(getAddress('0x9621dde636de098b43efb0fa9b61facfe328f99d'));
+  });
+});

src/lib/address.ts

@@ -0,0 +1,121 @@
+// Copyright 2022-2024 use-ink/contracts-ui authors & contributors
+// SPDX-License-Identifier: GPL-3.0-only
+
+import { BigNumberish, ethers } from 'ethers';
+import { hexToU8a, stringToU8a, u8aToHex } from '@polkadot/util';
+import { keccak256 } from 'ethers';
+
+/**
+ * TypeScript equivalent of H160 (20-byte Ethereum address)
+ */
+type Address = string;
+
+/**
+ * Determine the address of a contract using CREATE semantics.
+ * @param deployer The address of the deployer
+ * @param nonce The nonce value
+ * @returns The contract address
+ */
+export function create1(deployer: string, nonce: number): Address {
+  // Convert deployer to bytes (remove 0x prefix if present)
+  const deployerBytes = ethers.hexlify(deployer);
+  ethers.toBeHex(nonce as BigNumberish);
+  // Convert nonce to hex (minimal encoding)
+  const nonceBytes = ethers.toBeHex(nonce as BigNumberish);
+
+  // RLP encode [deployer, nonce]
+  const encodedData = ethers.encodeRlp([deployerBytes, nonceBytes]);
+
+  // Calculate keccak256 hash of the RLP encoded data
+  const hash = ethers.keccak256(encodedData);
+
+  // Take the last 20 bytes (40 hex chars + 0x prefix)
+  return ethers.getAddress('0x' + hash.substring(26));
+}
+
+/**
+ * Determine the address of a contract using CREATE2 semantics.
+ * @param deployer The address of the deployer
+ * @param code The contract code (WASM or EVM bytecode)
+ * @param inputData The constructor arguments or init input
+ * @param salt A 32-byte salt value (as hex string)
+ * @returns The deterministic contract address
+ */
+export function create2(
+  deployer: string,
+  code: Uint8Array,
+  inputData: Uint8Array,
+  salt: string,
+): Address {
+  const initCode = new Uint8Array([...code, ...inputData]);
+  const initCodeHash = hexToU8a(keccak256(initCode));
+
+  const parts = new Uint8Array(1 + 20 + 32 + 32); // 0xff + deployer + salt + initCodeHash
+  parts[0] = 0xff;
+  parts.set(hexToU8a(deployer), 1);
+  parts.set(hexToU8a(salt), 21);
+  parts.set(initCodeHash, 53);
+
+  const hash = keccak256(parts);
+
+  // Return last 20 bytes as 0x-prefixed hex string
+  return ethers.getAddress('0x' + hash.substring(26));
+}
+
+/**
+ * Converts an account ID to an Ethereum address (H160)
+ * @param accountId The account ID bytes
+ * @returns The Ethereum address
+ */
+export function toEthAddress(accountId: Uint8Array | string): string {
+  // Convert string input to Uint8Array if needed
+  const accountBytes = typeof accountId === 'string' ? stringToU8a(accountId) : accountId;
+
+  // Create a 32-byte buffer and copy account bytes into it
+  const accountBuffer = new Uint8Array(32);
+  accountBuffer.set(accountBytes.slice(0, 32));
+
+  if (isEthDerived(accountBytes)) {
+    // This was originally an eth address
+    // We just strip the 0xEE suffix to get the original address
+    return '0x' + Buffer.from(accountBuffer.slice(0, 20)).toString('hex');
+  } else {
+    // This is an (ed|sr)25519 derived address
+    // Avoid truncating the public key by hashing it first
+    const accountHash = ethers.keccak256(accountBuffer);
+    return ethers.getAddress('0x' + accountHash.slice(2 + 24, 2 + 24 + 40)); // Skip '0x' prefix, then skip 12 bytes, take 20 bytes
+  }
+}
+
+export function fromEthAddress(ethAddress: string): string {
+  // Remove '0x' prefix if it exists
+  const cleanAddress = ethAddress.startsWith('0x') ? ethAddress.slice(2) : ethAddress;
+
+  // Convert the hex string to bytes
+  const addressBytes = Buffer.from(cleanAddress, 'hex');
+
+  // Check if the address is the expected length (20 bytes)
+  if (addressBytes.length !== 20) {
+    throw new Error('Invalid Ethereum address: must be 20 bytes');
+  }
+
+  // Create a 32-byte buffer
+  const result = new Uint8Array(32).fill(0xee);
+
+  // Set the first 20 bytes to the Ethereum address
+  result.set(addressBytes, 0);
+
+  return u8aToHex(result);
+}
+
+/**
+ * Determines if an account ID is derived from an Ethereum address
+ * @param accountId The account ID bytes
+ * @returns True if the account is derived from an Ethereum address
+ */
+export function isEthDerived(accountId: Uint8Array): boolean {
+  if (accountId.length >= 32) {
+    return accountId[20] === 0xee && accountId[21] === 0xee;
+  }
+  return false;
+}

src/lib/getContractFromPatron.ts

@@ -2,6 +2,7 @@
 // SPDX-License-Identifier: GPL-3.0-only
 
 import { Buffer } from 'buffer';
+import { getVersion } from 'ui/contexts';
 
 function getFromPatron(field: string, hash: string) {
   const options = {
@@ -29,7 +30,8 @@ function getFromPatron(field: string, hash: string) {
 
 export function getContractFromPatron(codeHash: string): Promise<File> {
   const metadataPromise = getFromPatron('metadata', codeHash);
-  const wasmPromise = getFromPatron('wasm', codeHash);
+  const field = getVersion() === 'v6' ? 'contract_binary' : 'wasm';
+  const wasmPromise = getFromPatron(field, codeHash);
   return Promise.all([metadataPromise, wasmPromise]).then(([metadataResponse, wasmResponse]) => {
     const result = Buffer.from(wasmResponse as ArrayBuffer).toString('hex');
 

src/lib/util.ts

@@ -2,11 +2,13 @@
 // SPDX-License-Identifier: GPL-3.0-only
 
 import { decodeAddress, encodeAddress } from '@polkadot/keyring';
-import { hexToU8a, isHex } from '@polkadot/util';
+import { hexToU8a, u8aToHex, isHex } from '@polkadot/util';
 import { keyring } from '@polkadot/ui-keyring';
 import format from 'date-fns/format';
 import parseISO from 'date-fns/parseISO';
 import { twMerge } from 'tailwind-merge';
+import { isAddress as isEthAddress } from 'ethers';
+import { InkVersion } from 'ui/contexts';
 
 export const classes = twMerge;
 
@@ -72,7 +74,16 @@ export function isUndefined(value: unknown): value is undefined {
   return value === undefined;
 }
 
-export function isValidAddress(address: string | Uint8Array | null | undefined) {
+export function isValidAddress(
+  address: string | Uint8Array | null | undefined,
+  version: InkVersion,
+) {
+  if (!address) return false;
+  if (version === 'v6') {
+    const hex = typeof address === 'string' ? address : u8aToHex(address);
+    return isEthAddress(hex);
+  }
+  // Check for v5 address format
   try {
     encodeAddress(isHex(address) ? hexToU8a(address) : decodeAddress(address));
     return true;

src/services/chain/contract.ts

@@ -11,6 +11,7 @@ import {
   InstantiateData,
   SubmittableExtrinsic,
 } from 'types';
+import { InkVersion } from 'ui/contexts';
 
 export function createInstantiateTx(
   api: ApiPromise,
@@ -52,22 +53,38 @@ export function createInstantiateTx(
   }
 }
 
-export async function getContractInfo(api: ApiPromise, address: string) {
-  if (isValidAddress(address)) {
-    return (await api.query.contracts.contractInfoOf(address)).unwrapOr(null);
+export async function getContractInfo(api: ApiPromise, address: string, version: InkVersion) {
+  if (isValidAddress(address, version)) {
+    if (version === 'v6') {
+      return (await api.query.revive.contractInfoOf(address)).unwrapOr(null);
+    } else {
+      return (await api.query.contracts.contractInfoOf(address)).unwrapOr(null);
+    }
   }
 }
 
-export async function checkOnChainCode(api: ApiPromise, codeHash: string): Promise<boolean> {
-  return isValidCodeHash(codeHash)
-    ? (await api.query.contracts.pristineCode(codeHash)).isSome
-    : false;
+export async function checkOnChainCode(
+  api: ApiPromise,
+  codeHash: string,
+  version: InkVersion,
+): Promise<boolean> {
+  if (!isValidCodeHash(codeHash)) return false;
+
+  if (version === 'v6') {
+    return (await api.query.revive.pristineCode(codeHash)).isSome;
+  } else {
+    return (await api.query.contracts.pristineCode(codeHash)).isSome;
+  }
 }
 
-export async function filterOnChainCode(api: ApiPromise, items: CodeBundleDocument[]) {
+export async function filterOnChainCode(
+  api: ApiPromise,
+  items: CodeBundleDocument[],
+  version: InkVersion,
+) {
   const codes: CodeBundleDocument[] = [];
   for (const item of items) {
-    const isOnChain = await checkOnChainCode(api, item.codeHash);
+    const isOnChain = await checkOnChainCode(api, item.codeHash, version);
     isOnChain && codes.push(item);
   }
   return codes;

src/ui/components/App.tsx

@@ -8,27 +8,30 @@ import {
   DatabaseContextProvider,
   ThemeContextProvider,
   TransactionsContextProvider,
+  VersionContextProvider,
 } from 'ui/contexts';
 import { Sidebar } from 'ui/layout/sidebar';
 
 export default function App() {
   return (
     <ThemeContextProvider>
-      <ApiContextProvider>
-        <DatabaseContextProvider>
-          <TransactionsContextProvider>
-            {/* we want the sidebar outside the outlet to prevent flickering in quicklinks */}
-            <div className="relative inset-0 flex min-h-screen overflow-hidden text-black dark:bg-gray-900 dark:text-white md:fixed md:flex-row">
-              <Sidebar />
-              <CheckBrowserSupport>
-                <AwaitApis>
-                  <Outlet />
-                </AwaitApis>
-              </CheckBrowserSupport>
-            </div>
-          </TransactionsContextProvider>
-        </DatabaseContextProvider>
-      </ApiContextProvider>
+      <VersionContextProvider>
+        <ApiContextProvider>
+          <DatabaseContextProvider>
+            <TransactionsContextProvider>
+              {/* we want the sidebar outside the outlet to prevent flickering in quicklinks */}
+              <div className="relative inset-0 flex min-h-screen overflow-hidden text-black dark:bg-gray-900 dark:text-white md:fixed md:flex-row">
+                <Sidebar />
+                <CheckBrowserSupport>
+                  <AwaitApis>
+                    <Outlet />
+                  </AwaitApis>
+                </CheckBrowserSupport>
+              </div>
+            </TransactionsContextProvider>
+          </DatabaseContextProvider>
+        </ApiContextProvider>
+      </VersionContextProvider>
     </ThemeContextProvider>
   );
 }