Changes

coinbase · Aug 6, 2024 · 5215c55 · 5215c55
1 parent 5dee2dd
commit 5215c55
Show file tree

Hide file tree

Showing 8 changed files with 36 additions and 35 deletions.
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
@@ -8,6 +8,7 @@ import {
   Wallet,
   WalletDropdown,
   WalletDropdownLink,
+  WalletDropdownBaseName,
   WalletDropdownDisconnect,
 } from '@coinbase/onchainkit/wallet';
 import {
@@ -60,7 +61,7 @@ export function WalletComponents() {
             <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]
@@ -84,8 +85,9 @@ export function WalletComponents() {
         <EthBalance />
       </Identity>
       <WalletDropdownLink icon="wallet" href="https://wallet.coinbase.com">
-        Go to Wallet Dashboard
+        Wallet
       </WalletDropdownLink>
+      <WalletDropdownBaseName />
       <WalletDropdownDisconnect />
     </WalletDropdown>
   </Wallet>
@@ -118,7 +120,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>
@@ -143,7 +145,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>
@@ -179,7 +181,7 @@ You can override component text using `text`.
         <EthBalance />
       </Identity>
       <WalletDropdownLink icon="wallet" href="https://wallet.coinbase.com">
-        Go to Wallet Dashboard
+        Wallet
       </WalletDropdownLink>
       <WalletDropdownDisconnect />
     </WalletDropdown>
@@ -246,7 +248,7 @@ OnchainKit leverages [RainbowKit](https://www.rainbowkit.com/) to offer this fea
       icon="wallet" 
       href="https://wallet.coinbase.com"
     >
-      Go to Wallet Dashboard
+      Wallet
     </WalletDropdownLink>
     <WalletDropdownDisconnect />
   </WalletDropdown>
@@ -340,7 +342,7 @@ export default OnchainProviders;
           icon="wallet" 
           href="https://wallet.coinbase.com"
         >
-          Go to Wallet Dashboard
+          Wallet
         </WalletDropdownLink>
         <WalletDropdownDisconnect />
       </WalletDropdown>

diff --git a/src/internal/svg/baseNameSvg.tsx b/src/internal/svg/baseNameSvg.tsx
@@ -8,7 +8,6 @@ export const baseNameSvg = (
     viewBox="0 0 16 16"
     xmlns="http://www.w3.org/2000/svg"
     fill="none"
-    className="h-full w-full"
   >
     <path
       d="M11.75 3.75C11.75 5.82107 10.0711 7.5 8 7.5C5.92893 7.5 4.25 5.82107 4.25 3.75C4.25 1.67893 5.92893 0 8 0C10.0711 0 11.75 1.67893 11.75 3.75Z"

diff --git a/src/internal/svg/defaultLoadingSVG.tsx b/src/internal/svg/defaultLoadingSVG.tsx
@@ -3,25 +3,25 @@ export const defaultLoadingSVG = (
     data-testid="ockAvatarLoadingSvg"
     role="img"
     aria-label="ock-avatar-loading-image"
-    width="100%"
-    height="100%"
-    viewBox="0 0 100 100"
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
     xmlns="http://www.w3.org/2000/svg"
   >
     <circle
-      cx="50"
-      cy="50"
-      r="45"
+      cx="8"
+      cy="8"
+      r="7.2"
       stroke="#333"
       fill="none"
-      strokeWidth="10"
+      strokeWidth="1.6"
       strokeLinecap="round"
     >
       <animateTransform
         attributeName="transform"
         type="rotate"
-        from="0 50 50"
-        to="360 50 50"
+        from="0 8 8"
+        to="360 8 8"
         dur="1s"
         repeatCount="indefinite"
       />

diff --git a/src/internal/svg/disconnectSvg.tsx b/src/internal/svg/disconnectSvg.tsx
@@ -2,18 +2,18 @@ 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"
   >
     <path
-      d="M10.9735 2.69696L10.9735 4.52272L5.49622 4.52272L5.49622 15.4773L10.9735 15.4773L10.9735 17.303L3.67046 17.303L3.67046 2.69696L10.9735 2.69696Z"
+      d="M8.77876 2.15757L8.77876 3.61818L4.39698 3.61818L4.39698 12.3818L8.77876 12.3818L8.77876 13.8424L2.93637 13.8424L2.93637 2.15757L8.77876 2.15757Z"
       fill="#0A0B0D"
     />
     <path
-      d="M13.4614 13.5207L16.7804 10.0235L13.4783 6.34848L12.1202 7.56872L13.4931 9.09667L7.32216 9.09667L7.32216 10.9224L13.4102 10.9224L12.1371 12.2639L13.4614 13.5207Z"
+      d="M10.7691 10.8166L13.4243 8.01883L10.7826 5.07879L9.69613 6.05498L10.7945 7.27734L5.85773 7.27734L5.85773 8.73795L10.7282 8.73795L9.70965 9.81114L10.7691 10.8166Z"
       fill="#0A0B0D"
     />
   </svg>

diff --git a/src/internal/svg/walletSvg.tsx b/src/internal/svg/walletSvg.tsx
@@ -2,16 +2,16 @@ 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"
   >
     <path
       fillRule="evenodd"
       clipRule="evenodd"
-      d="M0 10C0 15.5222 4.47778 20 10 20C15.5222 20 20 15.5222 20 10C20 4.47778 15.5222 0 10 0C4.47778 0 0 4.47778 0 10ZM7.44444 6.77778C7.075 6.77778 6.77778 7.075 6.77778 7.44444V12.5556C6.77778 12.925 7.075 13.2222 7.44444 13.2222H12.5556C12.925 13.2222 13.2222 12.925 13.2222 12.5556V7.44444C13.2222 7.075 12.925 6.77778 12.5556 6.77778H7.44444Z"
+      d="M0 8C0 12.4178 3.58222 16 8 16C12.4178 16 16 12.4178 16 8C16 3.58222 12.4178 0 8 0C3.58222 0 0 3.58222 0 8ZM5.95555 5.42222C5.66 5.42222 5.42222 5.66 5.42222 5.95555V10.0444C5.42222 10.34 5.66 10.5778 5.95555 10.5778H10.0444C10.34 10.5778 10.5778 10.34 10.5778 10.0444V5.95555C10.5778 5.66 10.34 5.42222 10.0444 5.42222H5.95555Z"
       fill="#030712"
     />
   </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';