diff --git a/.gitignore b/.gitignore index 54e2b1b096d..25db49e261a 100644 --- a/.gitignore +++ b/.gitignore @@ -4,6 +4,7 @@ packages/**/node_modules node_modules yarn-error.log .vscode +.idea .DS_Store # truffle diff --git a/packages/dashboard/package.json b/packages/dashboard/package.json index a50ac2dfdd2..e4f01798672 100644 --- a/packages/dashboard/package.json +++ b/packages/dashboard/package.json @@ -39,18 +39,11 @@ "prepare": "yarn build", "test": "jest" }, - "browserslist": { - "production": [ - ">0.2%", - "not dead", - "not op_mini all" - ], - "development": [ - "last 1 chrome version", - "last 1 firefox version", - "last 1 safari version" - ] - }, + "browserslist": [ + ">0.2%", + "not dead", + "not op_mini all" + ], "devDependencies": { "@craco/craco": "^6.4.3", "@testing-library/jest-dom": "^5.16.1", @@ -65,15 +58,13 @@ "@types/react-dom": "^17.0.11", "@types/web3": "^1.2.2", "@types/ws": "^7.2.0", - "@web3-react/core": "^6.1.9", - "@web3-react/injected-connector": "^6.0.7", "autoprefixer": "^9", "axios": "^0.24.0", "concurrently": "^6.5.1", "cpy-cli": "^3.1.1", "delay": "^5.0.0", "ethereum-protocol": "^1.0.1", - "ethers": "^5.5.2", + "ethers": "^5.6.1", "jest": "^27.4.5", "postcss": "^8", "react": "^17.0.2", @@ -83,7 +74,8 @@ "tailwindcss": "npm:@tailwindcss/postcss7-compat", "ts-jest": "^27.1.2", "ts-node": "^10.4.0", - "typescript": "^4.1.4" + "typescript": "^4.1.4", + "wagmi": "^0.2.21" }, "publishConfig": { "access": "public" diff --git a/packages/dashboard/src/App.tsx b/packages/dashboard/src/App.tsx index c1681f7268f..96570220d59 100644 --- a/packages/dashboard/src/App.tsx +++ b/packages/dashboard/src/App.tsx @@ -1,12 +1,56 @@ -import { getLibrary } from "./utils/utils"; -import { Web3ReactProvider } from "@web3-react/core"; import Dashboard from "./Dashboard"; +import { chain, Connector, defaultChains, Provider } from "wagmi"; +import { InjectedConnector } from "wagmi/connectors/injected"; +import { WalletConnectConnector } from "wagmi/connectors/walletConnect"; + +import { getDefaultProvider, providers as ethproviders } from "ethers"; +import { getNetwork } from "@ethersproject/providers"; + +const defaultChain = chain.mainnet; + +const getProvider = (_config: { chainId?: number; connector?: Connector }) => { + let wProvider = _config.connector?.getProvider(true); + console.debug("getProvider", { + wProvider, + winEth: window.ethereum, + _config, + INFURA_ID: process.env.REACT_APP_INFURA_ID + }); + let ret: any; + if (!wProvider) { + ret = getDefaultProvider(getNetwork(_config.chainId ?? defaultChain.id)); + } else { + wProvider + .enable() + .then((r: any) => console.debug(r)) + .catch((e: any) => console.error(e)); + ret = new ethproviders.Web3Provider(wProvider); + } + console.debug("getProvider.returning", { + wProvider, + winEth: window.ethereum, + ret + }); + return ret; +}; + +const connectors = [ + new InjectedConnector({ chains: defaultChains }), + new WalletConnectConnector({ + chains: defaultChains, + options: { + infuraId: process.env.REACT_APP_INFURA_ID, + qrcode: true + } + }) +]; + function App() { return ( - + - + ); } diff --git a/packages/dashboard/src/Dashboard.tsx b/packages/dashboard/src/Dashboard.tsx index 61d39b61690..b54f2029a87 100644 --- a/packages/dashboard/src/Dashboard.tsx +++ b/packages/dashboard/src/Dashboard.tsx @@ -1,41 +1,47 @@ -import WebSocket from "isomorphic-ws"; import { - DashboardProviderMessage, + base64ToJson, connectToMessageBusWithRetries, + DashboardProviderMessage, isDashboardProviderMessage, - isInvalidateMessage, isDebugMessage, - Message, - base64ToJson + isInvalidateMessage, + Message } from "@truffle/dashboard-message-bus"; -import { useWeb3React } from "@web3-react/core"; +import WebSocket from "isomorphic-ws"; import { useEffect, useState } from "react"; +import { useAccount, useConnect, useNetwork } from "wagmi"; +import ConfirmNetworkChanged from "./components/ConfirmNetworkChange"; import { getPorts, respond } from "./utils/utils"; import Header from "./components/Header/Header"; import DashboardProvider from "./components/DashboardProvider/DashboardProvider"; import ConnectNetwork from "./components/ConnectNetwork"; -import ConfirmNetworkChanged from "./components/ConfirmNetworkChange"; function Dashboard() { const [paused, setPaused] = useState(false); - const [connectedChainId, setConnectedChainId] = useState(); + const [connectedChainId, setConnectedChainId] = useState< + number | undefined + >(); + const [chainId, setChainId] = useState(); const [socket, setSocket] = useState(); const [dashboardProviderRequests, setDashboardProviderRequests] = useState< DashboardProviderMessage[] >([]); - const { chainId } = useWeb3React(); + const [{ data }] = useNetwork(); + const [{}, disconnect] = useAccount(); + const [{ data: connectData }] = useConnect(); useEffect(() => { - if (!chainId || !socket) return; + setChainId(data.chain?.id); + if (!chainId || !socket) return; if (connectedChainId) { if (connectedChainId !== chainId) setPaused(true); if (connectedChainId === chainId) setPaused(false); } else { setConnectedChainId(chainId); } - }, [chainId, connectedChainId, socket]); + }, [data, connectData, socket, chainId, connectedChainId]); const initializeSocket = async () => { if (socket && socket.readyState === WebSocket.OPEN) return; @@ -80,9 +86,19 @@ function Dashboard() { setSocket(connectedSocket); }; + const disconnectAccount = () => { + console.log("Disconnecting:"); + // turn everything off. + disconnect(); + setConnectedChainId(undefined); + setPaused(false); + socket?.close(); + setSocket(undefined); + }; + return (
-
+
{paused && chainId && connectedChainId && ( void; } function ConnectNetwork({ confirm }: Props) { - const { chainId, activate } = useWeb3React(); - const injectedConnector = new InjectedConnector({}); + const [{ data: connectData }, connect] = useConnect(); + const [{ data: networkData }] = useNetwork(); + const chainId = networkData.chain?.id; const connectBody = "Please connect your wallet to use the Truffle Dashboard Provider."; const connectButton = ( -
); const confirmBody = chainId && ( @@ -31,9 +38,7 @@ function ConnectNetwork({ confirm }: Props) { ); - const confirmButton =