diff --git a/.prettierrc b/.prettierrc
index 1fb73bc2e2..8d6ce6a7e4 100644
--- a/.prettierrc
+++ b/.prettierrc
@@ -1,4 +1,5 @@
 {
   "tabWidth": 2,
-  "singleQuote": true
+  "singleQuote": true,
+  "trailingComma": "all"
 }
diff --git a/src/wallet/components/ConnectWallet.test.tsx b/src/wallet/components/ConnectWallet.test.tsx
index 68b9a36112..40eb1d3f37 100644
--- a/src/wallet/components/ConnectWallet.test.tsx
+++ b/src/wallet/components/ConnectWallet.test.tsx
@@ -93,7 +93,7 @@ describe('ConnectWallet', () => {
     render(
       <ConnectWallet text="Connect Wallet">
         <div>Wallet Connected</div>
-      </ConnectWallet>
+      </ConnectWallet>,
     );
     const connectedText = screen.getByText('Wallet Connected');
     expect(connectedText).toBeInTheDocument();
@@ -115,7 +115,7 @@ describe('ConnectWallet', () => {
       },
       {
         onSuccess: expect.any(Function),
-      }
+      },
     );
   });
 
@@ -135,7 +135,7 @@ describe('ConnectWallet', () => {
     const { rerender } = render(
       <ConnectWallet text="Connect Wallet">
         <div>Wallet Connected</div>
-      </ConnectWallet>
+      </ConnectWallet>,
     );
     const button = screen.getByText('Wallet Connected');
     fireEvent.click(button);
@@ -150,7 +150,7 @@ describe('ConnectWallet', () => {
     rerender(
       <ConnectWallet text="Connect Wallet">
         <div>Wallet Connected</div>
-      </ConnectWallet>
+      </ConnectWallet>,
     );
 
     fireEvent.click(button);
@@ -174,7 +174,7 @@ describe('ConnectWallet', () => {
     render(
       <ConnectWallet>
         <span>Test Children</span>
-      </ConnectWallet>
+      </ConnectWallet>,
     );
     const button = screen.getByTestId('ockConnectWallet_Connected');
     expect(button).toHaveClass('ock-bg-secondary-active');
@@ -189,7 +189,7 @@ describe('ConnectWallet', () => {
       <ConnectWallet>
         <ConnectWalletText>Not Render</ConnectWalletText>
         <div>Wallet Ciao</div>
-      </ConnectWallet>
+      </ConnectWallet>,
     );
     const connectedText = screen.getByText('Wallet Ciao');
     expect(connectedText).toBeInTheDocument();
@@ -280,7 +280,7 @@ describe('ConnectWallet', () => {
 
       expect(connectMock).toHaveBeenCalledWith(
         { connector: { id: 'mockConnector' } },
-        { onSuccess: expect.any(Function) }
+        { onSuccess: expect.any(Function) },
       );
     });
   });
@@ -295,7 +295,7 @@ describe('ConnectWallet', () => {
       render(
         <ConnectWallet>
           <ConnectWalletText>Custom Connect Text</ConnectWalletText>
-        </ConnectWallet>
+        </ConnectWallet>,
       );
 
       const button = screen.getByTestId('ockConnectButton');
@@ -324,7 +324,7 @@ describe('ConnectWallet', () => {
 
       expect(connectMock).toHaveBeenCalledWith(
         { connector: { id: 'mockConnector' } },
-        { onSuccess: expect.any(Function) }
+        { onSuccess: expect.any(Function) },
       );
 
       connectMock.mock.calls[0][1].onSuccess();
@@ -393,7 +393,7 @@ describe('ConnectWallet', () => {
       });
 
       const { rerender } = render(
-        <ConnectWallet text="Connect Wallet" onConnect={onConnectMock} />
+        <ConnectWallet text="Connect Wallet" onConnect={onConnectMock} />,
       );
 
       const button = screen.getByTestId('ockConnectButton');
@@ -408,13 +408,13 @@ describe('ConnectWallet', () => {
       });
 
       rerender(
-        <ConnectWallet text="Connect Wallet" onConnect={onConnectMock} />
+        <ConnectWallet text="Connect Wallet" onConnect={onConnectMock} />,
       );
 
       expect(onConnectMock).toHaveBeenCalledTimes(1);
 
       rerender(
-        <ConnectWallet text="Connect Wallet" onConnect={onConnectMock} />
+        <ConnectWallet text="Connect Wallet" onConnect={onConnectMock} />,
       );
       expect(onConnectMock).toHaveBeenCalledTimes(1);
     });
@@ -493,7 +493,7 @@ describe('ConnectWallet', () => {
       });
 
       const { rerender } = render(
-        <ConnectWallet text="Connect Wallet" onConnect={onConnectMock} />
+        <ConnectWallet text="Connect Wallet" onConnect={onConnectMock} />,
       );
 
       const button = screen.getByTestId('ockConnectButton');
@@ -505,13 +505,13 @@ describe('ConnectWallet', () => {
       });
 
       rerender(
-        <ConnectWallet text="Connect Wallet" onConnect={onConnectMock} />
+        <ConnectWallet text="Connect Wallet" onConnect={onConnectMock} />,
       );
 
       expect(onConnectMock).toHaveBeenCalledTimes(1);
 
       rerender(
-        <ConnectWallet text="Connect Wallet" onConnect={onConnectMock} />
+        <ConnectWallet text="Connect Wallet" onConnect={onConnectMock} />,
       );
       expect(onConnectMock).toHaveBeenCalledTimes(1);
     });
diff --git a/src/wallet/components/WalletDropdown.test.tsx b/src/wallet/components/WalletDropdown.test.tsx
index ec6302e36f..c63cf7d360 100644
--- a/src/wallet/components/WalletDropdown.test.tsx
+++ b/src/wallet/components/WalletDropdown.test.tsx
@@ -102,10 +102,10 @@ describe('WalletDropdown', () => {
     useWalletContextMock.mockReturnValue({ isOpen: true, isClosing: false });
     const { rerender } = render(<WalletDropdown>Content</WalletDropdown>);
     const dropdown = screen.getByTestId('ockWalletDropdown');
-    expect(dropdown).toHaveClass('animate-walletIslandContainerIn');
+    expect(dropdown).toHaveClass('animate-walletContainerIn');
 
     useWalletContextMock.mockReturnValue({ isOpen: true, isClosing: true });
     rerender(<WalletDropdown>Content</WalletDropdown>);
-    expect(dropdown).toHaveClass('animate-walletIslandContainerOut');
+    expect(dropdown).toHaveClass('animate-walletContainerOut');
   });
 });
diff --git a/src/wallet/components/WalletDropdown.tsx b/src/wallet/components/WalletDropdown.tsx
index 672ccf9b1b..c5ce424082 100644
--- a/src/wallet/components/WalletDropdown.tsx
+++ b/src/wallet/components/WalletDropdown.tsx
@@ -42,7 +42,7 @@ export function WalletDropdown({ children, className }: WalletDropdownReact) {
         pressable.default,
         color.foreground,
         'absolute right-0 z-10 mt-1 flex w-max min-w-[300px] cursor-default flex-col overflow-hidden rounded-xl',
-        (isClosing || !isOpen)
+        isClosing || !isOpen
           ? 'animate-walletContainerOut'
           : 'animate-walletContainerIn',
         className,
diff --git a/src/wallet/components/WalletProvider.test.tsx b/src/wallet/components/WalletProvider.test.tsx
index 4f89fc591f..a52c12033f 100644
--- a/src/wallet/components/WalletProvider.test.tsx
+++ b/src/wallet/components/WalletProvider.test.tsx
@@ -18,7 +18,7 @@ describe('useWalletContext', () => {
         <WalletProvider>
           <div />
         </WalletProvider>
-      </WagmiProvider>
+      </WagmiProvider>,
     );
 
     const { result } = renderHook(() => useWalletContext(), {