Updated wallet connect (#259)

* Adjusted styling * Removed log * Adjusted styling * Added iconsOnly prop to hide selectedChain name * Added wallet action * Only enable export action if selected wallet is a privy wallet
Official-MoonDao · Nov 25, 2024 · ae08e2d · ae08e2d
1 parent 71efaad
commit ae08e2d
Show file tree

Hide file tree

Showing 6 changed files with 137 additions and 67 deletions.
diff --git a/ui/components/privy/LinkAccounts.tsx b/ui/components/privy/LinkAccounts.tsx
@@ -12,7 +12,7 @@ export function LinkAccounts({ user }: any) {
       <button onClick={onClick} className="pt-1 text-[13px]">
         <div className="flex w-full items-center justify-between px-2">
           {children}
-          <p>{linked ? '✔' : '⨉'}</p>
+          <p>{linked ? '✔' : 'Add'}</p>
         </div>
       </button>
     )
@@ -38,7 +38,7 @@ export function LinkAccounts({ user }: any) {
       >
         <strong>Link Accounts:</strong>
         <button
-          className={`duration-300 ease-in-out ${enabled && 'rotate-180'}`}
+          className={`duration-150 ease-in-out ${enabled && 'rotate-180'}`}
         >
           <ChevronDownIcon height={20} width={20} />
         </button>

diff --git a/ui/components/privy/PrivyConnectWallet.tsx b/ui/components/privy/PrivyConnectWallet.tsx
@@ -1,11 +1,18 @@
-import { XMarkIcon } from '@heroicons/react/24/outline'
+import {
+  ArrowDownOnSquareIcon,
+  ArrowUpRightIcon,
+  ChevronDownIcon,
+  PlusIcon,
+  WalletIcon,
+  XMarkIcon,
+} from '@heroicons/react/24/outline'
 import {
   useFundWallet,
   useLogin,
   usePrivy,
   useWallets,
 } from '@privy-io/react-auth'
-import { NFT, useAddress, useContract, useSDK } from '@thirdweb-dev/react'
+import { useAddress, useContract, useSDK } from '@thirdweb-dev/react'
 import { ethers } from 'ethers'
 import Image from 'next/image'
 import { useRouter } from 'next/router'
@@ -16,7 +23,6 @@ import ChainContext from '../../lib/thirdweb/chain-context'
 import { useNativeBalance } from '../../lib/thirdweb/hooks/useNativeBalance'
 import { useENS } from '../../lib/utils/hooks/useENS'
 import { useImportToken } from '../../lib/utils/import-token'
-import CitizenContext from '@/lib/citizen/citizen-context'
 import { generatePrettyLinkWithId } from '@/lib/subscription/pretty-links'
 import useWatchTokenBalance from '@/lib/tokens/hooks/useWatchTokenBalance'
 import viemChains from '@/lib/viem/viemChains'
@@ -35,6 +41,7 @@ import CitizenProfileLink from '../subscription/CitizenProfileLink'
 import NetworkSelector from '../thirdweb/NetworkSelector'
 import { LinkAccounts } from './LinkAccounts'
 import { PrivyWeb3Button } from './PrivyWeb3Button'
+import WalletAction from './WalletAction'
 
 type PrivyConnectWalletProps = {
   citizenContract?: any
@@ -157,7 +164,7 @@ function SendModal({
           </button>
         </div>
 
-        <NetworkSelector />
+        <NetworkSelector iconsOnly />
 
         <div className="flex gap-4 items-center">
           <select
@@ -345,12 +352,16 @@ export function PrivyConnectWallet({
           selectedChain.slug === 'polygon' ? 'polygon' : 'ethereum'
         }.svg`}
         width={
-          selectedChain.slug === 'ethereum' || selectedChain.slug === 'arbitrum'
+          selectedChain.slug === 'ethereum' ||
+          selectedChain.slug === 'arbitrum' ||
+          selectedChain.slug === 'sepolia'
             ? 25
             : 30
         }
         height={
-          selectedChain.slug === 'ethereum' || selectedChain.slug === 'arbitrum'
+          selectedChain.slug === 'ethereum' ||
+          selectedChain.slug === 'arbitrum' ||
+          selectedChain.slug === 'sepolia'
             ? 25
             : 30
         }
@@ -399,14 +410,19 @@ export function PrivyConnectWallet({
             }}
           >
             {/*Address and Toggle open/close button*/}
-            <div className="flex items-center w-full h-full justify-center">
+            <div className="flex items-center w-full h-full justify-between">
               <p className="text-xs">
                 {ens
                   ? ens
                   : address
                   ? `${address?.slice(0, 6)}...${address?.slice(-4)}`
                   : ''}
               </p>
+              <ChevronDownIcon
+                className={`w-4 h-4 text-black dark:text-white cursor-pointer transition-all duration-150 ${
+                  enabled ? 'rotate-180' : ''
+                }`}
+              />
             </div>
             {/*Menu that opens up*/}
           </div>
@@ -428,27 +444,27 @@ export function PrivyConnectWallet({
                   formattedBalances={formattedBalances}
                 />
               )}
-              <div
-                className={`w-full flex ${
-                  type === 'mobile' ? 'justify-between' : 'justify-end'
-                }`}
-              >
-                {type === 'mobile' && (
-                  <div className="h-[10px]">
-                    <CitizenProfileLink
-                      selectedChain={selectedChain}
-                      citizenContract={citizenContract}
-                    />
+              <div className={`w-full flex items-center justify-between`}>
+                <div className="flex items-center justify-center gap-4">
+                  <div className="w-[50px]">
+                    <NetworkSelector iconsOnly />
                   </div>
-                )}
+                  {type === 'mobile' && (
+                    <div className="pt-2">
+                      <CitizenProfileLink
+                        selectedChain={selectedChain}
+                        citizenContract={citizenContract}
+                      />
+                    </div>
+                  )}
+                </div>
                 <XMarkIcon
                   className="w-6 h-6 text-black dark:text-white cursor-pointer"
                   onClick={() => setEnabled(false)}
                 />
               </div>
               <div className="relative mt-2">
-                <NetworkSelector />
-                <div className="mt-2 flex items-center">
+                <div className="w-full mt-2 flex items-center">
                   <div className="ml-2 bg-dark-cool">
                     <p className="text-sm">{`${address?.slice(
                       0,
@@ -535,27 +551,52 @@ export function PrivyConnectWallet({
                 </div>
               )}
 
-              <button
-                className="w-full p-1 rounded-[2vmax] text-white transition-all duration-150 p-5 py-2 md:hover:pl-[25px] gradient-2"
-                onClick={async () => {
-                  if (!address) return toast.error('Please connect your wallet')
-                  fundWallet(address, {
-                    chain: viemChains[selectedChain.slug],
-                    asset: 'native-currency',
-                  })
-                }}
-              >
-                <strong>Fund</strong>
-              </button>
-
-              <button
-                className="w-full p-1 rounded-[2vmax] text-white transition-all duration-150 p-5 py-2 md:hover:pl-[25px] gradient-2"
-                onClick={async () => {
-                  setSendModalEnabled(true)
-                }}
+              <div
+                id="wallet-actions-container"
+                className="pt-4 pb-8 flex gap-5"
               >
-                <strong>Send</strong>
-              </button>
+                <WalletAction
+                  id="wallet-fund-action"
+                  label="Fund"
+                  icon={<PlusIcon width={25} height={25} />}
+                  onClick={async () => {
+                    if (!address)
+                      return toast.error('Please connect your wallet')
+                    fundWallet(address, {
+                      chain: viemChains[selectedChain.slug],
+                      asset: 'native-currency',
+                    })
+                  }}
+                />
+                <WalletAction
+                  id="wallet-send-action"
+                  label="Send"
+                  icon={<ArrowUpRightIcon width={25} height={25} />}
+                  onClick={() => {
+                    setSendModalEnabled(true)
+                  }}
+                />
+                <WalletAction
+                  id="wallet-add-wallet-action"
+                  label="Add Wallet"
+                  icon={<WalletIcon width={25} height={25} />}
+                  onClick={() => {
+                    connectWallet()
+                  }}
+                />
+                {wallets[selectedWallet]?.walletClientType === 'privy' && (
+                  <WalletAction
+                    id="wallet-export-action"
+                    label="Export"
+                    icon={<ArrowDownOnSquareIcon width={25} height={25} />}
+                    onClick={() => {
+                      exportWallet().catch(() => {
+                        toast.error('Please select a privy wallet to export.')
+                      })
+                    }}
+                  />
+                )}
+              </div>
 
               <div className="pt-1">
                 <p className="font-semibold">Wallets:</p>
@@ -594,26 +635,6 @@ export function PrivyConnectWallet({
                       )}
                     </div>
                   ))}
-                  {wallets[selectedWallet]?.walletClientType === 'privy' && (
-                    <button
-                      className="w-full p-1 rounded-[2vmax] text-white transition-all duration-150 p-5 py-2 md:hover:pl-[25px] gradient-2"
-                      onClick={() => {
-                        exportWallet().catch(() => {
-                          toast.error('Please select a privy wallet to export.')
-                        })
-                      }}
-                    >
-                      Export Wallet
-                    </button>
-                  )}
-                  <button
-                    className="w-full gradient-3 p-1 pr-2 pl-2 text-dark-cool"
-                    onClick={async () => {
-                      connectWallet()
-                    }}
-                  >
-                    <strong>Connect</strong>
-                  </button>
                 </div>
               </div>
               <div className="pt-1">
@@ -632,7 +653,7 @@ export function PrivyConnectWallet({
                       logout()
                     }}
                   >
-                    <strong>Log out</strong>
+                    <strong>Log Out</strong>
                   </button>
                 </div>
               </div>

diff --git a/ui/components/privy/WalletAction.tsx b/ui/components/privy/WalletAction.tsx
@@ -0,0 +1,16 @@
+export default function WalletAction({ id, label, icon, onClick }: any) {
+  return (
+    <div
+      id={id}
+      className="flex flex-col justify-start items-center w-[40px] h-[40px]"
+    >
+      <button
+        className="w-[35px] h-[35px] flex justify-center items-center gradient-2 p-1 pr-2 pl-2 rounded-full"
+        onClick={onClick}
+      >
+        {icon}
+      </button>
+      <p className="mt-1 text-xs text-center">{label}</p>
+    </div>
+  )
+}
diff --git a/ui/components/thirdweb/NetworkSelector.tsx b/ui/components/thirdweb/NetworkSelector.tsx
@@ -11,7 +11,11 @@ import Image from 'next/image'
 import { useContext, useEffect, useState } from 'react'
 import ChainContext from '../../lib/thirdweb/chain-context'
 
-export default function NetworkSelector() {
+type NetworkSelectorProps = {
+  iconsOnly?: boolean
+}
+
+export default function NetworkSelector({ iconsOnly }: NetworkSelectorProps) {
   const { selectedChain, setSelectedChain } = useContext(ChainContext)
   const [dropdown, setDropdown] = useState(false)
 
@@ -46,7 +50,7 @@ export default function NetworkSelector() {
           height={24}
           alt={selectedChain.name}
         />
-        <span>{selectedChain.name}</span>
+        {!iconsOnly && <span>{selectedChain.name}</span>}
         <button className={`${dropdown && 'rotate-180'}`}>
           <ChevronDownIcon height={14} width={14} />
         </button>

diff --git a/ui/cypress/integration/privy/wallet-action.cy.tsx b/ui/cypress/integration/privy/wallet-action.cy.tsx
@@ -0,0 +1,30 @@
+import { ArrowUpRightIcon } from '@heroicons/react/24/outline'
+import WalletAction from '@/components/privy/WalletAction'
+
+// Example icon
+
+describe('WalletAction Component', () => {
+  let props: any
+
+  beforeEach(() => {
+    props = {
+      id: 'test-wallet-action',
+      label: 'Test Wallet Action',
+      icon: <ArrowUpRightIcon />,
+      onClick: cy.spy().as('clickHandler'),
+    }
+
+    cy.mount(<WalletAction {...props} />)
+  })
+
+  it('Renders component', () => {
+    // Check if component renders with correct structure
+    cy.get('#test-wallet-action').should('exist')
+    cy.get('button').should('exist')
+    cy.get('p').should('have.text', 'Test Wallet Action')
+
+    // Test click functionality
+    cy.get('button').click()
+    cy.get('@clickHandler').should('have.been.called')
+  })
+})
diff --git a/ui/lib/citizen/useCitizenData.tsx b/ui/lib/citizen/useCitizenData.tsx
@@ -16,7 +16,6 @@ export function useCitizenData(nft: any, citizenContract: any) {
   }, [attributes])
 
   const isDeleted = useMemo(() => {
-    console.log(attributes)
     const view = getAttribute(attributes, 'view')?.value
     return view === '' ? true : false
   }, [attributes])