akiraonstarknet · akiraonstarknet · Oct 10, 2025 · Oct 9, 2025
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,7 +1,9 @@
+import React from 'react';
 import { GoogleAnalytics } from '@next/third-parties/google';
 import { Analytics } from '@vercel/analytics/react';
 import type { Metadata } from 'next';
-import React from 'react';
+
+import Providers from '@/components/Providers';
 
 import './globals.css';
 
@@ -59,7 +61,7 @@ export default function RootLayout({
         />
       </head>
       <body style={{ background: 'black' }}>
-        {children}
+        <Providers>{children}</Providers>
         <Analytics />
       </body>
       <GoogleAnalytics gaId="G-K05JV94KM9" />

diff --git a/src/app/strategy/[strategyId]/_components/Strategy.tsx b/src/app/strategy/[strategyId]/_components/Strategy.tsx
@@ -27,6 +27,7 @@ import {
 import { atom, useAtomValue, useSetAtom } from 'jotai';
 import mixpanel from 'mixpanel-browser';
 import { useRouter, useSearchParams } from 'next/navigation';
+import NextLink from 'next/link';
 import { useCallback, useEffect, useMemo, useState } from 'react';
 
 import { APYInfo } from '@/components/APYInfo';
@@ -417,7 +418,7 @@ const Strategy = ({ params }: StrategyParams) => {
         gap={'48px'}
       >
         <Box>
-          <Link href="/?tab=strategies">
+          <Link as={NextLink} href="/?tab=strategies">
             <Button
               bg={'mycard_light'}
               color={'text_primary'}

diff --git a/src/components/ConnectButton.tsx b/src/components/ConnectButton.tsx
@@ -0,0 +1,137 @@
+import {
+  useAccount,
+  useConnect,
+  useDisconnect,
+  useStarkProfile,
+} from '@starknet-react/core';
+import { StarknetkitConnector, useStarknetkitConnectModal } from 'starknetkit';
+import {
+  Box,
+  Button,
+  Center,
+  Image,
+  Menu,
+  MenuButton,
+  MenuItem,
+  MenuList,
+  Text,
+} from '@chakra-ui/react';
+import { ChevronDownIcon, EmailIcon } from '@chakra-ui/icons';
+
+import argentMobile from '@/assets/argentMobile.svg';
+
+import { useIsMobile } from '@/hooks/use-mobile';
+import {
+  MyMenuItemProps,
+  MyMenuListProps,
+  shortAddress,
+  truncate,
+} from '@/utils';
+
+const walletIconMap: Record<string, any> = {
+  argentMobile,
+  argentWebWallet: EmailIcon,
+};
+
+const getWalletIcon = (walletId: string) => {
+  return walletIconMap[walletId];
+};
+
+const ConnectButton = () => {
+  const { connectAsync, connectors } = useConnect();
+  const { address, isConnected, connector } = useAccount();
+  const { disconnect } = useDisconnect();
+
+  const { data: starkProfile } = useStarkProfile({ address });
+
+  const { starknetkitConnectModal } = useStarknetkitConnectModal({
+    connectors: connectors as StarknetkitConnector[],
+    modalTheme: 'dark',
+    modalMode: 'alwaysAsk',
+    dappName: 'Troves',
+  });
+
+  const isMobile = useIsMobile();
+
+  async function connectWallet() {
+    if (isConnected) return;
+
+    const { connector } = await starknetkitConnectModal();
+    if (!connector) {
+      // or throw error
+      return;
+    }
+    await connectAsync({ connector });
+  }
+
+  return (
+    <>
+      <Box display={'flex'} alignItems={'center'}>
+        <Menu>
+          <MenuButton
+            as={Button}
+            rightIcon={address ? <ChevronDownIcon /> : <></>}
+            iconSpacing={{ base: '1px', sm: '5px' }}
+            background="connect_button_gradient"
+            color={'black'}
+            borderRadius={'8px'}
+            display={{ base: 'flex' }}
+            height={{ base: '2rem', sm: '2.5rem' }}
+            my={{ base: 'auto', sm: 'initial' }}
+            paddingX={{ base: '0.75rem', sm: '1rem' }}
+            fontSize={{ base: '0.8rem', sm: '0.8rem' }}
+            fontWeight={'bold'}
+            _hover={{
+              background: 'purple_hover_2',
+            }}
+            _active={{
+              bg: 'purple_hover_2',
+            }}
+            onClick={() => {
+              connectWallet();
+            }}
+          >
+            <Center>
+              {isConnected ? (
+                <Center display="flex" alignItems="center" gap=".5rem">
+                  <Image
+                    src={
+                      starkProfile?.profilePicture ||
+                      connector?.id === 'argentMobile'
+                        ? getWalletIcon(connector?.id ?? '')?.src ||
+                          connector?.icon.toString() ||
+                          '/fallback-profile-icon.jpeg'
+                        : '/fallback-profile-icon.jpeg'
+                    }
+                    alt="pfp"
+                    width={{ base: '20px', sm: '22px' }}
+                    height={{ base: '20px', sm: '22px' }}
+                    rounded="full"
+                    background={'mybg'}
+                    padding={'3px'}
+                  />{' '}
+                  <Text as="h3" marginTop={'3px !important'}>
+                    {starkProfile && starkProfile.name
+                      ? truncate(starkProfile.name, 6, isMobile ? 0 : 6)
+                      : shortAddress(address!, 4, isMobile ? 0 : 4)}
+                  </Text>
+                </Center>
+              ) : (
+                'Connect wallet'
+              )}
+            </Center>
+          </MenuButton>
+          <MenuList {...MyMenuListProps}>
+            {isConnected && (
+              <MenuItem {...MyMenuItemProps} onClick={() => disconnect()}>
+                Disconnect
+              </MenuItem>
+            )}
+          </MenuList>
+        </Menu>
+      </Box>
+    </>
+  );
+};
+
+export { ConnectButton };