integrate ethers v6

README.md

@@ -40,14 +40,14 @@ React dApp Template (Vite) is an easy-to-use foundation for efficiently building
 
 ### Web3 Packages
 
-- ethers.js (v5)
+- ethers.js (v6 and v5)
 
 ### Testing Infrastucture
 
 - Unit Tests: jest
 - Component Unit Tests: React Testing Library + Storybook
 - Integration Tests: React Testing Library + Storybook
-- E2E Tests: Cypress + Synpress + Cucumber
+- E2E Tests: Cypress + Synpress + Cucumber (todo)
 
 ### Other Packages
 

package.json

@@ -1,7 +1,7 @@
 {
   "name": "vitedapp",
   "private": true,
-  "version": "0.3.1",
+  "version": "0.4.0",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -19,8 +19,8 @@
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
     "@metamask/jazzicon": "^2.0.0",
-    "@reduxjs/toolkit": "^1.9.5",
-    "ethers": "^5.7.2",
+    "@reduxjs/toolkit": "^1.9.7",
+    "ethers": "^6.7.1",
     "framer-motion": "^10.16.4",
     "i18next": "^23.5.1",
     "i18next-browser-languagedetector": "^7.1.0",
@@ -32,53 +32,53 @@
     "react-helmet-async": "^1.3.0",
     "react-i18next": "^13.2.2",
     "react-icons": "^4.11.0",
-    "react-redux": "^8.1.2",
-    "react-router-dom": "^6.15.0",
+    "react-redux": "^8.1.3",
+    "react-router-dom": "^6.16.0",
     "redux-saga": "^1.2.3"
   },
   "devDependencies": {
     "@chakra-ui/storybook-addon": "^5.0.1",
-    "@storybook/addon-a11y": "^7.4.1",
-    "@storybook/addon-essentials": "^7.4.1",
-    "@storybook/addon-interactions": "^7.4.1",
-    "@storybook/addon-links": "^7.4.1",
+    "@storybook/addon-a11y": "^7.4.6",
+    "@storybook/addon-essentials": "^7.4.6",
+    "@storybook/addon-interactions": "^7.4.6",
+    "@storybook/addon-links": "^7.4.6",
     "@storybook/addon-onboarding": "^1.0.8",
-    "@storybook/blocks": "^7.4.1",
-    "@storybook/react": "^7.4.1",
-    "@storybook/react-vite": "^7.4.1",
-    "@storybook/testing-library": "^0.2.0",
+    "@storybook/blocks": "^7.4.6",
+    "@storybook/react": "^7.4.6",
+    "@storybook/react-vite": "^7.4.6",
+    "@storybook/testing-library": "^0.2.2",
     "@testing-library/jest-dom": "^6.1.3",
     "@testing-library/react": "^14.0.0",
-    "@testing-library/user-event": "^14.4.3",
-    "@types/jest": "^29.5.4",
-    "@types/node": "^20.6.0",
-    "@types/react": "^18.2.15",
-    "@types/react-dom": "^18.2.7",
-    "@types/redux-mock-store": "^1.0.3",
-    "@typescript-eslint/eslint-plugin": "^6.0.0",
-    "@typescript-eslint/parser": "^6.0.0",
-    "@vitejs/plugin-react": "^4.0.3",
-    "eslint": "^8.45.0",
+    "@testing-library/user-event": "^14.5.1",
+    "@types/jest": "^29.5.5",
+    "@types/node": "^20.8.3",
+    "@types/react": "^18.2.25",
+    "@types/react-dom": "^18.2.11",
+    "@types/redux-mock-store": "^1.0.4",
+    "@typescript-eslint/eslint-plugin": "^6.7.4",
+    "@typescript-eslint/parser": "^6.7.4",
+    "@vitejs/plugin-react": "^4.1.0",
+    "eslint": "^8.51.0",
     "eslint-config-prettier": "^9.0.0",
-    "eslint-import-resolver-typescript": "^3.6.0",
+    "eslint-import-resolver-typescript": "^3.6.1",
     "eslint-plugin-import": "^2.28.1",
     "eslint-plugin-jsx-a11y": "^6.7.1",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.3",
-    "eslint-plugin-storybook": "^0.6.13",
-    "i18next-parser": "^8.7.0",
+    "eslint-plugin-storybook": "^0.6.14",
+    "i18next-parser": "^8.8.0",
     "identity-obj-proxy": "^3.0.0",
-    "jest": "^29.6.4",
-    "jest-environment-jsdom": "^29.6.4",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
     "jest-svg-transformer": "^1.0.0",
     "prettier": "^3.0.3",
     "redux-mock-store": "^1.5.4",
     "redux-saga-test-plan": "^4.0.6",
-    "storybook": "^7.4.1",
+    "storybook": "^7.4.6",
     "storybook-addon-react-router-v6": "^2.0.7",
     "ts-jest": "^29.1.1",
-    "typescript": "^5.0.2",
-    "vite": "^4.4.5",
+    "typescript": "^5.2.2",
+    "vite": "^4.4.11",
     "vite-tsconfig-paths": "^4.2.1"
   },
   "jest": {
@@ -102,7 +102,8 @@
     "collectCoverageFrom": [
       "src/**/*.{js,jsx,ts,tsx}",
       "!src/**/*.stories.{js,jsx,ts,tsx}",
-      "!<rootDir>/node_modules/"
+      "!<rootDir>/node_modules/",
+      "!<rootDir>/services/ethersV5"
     ],
     "coveragePathIgnorePatterns": [],
     "coverageThreshold": {

src/features/ui/components/Layout/Copyright/Copyright.tsx

@@ -8,7 +8,7 @@ import reactDappTemplateLogo from '../../../assets/images/react-dapp-template-lo
 export const Copyright: React.FC = React.memo(() => {
   return (
     <Box>
-      <Tooltip label="Powered by React dApp Template (Vite) v0.3.1">
+      <Tooltip label="Powered by React dApp Template (Vite) v0.4.0">
         <Button
           as={Link}
           href="https://github.com/huseyindeniz/vite-react-dapp-template"

src/services/ethersV5/wallet/WalletAPI.ts

@@ -143,7 +143,7 @@ export class EthersV5WalletAPI implements IWalletEthersV5ProviderApi {
   public isUnlocked = async () => {
     const accounts: string[] = await this._provider?.send('eth_accounts', []);
     this._isUnlocked = accounts.length > 0;
-    if (DISABLE_WALLET_SIGN) {
+    if (this._isUnlocked && DISABLE_WALLET_SIGN) {
       const address = await this._provider?.getSigner()?.getAddress();
       if (address) {
         this._signerAddress = address;
@@ -158,8 +158,7 @@ export class EthersV5WalletAPI implements IWalletEthersV5ProviderApi {
       []
     );
     this._isUnlocked = accounts.length > 0;
-    this._isUnlocked = true;
-    if (DISABLE_WALLET_SIGN) {
+    if (this._isUnlocked && DISABLE_WALLET_SIGN) {
       const address = await this._provider?.getSigner()?.getAddress();
       if (address) {
         this._signerAddress = address;

src/services/ethersV6/avvy/AvvyAPI.ts

@@ -0,0 +1,40 @@
+import { BrowserProvider } from 'ethers/providers';
+import log from 'loglevel';
+
+import { ResolutionUtilsV2 } from './ResolutionUtilsV2/ResolutionUtilsV2';
+import { ResolutionUtilsV2__factory } from './ResolutionUtilsV2/ResolutionUtilsV2__factory';
+
+const resolutionUtilsV2Address = '0x1ea4e7A798557001b99D88D6b4ba7F7fc79406A9';
+
+export class AvvyAPI {
+  private static _instance: AvvyAPI | null = null;
+  private resolutionUtilsV2: ResolutionUtilsV2;
+
+  private constructor(provider: BrowserProvider) {
+    this.resolutionUtilsV2 = ResolutionUtilsV2__factory.connect(
+      resolutionUtilsV2Address,
+      provider
+    );
+  }
+
+  public static getInstance(provider: BrowserProvider): AvvyAPI {
+    if (this._instance === null) {
+      log.debug('AvvyAPI init');
+      this._instance = new AvvyAPI(provider);
+    }
+    return this._instance;
+  }
+
+  public addressToDomain = async (address: string) => {
+    const domain =
+      await this.resolutionUtilsV2.reverseResolveEVMToName(address);
+    log.debug(domain);
+    return domain;
+  };
+
+  public domainToAddress = async (domain: string) => {
+    const address = await this.resolutionUtilsV2.resolveStandard(domain, 3);
+    log.debug(address);
+    return address;
+  };
+}

src/services/ethersV6/avvy/ResolutionUtilsV2/ResolutionUtilsV2.ts

@@ -0,0 +1,115 @@
+/* Autogenerated file. Do not edit manually. */
+/* tslint:disable */
+/* eslint-disable */
+import type {
+  BaseContract,
+  BigNumberish,
+  BytesLike,
+  FunctionFragment,
+  Result,
+  Interface,
+  AddressLike,
+  ContractRunner,
+  ContractMethod,
+  Listener,
+} from 'ethers';
+import type {
+  TypedContractEvent,
+  TypedDeferredTopicFilter,
+  TypedEventLog,
+  TypedListener,
+  TypedContractMethod,
+} from '../../types/common';
+
+export interface ResolutionUtilsV2Interface extends Interface {
+  getFunction(
+    nameOrSignature: 'resolveStandard' | 'reverseResolveEVMToName'
+  ): FunctionFragment;
+
+  encodeFunctionData(
+    functionFragment: 'resolveStandard',
+    values: [string, BigNumberish]
+  ): string;
+  encodeFunctionData(
+    functionFragment: 'reverseResolveEVMToName',
+    values: [AddressLike]
+  ): string;
+
+  decodeFunctionResult(
+    functionFragment: 'resolveStandard',
+    data: BytesLike
+  ): Result;
+  decodeFunctionResult(
+    functionFragment: 'reverseResolveEVMToName',
+    data: BytesLike
+  ): Result;
+}
+
+export interface ResolutionUtilsV2 extends BaseContract {
+  connect(runner?: ContractRunner | null): ResolutionUtilsV2;
+  waitForDeployment(): Promise<this>;
+
+  interface: ResolutionUtilsV2Interface;
+
+  queryFilter<TCEvent extends TypedContractEvent>(
+    event: TCEvent,
+    fromBlockOrBlockhash?: string | number | undefined,
+    toBlock?: string | number | undefined
+  ): Promise<Array<TypedEventLog<TCEvent>>>;
+  queryFilter<TCEvent extends TypedContractEvent>(
+    filter: TypedDeferredTopicFilter<TCEvent>,
+    fromBlockOrBlockhash?: string | number | undefined,
+    toBlock?: string | number | undefined
+  ): Promise<Array<TypedEventLog<TCEvent>>>;
+
+  on<TCEvent extends TypedContractEvent>(
+    event: TCEvent,
+    listener: TypedListener<TCEvent>
+  ): Promise<this>;
+  on<TCEvent extends TypedContractEvent>(
+    filter: TypedDeferredTopicFilter<TCEvent>,
+    listener: TypedListener<TCEvent>
+  ): Promise<this>;
+
+  once<TCEvent extends TypedContractEvent>(
+    event: TCEvent,
+    listener: TypedListener<TCEvent>
+  ): Promise<this>;
+  once<TCEvent extends TypedContractEvent>(
+    filter: TypedDeferredTopicFilter<TCEvent>,
+    listener: TypedListener<TCEvent>
+  ): Promise<this>;
+
+  listeners<TCEvent extends TypedContractEvent>(
+    event: TCEvent
+  ): Promise<Array<TypedListener<TCEvent>>>;
+  listeners(eventName?: string): Promise<Array<Listener>>;
+  removeAllListeners<TCEvent extends TypedContractEvent>(
+    event?: TCEvent
+  ): Promise<this>;
+
+  resolveStandard: TypedContractMethod<
+    [name: string, key: BigNumberish],
+    [string],
+    'view'
+  >;
+
+  reverseResolveEVMToName: TypedContractMethod<
+    [addy: AddressLike],
+    [string],
+    'view'
+  >;
+
+  getFunction<T extends ContractMethod = ContractMethod>(
+    key: string | FunctionFragment
+  ): T;
+
+  getFunction(
+    nameOrSignature: 'resolveStandard'
+  ): TypedContractMethod<[name: string, key: BigNumberish], [string], 'view'>;
+  getFunction(
+    nameOrSignature: 'reverseResolveEVMToName'
+  ): TypedContractMethod<[addy: AddressLike], [string], 'view'>;
+
+  filters: {};
+}

src/services/ethersV6/avvy/ResolutionUtilsV2/ResolutionUtilsV2__factory.ts

@@ -0,0 +1,68 @@
+/* Autogenerated file. Do not edit manually. */
+/* tslint:disable */
+/* eslint-disable */
+
+import { Contract, Interface, type ContractRunner } from 'ethers';
+import type {
+  ResolutionUtilsV2,
+  ResolutionUtilsV2Interface,
+} from './ResolutionUtilsV2';
+
+const _abi = [
+  {
+    inputs: [
+      {
+        internalType: 'string',
+        name: 'name',
+        type: 'string',
+      },
+      {
+        internalType: 'uint256',
+        name: 'key',
+        type: 'uint256',
+      },
+    ],
+    name: 'resolveStandard',
+    outputs: [
+      {
+        internalType: 'string',
+        name: 'value',
+        type: 'string',
+      },
+    ],
+    stateMutability: 'view',
+    type: 'function',
+  },
+  {
+    inputs: [
+      {
+        internalType: 'address',
+        name: 'addy',
+        type: 'address',
+      },
+    ],
+    name: 'reverseResolveEVMToName',
+    outputs: [
+      {
+        internalType: 'string',
+        name: 'preimage',
+        type: 'string',
+      },
+    ],
+    stateMutability: 'view',
+    type: 'function',
+  },
+] as const;
+
+export class ResolutionUtilsV2__factory {
+  static readonly abi = _abi;
+  static createInterface(): ResolutionUtilsV2Interface {
+    return new Interface(_abi) as ResolutionUtilsV2Interface;
+  }
+  static connect(
+    address: string,
+    runner?: ContractRunner | null
+  ): ResolutionUtilsV2 {
+    return new Contract(address, _abi, runner) as unknown as ResolutionUtilsV2;
+  }
+}

src/services/ethersV6/interfaces/IWalletEthersV6ProviderApi.ts

@@ -0,0 +1,9 @@
+import { BrowserProvider } from 'ethers/providers';
+
+import { IWalletAPI } from '../../interfaces/IWalletAPI';
+
+export interface IWalletEthersV6ProviderApi extends IWalletAPI {
+  // following methods are needed for using provider and signer in contract services
+  getProvider(): BrowserProvider | null;
+  getSignerAddress(): string | null;
+}