Merge pull request #20 from Quantum3-Labs/wallet-feat

Simple wallet connect functionality

.github/workflows/lint.yml

@@ -0,0 +1,47 @@
+name: Next.js CI
+
+on:
+  push:
+    paths:
+      - 'packages/nextjs/**'
+  pull_request:
+    branches:
+      - main
+    paths:
+      - 'packages/nextjs/**'
+
+jobs:
+  ci:
+    runs-on: ${{ matrix.os }}
+
+    strategy:
+      matrix:
+        os: [ubuntu-latest]
+        node: [lts/*]
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@master
+
+      - name: Setup node env
+        uses: actions/setup-node@v3
+        with:
+          node-version: ${{ matrix.node }}
+          cache: 'yarn'
+          #cache-dependency-path: packages/nextjs/yarn.lock
+
+      - name: Install dependencies (Next.js)
+        run: yarn install --immutable
+        working-directory: ./packages/nextjs
+
+      - name: Run Next.js lint
+        run: yarn next:lint --max-warnings=0
+        working-directory: ./packages/nextjs
+
+      - name: Check typings on Next.js
+        run: yarn next:check-types
+        working-directory: ./packages/nextjs
+
+      - name: Build Next.js project
+        run: yarn build
+        working-directory: ./packages/nextjs

.gitignore

@@ -1,6 +1,15 @@
 .vscode/**
 node_modules
 local-devnet
-.yarn
 package-lock.json
-.yarnrc.yml
+.idea
+
+# yarn / eslint
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/sdks
+!.yarn/versions
+.eslintcache
+.DS_Store

.yarn/patches/usehooks-ts-npm-2.7.2-fceffe0e43.patch

@@ -0,0 +1,13 @@
+diff --git a/dist/esm/useLocalStorage/useLocalStorage.js b/dist/esm/useLocalStorage/useLocalStorage.js
+index b0d584d4df29953551dfcf8febac002f89fa7acd..920ae5c52d28af73e3a892bdb935a7805a0f8224 100644
+--- a/dist/esm/useLocalStorage/useLocalStorage.js
++++ b/dist/esm/useLocalStorage/useLocalStorage.js
+@@ -14,7 +14,7 @@ function useLocalStorage(key, initialValue) {
+             return initialValue;
+         }
+     }, [initialValue, key]);
+-    const [storedValue, setStoredValue] = useState(readValue);
++    const [storedValue, setStoredValue] = useState(initialValue);
+     const setValue = useEventCallback(value => {
+         if (typeof window === 'undefined') {
+             console.warn(`Tried setting localStorage key “${key}” even though environment is not a client`);

.yarnrc.yml

@@ -0,0 +1,11 @@
+enableColors: true
+
+nmHoistingLimits: workspaces
+
+nodeLinker: node-modules
+
+plugins:
+  - path: .yarn/plugins/@yarnpkg/plugin-typescript.cjs
+    spec: "@yarnpkg/plugin-typescript"
+
+yarnPath: .yarn/releases/yarn-3.2.3.cjs

package.json

@@ -13,10 +13,15 @@
   "scripts": {
     "chain": "yarn workspace @ss-2/snfoundry chain",
     "deploy": "yarn workspace @ss-2/snfoundry deploy",
-    "start": "yarn workspace @ss-2/nextjs dev"
+    "start": "yarn workspace @ss-2/nextjs dev",
+    "next:lint": "yarn workspace @ss-2/nextjs lint",
+    "next:check-types": "yarn workspace @ss-2/nextjs check-types"
   },
   "packageManager": "[email protected]",
   "devDependencies": {
     "daisyui": "^4.7.3"
+  },
+  "dependencies": {
+    "postcss": "^8.4.38"
   }
 }

packages/nextjs/app/page.tsx

@@ -12,13 +12,11 @@ import { useAccount } from "@starknet-react/core";
 // import { Address } from "~~/components/scaffold-eth";
 
 const Home: NextPage = () => {
-  const { address: connectedAddress } = useAccount();
   const { data } = useScaffoldContractRead({
     contractName: "HelloStarknet",
     functionName: "get_balance6",
   });
 
-  console.log("connected address", connectedAddress);
   console.log(data);
 
   const { writeAsync } = useScaffoldContractWrite({
@@ -82,19 +80,6 @@ const Home: NextPage = () => {
             </div>
           </div>
         </div>
-        {/* <ConnectModal
-          isOpen={true}
-          onClose={() => {
-            writeAsync();
-          }}
-        ></ConnectModal> */}
-        <Button
-          onClick={() => {
-            writeAsync();
-          }}
-        >
-          HI
-        </Button>
       </div>
     </>
   );

packages/nextjs/components/Header.tsx

@@ -10,6 +10,7 @@ import { Bars3Icon, BugAntIcon } from "@heroicons/react/24/outline";
 //   RainbowKitCustomConnectButton,
 // } from "~~/components/scaffold-eth";
 import { useOutsideClick } from "~~/hooks/scaffold-stark";
+import WalletConnect from "~~/components/wallet/WalletConnect";
 
 type HeaderMenuLink = {
   label: string;
@@ -116,7 +117,7 @@ export const Header = () => {
         </ul>
       </div>
       <div className="navbar-end flex-grow mr-4">
-        <div>HERE BUTTON</div>
+        <WalletConnect/>
       </div>
     </div>
   );

packages/nextjs/components/wallet/WalletConnect.tsx

@@ -0,0 +1,85 @@
+import {useAccount, useDisconnect} from "@starknet-react/core";
+import {useEffect, useRef, useState} from "react";
+import ConnectModal from "~~/components/wallet/ConnectModal";
+
+const WalletConnect = () => {
+  const {address: connectedAddress} = useAccount();
+  const {disconnect} = useDisconnect();
+  const [isMenuVisible, setIsMenuVisible] = useState(false);
+  const [modalOpen, setModalOpen] = useState(false);
+
+  const menuRef = useRef<HTMLDivElement | null>(null);
+
+  const toggleMenu = () => {
+    setIsMenuVisible(!isMenuVisible);
+  };
+
+  const handleCopyAddress = async () => {
+    try {
+      await navigator.clipboard.writeText(connectedAddress!);
+      setIsMenuVisible(false);
+    } catch (err) {
+      console.error('Failed to copy: ', err);
+    }
+  };
+
+  const handleClickOutside = (event: MouseEvent | Event) => {
+    if (menuRef.current && !menuRef.current.contains(event.target as Node)) {
+      setIsMenuVisible(false);
+    }
+  };
+
+  const handleDisconnect = () => {
+    disconnect();
+    setIsMenuVisible(false);
+  }
+
+  const handleWalletConnect = () => {
+    if (connectedAddress) {
+      toggleMenu();
+    } else {
+      setModalOpen(true);
+    }
+  }
+
+  const handleModalClose = () => {
+    setModalOpen(false);
+  }
+
+  useEffect(() => {
+    document.addEventListener("click", handleClickOutside, true);
+    return () => {
+      document.removeEventListener("click", handleClickOutside, true);
+    };
+  }, []);
+
+  return (
+    <div ref={menuRef} style={{position: "relative"}}>
+      <ConnectModal isOpen={modalOpen} onClose={handleModalClose}/>
+      <button
+        onClick={handleWalletConnect}
+        className="bg-blue-100 font-semibold py-2 px-4 rounded-full w-40"
+      >
+        {connectedAddress ? `${connectedAddress.slice(0, 4)}...${connectedAddress.slice(-4)}` : "Connect Wallet"}
+      </button>
+      {isMenuVisible && (
+        <div style={{
+          position: "absolute",
+          top: "100%",
+          left: 0,
+          backgroundColor: "#fff",
+          boxShadow: "0px 0px 5px rgba(0,0,0,0.2)",
+          padding: "10px",
+          borderRadius: "5px"
+        }}>
+          <ul style={{listStyle: "none", margin: 0, padding: 0}}>
+            <li style={{marginBottom: "10px", cursor: "pointer"}} onClick={handleCopyAddress}>Copy Address</li>
+            <li style={{cursor: "pointer"}} onClick={handleDisconnect}>Disconnect</li>
+          </ul>
+        </div>
+      )}
+    </div>
+  )
+}
+
+export default WalletConnect;