Connect buttons

apps/dapp/src/components/Pages/Core/DappPages/Legacy/UnstakeOGT.tsx

@@ -8,8 +8,11 @@ import { formatBigNumber, formatTemple, getBigNumberFromString } from 'component
 import { ZERO } from 'utils/bigNumber';
 import { useStaking } from 'providers/StakingProvider';
 import { BigNumber } from 'ethers';
+import { useConnectWallet } from '@web3-onboard/react';
+import { TradeButton } from '../../NewUI/Home';
 
 export const UnstakeOGT = () => {
+  const [{}, connect] = useConnectWallet();
   const { wallet, signer, balance, updateBalance } = useWallet();
   const [_, refreshWallet] = useRefreshWalletState();
   const [unstakeAmount, setUnstakeAmount] = useState<string>('');
@@ -54,14 +57,24 @@ export const UnstakeOGT = () => {
       {lockedEntries.length > 0 ? (
         <>
           <TopSubtitle>You can claim locked OGTemple from the Opening Ceremony:</TopSubtitle>
-          <ClaimButton
-            isSmall
-            onClick={() => handleUnlockOGT()}
-            disabled={Date.now() < lockedEntries[0].lockedUntilTimestamp}
-          >
-            Claim {formatTemple(lockedEntries.reduce((sum, cur) => sum.add(cur.balanceOGTemple), BigNumber.from('0')))}{' '}
-            OGTemple
-          </ClaimButton>
+          {!wallet ? (
+            <TradeButton
+              label={`Connect`}
+              onClick={() => {
+                connect();
+              }}
+            />
+          ) : (
+            <TradeButton
+              isSmall
+              onClick={() => handleUnlockOGT()}
+              disabled={Date.now() < lockedEntries[0].lockedUntilTimestamp}
+            >
+              Claim{' '}
+              {formatTemple(lockedEntries.reduce((sum, cur) => sum.add(cur.balanceOGTemple), BigNumber.from('0')))}{' '}
+              OGTemple
+            </TradeButton>
+          )}
           <Subtitle>
             {lockedEntries.length > 1 && (
               <span>
@@ -80,9 +93,18 @@ export const UnstakeOGT = () => {
             TEMPLE.
           </Subtitle>
           <ButtonContainer>
-            <ClaimButton disabled={buttonIsDisabled} onClick={() => unstake(unstakeAmount)}>
-              Unstake OGTEMPLE
-            </ClaimButton>
+            {!wallet ? (
+              <TradeButton
+                label={`Connect`}
+                onClick={() => {
+                  connect();
+                }}
+              />
+            ) : (
+              <TradeButton disabled={buttonIsDisabled} onClick={() => unstake(unstakeAmount)}>
+                Unstake OGTEMPLE
+              </TradeButton>
+            )}
           </ButtonContainer>
         </>
       )}

apps/dapp/src/components/Pages/Core/NewUI/TradeNew.tsx

@@ -13,6 +13,7 @@ import { useEffect } from 'react';
 import { useNotification } from 'providers/NotificationProvider';
 import { TransactionPreviewModal } from 'components/TransactionSettingsModal/TransactionPreviewModal';
 import { tabletAndAbove } from 'styles/breakpoints';
+import { useConnectWallet } from '@web3-onboard/react';
 
 export const Trade = () => {
   const {
@@ -25,6 +26,7 @@ export const Trade = () => {
     handleTransaction,
   } = useSwapController();
 
+  const [{ wallet }, connect] = useConnectWallet();
   const [isPreviewModalOpen, setIsPreviewModalOpen] = useState(false);
   const [isSlippageModalOpen, setIsSlippageModalOpen] = useState(false);
 
@@ -98,11 +100,20 @@ export const Trade = () => {
           <AdvancedSettingsButton onClick={() => setIsSlippageModalOpen(true)}>
             Advanced Settings
           </AdvancedSettingsButton>
-          <TradeButton
-            disabled={!state.quote || state.quote.returnAmount.lte(0)}
-            label="Preview"
-            onClick={() => setIsPreviewModalOpen(true)}
-          />
+          {!wallet ? (
+            <TradeButton
+              label={`Connect`}
+              onClick={() => {
+                connect();
+              }}
+            />
+          ) : (
+            <TradeButton
+              disabled={!state.quote || state.quote.returnAmount.lte(0)}
+              label="Preview"
+              onClick={() => setIsPreviewModalOpen(true)}
+            />
+          )}
         </ButtonContainer>
       </SwapContainer>
     </TradeContainer>

apps/dapp/src/providers/WalletProvider.tsx

@@ -66,6 +66,8 @@ export const WalletProvider = (props: PropsWithChildren<object>) => {
       } else {
         setWalletAddress(undefined);
       }
+    } else {
+      setWalletAddress(undefined);
     }
   }, [wallet, connecting]);