#46 fixes and autconnect to burner with an option

Author: ShravanSunder

packages/vite-app-ts/package.json

@@ -66,7 +66,7 @@
     "stream-browserify": "^3.0.0",
     "tailwindcss": "^2.2.17",
     "timers-browserify": "^2.0.12",
-    "tiny-invariant": "^1.1.0",
+    "ts-invariant": "^0.9.4",
     "use-debounce": "^7.0.0",
     "walletlink": "^2.1.11",
     "web3modal": "^1.9.1"

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

@@ -15,7 +15,7 @@ import { useBurnerFallback } from '~~/components/main/hooks/useBurnerFallback';
 import { useScaffoldHooksExamples as useScaffoldHooksExamples } from './components/main/hooks/useScaffoldHooksExamples';
 import { useEthersContext } from 'eth-hooks/context';
 import { NETWORKS } from '~~/models/constants/networks';
-import { mainnetProvider } from '~~/config/providersConfig';
+import { const_UseBurnerWalletAsFallback, mainnetProvider } from '~~/config/providersConfig';
 import {
   useAppContracts,
   useAppContractsActions,
@@ -25,8 +25,6 @@ import {
 import { asEthersAdaptor } from 'eth-hooks/functions';
 import { subgraphUri } from '~~/config/subgraphConfig';
 
-const DEBUG = false;
-
 export const Main: FC = () => {
   // -----------------------------
   // Providers, signers & wallets
@@ -39,7 +37,7 @@ export const Main: FC = () => {
   const ethersContext = useEthersContext();
 
   // if no user is found use a burner wallet on localhost as fallback if enabled
-  useBurnerFallback(scaffoldAppProviders, true);
+  useBurnerFallback(scaffoldAppProviders, const_UseBurnerWalletAsFallback);
 
   // -----------------------------
   // Load Contracts

packages/vite-app-ts/src/components/main/hooks/useScaffoldAppProviders.ts

@@ -1,12 +1,19 @@
 import { StaticJsonRpcProvider } from '@ethersproject/providers';
 import input from 'antd/lib/input';
 import { TCreateEthersModalConnector, TEthersAdaptor, TEthersProvider, TNetworkInfo } from 'eth-hooks/models';
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { ICoreOptions } from 'web3modal';
-import { EthersModalConnector, useEthersContext } from 'eth-hooks/context';
+import { EthersModalConnector, TEthersModalConnector, useEthersContext } from 'eth-hooks/context';
 import { useThemeSwitcher } from 'react-css-theme-switcher';
-import { mainnetProvider, localProvider, targetNetworkInfo } from '~~/config/providersConfig';
+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;
@@ -22,6 +29,8 @@ export const useScaffoldProviders = (): IScaffoldAppProviders => {
   const [mainnetAdaptor] = useEthersAdaptorFromProviderOrSigners(mainnetProvider);
   const [localAdaptor] = useEthersAdaptorFromProviderOrSigners(localProvider);
 
+  const firstLoadRef = useRef(true);
+
   useEffect(() => {
     // import async to split bundles
     const importedConfig = import('../../../config/web3ModalConfig');
@@ -38,7 +47,7 @@ export const useScaffoldProviders = (): IScaffoldAppProviders => {
   const createLoginConnector: TCreateEthersModalConnector = useCallback(
     (id?: string) => {
       if (web3Config) {
-        const connector = new EthersModalConnector(
+        let connector = new EthersModalConnector(
           { ...web3Config, theme: currentTheme },
           { reloadOnNetworkChange: false, immutableProvider: false },
           id
@@ -50,8 +59,29 @@ export const useScaffoldProviders = (): IScaffoldAppProviders => {
   );
 
   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) {
-      const connector = createLoginConnector();
+      let connector = createLoginConnector(undefined);
+      connector = autoConnectToBurner(connector);
       if (connector) ethersContext.activate(connector);
     }
   }, [web3Config]);

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

@@ -1,17 +1,17 @@
 import { useContext, useEffect } from 'react';
 import { ethers } from 'ethers';
 import { IScaffoldAppProviders } from '~~/components/main/hooks/useScaffoldAppProviders';
-import { DEBUG } from '../../../MainPage';
 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!
@@ -51,7 +51,7 @@ export const useScaffoldHooksExamples = (scaffoldAppProviders: IScaffoldAppProvi
   // ---------------------
   // 📛 call ens
   // ---------------------
-  // const addressFromENS = useEnsResolveName(scaffoldAppProviders.mainnetProvider, 'austingriffith.eth');
+  // const [addressFromENS] = useEnsResolveName(scaffoldAppProviders.mainnetProvider, 'austingriffith.eth');
   // console.log('🏷 Resolved austingriffith.eth as:', addressFromENS);
 
   // ---------------------

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

@@ -0,0 +1 @@
+export const DEBUG = false;

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

@@ -1,10 +1,13 @@
 import { StaticJsonRpcProvider } from '@ethersproject/providers';
 import { TEthersProvider, TNetworkInfo } from 'eth-hooks/models';
+import { DEBUG } from '~~/config/debug';
 import { INFURA_ID } from '~~/models/constants/constants';
 import { NETWORKS } from '~~/models/constants/networks';
 
+export const const_UseBurnerWalletAsFallback = true;
+export const const_ConnectToBurnerOnFirstLoad = true;
+
 // 😬 Sorry for all the console logging
-const DEBUG = true;
 // -------------------
 // useful overview:  https://docs.ethers.io/v5/api-keys/
 // -------------------

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

@@ -2,6 +2,11 @@ import Web3Modal, { ICoreOptions } from 'web3modal';
 import { INFURA_ID } from '~~/models/constants/constants';
 import { localNetworkInfo } from '~~/config/providersConfig';
 
+export const web3ModalConfigKeys = {
+  coinbaseKey: 'custom-walletlink',
+  localhostKey: 'custom-localhost',
+} as const;
+
 export const getWeb3ModalConfig = async (): Promise<Partial<ICoreOptions>> => {
   const Portis = (await import('@portis/web3')).default;
   const Fortmatic = (await import('fortmatic')).default;
@@ -105,13 +110,13 @@ export const getWeb3ModalConfig = async (): Promise<Partial<ICoreOptions>> => {
     cacheProvider: true,
     theme: 'light',
     providerOptions: {
-      'custom-localhost': localhostStaticConnector,
+      [web3ModalConfigKeys.localhostKey]: localhostStaticConnector,
       walletconnect: walletConnectEthereum,
       portis: portis,
       fortmatic: formatic,
       //torus: torus,
       authereum: authereum,
-      'custom-walletlink': coinbaseWalletLink,
+      [web3ModalConfigKeys.coinbaseKey]: coinbaseWalletLink,
     },
   };
 };

yarn.lock

@@ -2363,7 +2363,7 @@ __metadata:
     tailwindcss: ^2.2.17
     tailwindcss-elevation: ^1.0.1
     timers-browserify: ^2.0.12
-    tiny-invariant: ^1.1.0
+    ts-invariant: ^0.9.4
     ts-node: ^10.3.0
     twin.macro: ^2.8.0
     typescript: ^4.3.4