chore: Refine Wallet UI - Update dropdown, badges, and text. (#990)

coinbase · Aug 7, 2024 · d22bea0 · d22bea0
1 parent aadfd81
commit d22bea0
Show file tree

Hide file tree

Showing 10 changed files with 52 additions and 57 deletions.
diff --git a/.changeset/pretty-fireants-deliver.md b/.changeset/pretty-fireants-deliver.md
@@ -0,0 +1,5 @@
+---
+"@coinbase/onchainkit": patch
+---
+
+-**chore**: Update all Wallet dropdown SVGs to render 16x16. Update text to Claim Basename (if no Basename), otherwise "Profile". By @cpcramer #990
diff --git a/site/docs/pages/index.mdx b/site/docs/pages/index.mdx
@@ -195,7 +195,7 @@ bun add @coinbase/onchainkit
       <EthBalance />
     </Identity>
     <WalletDropdownLink icon="wallet" href="https://wallet.coinbase.com"> // [!code focus]
-      Go to Wallet Dashboard // [!code focus]
+      Wallet // [!code focus]
     </WalletDropdownLink> // [!code focus]
     <WalletDropdownDisconnect /> // [!code focus]
   </WalletDropdown> // [!code focus]
@@ -219,7 +219,7 @@ bun add @coinbase/onchainkit
         <EthBalance />
       </Identity>
       <WalletDropdownLink icon="wallet" href="https://wallet.coinbase.com">
-        Go to Wallet Dashboard
+        Wallet
       </WalletDropdownLink>
       <WalletDropdownDisconnect />
     </WalletDropdown>

diff --git a/site/docs/pages/wallet/wallet.mdx b/site/docs/pages/wallet/wallet.mdx
@@ -14,7 +14,6 @@ import {
   Address,
   Avatar,
   Name,
-  Badge,
   Identity,
   EthBalance,
 } from '@coinbase/onchainkit/identity';
@@ -40,7 +39,6 @@ import {
   Address,
   Avatar,
   Name,
-  Badge,
   Identity,
   EthBalance,
 } from '@coinbase/onchainkit/identity';
@@ -57,14 +55,12 @@ export function WalletComponents() {
         <WalletDropdown> // [!code focus]
           <Identity className="px-4 pt-3 pb-2" hasCopyAddressOnClick>
             <Avatar />
-            <Name>
-              <Badge />
-            </Name>
+            <Name />
             <Address className={color.foregroundMuted} />
             <EthBalance />
           </Identity>
           <WalletDropdownLink icon="wallet" href="https://wallet.coinbase.com"> // [!code focus]
-            Go to Wallet Dashboard // [!code focus]
+            Wallet // [!code focus]
           </WalletDropdownLink> // [!code focus]
           <WalletDropdownDisconnect /> // [!code focus]
         </WalletDropdown> // [!code focus]
@@ -83,14 +79,12 @@ export function WalletComponents() {
     <WalletDropdown>
       <Identity className="px-4 pt-3 pb-2" hasCopyAddressOnClick>
         <Avatar />
-        <Name>
-          <Badge />
-        </Name>
+        <Name />
         <Address className={color.foregroundMuted} />
         <EthBalance />
       </Identity>
       <WalletDropdownLink icon="wallet" href="https://wallet.coinbase.com">
-        Go to Wallet Dashboard
+        Wallet
       </WalletDropdownLink>
       <WalletDropdownDisconnect />
     </WalletDropdown>
@@ -115,9 +109,7 @@ You can override component styles using `className`.
       hasCopyAddressOnClick
     >
       <Avatar />
-      <Name>
-        <Badge />
-      </Name>
+      <Name />
       <Address />
       <EthBalance />
     </Identity>
@@ -126,7 +118,7 @@ You can override component styles using `className`.
       icon="wallet" 
       href="https://wallet.coinbase.com"
     >
-      Go to Wallet Dashboard
+      Wallet
     </WalletDropdownLink>
     <WalletDropdownDisconnect className='hover:bg-blue-200' />
   </WalletDropdown>
@@ -142,9 +134,7 @@ You can override component styles using `className`.
     <WalletDropdown>
       <Identity className="px-4 pt-3 pb-2 hover:bg-blue-200" hasCopyAddressOnClick>
         <Avatar />
-        <Name>
-          <Badge />
-        </Name>
+        <Name />
         <Address className={color.foregroundMuted} />
         <EthBalance />
       </Identity>
@@ -153,7 +143,7 @@ You can override component styles using `className`.
         icon="wallet" 
         href="https://wallet.coinbase.com"
       >
-        Go to Wallet Dashboard
+        Wallet
       </WalletDropdownLink>
       <WalletDropdownDisconnect className='hover:bg-blue-200' />
     </WalletDropdown>
@@ -184,14 +174,12 @@ You can override component text using `text`.
     <WalletDropdown>
       <Identity className="px-4 pt-3 pb-2" hasCopyAddressOnClick>
         <Avatar />
-        <Name>
-          <Badge />
-        </Name>
+        <Name />
         <Address className={color.foregroundMuted} />
         <EthBalance />
       </Identity>
       <WalletDropdownLink icon="wallet" href="https://wallet.coinbase.com">
-        Go to Wallet Dashboard
+        Wallet
       </WalletDropdownLink>
       <WalletDropdownDisconnect />
     </WalletDropdown>
@@ -250,17 +238,15 @@ OnchainKit leverages [RainbowKit](https://www.rainbowkit.com/) to offer this fea
   <WalletDropdown>
     <Identity className="px-4 pt-3 pb-2" hasCopyAddressOnClick>
       <Avatar />
-      <Name>
-        <Badge />
-      </Name>
+      <Name />
       <Address />
       <EthBalance />
     </Identity>
     <WalletDropdownLink 
       icon="wallet" 
       href="https://wallet.coinbase.com"
     >
-      Go to Wallet Dashboard
+      Wallet
     </WalletDropdownLink>
     <WalletDropdownDisconnect />
   </WalletDropdown>
@@ -346,17 +332,15 @@ export default OnchainProviders;
       <WalletDropdown>
         <Identity className="px-4 pt-3 pb-2" hasCopyAddressOnClick>
           <Avatar />
-          <Name>
-            <Badge />
-          </Name>
+          <Name />
           <Address className={color.foregroundMuted} />
           <EthBalance />
         </Identity>
         <WalletDropdownLink 
           icon="wallet" 
           href="https://wallet.coinbase.com"
         >
-          Go to Wallet Dashboard
+          Wallet
         </WalletDropdownLink>
         <WalletDropdownDisconnect />
       </WalletDropdown>

diff --git a/src/identity/components/IdentityLayout.tsx b/src/identity/components/IdentityLayout.tsx
@@ -44,7 +44,7 @@ export function IdentityLayout({
     <div
       className={cn(
         background.default,
-        'flex items-center space-x-4 px-2 py-1',
+        'flex items-center space-x-4 px-4 py-1',
         onClick && `${pressable.default} relative`,
         className,
       )}

diff --git a/src/internal/svg/disconnectSvg.tsx b/src/internal/svg/disconnectSvg.tsx
@@ -4,9 +4,9 @@ export const disconnectSvg = (
   <svg
     role="img"
     aria-label="ock-disconnect-svg"
-    width="100%"
-    height="100%"
-    viewBox="0 0 20 20"
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
   >

diff --git a/src/internal/svg/walletSvg.tsx b/src/internal/svg/walletSvg.tsx
@@ -4,9 +4,9 @@ export const walletSvg = (
   <svg
     role="img"
     aria-label="ock-wallet-svg"
-    width="100%"
-    height="100%"
-    viewBox="0 0 20 20"
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
   >

diff --git a/src/wallet/components/WalletDropdownBaseName.test.tsx b/src/wallet/components/WalletDropdownBaseName.test.tsx
@@ -21,7 +21,7 @@ vi.mock('./WalletProvider', () => ({
 }));
 
 describe('WalletDropdownBaseName', () => {
-  it('should render "Claim a Basename" when no basename', () => {
+  it('should render "Claim Basename" when no basename', () => {
     (useAccount as vi.Mock<[], Partial<GetAccountReturnType>>).mockReturnValue({
       address: '0x1234' as `0x${string}`,
       isConnected: true,
@@ -39,11 +39,11 @@ describe('WalletDropdownBaseName', () => {
     });
 
     render(<WalletDropdownBaseName />);
-    expect(screen.getByText('Claim a Basename')).toBeInTheDocument();
+    expect(screen.getByText('Claim Basename')).toBeInTheDocument();
     expect(screen.getByText('NEW')).toBeInTheDocument();
   });
 
-  it('should render "Go to profile" when basename exists', () => {
+  it('should render "Profile" when basename exists', () => {
     (useAccount as vi.Mock<[], Partial<GetAccountReturnType>>).mockReturnValue({
       address: '0x1234' as `0x${string}`,
       isConnected: true,
@@ -61,7 +61,7 @@ describe('WalletDropdownBaseName', () => {
     });
 
     render(<WalletDropdownBaseName />);
-    expect(screen.getByText('Go to profile')).toBeInTheDocument();
+    expect(screen.getByText('Profile')).toBeInTheDocument();
     expect(screen.queryByText('NEW')).not.toBeInTheDocument();
   });
 
@@ -84,8 +84,8 @@ describe('WalletDropdownBaseName', () => {
 
     render(<WalletDropdownBaseName />);
     expect(screen.getByTestId('ockSpinner')).toBeInTheDocument();
-    expect(screen.queryByText('Claim a Basename')).not.toBeInTheDocument();
-    expect(screen.queryByText('Go to profile')).not.toBeInTheDocument();
+    expect(screen.queryByText('Claim Basename')).not.toBeInTheDocument();
+    expect(screen.queryByText('Profile')).not.toBeInTheDocument();
     expect(screen.queryByText('NEW')).not.toBeInTheDocument();
   });
 

diff --git a/src/wallet/components/WalletDropdownBaseName.tsx b/src/wallet/components/WalletDropdownBaseName.tsx
@@ -22,7 +22,7 @@ export function WalletDropdownBaseName({
   });
 
   const hasBaseUserName = !!baseName;
-  const title = hasBaseUserName ? 'Go to profile' : 'Claim a Basename';
+  const title = hasBaseUserName ? 'Profile' : 'Claim Basename';
   const href = hasBaseUserName
     ? `https://www.base.org/name/${baseName}`
     : 'https://www.base.org/names';
@@ -31,24 +31,26 @@ export function WalletDropdownBaseName({
     <a
       className={cn(
         pressable.default,
-        'flex items-center px-4 py-2',
+        'relative flex items-center px-4 py-3',
         className,
       )}
       href={href}
       target="_blank"
       rel="noopener noreferrer"
     >
-      {baseNameSvg && <div className="mr-2 h-5 w-5">{baseNameSvg}</div>}
-      <div className="flex items-center">
+      <div className="-translate-y-1/2 absolute top-1/2 left-4 flex h-5 w-5 items-center justify-center">
+        {baseNameSvg}
+      </div>
+      <div className="flex w-full items-center pl-6">
         {isLoading ? (
           <Spinner />
         ) : (
           <>
-            <span className={cn(text.body, 'shrink-0')}>{title}</span>
+            <span className={cn(text.body)}>{title}</span>
             {!hasBaseUserName && (
               <span
                 className={cn(
-                  'ml-2 rounded-full bg-[#E0E7FF] px-2 text-center font-bold font-inter text-[#4F46E5] text-[0.6875rem] uppercase leading-6',
+                  'ml-2 rounded-full bg-[#E0E7FF] px-2 py-0.5 text-center font-bold font-inter text-[#4F46E5] text-[0.6875rem] uppercase leading-none',
                 )}
               >
                 NEW

diff --git a/src/wallet/components/WalletDropdownDisconnect.tsx b/src/wallet/components/WalletDropdownDisconnect.tsx
@@ -19,13 +19,15 @@ export function WalletDropdownDisconnect({
       type="button"
       className={cn(
         pressable.default,
-        'flex items-center gap-2 px-4 py-2',
+        'relative flex items-center px-4 py-3',
         className,
       )}
       onClick={handleDisconnect}
     >
-      <div className="w-5">{disconnectSvg}</div>
-      <span className={cn(dsText.body, 'shrink-0')}>{text}</span>
+      <div className="-translate-y-1/2 absolute top-1/2 left-4 flex h-5 w-5 items-center justify-center">
+        {disconnectSvg}
+      </div>
+      <span className={cn(dsText.body, 'pl-6')}>{text}</span>
     </button>
   );
 }
diff --git a/src/wallet/components/WalletDropdownLink.tsx b/src/wallet/components/WalletDropdownLink.tsx
@@ -28,15 +28,17 @@ export function WalletDropdownLink({
     <a
       className={cn(
         pressable.default,
-        'flex items-center gap-2 px-4 py-2',
+        'relative flex items-center px-4 py-3',
         className,
       )}
       href={href}
       target={target}
       rel={rel}
     >
-      {iconSvg && <div className="h-5 w-5">{iconSvg}</div>}
-      <span className={cn(text.body, 'shrink-0')}>{children}</span>
+      <div className="-translate-y-1/2 absolute top-1/2 left-4 flex h-5 w-5 items-center justify-center">
+        {iconSvg}
+      </div>
+      <span className={cn(text.body, 'pl-6')}>{children}</span>
     </a>
   );
 }