Merge pull request #3 from hedera-dev/feature/integrate-walletconnect

Replaced hashconnect and blade-web3 with hedera-wallet-connect

README.md

@@ -20,7 +20,6 @@ npx create-react-app <my-app-name> --template git+ssh://git@github.com/hedera-de
 1. Execute ```npm i```
 2. Execute ```npm run start``` to start the project
 
-> Blade requires the use of HTTPS in order to pair wallets. An `.env` file exists in your root directory with `HTTPS=true` in order to connect to blade.
 ## Contributing
 
 - Create a fork of this repo on github

template.json

@@ -4,15 +4,14 @@
       "@types/node": "16.18.31",
       "@types/react": "18.2.6",
       "@types/react-dom": "18.2.4",
-      "@bladelabs/blade-web3.js": "1.0.3",
       "@emotion/react": "11.11.0",
       "@emotion/styled": "11.11.0",
-      "@hashgraph/sdk": "2.25.0",
+      "@hashgraph/hedera-wallet-connect": "^1.0.6",
+      "@hashgraph/sdk": "2.44.0",
       "@mui/icons-material": "5.11.16",
       "@mui/material": "5.13.0",
       "dotenv": "16.1.3",
       "ethers": "5.7.2",
-      "hashconnect": "0.2.4",
       "react-router-dom": "6.11.1",
       "typescript": "4.9.5"
     }

template/src/components/Navbar.tsx

@@ -39,7 +39,7 @@ export default function NavBar() {
           {accountId ? `Connected: ${accountId}` : 'Connect Wallet'}
         </Button>
       </Toolbar>
-      <WalletSelectionDialog open={open} onClose={() => setOpen(false)} />
+      <WalletSelectionDialog open={open} setOpen={setOpen} onClose={() => setOpen(false)} />
     </AppBar>
   )
 }

template/src/components/WalletSelectionDialog.tsx

@@ -1,45 +1,38 @@
 import { Button, Dialog, Stack } from "@mui/material";
-import { connectToBladeWallet } from "../services/wallets/blade/bladeClient";
-import { hashConnect } from "../services/wallets/hashconnect/hashconnectClient";
 import { connectToMetamask } from "../services/wallets/metamask/metamaskClient";
-import HashPackLogo from "../assets/hashpack-logo.svg";
+import { openWalletConnectModal } from "../services/wallets/walletconnect/walletConnectClient";
 import MetamaskLogo from "../assets/metamask-logo.svg";
+import WalletConnectLogo from "../assets/walletconnect-logo.svg";
 
 
 interface WalletSelectionDialogProps {
   open: boolean;
+  setOpen: (value: boolean) => void;
   onClose: (value: string) => void;
 }
 
 export const WalletSelectionDialog = (props: WalletSelectionDialogProps) => {
-  const { onClose, open } = props;
+  const { onClose, open, setOpen } = props;
 
   return (
     <Dialog onClose={onClose} open={open}>
       <Stack p={2} gap={1}>
         <Button
           variant="contained"
           onClick={() => {
-            hashConnect.connectToLocalWallet();
+            openWalletConnectModal()
+            setOpen(false);
           }}
         >
           <img
-            src={HashPackLogo}
-            alt='hashpack logo'
+            src={WalletConnectLogo}
+            alt='walletconnect logo'
             className='walletLogoImage'
             style={{
               marginLeft: '-6px'
             }}
           />
-          HashPack
-        </Button>
-        <Button
-          variant="contained"
-          onClick={() => {
-            connectToBladeWallet();
-          }}
-        >
-          Blade
+          WalletConnect
         </Button>
         <Button
           variant="contained"

template/src/contexts/HashconnectContext.tsx → template/src/contexts/WalletConnectContext.tsx

@@ -7,14 +7,14 @@ const defaultValue = {
   setIsConnected: (newValue: boolean) => { },
 }
 
-export const HashconnectContext = createContext(defaultValue);
+export const WalletConnectContext = createContext(defaultValue);
 
-export const HashconnectContextProvider = (props: { children: ReactNode | undefined }) => {
+export const WalletConnectContextProvider = (props: { children: ReactNode | undefined }) => {
   const [accountId, setAccountId] = useState(defaultValue.accountId);
   const [isConnected, setIsConnected] = useState(defaultValue.isConnected);
 
   return (
-    <HashconnectContext.Provider
+    <WalletConnectContext.Provider
       value={{
         accountId,
         setAccountId,
@@ -23,6 +23,6 @@ export const HashconnectContextProvider = (props: { children: ReactNode | undefi
       }}
     >
       {props.children}
-    </HashconnectContext.Provider>
+    </WalletConnectContext.Provider>
   )
 }

template/src/services/wallets/AllWalletsProvider.tsx

@@ -1,24 +1,19 @@
 import { ReactNode } from "react"
-import { BladeContextProvider } from "../../contexts/BladeContext"
-import { HashconnectContextProvider } from "../../contexts/HashconnectContext"
 import { MetamaskContextProvider } from "../../contexts/MetamaskContext"
-import { BladeClient } from "./blade/bladeClient"
-import { HashConnectClient } from "./hashconnect/hashconnectClient"
+import { WalletConnectContextProvider } from "../../contexts/WalletConnectContext"
 import { MetaMaskClient } from "./metamask/metamaskClient"
+import { WalletConnectClient } from "./walletconnect/walletConnectClient"
 
 export const AllWalletsProvider = (props: {
   children: ReactNode | undefined
 }) => {
   return (
-    <BladeContextProvider>
-      <MetamaskContextProvider>
-        <HashconnectContextProvider>
-          <HashConnectClient />
-          <BladeClient />
-          <MetaMaskClient />
-          {props.children}
-        </HashconnectContextProvider>
-      </MetamaskContextProvider>
-    </BladeContextProvider>
+    <MetamaskContextProvider>
+      <WalletConnectContextProvider>
+        <MetaMaskClient />
+        <WalletConnectClient />
+        {props.children}
+      </WalletConnectContextProvider>
+    </MetamaskContextProvider>
   )
 }