Merge pull request #8 from doinel1a/chore/optimizations-2025-03-02

chore/optimizations 2025 03 02

Author: doinel1a

package.json

@@ -35,6 +35,7 @@
     "@t3-oss/env-nextjs": "^0.12.0",
     "@tanstack/react-query": "^5.66.11",
     "@vercel/analytics": "^1.5.0",
+    "burner-connector": "^0.0.11",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "framer-motion": "^12.4.7",

pnpm-lock.yaml

@@ -18,7 +18,7 @@ export default function Counter() {
         <Button
           className='w-10 rounded-full'
           data-testid='increase-count'
-          onClick={() => setCount((previousCount) => previousCount + 1)}
+          onPress={() => setCount((previousCount) => previousCount + 1)}
         >
           + 1
         </Button>
@@ -30,7 +30,7 @@ export default function Counter() {
         <Button
           className='w-10 rounded-full'
           data-testid='decrease-count'
-          onClick={() => setCount((previousCount) => previousCount - 1)}
+          onPress={() => setCount((previousCount) => previousCount - 1)}
         >
           - 1
         </Button>

src/components/counter.tsx

@@ -1,12 +1,20 @@
 'use client';
 
-import React from 'react';
+import React, { useMemo } from 'react';
 
 import type { PropsWithChildren } from 'react';
 
-import { getDefaultConfig, getDefaultWallets, RainbowKitProvider } from '@rainbow-me/rainbowkit';
-import { argentWallet, ledgerWallet, trustWallet } from '@rainbow-me/rainbowkit/wallets';
+import {
+  darkTheme,
+  getDefaultConfig,
+  getDefaultWallets,
+  lightTheme,
+  RainbowKitProvider
+} from '@rainbow-me/rainbowkit';
+import { ledgerWallet, trustWallet } from '@rainbow-me/rainbowkit/wallets';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { rainbowkitBurnerWallet } from 'burner-connector';
+import { useTheme } from 'next-themes';
 import { WagmiProvider } from 'wagmi';
 import { mainnet, sepolia } from 'wagmi/chains';
 
@@ -21,7 +29,7 @@ const wagmiConfig = getDefaultConfig({
     ...defaultWallets,
     {
       groupName: 'More',
-      wallets: [argentWallet, trustWallet, ledgerWallet]
+      wallets: [trustWallet, ledgerWallet, rainbowkitBurnerWallet]
     }
   ],
   chains: [mainnet, sepolia],
@@ -33,10 +41,21 @@ const queryClient = new QueryClient();
 type TWeb3Provider = PropsWithChildren;
 
 export default function Web3Provider({ children }: TWeb3Provider) {
+  const { resolvedTheme } = useTheme();
+  const isDarkTheme = useMemo(() => resolvedTheme === 'dark', [resolvedTheme]);
+
   return (
     <WagmiProvider config={wagmiConfig}>
       <QueryClientProvider client={queryClient}>
-        <RainbowKitProvider>{children}</RainbowKitProvider>
+        <RainbowKitProvider
+          theme={
+            isDarkTheme
+              ? darkTheme({ borderRadius: 'small' })
+              : lightTheme({ borderRadius: 'small' })
+          }
+        >
+          {children}
+        </RainbowKitProvider>
       </QueryClientProvider>
     </WagmiProvider>
   );

src/components/providers/web3.tsx

@@ -34,7 +34,7 @@ export default function ChainsList({
             <Button
               color='secondary'
               className='w-full items-center justify-start'
-              onClick={() => onSwitchChain(chain.id)}
+              onPress={() => onSwitchChain(chain.id)}
             >
               {chain.name}
             </Button>

src/components/switch-chain/chains-list.tsx

@@ -26,7 +26,7 @@ export default function ThemeToggle() {
           data-testid='theme-toggle'
           variant='bordered'
           isIconOnly
-          onClick={() => setIsDropdownOpen((previousState) => !previousState)}
+          onPress={() => setIsDropdownOpen((previousState) => !previousState)}
         >
           <Sun className='h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0' />
           <MoonStar className='absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100' />

src/components/ui/theme-toggle.tsx

@@ -16,14 +16,18 @@ type TENSName = {
 };
 
 export default function ENSName({ address }: TENSName) {
-  const { isFetching, data: ensName } = useEnsName({
+  const {
+    isFetching,
+    isFetched,
+    data: ensName
+  } = useEnsName({
     chainId: mainnet.id,
     address: address
   });
 
   return (
     <DropdownMenuLabel>
-      <Label property='ENS' value={ensName ?? 'N / A'} isLoading={isFetching && !ensName} />
+      <Label property='ENS' value={ensName ?? 'N / A'} isLoading={isFetching && !isFetched} />
     </DropdownMenuLabel>
   );
 }

src/components/wallet/dropdown/details/ens-name.tsx

@@ -58,7 +58,7 @@ export default function WalletDropdown() {
 
   const { address } = useAccount();
   const displayAddress = useMemo(
-    () => `${address?.slice(0, 8)}...${address?.slice(-8)}`,
+    () => `${address?.slice(0, 6)}...${address?.slice(-6)}`,
     [address]
   );
 
@@ -72,7 +72,8 @@ export default function WalletDropdown() {
         <Button
           ref={dropdownTriggerReference}
           color='default'
-          onClick={() => setIsDropdownOpen((previousState) => !previousState)}
+          className='w-32'
+          onPress={() => setIsDropdownOpen((previousState) => !previousState)}
         >
           {displayAddress}
         </Button>

src/components/wallet/dropdown/index.tsx

@@ -7,6 +7,7 @@ import React from 'react';
 import type { ComponentProps } from 'react';
 
 import { Button } from '@heroui/button';
+import { Skeleton } from '@heroui/skeleton';
 import { useConnectModal } from '@rainbow-me/rainbowkit';
 import { useAccount } from 'wagmi';
 
@@ -17,16 +18,20 @@ import WalletDropdown from './dropdown';
 type TWallet = ComponentProps<'button'>;
 
 export default function Wallet({ className }: TWallet) {
-  const { isConnected } = useAccount();
+  const { isConnected, isDisconnected } = useAccount();
   const { openConnectModal } = useConnectModal();
 
   if (isConnected) {
     return <WalletDropdown />;
   }
 
-  return (
-    <Button color='primary' className={cn(className)} onClick={openConnectModal}>
-      Connect Wallet
-    </Button>
-  );
+  if (isDisconnected) {
+    return (
+      <Button color='primary' className={cn('w-32', className)} onPress={openConnectModal}>
+        Connect Wallet
+      </Button>
+    );
+  }
+
+  return <Skeleton className='h-10 w-32 rounded-md' />;
 }