= (props) => (
Mainnet DAI
-
+ {/*
{
props.setRoute('/subgraph');
@@ -58,6 +58,6 @@ export const MainPageMenu: FC = (props) => (
to="/subgraph">
Subgraph
-
+ */}
);
diff --git a/packages/vite-app-ts/src/app/routes/main/functions/shuffle.ts b/packages/vite-app-ts/src/components/main/functions/shuffle.ts
similarity index 100%
rename from packages/vite-app-ts/src/app/routes/main/functions/shuffle.ts
rename to packages/vite-app-ts/src/components/main/functions/shuffle.ts
diff --git a/packages/vite-app-ts/src/app/routes/main/hooks/useBurnerFallback.ts b/packages/vite-app-ts/src/components/main/hooks/useBurnerFallback.ts
similarity index 66%
rename from packages/vite-app-ts/src/app/routes/main/hooks/useBurnerFallback.ts
rename to packages/vite-app-ts/src/components/main/hooks/useBurnerFallback.ts
index c21f777..3079315 100644
--- a/packages/vite-app-ts/src/app/routes/main/hooks/useBurnerFallback.ts
+++ b/packages/vite-app-ts/src/components/main/hooks/useBurnerFallback.ts
@@ -1,16 +1,16 @@
import { useEthersContext } from 'eth-hooks/context';
-import { useBurnerSigner, useGetUserFromProviders, useGetUserFromSigners, useUserAddress } from 'eth-hooks';
+import { useBurnerSigner, useSignerAddress } from 'eth-hooks';
import { parseProviderOrSigner } from 'eth-hooks/functions';
import { TEthersProvider } from 'eth-hooks/models';
import { useEffect, useRef, useState } from 'react';
-import { IScaffoldAppProviders } from '~~/app/routes/main/hooks/useScaffoldAppProviders';
+import { IScaffoldAppProviders } from '~~/components/main/hooks/useScaffoldAppProviders';
import { localNetworkInfo } from '~~/config/providersConfig';
export const useBurnerFallback = (appProviders: IScaffoldAppProviders, enable: boolean) => {
const ethersContext = useEthersContext();
- const burnerFallback = useBurnerSigner(appProviders.localProvider as TEthersProvider);
- const localAddress = useUserAddress(appProviders.localProvider.getSigner());
+ const burnerFallback = useBurnerSigner(appProviders.localAdaptor?.provider);
+ const localAddress = appProviders.localAdaptor?.signer;
useEffect(() => {
/**
@@ -19,7 +19,7 @@ export const useBurnerFallback = (appProviders: IScaffoldAppProviders, enable: b
if (
burnerFallback.account != ethersContext.account &&
ethersContext.chainId == localNetworkInfo.chainId &&
- ethersContext.ethersProvider?.connection.url === localNetworkInfo.rpcUrl &&
+ ethersContext.provider?.connection.url === localNetworkInfo.rpcUrl &&
burnerFallback.signer &&
enable
) {
diff --git a/packages/vite-app-ts/src/components/main/hooks/useScaffoldAppProviders.ts b/packages/vite-app-ts/src/components/main/hooks/useScaffoldAppProviders.ts
new file mode 100644
index 0000000..b9fb7d8
--- /dev/null
+++ b/packages/vite-app-ts/src/components/main/hooks/useScaffoldAppProviders.ts
@@ -0,0 +1,96 @@
+import { StaticJsonRpcProvider } from '@ethersproject/providers';
+import input from 'antd/lib/input';
+import { TCreateEthersModalConnector, TEthersAdaptor, TEthersProvider, TNetworkInfo } from 'eth-hooks/models';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { ICoreOptions } from 'web3modal';
+import { EthersModalConnector, TEthersModalConnector, useEthersContext } from 'eth-hooks/context';
+import { useThemeSwitcher } from 'react-css-theme-switcher';
+import {
+ mainnetProvider,
+ localProvider,
+ targetNetworkInfo,
+ const_ConnectToBurnerOnFirstLoad,
+} from '~~/config/providersConfig';
+import { useEthersAdaptorFromProviderOrSigners } from 'eth-hooks';
+import { web3ModalConfigKeys } from '~~/config/web3ModalConfig';
+import invariant from 'ts-invariant';
+
+export interface IScaffoldAppProviders {
+ currentProvider: TEthersProvider | undefined;
+ targetNetwork: TNetworkInfo;
+ mainnetAdaptor: TEthersAdaptor | undefined;
+ localAdaptor: TEthersAdaptor | undefined;
+ createLoginConnector: TCreateEthersModalConnector;
+}
+
+export const useScaffoldProviders = (): IScaffoldAppProviders => {
+ const [web3Config, setWeb3Config] = useState>();
+ const ethersContext = useEthersContext();
+ const [mainnetAdaptor] = useEthersAdaptorFromProviderOrSigners(mainnetProvider);
+ const [localAdaptor] = useEthersAdaptorFromProviderOrSigners(localProvider);
+
+ const firstLoadRef = useRef(true);
+
+ useEffect(() => {
+ // import async to split bundles
+ const importedConfig = import('../../../config/web3ModalConfig');
+
+ importedConfig.then((getter) => {
+ getter.getWeb3ModalConfig().then((config) => {
+ setWeb3Config(config);
+ });
+ });
+ }, []);
+
+ const { currentTheme } = useThemeSwitcher();
+
+ const createLoginConnector: TCreateEthersModalConnector = useCallback(
+ (id?: string) => {
+ if (web3Config) {
+ let connector = new EthersModalConnector(
+ { ...web3Config, theme: currentTheme },
+ { reloadOnNetworkChange: false, immutableProvider: false },
+ id
+ );
+ return connector;
+ }
+ },
+ [web3Config, currentTheme]
+ );
+
+ useEffect(() => {
+ /**
+ * This is for to auto connect to the burner wallet when there is no cached provier
+ * you can turn it off by settting {@link const_ConnectToBurnerOnFirstLoad} to false
+ * @param connector
+ * @returns
+ */
+ const autoConnectToBurner = (connector: TEthersModalConnector | undefined) => {
+ if (const_ConnectToBurnerOnFirstLoad && connector) {
+ (connector as EthersModalConnector).loadCore();
+ if (connector != null && !connector.hasCachedProvider()) {
+ connector = new EthersModalConnector(
+ { ...web3Config, theme: currentTheme },
+ { reloadOnNetworkChange: false, immutableProvider: false },
+ web3ModalConfigKeys.localhostKey
+ );
+ }
+ }
+ return connector;
+ };
+
+ if (!ethersContext.active && createLoginConnector) {
+ let connector = createLoginConnector(undefined);
+ connector = autoConnectToBurner(connector);
+ if (connector) ethersContext.activate(connector);
+ }
+ }, [web3Config]);
+
+ return {
+ currentProvider: ethersContext.provider ?? localProvider,
+ mainnetAdaptor: mainnetAdaptor,
+ localAdaptor: localAdaptor,
+ targetNetwork: targetNetworkInfo,
+ createLoginConnector: createLoginConnector,
+ };
+};
diff --git a/packages/vite-app-ts/src/app/routes/main/hooks/useScaffoldHooksExamples.tsx b/packages/vite-app-ts/src/components/main/hooks/useScaffoldHooksExamples.tsx
similarity index 58%
rename from packages/vite-app-ts/src/app/routes/main/hooks/useScaffoldHooksExamples.tsx
rename to packages/vite-app-ts/src/components/main/hooks/useScaffoldHooksExamples.tsx
index f4303e7..0a2a3fa 100644
--- a/packages/vite-app-ts/src/app/routes/main/hooks/useScaffoldHooksExamples.tsx
+++ b/packages/vite-app-ts/src/components/main/hooks/useScaffoldHooksExamples.tsx
@@ -1,16 +1,17 @@
import { useContext, useEffect } from 'react';
import { ethers } from 'ethers';
-import { IScaffoldAppProviders } from '~~/app/routes/main/hooks/useScaffoldAppProviders';
-import { DEBUG } from '../Main';
-import { useBalance, useContractReader, useGasPrice, useOnRepetition } from 'eth-hooks';
+import { IScaffoldAppProviders } from '~~/components/main/hooks/useScaffoldAppProviders';
+import { useBalance, useBlockNumber, useContractReader, useGasPrice, useSignerAddress } from 'eth-hooks';
import { useEthersContext } from 'eth-hooks/context';
-import { getNetworkInfo } from '~~/helpers';
import { transactor } from 'eth-components/functions';
import { EthComponentsSettingsContext } from 'eth-components/models';
import { parseEther } from '@ethersproject/units';
import { config } from 'process';
import { NETWORKS } from '~~/models/constants/networks';
+import { useAppContracts } from '~~/config/contractContext';
+import { getNetworkInfo } from '~~/functions';
+import { DEBUG } from '~~/config/debug';
/**
* Logs to console current app state. Shows you examples on how to use hooks!
@@ -21,14 +22,10 @@ import { NETWORKS } from '~~/models/constants/networks';
* @param writeContracts
* @param mainnetContracts
*/
-export const useScaffoldHooks = (
- scaffoldAppProviders: IScaffoldAppProviders,
- readContracts: Record,
- writeContracts: Record,
- mainnetContracts: Record
-) => {
- const ethersContext = useEthersContext();
+export const useScaffoldHooksExamples = (scaffoldAppProviders: IScaffoldAppProviders) => {
const ethComponentsSettings = useContext(EthComponentsSettingsContext);
+ const ethersContext = useEthersContext();
+ const mainnetDai = useAppContracts('DAI', NETWORKS.mainnet.chainId);
let currentChainId: number | undefined = ethersContext.chainId;
@@ -36,7 +33,7 @@ export const useScaffoldHooks = (
// 🏦 get your balance
// ---------------------
// 🏗 scaffold-eth is full of handy hooks like this one to get your balance:
- const yourLocalBalance = useBalance(ethersContext.account ?? '');
+ const [yourLocalBalance] = useBalance(ethersContext.account ?? '');
// ---------------------
// 🤙🏽 calling an external function
@@ -45,19 +42,16 @@ export const useScaffoldHooks = (
// const yourMainnetBalance = useBalance(scaffoldAppProviders.mainnetProvider, currentEthersUser.address ?? '');
// 💰 Then read your DAI balance like:
- const myMainnetDAIBalance = useContractReader(mainnetContracts?.['DAI'], {
- contractName: 'DAI',
- functionName: 'balanceOf',
- functionArgs: ['0x34aA3F359A9D614239015126635CE7732c18fDF3'],
- });
+ const [myAddress] = useSignerAddress(ethersContext.signer);
+ const myMainnetDAIBalance = useContractReader(mainnetDai, mainnetDai?.balanceOf, [myAddress ?? '']);
// 🔥 This hook will get the price of Gas from ⛽️ EtherGasStation
- const gasPrice = useGasPrice(ethersContext.chainId, 'fast', getNetworkInfo(ethersContext.chainId));
+ const [gasPrice] = useGasPrice(ethersContext.chainId, 'fast', getNetworkInfo(ethersContext.chainId));
// ---------------------
// 📛 call ens
// ---------------------
- // const addressFromENS = useEnsResolveName(scaffoldAppProviders.mainnetProvider, 'austingriffith.eth');
+ // const [addressFromENS] = useEnsResolveName(scaffoldAppProviders.mainnetProvider, 'austingriffith.eth');
// console.log('🏷 Resolved austingriffith.eth as:', addressFromENS);
// ---------------------
@@ -65,20 +59,12 @@ export const useScaffoldHooks = (
// ---------------------
// This hook will let you invoke a callback on every block or with a polling time!
// 🙋🏽♂️ on block is preffered!
- useOnRepetition(
- async (): Promise =>
- console.log(`⛓ A new mainnet block is here: ${await scaffoldAppProviders.mainnetProvider.getBlockNumber()}`),
- {
- provider: scaffoldAppProviders.mainnetProvider,
- }
+ useBlockNumber(scaffoldAppProviders.mainnetAdaptor?.provider, (blockNumber) =>
+ console.log(`⛓ A new mainnet block is here: ${blockNumber}`)
);
- useOnRepetition(
- async (): Promise =>
- console.log(`⛓ A new localblock block is here: ${await scaffoldAppProviders.localProvider.blockNumber}`),
- {
- provider: scaffoldAppProviders.localProvider,
- }
+ useBlockNumber(scaffoldAppProviders.localAdaptor?.provider, (blockNumber) =>
+ console.log(`⛓ A new local block is here: ${blockNumber}`)
);
//----------------------
@@ -103,36 +89,17 @@ export const useScaffoldHooks = (
// }, []);
useEffect(() => {
- if (
- DEBUG &&
- scaffoldAppProviders.mainnetProvider &&
- ethersContext.account &&
- currentChainId &&
- yourLocalBalance &&
- // yourMainnetBalance &&
- readContracts &&
- writeContracts &&
- mainnetContracts
- ) {
+ if (DEBUG && scaffoldAppProviders.mainnetAdaptor && ethersContext.account && currentChainId && yourLocalBalance) {
console.log('_____________________________________ 🏗 scaffold-eth _____________________________________');
- console.log('🌎 mainnetProvider', scaffoldAppProviders.mainnetProvider);
- console.log('🏠 localChainId', scaffoldAppProviders.localProvider.network.chainId);
+ console.log('🌎 mainnetProvider', scaffoldAppProviders.mainnetAdaptor);
+ console.log('🏠 localChainId', scaffoldAppProviders?.localAdaptor?.chainId);
console.log('👩💼 selected address:', ethersContext.account);
console.log('🕵🏻♂️ currentChainId:', currentChainId);
console.log('💵 yourLocalBalance', yourLocalBalance ? ethers.utils.formatEther(yourLocalBalance) : '...');
// console.log('💵 yourMainnetBalance', yourMainnetBalance ? ethers.utils.formatEther(yourMainnetBalance) : '...');
- console.log('📝 readContracts', readContracts);
- console.log('🌍 DAI contract on mainnet:', mainnetContracts);
- console.log('💵 yourMainnetDAIBalance', myMainnetDAIBalance);
- console.log('🔐 writeContracts', writeContracts);
+ console.log('🌍 DAI contract on mainnet:', mainnetDai);
+ console.log('💵 yourMainnetDAIBalance', myMainnetDAIBalance ?? '...');
console.log('⛽ gasPrice', gasPrice);
}
- }, [
- scaffoldAppProviders.mainnetProvider,
- ethersContext.account,
- ethersContext.ethersProvider,
- readContracts,
- writeContracts,
- mainnetContracts,
- ]);
+ }, [scaffoldAppProviders.mainnetAdaptor, ethersContext.account, ethersContext.provider]);
};
diff --git a/packages/vite-app-ts/src/app/routes/main/components/index.ts b/packages/vite-app-ts/src/components/main/index.ts
similarity index 100%
rename from packages/vite-app-ts/src/app/routes/main/components/index.ts
rename to packages/vite-app-ts/src/components/main/index.ts
diff --git a/packages/vite-app-ts/src/app/routes/checkout/Checkout.tsx b/packages/vite-app-ts/src/components/pages/checkout/Checkout.tsx
similarity index 96%
rename from packages/vite-app-ts/src/app/routes/checkout/Checkout.tsx
rename to packages/vite-app-ts/src/components/pages/checkout/Checkout.tsx
index 50c659d..2662104 100644
--- a/packages/vite-app-ts/src/app/routes/checkout/Checkout.tsx
+++ b/packages/vite-app-ts/src/components/pages/checkout/Checkout.tsx
@@ -4,16 +4,16 @@ import { Button, Input, Spin, notification } from 'antd';
import React, { FC, ReactElement, useState } from 'react';
import { useHistory } from 'react-router-dom';
import StackGrid from 'react-stack-grid';
-import { TTransactor } from 'eth-components/functions';
import { AddressInput, EtherInput } from 'eth-components/ant';
+import { TTransactorFunc } from 'eth-components/functions';
export interface ICheckoutProps {
setRoute: any;
cart: any;
setCart: any;
displayCart: any;
- tx: TTransactor;
+ tx: TTransactorFunc;
writeContracts: any;
mainnetProvider: StaticJsonRpcProvider;
}
diff --git a/packages/vite-app-ts/src/app/routes/exampleui/ExampleUI.tsx b/packages/vite-app-ts/src/components/pages/exampleui/ExampleUI.tsx
similarity index 81%
rename from packages/vite-app-ts/src/app/routes/exampleui/ExampleUI.tsx
rename to packages/vite-app-ts/src/components/pages/exampleui/ExampleUI.tsx
index 3fbae67..2aa3d7d 100644
--- a/packages/vite-app-ts/src/app/routes/exampleui/ExampleUI.tsx
+++ b/packages/vite-app-ts/src/components/pages/exampleui/ExampleUI.tsx
@@ -1,21 +1,21 @@
import { SyncOutlined } from '@ant-design/icons';
import { formatEther, parseEther } from '@ethersproject/units';
import { Button, Card, DatePicker, Divider, Input, List, Progress, Slider, Spin, Switch } from 'antd';
-import { Signer, Contract } from 'ethers';
+import { Signer, Contract, BigNumber } from 'ethers';
import React, { useState, FC, useContext } from 'react';
import { Address, Balance } from 'eth-components/ant';
-import { transactor, TTransactor } from 'eth-components/functions';
+import { transactor } from 'eth-components/functions';
import { StaticJsonRpcProvider } from '@ethersproject/providers';
import { useEthersContext } from 'eth-hooks/context';
import { useContractLoader, useContractReader, useEventListener, useGasPrice } from 'eth-hooks';
-import { YourContract } from '~~/generated/contract-types';
-import { useAppContracts } from '~~/app/routes/main/hooks/useAppContracts';
import { EthComponentsSettingsContext } from 'eth-components/models';
+import { useAppContracts, useAppContractsContext } from '~~/config/contractContext';
+import { SetPurposeEvent, YourContract } from '~~/generated/contract-types/YourContract';
export interface IExampleUIProps {
- mainnetProvider: StaticJsonRpcProvider;
- yourCurrentBalance: any;
+ mainnetProvider: StaticJsonRpcProvider | undefined;
+ yourCurrentBalance: BigNumber | undefined;
price: number;
}
@@ -23,23 +23,16 @@ export const ExampleUI: FC = (props) => {
const [newPurpose, setNewPurpose] = useState('loading...');
const ethersContext = useEthersContext();
- const appContractConfig = useAppContracts();
- const readContracts = useContractLoader(appContractConfig);
- const writeContracts = useContractLoader(appContractConfig, ethersContext?.signer);
+ const yourContract = useAppContracts('YourContract', ethersContext.chainId);
+ const [purpose] = useContractReader(yourContract, yourContract?.purpose, [], yourContract?.filters.SetPurpose());
- const yourContractRead = readContracts['YourContract'] as YourContract;
- const yourContractWrite = writeContracts['YourContract'] as YourContract;
- const purpose = useContractReader(yourContractRead, {
- contractName: 'YourContract',
- functionName: 'purpose',
- });
- const setPurposeEvents = useEventListener(yourContractRead, 'SetPurpose', 1);
+ const [setPurposeEvents] = useEventListener(yourContract, yourContract?.filters.SetPurpose(), 1);
const signer = ethersContext.signer;
const address = ethersContext.account ?? '';
const ethComponentsSettings = useContext(EthComponentsSettingsContext);
- const gasPrice = useGasPrice(ethersContext.chainId, 'fast');
+ const [gasPrice] = useGasPrice(ethersContext.chainId, 'fast');
const tx = transactor(ethComponentsSettings, ethersContext?.signer, gasPrice);
const { mainnetProvider, yourCurrentBalance, price } = props;
@@ -64,7 +57,7 @@ export const ExampleUI: FC = (props) => {
onClick={async () => {
/* look how you call setPurpose on your contract: */
/* notice how you pass a call back for tx updates too */
- const result = tx?.(yourContractWrite?.setPurpose(newPurpose), (update: any) => {
+ const result = tx?.(yourContract?.setPurpose(newPurpose), (update: any) => {
console.log('📡 Transaction Update:', update);
if (update && (update.status === 'confirmed' || update.status === 1)) {
console.log(' 🍾 Transaction ' + update.hash + ' finished!');
@@ -108,13 +101,13 @@ export const ExampleUI: FC = (props) => {
Your Balance: {yourCurrentBalance ? formatEther(yourCurrentBalance) : '...'}
Your Contract Address:
-
+
@@ -127,7 +120,7 @@ export const ExampleUI: FC = (props) => {
here we are sending value straight to the contract's address:
*/
tx?.({
- to: writeContracts.YourContract.address,
+ to: yourContract?.address,
value: parseEther('0.001'),
});
/* this should throw an error about "no fallback nor receive function" until you add it */
@@ -140,7 +133,7 @@ export const ExampleUI: FC = (props) => {
onClick={() => {
/* look how we call setPurpose AND send some value along */
tx?.(
- yourContractWrite?.setPurpose('💵 Paying for this one!', {
+ yourContract?.setPurpose('💵 Paying for this one!', {
value: parseEther('0.001'),
})
);
@@ -154,9 +147,9 @@ export const ExampleUI: FC = (props) => {
onClick={() => {
/* you can also just craft a transaction and send it to the tx() transactor */
tx?.({
- to: yourContractWrite?.address,
+ to: yourContract?.address,
value: parseEther('0.001'),
- data: yourContractWrite?.interface?.encodeFunctionData?.('setPurpose', ['🤓 Whoa so 1337!']),
+ data: yourContract?.interface?.encodeFunctionData?.('setPurpose', ['🤓 Whoa so 1337!']),
});
/* this should throw an error about "no fallback nor receive function" until you add it */
}}>
diff --git a/packages/vite-app-ts/src/app/routes/hints/Hints.tsx b/packages/vite-app-ts/src/components/pages/hints/Hints.tsx
similarity index 95%
rename from packages/vite-app-ts/src/app/routes/hints/Hints.tsx
rename to packages/vite-app-ts/src/components/pages/hints/Hints.tsx
index 9a47db3..d01be07 100644
--- a/packages/vite-app-ts/src/app/routes/hints/Hints.tsx
+++ b/packages/vite-app-ts/src/components/pages/hints/Hints.tsx
@@ -11,7 +11,7 @@ const { Option } = Select;
export interface IHintsProps {
yourCurrentBalance: BigNumber | undefined;
- mainnetProvider: TEthersProvider;
+ mainnetProvider: TEthersProvider | undefined;
price: number;
address: string;
}
@@ -20,7 +20,7 @@ export const Hints: FC = (props) => {
const { yourCurrentBalance, mainnetProvider, price, address } = props;
// Get a list of tokens from a tokenlist -> see tokenlists.org!
const [selectedToken, setSelectedToken] = useState('Pick a token!');
- const listOfTokens = useDexTokenList(
+ const [listOfTokens] = useDexTokenList(
'https://raw.githubusercontent.com/SetProtocol/uniswap-tokenlist/main/set.tokenlist.json'
);
@@ -121,7 +121,7 @@ export const Hints: FC = (props) => {
style={{ margin: 4, /* backgroundColor: "#f9f9f9", */ padding: 4, borderRadius: 4, fontWeight: 'bolder' }}>
useBalance()
{' '}
- hook keeps track of your balance: {formatEther(yourCurrentBalance || 0)}
+ hook keeps track of your balance: {formatEther(yourCurrentBalance ?? 0)}