chore: Update Wallet disconnect SVG

.changeset/many-ways-divide.md

@@ -0,0 +1,5 @@
+---
+"@coinbase/onchainkit": patch
+---
+
+chore: Update disconnect SVG image. By @cpcramer #1103

src/internal/svg/disconnectSvg.stories.ts

@@ -0,0 +1,23 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import React from 'react';
+import { disconnectSvg } from './disconnectSvg';
+
+const SvgWrapper: React.FC = () =>
+  React.createElement(
+    'div',
+    {
+      style: { width: '100%', height: '100%', viewBox: '0 0 16 20' },
+    },
+    disconnectSvg,
+  );
+
+const meta = {
+  title: 'Wallet/DisconnectSvg',
+  component: SvgWrapper,
+  tags: ['autodocs'],
+} satisfies Meta<typeof SvgWrapper>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Basic: Story = {};

src/internal/svg/disconnectSvg.tsx

@@ -3,19 +3,19 @@ import { fill } from '../../styles/theme';
 export const disconnectSvg = (
   <svg
     role="img"
-    aria-label="ock-disconnectSvg"
+    aria-label="ock-disconnect-svg"
     width="100%"
     height="100%"
-    viewBox="0 0 20 20"
+    viewBox="0 0 16 20"
     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="M11.0668 0.91803L11.0668 2.93852L2.02049 2.93852L2.02049 15.0615L11.0668 15.0615L11.0668 17.082L-7.06549e-07 17.082L0 0.918029L11.0668 0.91803Z"
       className={fill.defaultReverse}
     />
     <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="M12.3273 12.8963L16.0002 9.02606L12.346 4.95902L10.843 6.30941L12.3623 8.00032L5.53321 8.00032L5.53321 10.0208L12.2706 10.0208L10.8617 11.5054L12.3273 12.8963Z"
       className={fill.defaultReverse}
     />
   </svg>

src/wallet/components/WalletDropdownDisconnect.stories.tsx

@@ -0,0 +1,33 @@
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { baseSepolia } from 'viem/chains';
+import { http, WagmiProvider, createConfig } from 'wagmi';
+import { WalletDropdownDisconnect } from './WalletDropdownDisconnect';
+
+const wagmiConfig = createConfig({
+  chains: [baseSepolia],
+  transports: {
+    [baseSepolia.id]: http(),
+  },
+});
+
+export default {
+  title: 'Wallet/WalletDropdownDisconnect',
+  component: WalletDropdownDisconnect,
+  decorators: [
+    (Story) => (
+      <WagmiProvider config={wagmiConfig}>
+        <QueryClientProvider client={new QueryClient()}>
+          <Story />
+        </QueryClientProvider>
+      </WagmiProvider>
+    ),
+  ],
+};
+
+export const Default = () => <WalletDropdownDisconnect />;
+
+export const CustomText = () => <WalletDropdownDisconnect text="Log Out" />;
+
+export const CustomClass = () => (
+  <WalletDropdownDisconnect className="bg-red-500" />
+);