feature/wallet-modal into main

feature: wallet modal

packages/providers/src/context/commune.tsx

@@ -11,7 +11,7 @@ import {
 } from "@polkadot/extension-inject/types";
 import { toast } from "react-toastify";
 
-import { WalletModal } from "@commune-ts/ui/wallet-modal";
+import { Wallet } from "@commune-ts/ui/wallet";
 
 import type {
   AddCustomProposal,
@@ -40,7 +40,7 @@ import {
   useNotDelegatingVoting,
   useProposals,
 } from "../hooks";
-import { calculateAmount } from "../utils";
+import { calculateAmount, formatToken } from "../utils";
 
 interface CommuneApiState {
   web3Accounts: (() => Promise<InjectedAccountWithMeta[]>) | null;
@@ -111,7 +111,7 @@ export function CommuneProvider({
   });
   const [isInitialized, setIsInitialized] = useState<boolean>(false);
   const [isConnected, setIsConnected] = useState(false);
-  const [openModal, setOpenModal] = useState(false);
+  const [openWalletModal, setOpenWalletModal] = useState(false);
   const [accounts, setAccounts] = useState<InjectedAccountWithMeta[]>([]);
   const [selectedAccount, setSelectedAccount] =
     useState<InjectedAccountWithMeta | null>(null);
@@ -177,22 +177,25 @@ export function CommuneProvider({
       const allAccounts = await getWallets();
       if (allAccounts) {
         setAccounts(allAccounts);
-        setOpenModal(true);
       }
+      setOpenWalletModal(true)
     } catch (error) {
       return undefined;
     }
   }
 
+  function handleWalletModal(state?: boolean): void {
+    setOpenWalletModal(state || !openWalletModal)
+  }
+
   function handleConnectWrapper(): void {
-    void handleConnect();
+    handleConnect();
   }
 
   function handleWalletSelections(wallet: InjectedAccountWithMeta): void {
     localStorage.setItem("favoriteWalletAddress", wallet.address);
     setSelectedAccount(wallet);
     setIsConnected(true);
-    setOpenModal(false);
   }
 
   // == Transaction Handler ==
@@ -500,10 +503,19 @@ export function CommuneProvider({
         isDaosLoading,
       }}
     >
-      <WalletModal
+      <Wallet
+        addStake={addStake}
+        balance={formatToken(balance || 0n)}
+        handleConnect={handleConnect}
+        handleWalletModal={handleWalletModal}
         handleWalletSelections={handleWalletSelections}
-        open={openModal}
-        setOpen={setOpenModal}
+        isInitialized={isInitialized}
+        openWalletModal={openWalletModal}
+        removeStake={removeStake}
+        selectedAccount={selectedAccount}
+        stakeOut={stakeOut}
+        transfer={transfer}
+        transferStake={transferStake}
         wallets={accounts}
       />
       {children}

packages/subspace/utils/index.ts

@@ -90,3 +90,11 @@ export function handleDaos(
 ): [DaoApplications[], Error[]] {
   return handleEntries(rawDaos, parseDaos);
 }
+
+export const copyToClipboard = async (text: string) => {
+  try {
+    await navigator.clipboard.writeText(text);
+  } catch (err) {
+    console.error("Failed to copy: ", err);
+  }
+};

packages/ui/package.json

@@ -7,9 +7,12 @@
     ".": "./src/index.ts",
     "./styles.css": "./dist/index.css",
     "./header": "./src/components/header.tsx",
+    "./copy-button": "./src/components/copy-button.tsx",
     "./footer": "./src/components/footer.tsx",
     "./loading": "./src/components/loading.tsx",
     "./wallet-button": "./src/components/wallet-button.tsx",
+    "./select-wallet-modal": "./src/components/select-wallet-modal.tsx",
+    "./wallet": "./src/components/wallet.tsx",
     "./wallet-modal": "./src/components/wallet-modal.tsx",
     "./discord-widget": "./src/components/discord-widget.tsx",
     "./data": "./src/data.ts",

packages/ui/src/components/copy-button.tsx

@@ -0,0 +1,47 @@
+"use client";
+
+import { useState } from "react";
+import Image from "next/image";
+
+import { cn } from "..";
+import { copyToClipboard } from "../../../subspace/utils";
+
+interface CodeComponentProps {
+  code: string;
+}
+
+export function CopyButton(props: CodeComponentProps): JSX.Element {
+  const { code } = props;
+  const [copied, setCopied] = useState(false);
+
+  async function copyTextToClipboard(text: string): Promise<void> {
+    setCopied(true);
+    setTimeout(() => {
+      setCopied(false);
+    }, 1000);
+    await copyToClipboard(text);
+
+    return;
+  }
+
+  return (
+    <button
+      className={cn(
+        `flex w-full max-w-28 items-center justify-center border border-gray-500 py-2 text-gray-400 hover:border-green-600 hover:text-green-600 ${copied && "cursor-not-allowed border-green-500 text-green-500 hover:!border-green-500 hover:!text-green-500"}`,
+      )}
+      onClick={() => void copyTextToClipboard(code)}
+      type="button"
+    >
+      <span className={cn(`flex items-center ${copied ? "text-green-" : ""}`)}>
+        {!copied ? "Copy" : "Copied"}{" "}
+        <Image
+          alt=""
+          className="ml-1"
+          height={20}
+          src="docs-icon.svg"
+          width={20}
+        />
+      </span>
+    </button>
+  );
+}