cherry picked

packages/react/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@xessential/react",
-  "version": "0.0.1-beta.91",
+  "version": "0.0.1-beta.92",
   "description": "",
   "main": "./dist/esm/index.js",
   "type": "module",
   "types": "./dist/esm/index.d.ts",
   "scripts": {
-    "build": "yarn tsc --project tsconfig.esm.json",
+    "build": "yarn tsc --skipLibCheck -p ./tsconfig.esm.json",
     "test": "echo \"Error: no test specified\" && exit 0",
     "lint": "yarn eslint .",
     "lint:fix": "yarn eslint src/ --fix",
@@ -28,15 +28,16 @@
     "@audius/hedgehog": "^2.1.0",
     "@xessential/signer": "^0.0.1-beta.10",
     "axios": "^1.3.4",
-    "fxa-common-password-list": "^0.0.4"
+    "fxa-common-password-list": "^0.0.4",
+    "viem": "^1.3.1",
+    "wagmi": "^1.3.9"
   },
   "devDependencies": {
     "@types/node": "^18.11.18",
     "@types/react": "^18.0.27",
     "@types/react-dom": "^18.0.10",
     "@typescript-eslint/eslint-plugin": "^5.21.0",
     "@typescript-eslint/parser": "^5.21.0",
-    "@wagmi/core": "^0.9.5",
     "abitype": "^0.4.1",
     "eslint": "^8.14.0",
     "eslint-config-prettier": "^8.5.0",
@@ -46,13 +47,11 @@
     "prettier": "^2.6.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "typescript": "^4.5.4",
-    "wagmi": "^0.11.5"
+    "typescript": "^5.1.6"
   },
   "peerDependencies": {
     "ethers": ">=5.5.1",
     "react": ">=16",
-    "react-dom": ">=16",
-    "wagmi": "^0.11.5"
+    "react-dom": ">=16"
   }
 }

packages/react/src/hooks/useContractWrite.ts

@@ -11,11 +11,10 @@ import {
 } from '@wagmi/core';
 
 export function useContractWrite<
-  TMode extends WriteContractMode = WriteContractMode,
   TAbi extends Abi | readonly {}[] = Abi,
   TFunctionName extends string = string,
 >(
-  config: UseContractWriteConfig<TMode, TAbi, TFunctionName> & {
+  config: UseContractWriteConfig<TAbi, TFunctionName> & {
     signer: Signer;
     proof?: `0x${string}`;
     onSuccess?: (data: SendTransactionResult) => void;
@@ -25,7 +24,10 @@ export function useContractWrite<
   const [isLoading, setLoading] = React.useState(false);
 
   const { address, abi, functionName, chainId, mode, signer } = config;
-  const { request } = config as WriteContractPreparedArgs<TAbi, TFunctionName>;
+  const { request } = config as unknown as WriteContractPreparedArgs<
+    TAbi,
+    TFunctionName
+  >;
 
   const defaultValues = {
     error: false,
@@ -37,10 +39,10 @@ export function useContractWrite<
 
   const write = React.useCallback(async () => {
     if (!signer) return;
-    
+
     setLoading(true);
     signer
-      .sendTransaction(request)
+      .sendTransaction(request as any)
       .then((response) => {
         setData(response as SendTransactionResult);
         config?.onSuccess?.(response as SendTransactionResult, {} as any, null);

packages/react/src/hooks/useDelegatedAccount.ts

@@ -4,11 +4,10 @@ import {
   readContract,
   writeContract,
 } from '@wagmi/core';
-import { FetchBalanceResult, GetAccountResult, Provider } from '@wagmi/core';
+import { FetchBalanceResult, GetAccountResult } from '@wagmi/core';
 import { BigNumber, BigNumberish } from 'ethers';
 import { useCallback, useEffect, useMemo, useState } from 'react';
-import Tree from '../utils/tree/index.js';
-import { useAccount, useBalance, useContractRead } from 'wagmi';
+import { PublicClient, useAccount, useBalance, useContractRead } from 'wagmi';
 
 import { abi, address as delegateCashAddress } from '../abis/DelegateCash.js';
 
@@ -24,7 +23,7 @@ export interface Delegation {
   vault: `0x${string}`;
   delegate?: `0x${string}`;
   contract_?: `0x${string}`;
-  tokenId?: BigNumber;
+  tokenId?: BigNumberish | bigint;
 }
 interface TreeNode {
   address: `0x${string}`;
@@ -93,7 +92,7 @@ type DelegatedAccountResult = {
   tokenDelegated: (args: {
     owner: `0x${string}`;
     contractAddress: `0x${string}`;
-    tokenId?: BigNumberish;
+    tokenId?: BigNumberish | bigint;
   }) => boolean;
 
   /*
@@ -128,7 +127,7 @@ export function useDelegatedAccount(
     type: DELEGATION_TYPES.ALL,
     registryAddress: delegateCashAddress,
   },
-): DelegatedAccountResult & GetAccountResult<Provider> {
+): DelegatedAccountResult & GetAccountResult<PublicClient> {
   const { address: signerAddress, ...account } = useAccount();
   const [tree, setTree] = useState<TreeNode | null>(null);
   const [isTreeBuilt, setIsTreeBuilt] = useState(false);
@@ -284,11 +283,11 @@ export function useDelegatedAccount(
     writeContract({ ...config })
       .then((data) => {
         onSubmit(data);
-        return data.wait();
+        return data;
       })
       .then((receipt) => {
         onValidated(receipt);
-        setUpdateBlock(receipt.blockNumber);
+        // setUpdateBlock(receipt.block);
       })
       .catch((e) => {
         onError(e);
@@ -384,7 +383,7 @@ export function useDelegatedAccount(
           (type_ === DELEGATION_TYPES.TOKEN &&
             nodeType === type_ &&
             nodeContract === contractAddress &&
-            nodeTokenId?.eq(tokenId!));
+            nodeTokenId === tokenId!);
 
         // If the delegation node is valid, add the node's address to the addresses array and continue searching the children
         if (isValid) {
@@ -424,7 +423,7 @@ export function useDelegatedAccount(
             contract_ === contractAddress) ||
           (type_ === DELEGATION_TYPES.TOKEN &&
             contract_ === contractAddress &&
-            nodeTokenId?.eq(tokenId));
+            nodeTokenId === tokenId);
 
         // If the delegation node is valid, continue searching the children
         if (isValid) {
@@ -470,5 +469,5 @@ export function useDelegatedAccount(
     ...(account as GetAccountResult),
     address: vaultAddress || signerAddress,
     loadingDelegates: !Boolean(isTreeBuilt),
-  } as DelegatedAccountResult & GetAccountResult<Provider>;
+  } as DelegatedAccountResult & GetAccountResult<PublicClient>;
 }

packages/react/src/hooks/useEthersSigner.ts

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import { type WalletClient, useWalletClient } from 'wagmi';
+import { providers } from 'ethers';
+
+export function walletClientToSigner(walletClient: WalletClient) {
+  const { account, chain, transport } = walletClient;
+  const network = {
+    chainId: chain.id,
+    name: chain.name,
+    ensAddress: chain.contracts?.ensRegistry?.address,
+  };
+  const provider = new providers.Web3Provider(transport, network);
+  const signer = provider.getSigner(account.address);
+  return signer;
+}
+
+/** Hook to convert a viem Wallet Client to an ethers.js Signer. */
+export function useEthersSigner({ chainId }: { chainId?: number } = {}) {
+  const { data: walletClient } = useWalletClient({ chainId });
+  return React.useMemo(
+    () => (walletClient ? walletClientToSigner(walletClient) : undefined),
+    [walletClient],
+  );
+}

packages/react/src/hooks/usePrepareContractWrite.ts

@@ -4,31 +4,34 @@ import {
   PrepareWriteContractConfig,
   PrepareWriteContractResult,
   SendTransactionResult,
-  Signer,
 } from '@wagmi/core';
 import { Abi } from 'abitype';
 import { constants, Contract, providers, utils, Wallet } from 'ethers';
 import * as React from 'react';
-import { UsePrepareContractWriteConfig, useSigner } from 'wagmi';
+import { UsePrepareContractWriteConfig, WalletClient } from 'wagmi';
 
 import { EssentialContext } from '../components/EssentialProvider.js';
 import { useDelegatedAccount } from './useDelegatedAccount.js';
 import { EssentialWalletContext } from '../components/EssentialWalletContext.js';
+import { useEthersSigner } from './useEthersSigner.js';
 
 type TAbi = Abi | readonly {}[];
 
 export type EssentialContractWriteConfig<> = UsePrepareContractWriteConfig<
   TAbi,
   string,
   number,
-  Signer
+  WalletClient
 > &
   PrepareWriteContractConfig & {
     chainId: number;
     onSubmit?: () => void;
     onSuccess?: (data: SendTransactionResult) => void;
     txMode?: 'meta' | 'std';
     address: `0x${string}` | string;
+    overrides?: {
+      customData?: Record<string, any>;
+    };
   };
 
 export type EssentialPrepareWriteContractResult =
@@ -58,7 +61,7 @@ export function usePrepareContractWrite({
     signerAddress,
     vaultAddress,
   } = useDelegatedAccount();
-  const { data: signer } = useSigner();
+  const signer = useEthersSigner();
   const [request, setRequest] = React.useState<any>();
 
   const { relayerUri, forwarderAddress, domainName, readProvider } =
@@ -69,7 +72,10 @@ export function usePrepareContractWrite({
 
   const globalEntrySigner = React.useMemo(() => {
     if (!signerAddress || !signer) return;
-    let signerArgs: [string, Signer | Wallet] = [signerAddress, signer];
+    let signerArgs: [string, providers.JsonRpcSigner | Wallet] = [
+      signerAddress,
+      signer,
+    ];
 
     if (txMode === 'meta' && wallet && walletAddress) {
       const _wallet = new Wallet(
@@ -172,6 +178,6 @@ export function usePrepareContractWrite({
       onSettled,
       onSuccess,
       onSubmit,
-    } as EssentialPrepareWriteContractResult,
+    } as unknown as EssentialPrepareWriteContractResult,
   };
 }

packages/react/tsconfig.base.json

@@ -17,8 +17,15 @@
     "sourceMap": true,
     "allowJs": true,
     "declaration": true,
-    "resolveJsonModule": true
+    "resolveJsonModule": true,
+    "types": []
   },
-  "include": ["src/**/*", "src/types.d.ts"],
-  "exclude": ["node_modules", "**/*.test.js", "src/typechain/**/*"]
+  "include": ["src/*", "src/types.d.ts"],
+  "exclude": [
+    "node_modules",
+    "./node_modules",
+    "./node_modules/*",
+    "**/*.test.js",
+    "src/typechain/**/*"
+  ]
 }

packages/react/tsconfig.esm.json

@@ -1,10 +1,26 @@
 {
-  "extends": "./tsconfig.base.json",
   "compilerOptions": {
-      "target": "es6",
-      "module": "ES2020",
-      "outDir": "dist/esm",
-      "declarationDir": "dist/esm",
-      "declaration": true
+    "skipLibCheck": true,
+    "target": "es6",
+    "outDir": "dist/esm",
+    "declarationDir": "dist/esm",
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "module": "es2020",
+    "moduleResolution": "Node",
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "noUncheckedIndexedAccess": true,
+    "allowSyntheticDefaultImports": true,
+    "esModuleInterop": true,
+    "noImplicitAny": true,
+    "removeComments": true,
+    "preserveConstEnums": true,
+    "sourceMap": true,
+    "allowJs": true,
+    "declaration": true,
+    "resolveJsonModule": true,
+    "maxNodeModuleJsDepth": 0  
   }
 }