add support to switch kibisis accounts

temptemp3 · Dec 28, 2023 · f0a1a70 · f0a1a70
1 parent d79d5fa
commit f0a1a70
Show file tree

Hide file tree

Showing 10 changed files with 209 additions and 89 deletions.
diff --git a/app/app-sandbox/package.json b/app/app-sandbox/package.json
@@ -23,7 +23,7 @@
     "add": "^2.0.6",
     "algorand-walletconnect-qrcode-modal": "^1.8.0",
     "algosdk": "^2.7.0",
-    "arc200js": "^2.3.2",
+    "arc200js": "^2.3.3",
     "arccjs": "^2.3.5",
     "axios": "^1.4.0",
     "bignumber.js": "^9.1.2",
@@ -42,7 +42,7 @@
     "react-textra": "^0.2.0",
     "react-toastify": "^9.1.3",
     "stream-browserify": "^3.0.0",
-    "swap200js": "^0.0.12",
+    "swap200js": "^0.0.14",
     "tweetnacl": "^1.0.3",
     "typescript": "^5.0.4",
     "use-debounce": "^9.0.4",

diff --git a/app/app-sandbox/public/avatar.png b/app/app-sandbox/public/avatar.png
diff --git a/app/app-sandbox/src/App.js b/app/app-sandbox/src/App.js
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useEffect } from "react";
 
 import "./App.css";
 
@@ -27,7 +27,6 @@ import TokenAddress from "./pages/TokenAddress";
 import AppBar from "./components/AppBar.tsx";
 import { MyCustomProvider } from "./wallet/CustomProvider";
 import { getCurrentNode, getGenesisHash } from "./utils/reach";
-//  import ARC200AppBar from "./components/ARC200AppBar/index.js";
 
 function App() {
   const [node] = getCurrentNode();
@@ -36,7 +35,10 @@ function App() {
     case "voi":
     case "voi-testnet":
       networkProviders = [
-        { id: PROVIDER_ID.DEFLY, clientStatic: DeflyWalletConnect },
+        {
+          id: "defly",
+          clientStatic: DeflyWalletConnect,
+        },
         /*
         {
           id: PROVIDER_ID.WALLETCONNECT,
@@ -56,7 +58,7 @@ function App() {
         },
         */
         {
-          id: "custom",
+          id: PROVIDER_ID.CUSTOM,
           clientOptions: {
             name: "kibisis",
             icon: "https://avatars.githubusercontent.com/u/99801015?s=200&v=4",
@@ -93,7 +95,7 @@ function App() {
         },
         //{ id: PROVIDER_ID.EXODUS },
         {
-          id: "custom",
+          id: PROVIDER_ID.CUSTOM,
           clientOptions: {
             name: "kibisis",
             icon: "https://avatars.githubusercontent.com/u/99801015?s=200&v=4",
@@ -118,7 +120,6 @@ function App() {
   });
   return (
     <WalletProvider value={providers}>
-      {/*<ARC200AppBar />*/}
       <div className="App">
         <Routes>
           <Route path="/" element={<Home />} />

diff --git a/app/app-sandbox/src/components/AppBar.tsx b/app/app-sandbox/src/components/AppBar.tsx
@@ -6,6 +6,7 @@ import Toolbar from "@mui/material/Toolbar";
 import IconButton from "@mui/material/IconButton";
 import InputBase from "@mui/material/InputBase";
 import MenuItem from "@mui/material/MenuItem";
+import Divider from "@mui/material/Divider";
 import Menu from "@mui/material/Menu";
 import MenuIcon from "@mui/icons-material/Menu";
 import { useWallet } from "@txnlab/use-wallet";
@@ -64,7 +65,12 @@ const stdlib = makeStdLib();
 
 const MyAppBar = () => {
   const navigate = useNavigate();
-  const { providers, activeAccount } = useWallet();
+  const {
+    providers,
+    activeAccount,
+    connectedActiveAccounts,
+    connectedAccounts,
+  } = useWallet();
   const [algorand, setAlgorand] = React.useState<any>(null);
   const { CopyToClipboard } = Copy;
   const notify = (msg: string) => toast(msg);
@@ -89,7 +95,7 @@ const MyAppBar = () => {
       setDisplayName(
         ((address) =>
           NFDService.getNFDByAddress(address)?.[address]?.name ||
-          address.slice(0, 8) + "...")(activeAccount.address)
+          address.slice(0, 4) + "...")(activeAccount.address)
       );
     })();
   }, [activeAccount]);
@@ -121,6 +127,40 @@ const MyAppBar = () => {
       open={isMenuOpen}
       onClose={handleMenuClose}
     >
+      {activeAccount && (
+        <MenuItem>
+          {activeAccount.address.slice(0, 4)}...
+          {activeAccount.address.slice(-4)}
+          &nbsp;
+          <ContentCopyIcon
+            onClick={() => {
+              notify(
+                `Copied address ${activeAccount.address.slice(
+                  0,
+                  4
+                )}...${activeAccount.address.slice(-4)} to clipboard!`
+              );
+            }}
+          />
+        </MenuItem>
+      )}
+      {connectedActiveAccounts.length > 1 && <Divider />}
+      {connectedActiveAccounts
+        .filter((account) => account.address !== activeAccount?.address)
+        .map((account) => (
+          <MenuItem
+            onClick={() => {
+              providers
+                .find((p) => p.isActive)
+                .setActiveAccount(account.address);
+              window.location.reload();  
+            }}
+          >
+            {account.address.slice(0, 4)}...
+            {account.address.slice(-4)}
+          </MenuItem>
+        ))}
+      <Divider />
       <MenuItem
         onClick={() => {
           activeAccount &&
@@ -132,7 +172,8 @@ const MyAppBar = () => {
                     p.metadata.id === activeAccount?.providerId) ||
                   p.metadata.id === "custom"
               )
-              .disconnect().then(() => {
+              .disconnect()
+              .then(() => {
                 handleMenuClose();
                 window.location.reload();
               });
@@ -202,7 +243,7 @@ const MyAppBar = () => {
               >
                 <img
                   style={{ height: "30px", filter: "grayscale(1)" }}
-                  src={provider.metadata.icon}
+                  src={provider.metadata.id === "defly" ? "/avatar.png" : provider.metadata.icon}
                 />
               </Button>
             </Box>
@@ -220,19 +261,42 @@ const MyAppBar = () => {
               }}
             >
               {displayName && <strong>{displayName}</strong>}
-              <CopyToClipboard
-                text={activeAccount.address}
-                onCopy={() => {
-                  notify(
-                    `Copied address ${activeAccount.address.slice(
-                      0,
-                      4
-                    )}...${activeAccount.address.slice(-4)} to clipboard!`
-                  );
-                }}
-              >
-                <ContentCopyIcon />
-              </CopyToClipboard>
+              {providers &&
+                activeAccount &&
+                providers
+                  .filter((p) => p.metadata.id !== activeAccount.providerId)
+                  .map((provider) => (
+                    <IconButton
+                      size="large"
+                      edge="end"
+                      aria-label="account of current user"
+                      aria-controls={menuId}
+                      aria-haspopup="true"
+                      onClick={() => {
+                        provider.setActiveProvider();
+                        window.location.reload();
+                      }}
+                      color="inherit"
+                    >
+                      {provider.metadata.id === "defly" ? (
+                        <img
+                          style={{
+                            height: "30px",
+                            filter: "grayscale(1)",
+                          }}
+                          src={"/avatar.png"}
+                        />
+                      ) : (
+                        <img
+                          style={{
+                            height: "30px",
+                            filter: "grayscale(1)",
+                          }}
+                          src={provider.metadata.icon}
+                        />
+                      )}
+                    </IconButton>
+                  ))}
               {providers &&
                 activeAccount &&
                 providers.map(
@@ -261,7 +325,11 @@ const MyAppBar = () => {
                                 ? ""
                                 : "grayscale(1)",
                           }}
-                          src={provider.metadata.icon}
+                          src={
+                            provider.metadata.id === "defly"
+                              ? "/avatar.png"
+                              : provider.metadata.icon
+                          }
                         />
                       </IconButton>
                     )