diff --git a/packages/dashboard/src/components/DashboardProvider/DashboardProvider.tsx b/packages/dashboard/src/components/DashboardProvider/DashboardProvider.tsx
index 07bdb5239a7..26f479557cf 100644
--- a/packages/dashboard/src/components/DashboardProvider/DashboardProvider.tsx
+++ b/packages/dashboard/src/components/DashboardProvider/DashboardProvider.tsx
@@ -1,7 +1,5 @@
import WebSocket from "isomorphic-ws";
import { useEffect } from "react";
-import { useWeb3React } from "@web3-react/core";
-import { providers } from "ethers";
import {
handleDashboardProviderRequest,
isInteractiveRequest,
@@ -11,6 +9,7 @@ import {
import Card from "../common/Card";
import IncomingRequest from "./IncomingRequest";
import type { DashboardProviderMessage } from "@truffle/dashboard-message-bus";
+import { useConnect } from "wagmi";
interface Props {
paused: boolean;
@@ -24,7 +23,9 @@ interface Props {
}
function DashboardProvider({ paused, socket, requests, setRequests }: Props) {
- const { account, library } = useWeb3React
();
+ const [{ data: connectData }] = useConnect();
+ const provider = connectData.connector?.getProvider();
+ const connector = connectData.connector;
useEffect(() => {
const removeFromRequests = (id: number) => {
@@ -33,7 +34,7 @@ function DashboardProvider({ paused, socket, requests, setRequests }: Props) {
);
};
- if (!account || !library) return;
+ if (!connectData.connected || !provider) return;
if (paused) return;
// Automatically respond with an error for unsupported requests
@@ -49,20 +50,22 @@ function DashboardProvider({ paused, socket, requests, setRequests }: Props) {
!isInteractiveRequest(request) && !isUnsupportedRequest(request)
)
.forEach(request => {
- handleDashboardProviderRequest(request, library.provider, socket);
+ handleDashboardProviderRequest(request, provider, connector, socket);
removeFromRequests(request.id);
});
- }, [paused, requests, setRequests, socket, account, library]);
+ }, [paused, requests, setRequests, socket, connectData, provider, connector]);
const incomingRequests =
- account && library && socket
+ connectData.connected && provider && socket
? requests
.filter(isInteractiveRequest)
.map(request => (
))
diff --git a/packages/dashboard/src/components/DashboardProvider/IncomingRequest.tsx b/packages/dashboard/src/components/DashboardProvider/IncomingRequest.tsx
index fddc89c6114..5803b7b6308 100644
--- a/packages/dashboard/src/components/DashboardProvider/IncomingRequest.tsx
+++ b/packages/dashboard/src/components/DashboardProvider/IncomingRequest.tsx
@@ -13,10 +13,17 @@ interface Props {
| ((requests: DashboardProviderMessage[]) => DashboardProviderMessage[])
) => void;
provider: any;
+ connector: any;
socket: WebSocket;
}
-function IncomingRequest({ provider, socket, request, setRequests }: Props) {
+function IncomingRequest({
+ provider,
+ connector,
+ socket,
+ request,
+ setRequests
+}: Props) {
const removeFromRequests = () => {
setRequests(previousRequests =>
previousRequests.filter(other => other.id !== request.id)
@@ -24,7 +31,7 @@ function IncomingRequest({ provider, socket, request, setRequests }: Props) {
};
const process = async () => {
- await handleDashboardProviderRequest(request, provider, socket);
+ await handleDashboardProviderRequest(request, provider, connector, socket);
removeFromRequests();
};
diff --git a/packages/dashboard/src/components/Header/Header.tsx b/packages/dashboard/src/components/Header/Header.tsx
index b2d44bd4dc2..b7774dda38d 100644
--- a/packages/dashboard/src/components/Header/Header.tsx
+++ b/packages/dashboard/src/components/Header/Header.tsx
@@ -1,37 +1,55 @@
-import { useWeb3React } from "@web3-react/core";
import { providers } from "ethers";
import { useEffect, useState } from "react";
import { getDisplayName } from "../../utils/utils";
import NetworkIndicator from "../common/NetworkIndicator";
+import { useAccount, useConnect, useNetwork } from "wagmi";
+import Button from "../common/Button";
-interface Props {}
+interface Props {
+ disconnect: () => void;
+}
-function Header({}: Props) {
+function Header({ disconnect }: Props) {
const [displayName, setDisplayName] = useState();
- const { account, library, chainId } = useWeb3React();
+
+ const [{ data: accountData }] = useAccount();
+ const [{ data: networkData }] = useNetwork();
+ const [{ data: connectData }] = useConnect();
useEffect(() => {
const updateAccountDisplay = async (
- library: providers.Web3Provider,
- account: string
+ provider: providers.Web3Provider,
+ address: string
) => {
- setDisplayName(await getDisplayName(library, account));
+ setDisplayName(await getDisplayName(provider, address));
};
- if (!library || !account) return;
- updateAccountDisplay(library, account);
- }, [library, account]);
+ if (!connectData.connected) {
+ setDisplayName(undefined);
+ }
+
+ if (!connectData || !accountData) return;
+ updateAccountDisplay(
+ connectData.connector?.getProvider(),
+ accountData.address
+ );
+ }, [connectData, accountData]);
return (
diff --git a/packages/dashboard/src/components/common/Button.tsx b/packages/dashboard/src/components/common/Button.tsx
index f0d2b425f88..6bf943453d2 100644
--- a/packages/dashboard/src/components/common/Button.tsx
+++ b/packages/dashboard/src/components/common/Button.tsx
@@ -8,7 +8,7 @@ interface Props {
function Button({ onClick, text }: Props) {
return (