Features/eth hooks#125

packages/hardhat-ts/package.json

@@ -23,23 +23,23 @@
     "@ethersproject/providers": "^5.5.2",
     "@nomiclabs/hardhat-ethers": "npm:hardhat-deploy-ethers@^0.3.0-beta.10",
     "@nomiclabs/hardhat-waffle": "^2.0.1",
-    "@openzeppelin/contracts": "^4.4.1",
+    "@openzeppelin/contracts": "^4.4.2",
     "@tenderly/hardhat-tenderly": "^1.0.13",
-    "@typechain/ethers-v5": "^7.2.0",
-    "@typechain/hardhat": "^2.3.1",
+    "@typechain/ethers-v5": "^9.0.0",
+    "@typechain/hardhat": "^4.0.0",
     "chalk": "^4.1.2",
     "ethereum-waffle": "^3.4.0",
     "ethers": "^5.5.3",
     "hardhat": "^2.8.2",
     "hardhat-deploy": "^0.9.24",
-    "hardhat-deploy-ethers": "^0.3.0-beta.10",
+    "hardhat-deploy-ethers": "^0.3.0-beta.13",
     "ipfs-http-client": "^54.0.2",
     "qrcode-terminal": "^0.12.0",
-    "typechain": "^5.2.0"
+    "typechain": "^7.0.0"
   },
   "devDependencies": {
     "@types/jest": "^27.4.0",
-    "@types/node": "^16.11.19",
+    "@types/node": "^17.0.8",
     "eslint": "^8.6.0",
     "eslint-config-airbnb": "^19.0.4",
     "eslint-config-airbnb-typescript": "^16.1.0",

packages/subgraph/package.json

@@ -11,7 +11,7 @@
     "deploy-local": "graph deploy --node http://localhost:8020/ --ipfs http://localhost:5001 scaffold-eth/your-contract"
   },
   "dependencies": {
-    "@graphprotocol/graph-cli": "^0.25.2",
+    "@graphprotocol/graph-cli": "^0.25.3",
     "@graphprotocol/graph-ts": "^0.24.1"
   },
   "devDependencies": {

packages/vite-app-ts/package.json

@@ -30,16 +30,16 @@
     "@ethersproject/solidity": "^5.5.0",
     "@ethersproject/units": "^5.5.0",
     "@maticnetwork/maticjs": "^3.1.0",
-    "@portis/web3": "^4.0.6",
+    "@portis/web3": "^4.1.0",
     "@ramp-network/ramp-instant-sdk": "^3.0.0",
     "@uniswap/sdk": "^3.0.3",
     "@uniswap/token-lists": "^1.0.0-beta.24",
     "antd": "^4.18.3",
     "authereum": "^0.1.14",
     "axios": "^0.24.0",
     "buffer": "^6.0.3",
-    "eth-components": "3.0.10",
-    "eth-hooks": "4.0.9",
+    "eth-components": "3.0.12",
+    "eth-hooks": "4.0.10",
     "ethereum-cryptography": "^0.1.3",
     "ethers": "^5.5.3",
     "fortmatic": "^2.2.1",
@@ -57,36 +57,36 @@
     "react-dom": "^17.0.2",
     "react-error-boundary": "^3.1.4",
     "react-qr-reader": "^2.2.1",
-    "react-query": "^3.34.7",
+    "react-query": "^3.34.8",
     "react-router-dom": "^5.3.0",
     "react-stack-grid": "^0.7.1",
     "request": "^2.88.2",
     "stream": "^0.0.2",
     "stream-browserify": "^3.0.0",
-    "tailwindcss": "^3.0.13",
+    "tailwindcss": "^3.0.15",
     "timers-browserify": "^2.0.12",
     "ts-invariant": "^0.9.4",
     "use-debounce": "^7.0.1",
     "util": "^0.12.4",
-    "walletlink": "^2.4.1",
+    "walletlink": "^2.4.3",
     "web3modal": "^1.9.5"
   },
   "devDependencies": {
-    "@dethcrypto/eth-sdk": "^0.2.4",
+    "@dethcrypto/eth-sdk": "^0.3.0",
     "@emotion/types": "^0.7.0",
     "@nomiclabs/hardhat-ethers": "^2.0.4",
     "@nomiclabs/hardhat-waffle": "^2.0.1",
     "@tailwindcss/aspect-ratio": "^0.4.0",
     "@tailwindcss/forms": "^0.4.0",
-    "@tailwindcss/line-clamp": "^0.3.0",
+    "@tailwindcss/line-clamp": "^0.3.1",
     "@tailwindcss/typography": "^0.5.0",
     "@testing-library/jest-dom": "^5.16.1",
     "@testing-library/react": "^12.1.2",
     "@testing-library/user-event": "^13.5.0",
-    "@typechain/hardhat": "^2.3.1",
+    "@typechain/hardhat": "^4.0.0",
     "@types/isomorphic-fetch": "^0.0.35",
     "@types/jest": "^27.4.0",
-    "@types/node": "^16.11.19",
+    "@types/node": "^17.0.8",
     "@types/pretty-time": "^1.1.2",
     "@types/qrcode.react": "^1.0.2",
     "@types/react": "^17.0.38",
@@ -121,15 +121,15 @@
     "shx": "^0.3.4",
     "stylelint": "^14.2.0",
     "stylelint-config-recommended": "^6.0.0",
-    "tailwindcss": "^3.0.13",
+    "tailwindcss": "^3.0.15",
     "tailwindcss-elevation": "^1.0.1",
     "ts-node": "^10.4.0",
     "twin.macro": "^2.8.2",
     "typescript": "^4.5.4",
-    "vite": "^2.7.10",
+    "vite": "^2.7.12",
     "vite-plugin-babel-macros": "^1.0.5",
     "vite-plugin-externals": "^0.3.2",
-    "vite-plugin-imp": "^2.1.2",
+    "vite-plugin-imp": "^2.1.3",
     "vite-tsconfig-paths": "^3.3.17"
   },
   "browserslist": {

packages/vite-app-ts/src/MainPage.tsx

@@ -2,7 +2,7 @@ import React, { FC, useEffect, useState } from 'react';
 import { BrowserRouter, Route, Switch } from 'react-router-dom';
 
 import '~~/styles/main-page.css';
-import { useContractReader, useBalance, useEthersAdaptorFromProviderOrSigners } from 'eth-hooks';
+import { useContractReader, useBalance, useEthersAdaptorFromProviderOrSigners, useGasPrice } from 'eth-hooks';
 import { useDexEthPrice } from 'eth-hooks/dapps';
 
 import { GenericContract } from 'eth-components/ant/generic-contract';
@@ -50,15 +50,23 @@ export const Main: FC = () => {
   // 🏭 connec to  contracts for current network & signer
   useConnectAppContracts(asEthersAdaptor(ethersContext));
 
+  const yourContract = useAppContracts('YourContract', ethersContext.chainId);
+  const daiContract = useAppContracts('DAI', NETWORKS.mainnet.chainId);
+
   // -----------------------------
   // examples on how to get contracts
   // -----------------------------
   // init contracts
-  const yourContract = useAppContracts('YourContract', ethersContext.chainId);
+  //const yourContract = useAppContracts('YourContract', ethersContext.chainId);
   const mainnetDai = useAppContracts('DAI', NETWORKS.mainnet.chainId);
 
   // keep track of a variable from the contract in the local React state:
-  const purpose = useContractReader(yourContract, yourContract?.purpose, [], yourContract?.filters.SetPurpose());
+  const [purpose, update] = useContractReader(
+    yourContract,
+    yourContract?.purpose,
+    [],
+    yourContract?.filters.SetPurpose()
+  );
 
   // 📟 Listen for broadcast events
   const [setPurposeEvents] = useEventListener(yourContract, 'SetPurpose', 0);

packages/vite-app-ts/src/components/main/hooks/useScaffoldHooksExamples.tsx

@@ -1,7 +1,14 @@
 import { useContext, useEffect } from 'react';
 import { ethers } from 'ethers';
 import { IScaffoldAppProviders } from '~~/components/main/hooks/useScaffoldAppProviders';
-import { useBalance, useBlockNumber, useContractReader, useGasPrice, useSignerAddress } from 'eth-hooks';
+import {
+  useBalance,
+  useBlockNumber,
+  useContractReader,
+  useEthersAdaptorFromProviderOrSigners,
+  useGasPrice,
+  useSignerAddress,
+} from 'eth-hooks';
 
 import { useEthersContext } from 'eth-hooks/context';
 import { transactor } from 'eth-components/functions';
@@ -27,6 +34,8 @@ export const useScaffoldHooksExamples = (scaffoldAppProviders: IScaffoldAppProvi
   const ethersContext = useEthersContext();
   const mainnetDai = useAppContracts('DAI', NETWORKS.mainnet.chainId);
 
+  const exampleMainnetProvider = scaffoldAppProviders.mainnetAdaptor?.provider;
+
   let currentChainId: number | undefined = ethersContext.chainId;
 
   // ---------------------
@@ -35,11 +44,16 @@ export const useScaffoldHooksExamples = (scaffoldAppProviders: IScaffoldAppProvi
   // 🏗 scaffold-eth is full of handy hooks like this one to get your balance:
   const [yourLocalBalance] = useBalance(ethersContext.account ?? '');
 
+  // Just plug in different 🛰 providers to get your balance on different chains:
+  const [mainnetAdaptor] = useEthersAdaptorFromProviderOrSigners(exampleMainnetProvider);
+  const [yourMainnetBalance] = useBalance(ethersContext.account ?? '', {
+    adaptorEnabled: true,
+    adaptor: mainnetAdaptor,
+  });
+
   // ---------------------
   // 🤙🏽 calling an external function
   // ---------------------
-  // Just plug in different 🛰 providers to get your balance on different chains:
-  // const yourMainnetBalance = useBalance(scaffoldAppProviders.mainnetProvider, currentEthersUser.address ?? '');
 
   // 💰 Then read your DAI balance like:
   const [myAddress] = useSignerAddress(ethersContext.signer);

packages/vite-app-ts/src/components/pages/exampleui/ExampleUI.tsx

@@ -10,7 +10,7 @@ import { StaticJsonRpcProvider } from '@ethersproject/providers';
 import { useEthersContext } from 'eth-hooks/context';
 import { useContractLoader, useContractReader, useEventListener, useGasPrice } from 'eth-hooks';
 import { EthComponentsSettingsContext } from 'eth-components/models';
-import { useAppContracts, useAppContractsContext } from '~~/config/contractContext';
+import { useAppContracts } from '~~/config/contractContext';
 import { SetPurposeEvent, YourContract } from '~~/generated/contract-types/YourContract';
 
 export interface IExampleUIProps {

packages/vite-app-ts/src/config/contractContext.ts

@@ -1,44 +1,25 @@
 import { contractConnectorConfig, TAppConnectorList } from '~~/config/contractConnectorConfig';
-import { TTypedContract } from 'eth-hooks/models';
+import { TAppContractsContext, TTypedContract } from 'eth-hooks/models';
 import { contractsContextFactory, useEthersContext } from 'eth-hooks/context';
 
 /**
  * This file initalises the contractContextFactory and exports the types
- * You don't need to change this file.
+ * 🙅🏽‍♂️ You don't need to change this file.
  */
 
 /**
- * A type which is composed of contracts (contractNames) in your app
+ * #### Summary
+ * Call contractContextFactory with the contractConnectorConfig.
+ * This will create your Context and hooks.
  */
-export type TAppContractNames = keyof TAppConnectorList;
-/**
- * A generic with 'contractName' that provides the appropriate type for your contract
- */
-export type TAppContractTypes<GContractName extends TAppContractNames> = TTypedContract<
-  GContractName,
-  TAppConnectorList
->;
-
 export const {
   ContractsAppContext,
   useAppContractsActions,
-  useAppContractsContext,
+  useAppContracts,
   useLoadAppContracts,
   useConnectAppContracts,
-} = contractsContextFactory<TAppContractNames, TAppConnectorList, TAppContractTypes<TAppContractNames>>(
-  contractConnectorConfig
-);
-
-/**
- * Wraps useAppContractsContext to provide narrowly typed contracts for app contracts
- * @param contractName
- * @param chainId
- * @returns
- */
-export const useAppContracts = <GContractName extends TAppContractNames>(
-  contractName: GContractName,
-  chainId: number | undefined
-): TAppContractTypes<GContractName> | undefined => {
-  const result = useAppContractsContext(contractName, chainId);
-  return result as TAppContractTypes<GContractName>;
-};
+} = contractsContextFactory<
+  keyof TAppConnectorList,
+  TAppConnectorList,
+  TTypedContract<keyof TAppConnectorList, TAppConnectorList>
+>(contractConnectorConfig);