feat: add wallet select mode (#2613)

* feat: add wallet select mode * fix: query params
rooch-network · Sep 11, 2024 · 99c3fb4 · 99c3fb4
1 parent 9046211
commit 99c3fb4
Show file tree

Hide file tree

Showing 7 changed files with 144 additions and 32 deletions.
diff --git a/infra/rooch-portal-v2/package.json b/infra/rooch-portal-v2/package.json
@@ -41,8 +41,8 @@
     "@mui/x-data-grid": "^7.7.0",
     "@mui/x-date-pickers": "^7.7.0",
     "@mui/x-tree-view": "^7.7.0",
-    "@roochnetwork/rooch-sdk": "^0.2.3",
-    "@roochnetwork/rooch-sdk-kit": "^0.2.3",
+    "@roochnetwork/rooch-sdk": "^0.2.4",
+    "@roochnetwork/rooch-sdk-kit": "^0.2.4",
     "@tanstack/react-query": "^5.51.11",
     "@types/react-syntax-highlighter": "^15.5.13",
     "autoprefixer": "^10.4.19",

diff --git a/infra/rooch-portal-v2/src/layouts/components/account-button.tsx b/infra/rooch-portal-v2/src/layouts/components/account-button.tsx
@@ -1,27 +1,33 @@
 import type { IconButtonProps } from '@mui/material/IconButton';
 
-import { useWallets, useConnectWallet } from '@roochnetwork/rooch-sdk-kit';
+import { useState } from 'react';
 
 import { Button } from '@mui/material';
 
+import WalletSelectModal from './wallet-select-modal';
+
 export type AccountButtonProps = IconButtonProps & {
   open: boolean;
   photoURL: string;
   displayName: string;
 };
 
 export function AccountButton() {
-  const wallets = useWallets();
-  const { mutateAsync: connectWallet } = useConnectWallet();
+  const [showWalletSelectModal, setShowWalletSelectModal] = useState(false);
 
   return (
-    <Button
-      variant="outlined"
-      onClick={async () => {
-        await connectWallet({ wallet: wallets[0] });
-      }}
-    >
-      Connect Wallet
-    </Button>
+    <>
+      <Button
+        variant="outlined"
+        onClick={() => {
+          setShowWalletSelectModal(true);
+        }}
+      >
+        Connect Wallet
+      </Button>
+      {showWalletSelectModal && (
+        <WalletSelectModal onSelect={() => setShowWalletSelectModal(false)} />
+      )}
+    </>
   );
 }
diff --git a/infra/rooch-portal-v2/src/layouts/components/account-drawer.tsx b/infra/rooch-portal-v2/src/layouts/components/account-drawer.tsx
@@ -3,12 +3,7 @@
 import type { IconButtonProps } from '@mui/material/IconButton';
 
 import { useState, useCallback } from 'react';
-import {
-  useWallets,
-  useWalletStore,
-  useConnectWallet,
-  useCurrentAddress,
-} from '@roochnetwork/rooch-sdk-kit';
+import { useWallets, useWalletStore, useCurrentAddress } from '@roochnetwork/rooch-sdk-kit';
 
 import Box from '@mui/material/Box';
 import { Button } from '@mui/material';
@@ -26,6 +21,7 @@ import { Iconify } from 'src/components/iconify';
 import { Scrollbar } from 'src/components/scrollbar';
 import { AnimateAvatar } from 'src/components/animate';
 
+import WalletSelectModal from './wallet-select-modal';
 import { DisconnectButton } from './disconnect-button';
 
 export type AccountDrawerProps = IconButtonProps & {};
@@ -34,11 +30,12 @@ export function AccountDrawer() {
   const theme = useTheme();
   const wallets = useWallets();
   const currentAddress = useCurrentAddress();
-  const { mutateAsync: connectWallet } = useConnectWallet();
   const connectionStatus = useWalletStore((state) => state.connectionStatus);
 
   const [open, setOpen] = useState(false);
 
+  const [showWalletSelectModal, setShowWalletSelectModal] = useState(false);
+
   const handleOpenDrawer = useCallback(() => {
     setOpen(true);
   }, []);
@@ -72,14 +69,18 @@ export function AccountDrawer() {
             handleOpenDrawer();
             return;
           }
-          await connectWallet({ wallet: wallets[0] });
+          setShowWalletSelectModal(true);
         }}
       >
         {connectionStatus === 'connected'
           ? shortAddress(currentAddress?.toStr(), 8, 6)
           : 'Connect Wallet'}
       </Button>
 
+      {showWalletSelectModal && (
+        <WalletSelectModal onSelect={() => setShowWalletSelectModal(false)} />
+      )}
+
       <Drawer
         open={open}
         onClose={handleCloseDrawer}

diff --git a/infra/rooch-portal-v2/src/layouts/components/wallet-button.tsx b/infra/rooch-portal-v2/src/layouts/components/wallet-button.tsx
@@ -0,0 +1,47 @@
+import type { Wallet } from '@roochnetwork/rooch-sdk-kit';
+
+import { useState, useEffect } from 'react';
+import { useConnectWallet } from '@roochnetwork/rooch-sdk-kit';
+
+import { Stack, Button, CircularProgress } from '@mui/material';
+
+export default function WalletButton({
+  wallet,
+  onSelect,
+}: {
+  wallet: Wallet;
+  onSelect: () => void;
+}) {
+  const { mutateAsync: connectWallet } = useConnectWallet();
+
+  const [walletInstalled, setWalletInstalled] = useState(false);
+  const [checkingInstall, setCheckingInstall] = useState(false);
+
+  useEffect(() => {
+    async function checkWalletInstalled() {
+      setCheckingInstall(true);
+      const installed = await wallet.checkInstalled();
+      setWalletInstalled(installed);
+      setCheckingInstall(false);
+    }
+    checkWalletInstalled();
+  }, [wallet]);
+
+  return (
+    <Button
+      disabled={walletInstalled === false || checkingInstall}
+      onClick={async () => {
+        await connectWallet({ wallet });
+        onSelect();
+      }}
+    >
+      <Stack direction="row" spacing={1.5} alignItems="center">
+        <Stack>
+          <img src={wallet.getIcon()} width="36px" alt="" />
+        </Stack>
+        <Stack>{wallet.getName()}</Stack>
+        <Stack>{checkingInstall && <CircularProgress size={24} color="info" />}</Stack>
+      </Stack>
+    </Button>
+  );
+}
diff --git a/infra/rooch-portal-v2/src/layouts/components/wallet-select-modal.tsx b/infra/rooch-portal-v2/src/layouts/components/wallet-select-modal.tsx
@@ -0,0 +1,33 @@
+import { useWallets } from '@roochnetwork/rooch-sdk-kit';
+
+import { Stack, Dialog, DialogTitle, DialogContent } from '@mui/material';
+
+import WalletButton from './wallet-button';
+
+export default function WalletSelectModal({ onSelect }: { onSelect: () => void }) {
+  const wallets = useWallets();
+
+  return (
+    <Dialog
+      open
+      onClose={() => {
+        onSelect();
+      }}
+    >
+      <DialogTitle sx={{ pb: 2 }}>Select wallet</DialogTitle>
+
+      <DialogContent
+        sx={{
+          width: '480px',
+          overflow: 'unset',
+        }}
+      >
+        <Stack justifyContent="center" spacing={2} direction="column" sx={{ pt: 1, pb: 4 }}>
+          {wallets.slice(0, 3).map((w) => (
+            <WalletButton key={w.getName()} wallet={w} onSelect={onSelect} />
+          ))}
+        </Stack>
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/infra/rooch-portal-v2/src/sections/assets/components/nft-list-card.tsx b/infra/rooch-portal-v2/src/sections/assets/components/nft-list-card.tsx
@@ -59,7 +59,6 @@ export default function NFTList({ address }: { address: string }) {
     filter: {
       object_type_with_owner: {
         owner: address,
-        filter_out: false,
         object_type: FMNFT.objType,
       },
     },

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml