Allow connecting Truffle Dashboard via WalletConnect #4926

michaeljohnbennett · 2022-03-23T03:15:50Z

Initial POC on integrating WAGMI and WalletConnect into the dashboard codebase.

Still to do some testing on the walletconnect side against some of the wallets but normal metamask code is working as expected no we fixed a few things with the provider library selectors/hooks in the code.

These markers are there for possible change points.

Also amended the browserlist as it causes an issue with craco and the current version of the library: wevm/wagmi#220 for more info. Committing yarn.lock file also as part of this install.

Code and all elements changed to use wagmi features. Added new code into connector component to also use walletconnct. Tested connections to both metamask and walletconnect to infinity wallet and its working as expected. Still to fully test the transaction loading code from the CLI to the dashboard.

added .idea folder to .gitignore file. reverting yarn.lock as some ursa-optional compiler errors were happening locally.

Web3Provider is now fixed and working as it was with web3react. useProvider hook is not working, had to call connector.getProvider() instead.

Walletconnect RPC return variables are not transformed as they aren't the same as metmask ones.

button to allow disconnecting the wallet and resetting state in app.

michaeljohnbennett · 2022-03-24T01:16:35Z

@dkillen will be doing a final bit of log cleanup and then this will be good to go.

Generally the code is good for review. We will be cleaning up a few log elements prior to it being read to merge.

packages/dashboard/src/Dashboard.tsx

packages/dashboard/src/components/Header/Header.tsx

MicaiahReid · 2022-03-29T18:28:12Z

packages/dashboard/src/Dashboard.tsx

-import { useWeb3React } from "@web3-react/core";
-import { useEffect, useState } from "react";
-import { getPorts } from "./utils/utils";
+import {useEffect, useState} from "react";


It looks like your linter settings are off from what the standard is for the team. There should be spaces around the brackets, and I believe this is causing a few changes to appear in the diff that aren't actually relevant.

where are the settings I can use?

MicaiahReid · 2022-03-29T18:29:25Z

packages/dashboard/src/Dashboard.tsx

-  const [dashboardProviderRequests, setDashboardProviderRequests] = useState<
-    DashboardProviderMessage[]
-  >([]);
+  const [dashboardProviderRequests, setDashboardProviderRequests] = useState<DashboardProviderMessage[]>([]);


Here's another change that's just the linter behaving differently on your configuration.

MicaiahReid · 2022-03-29T18:35:17Z

packages/dashboard/src/components/Header/Header.tsx


  return (
    <header className="grid grid-cols-2 py-2 px-4 border-b-2 border-truffle-light text-md uppercase">
      <div className="flex justify-start items-center">
        <span className="inline-flex items-center gap-3">
-          <img src="/truffle-logomark.svg" width="32px" />
+          <img src={"/truffle-logomark.svg"} width="32px" alt={'Truffle Logo'}/>


Suggested change

<img src={"/truffle-logomark.svg"} width="32px" alt={'Truffle Logo'}/>

<img src="/truffle-logomark.svg" width="32px" alt="Truffle Logo"/>

Is there a reason for these to be in braces? Also making consistent by replacing ' with ".

adding the { around the url makes my linter pass as the url with a relative path pushes up a warning in intellijs linters which are based on eslint.

if we have an eslint and prettier config I can use both here and with the pre-commit hooks this would all go away.

MicaiahReid · 2022-03-29T19:02:13Z

packages/dashboard/src/utils/utils.ts

  address: string
 ) => {
-  const ensName = await reverseLookup(library, address);
+  const ensName = await reverseLookup(provider, address);


Did you get this working? It seems to only be returning undefined for me, and I have reverse lookup setup.

I don't have an ens name, we can debug this one together if that would be easier.

MicaiahReid

There were some stylistic changes (increasing the Button size which increases the header height) that I'm not too picky about, but I'd definitely want more eyes on. Since we'll have a lot of dashboard changes coming through from the task force, I want to be sure we're being stylistically consistent.

michaeljohnbennett · 2022-03-31T01:44:51Z

@MicaiahReid prettier ran, button sizing fixed.

michaeljohnbennett

fixes made as per @MicaiahReid's feedback.

michaeljohnbennett · 2022-03-24T01:19:09Z

packages/dashboard/src/utils/utils.ts

+      payload,
+      result
+    });
+    if (connectorId === "injected") {


@MicaiahReid this is needed to distinguish between walletconnect and injected as they return different RPC responses.

michaeljohnbennett · 2022-03-30T21:47:13Z

packages/dashboard/src/components/Header/Header.tsx


  return (
    <header className="grid grid-cols-2 py-2 px-4 border-b-2 border-truffle-light text-md uppercase">
      <div className="flex justify-start items-center">
        <span className="inline-flex items-center gap-3">
-          <img src="/truffle-logomark.svg" width="32px" />
+          <img src={"/truffle-logomark.svg"} width="32px" alt={'Truffle Logo'}/>


adding the { around the url makes my linter pass as the url with a relative path pushes up a warning in intellijs linters which are based on eslint.

if we have an eslint and prettier config I can use both here and with the pre-commit hooks this would all go away.

michaeljohnbennett · 2022-03-30T21:47:54Z

packages/dashboard/src/utils/utils.ts

  address: string
 ) => {
-  const ensName = await reverseLookup(library, address);
+  const ensName = await reverseLookup(provider, address);


I don't have an ens name, we can debug this one together if that would be easier.

michaeljohnbennett · 2022-03-30T21:48:17Z

packages/dashboard/src/Dashboard.tsx

-import { useWeb3React } from "@web3-react/core";
-import { useEffect, useState } from "react";
-import { getPorts } from "./utils/utils";
+import {useEffect, useState} from "react";


where are the settings I can use?

michaeljohnbennett · 2022-03-30T21:48:36Z

packages/dashboard/src/Dashboard.tsx

-  const [dashboardProviderRequests, setDashboardProviderRequests] = useState<
-    DashboardProviderMessage[]
-  >([]);
+  const [dashboardProviderRequests, setDashboardProviderRequests] = useState<DashboardProviderMessage[]>([]);


michaeljohnbennett · 2022-03-31T01:44:05Z

packages/dashboard/src/components/common/Button.tsx

@@ -8,7 +8,7 @@ interface Props {
 function Button({ onClick, text }: Props) {
  return (
    <button
-      className="rounded p-2 bg-truffle-blue text-truffle-brown uppercase hover:bg-white"
+      className="rounded p-2 mx-2 bg-truffle-blue text-truffle-brown uppercase hover:bg-white"


@MicaiahReid reverted the change in this button.

michaeljohnbennett · 2022-03-31T01:48:13Z

packages/dashboard/src/components/Header/Header.tsx


  return (
    <header className="grid grid-cols-2 py-2 px-4 border-b-2 border-truffle-light text-md uppercase">
      <div className="flex justify-start items-center">
        <span className="inline-flex items-center gap-3">
-          <img src="/truffle-logomark.svg" width="32px" />
+          <img src={"/truffle-logomark.svg"} width="32px" alt={'Truffle Logo'}/>


…nnect_wagmi

MicaiahReid

Looks good to me! If we want to get this merged sooner, maybe we could pull out the ENS name bit for another PR? I suppose there's no harm done in it not working currently, so maybe we can leave it in and add an issue to get it working ¯_(ツ)_/¯

michaeljohnbennett · 2022-04-03T23:58:29Z

lets leave it in and get people trying it, it might be a simple fix once we have a few people playing with it, we can pair on this once merged if you have an ENS we can test with.

michaeljohnbennett added 5 commits March 22, 2022 10:51

Added initial comments to code.

c2fc3e5

These markers are there for possible change points.

added wagmi library.

3b48a9b

Also amended the browserlist as it causes an issue with craco and the current version of the library: wevm/wagmi#220 for more info. Committing yarn.lock file also as part of this install.

Cleaning up package.json.

8b2b516

added .idea folder to .gitignore file. reverting yarn.lock as some ursa-optional compiler errors were happening locally.

Reworking wagmi.

a54b6bf

Web3Provider is now fixed and working as it was with web3react. useProvider hook is not working, had to call connector.getProvider() instead.

michaeljohnbennett added the 🚧 proof of concept 🚧  This is a proof of concept for a feature label Mar 23, 2022

michaeljohnbennett requested review from MicaiahReid and dkillen March 23, 2022 03:15

michaeljohnbennett self-assigned this Mar 23, 2022

michaeljohnbennett mentioned this pull request Mar 23, 2022

Dashboard's react-scripts dependency should be updated to 5.0.0 #4874

Closed

Reworking wagmi.

390742f

Walletconnect RPC return variables are not transformed as they aren't the same as metmask ones.

gnidan changed the title ~~Feature/4838 walletconnect wagmi~~ Allow connecting Truffle Dashboard via WalletConnect Mar 23, 2022

gnidan added the new-feature: @truffle/dashboard label Mar 23, 2022

added in disconnect feature.

8de3637

button to allow disconnecting the wallet and resetting state in app.

michaeljohnbennett marked this pull request as ready for review March 24, 2022 01:15

michaeljohnbennett assigned dkillen Mar 24, 2022

michaeljohnbennett commented Mar 24, 2022

View reviewed changes

packages/dashboard/src/Dashboard.tsx Outdated Show resolved Hide resolved

michaeljohnbennett commented Mar 24, 2022

View reviewed changes

packages/dashboard/src/components/Header/Header.tsx Outdated Show resolved Hide resolved

Cleaned up console logs and temporary debugging.

46a1ce0

michaeljohnbennett mentioned this pull request Mar 24, 2022

Add pending tx view and account dialog to Truffle Dashboard #4935

Closed

gnidan added the dashboard label Mar 25, 2022

MicaiahReid suggested changes Mar 29, 2022

View reviewed changes

MicaiahReid reviewed Mar 29, 2022

View reviewed changes

michaeljohnbennett added 2 commits March 31, 2022 12:07

Prettification setup done correctly for the dashboard code.

3e1666c

reverted button change.

15c4c9f

michaeljohnbennett commented Mar 31, 2022

View reviewed changes

michaeljohnbennett added 2 commits April 1, 2022 08:34

Merge remote-tracking branch 'origin/dash' into feature/4838_walletco…

25dc062

…nnect_wagmi

Merge remote-tracking branch 'origin/dash' into feature/4838_walletco…

cdc891b

…nnect_wagmi

MicaiahReid approved these changes Apr 1, 2022

View reviewed changes

michaeljohnbennett merged commit 7b48ae8 into dash Apr 3, 2022

michaeljohnbennett deleted the feature/4838_walletconnect_wagmi branch April 3, 2022 23:58

benjamincburns mentioned this pull request Jun 16, 2022

Dashboard work from task-force week (see description for full list of PRs) #5198

Merged

This was referenced Oct 17, 2022

[Snyk] Security upgrade mocha from 8.1.2 to 10.1.0 vutting4221/truffle#70

Open

[Snyk] Security upgrade mocha from 8.0.1 to 10.1.0 vutting4221/truffle#72

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Allow connecting Truffle Dashboard via WalletConnect #4926

Allow connecting Truffle Dashboard via WalletConnect #4926

michaeljohnbennett commented Mar 23, 2022

michaeljohnbennett commented Mar 24, 2022

MicaiahReid Mar 29, 2022

michaeljohnbennett Mar 30, 2022

MicaiahReid Mar 29, 2022

michaeljohnbennett Mar 30, 2022

MicaiahReid Mar 29, 2022

michaeljohnbennett Mar 30, 2022

michaeljohnbennett Mar 31, 2022

MicaiahReid Mar 29, 2022

michaeljohnbennett Mar 30, 2022

MicaiahReid left a comment

michaeljohnbennett commented Mar 31, 2022

michaeljohnbennett left a comment

michaeljohnbennett Mar 24, 2022

michaeljohnbennett Mar 30, 2022

michaeljohnbennett Mar 30, 2022

michaeljohnbennett Mar 30, 2022

michaeljohnbennett Mar 30, 2022

michaeljohnbennett Mar 31, 2022

michaeljohnbennett Mar 31, 2022

MicaiahReid left a comment

michaeljohnbennett commented Apr 3, 2022

	<img src={"/truffle-logomark.svg"} width="32px" alt={'Truffle Logo'}/>
	<img src="/truffle-logomark.svg" width="32px" alt="Truffle Logo"/>

Allow connecting Truffle Dashboard via WalletConnect #4926

Allow connecting Truffle Dashboard via WalletConnect #4926

Conversation

michaeljohnbennett commented Mar 23, 2022

michaeljohnbennett commented Mar 24, 2022

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

MicaiahReid left a comment

Choose a reason for hiding this comment

michaeljohnbennett commented Mar 31, 2022

michaeljohnbennett left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

MicaiahReid left a comment

Choose a reason for hiding this comment

michaeljohnbennett commented Apr 3, 2022