From 0a0df5d10f95c5683efa2aa537dc497e4747c267 Mon Sep 17 00:00:00 2001
From: Hayden Shively <17186559+haydenshively@users.noreply.github.com>
Date: Wed, 5 Jun 2024 20:05:34 -0500
Subject: [PATCH] Require accepting terms before connecting Smart Wallet

---
 .../components/navbar/ConnectWalletButton.tsx | 204 ++++++++++--------
 .../components/navbar/CreateWalletButton.tsx  |  20 +-
 shared/src/components/navbar/NavBar.tsx       |  15 +-
 3 files changed, 128 insertions(+), 111 deletions(-)

diff --git a/shared/src/components/navbar/ConnectWalletButton.tsx b/shared/src/components/navbar/ConnectWalletButton.tsx
index 67452ba7..36d544b4 100644
--- a/shared/src/components/navbar/ConnectWalletButton.tsx
+++ b/shared/src/components/navbar/ConnectWalletButton.tsx
@@ -1,4 +1,4 @@
-import { useMemo, useState } from 'react';
+import { useCallback, useMemo, useState } from 'react';
 
 import { FilledStylizedButton, OutlinedGradientButton } from '../common/Buttons';
 import { Text } from '../common/Typography';
@@ -8,6 +8,7 @@ import { useChainId, useConnect } from 'wagmi';
 
 import Modal, { MODAL_BLACK_TEXT_COLOR } from '../common/Modal';
 import { GREY_700 } from '../../data/constants/Colors';
+import { BlueCreateWalletButton } from './CreateWalletButton';
 
 const Container = styled.div.attrs((props: { fillWidth: boolean }) => props)`
   width: ${(props) => (props.fillWidth ? '100%' : 'max-content')};
@@ -29,12 +30,19 @@ export default function ConnectWalletButton(props: ConnectWalletButtonProps) {
   const [acceptedTerms, setAcceptedTerms] = useState(false);
 
   // MARK: component state
-  const [walletModalOpen, setWalletModalOpen] = useState<boolean>(false);
+  const [walletModalOpen, setWalletModalOpen] = useState<false | 'create' | 'connect'>(false);
 
   // MARK: wagmi hooks
   const { connect, connectors, error } = useConnect();
   const targetChainId = useChainId();
 
+  const createWallet = useCallback(() => {
+    const coinbaseWalletConnector = connectors.find((connector) => connector.id === 'coinbaseWalletSDK');
+    if (coinbaseWalletConnector) {
+      connect({ connector: coinbaseWalletConnector, chainId: targetChainId });
+    }
+  }, [connectors, connect, targetChainId]);
+
   const orderedFilteredConnectors = useMemo(() => {
     let hasNamedInjectedConnector = false;
     let idxPlainInjectedConnector = -1;
@@ -79,97 +87,115 @@ export default function ConnectWalletButton(props: ConnectWalletButtonProps) {
   const acknowledgedAllCheckboxes = acknowledgedCheckboxes.every((acknowledged) => acknowledged);
 
   return (
-    <Container fillWidth={fillWidth}>
-      <OutlinedGradientButton
+    <>
+      <BlueCreateWalletButton
+        shouldShortenText={props.shouldShortenText}
         onClick={() => {
-          setWalletModalOpen(true);
+          if (acceptedTerms) {
+            createWallet();
+            return;
+          }
+          setWalletModalOpen('create');
         }}
-        size='M'
-        fillWidth={fillWidth}
-        disabled={disabled}
-        className='connect-wallet-button'
-      >
-        {props.shouldShortenText ? 'Connect' : 'Connect Wallet'}
-      </OutlinedGradientButton>
-      <Modal isOpen={walletModalOpen} setIsOpen={setWalletModalOpen} title={'Connect Wallet'}>
-        {acceptedTerms ? (
-          <div className='w-full'>
-            <div>
-              {orderedFilteredConnectors.map((connector) => (
-                <div key={connector.uid} className='py-2 w-full flex flex-row gap-4 items-center justify-between'>
-                  {connector.icon !== undefined ? (
-                    <img width={40} height={40} src={connector.icon} alt={`${connector.icon} icon`} />
-                  ) : (
-                    getIconForWagmiConnectorNamed(connector.name)
-                  )}
-                  <FilledStylizedButton
-                    name='Connect'
-                    size='M'
-                    backgroundColor={GREY_700}
-                    color={'rgba(255, 255, 255, 1)'}
-                    fillWidth={true}
-                    onClick={() => {
-                      // Manually close the modal when the connector is connecting
-                      // This indicates the connector's modal/popup is or will soon be open
-                      connector.emitter.once('connect', () => setWalletModalOpen(false));
-                      connect({ connector, chainId: targetChainId });
-
-                      if (connector.id === 'walletConnect') setWalletModalOpen(false);
-                    }}
-                  >
-                    {connector.name}
-                  </FilledStylizedButton>
-                </div>
-              ))}
-            </div>
-            {error && (
-              <Text size='S' color='rgb(236, 45, 91)'>
-                {error?.message ?? 'Failed to connect'}
-              </Text>
-            )}
-          </div>
-        ) : (
-          <div>
-            <div className='flex flex-col gap-2'>
-              <Text size='M' weight='regular' color='hsla(205, 47%, 87%, 1)' className='mb-4'>
-                At Aloe Labs, we believe everyone should be able to use financial services free of censorship. But
-                running a site like this makes some data collection inevitable, and the US Government feels differently
-                about financial access and surveillance.{' '}
-                <strong>As such, we have to ask you to confirm the following:</strong>
-              </Text>
-              {checkboxes?.map((checkbox, index) => (
-                <label className='flex items-start gap-2' key={index}>
-                  <div className='mt-1'>
-                    <input
-                      type='checkbox'
-                      checked={acknowledgedCheckboxes[index]}
-                      onChange={() => {
-                        const newAcknowledgedCheckboxes = [...acknowledgedCheckboxes];
-                        newAcknowledgedCheckboxes[index] = !newAcknowledgedCheckboxes[index];
-                        setAcknowledgedCheckboxes(newAcknowledgedCheckboxes);
+      />
+      <Container fillWidth={fillWidth}>
+        <OutlinedGradientButton
+          onClick={() => setWalletModalOpen('connect')}
+          size='M'
+          fillWidth={fillWidth}
+          disabled={disabled}
+          className='connect-wallet-button'
+        >
+          {props.shouldShortenText ? 'Connect' : 'Connect Wallet'}
+        </OutlinedGradientButton>
+        <Modal
+          isOpen={walletModalOpen !== false}
+          setIsOpen={(open) => setWalletModalOpen(open ? 'connect' : false)}
+          title={'Connect Wallet'}
+        >
+          {acceptedTerms ? (
+            <div className='w-full'>
+              <div>
+                {orderedFilteredConnectors.map((connector) => (
+                  <div key={connector.uid} className='py-2 w-full flex flex-row gap-4 items-center justify-between'>
+                    {connector.icon !== undefined ? (
+                      <img width={40} height={40} src={connector.icon} alt={`${connector.icon} icon`} />
+                    ) : (
+                      getIconForWagmiConnectorNamed(connector.name)
+                    )}
+                    <FilledStylizedButton
+                      name='Connect'
+                      size='M'
+                      backgroundColor={GREY_700}
+                      color={'rgba(255, 255, 255, 1)'}
+                      fillWidth={true}
+                      onClick={() => {
+                        // Manually close the modal when the connector is connecting
+                        // This indicates the connector's modal/popup is or will soon be open
+                        connector.emitter.once('connect', () => setWalletModalOpen(false));
+                        connect({ connector, chainId: targetChainId });
+
+                        if (connector.id === 'walletConnect') setWalletModalOpen(false);
                       }}
-                      className='w-4 h-4'
-                    />
+                    >
+                      {connector.name}
+                    </FilledStylizedButton>
                   </div>
-                  {checkbox}
-                </label>
-              ))}
+                ))}
+              </div>
+              {error && (
+                <Text size='S' color='rgb(236, 45, 91)'>
+                  {error?.message ?? 'Failed to connect'}
+                </Text>
+              )}
+            </div>
+          ) : (
+            <div>
+              <div className='flex flex-col gap-2'>
+                <Text size='M' weight='regular' color='hsla(205, 47%, 87%, 1)' className='mb-4'>
+                  At Aloe Labs, we believe everyone should be able to use financial services free of censorship. But
+                  running a site like this makes some data collection inevitable, and the US Government feels
+                  differently about financial access and surveillance.{' '}
+                  <strong>As such, we have to ask you to confirm the following:</strong>
+                </Text>
+                {checkboxes?.map((checkbox, index) => (
+                  <label className='flex items-start gap-2' key={index}>
+                    <div className='mt-1'>
+                      <input
+                        type='checkbox'
+                        checked={acknowledgedCheckboxes[index]}
+                        onChange={() => {
+                          const newAcknowledgedCheckboxes = [...acknowledgedCheckboxes];
+                          newAcknowledgedCheckboxes[index] = !newAcknowledgedCheckboxes[index];
+                          setAcknowledgedCheckboxes(newAcknowledgedCheckboxes);
+                        }}
+                        className='w-4 h-4'
+                      />
+                    </div>
+                    {checkbox}
+                  </label>
+                ))}
+              </div>
+              <FilledStylizedButton
+                size='M'
+                fillWidth={false}
+                color={MODAL_BLACK_TEXT_COLOR}
+                className='mt-8'
+                disabled={!acknowledgedAllCheckboxes}
+                onClick={() => {
+                  setAcceptedTerms(true);
+                  if (walletModalOpen === 'create') {
+                    setWalletModalOpen(false);
+                    createWallet();
+                  }
+                }}
+              >
+                Accept and Continue
+              </FilledStylizedButton>
             </div>
-            <FilledStylizedButton
-              size='M'
-              fillWidth={false}
-              color={MODAL_BLACK_TEXT_COLOR}
-              className='mt-8'
-              disabled={!acknowledgedAllCheckboxes}
-              onClick={() => {
-                setAcceptedTerms(true);
-              }}
-            >
-              Accept and Continue
-            </FilledStylizedButton>
-          </div>
-        )}
-      </Modal>
-    </Container>
+          )}
+        </Modal>
+      </Container>
+    </>
   );
 }
diff --git a/shared/src/components/navbar/CreateWalletButton.tsx b/shared/src/components/navbar/CreateWalletButton.tsx
index c3a8d8bc..78878e26 100644
--- a/shared/src/components/navbar/CreateWalletButton.tsx
+++ b/shared/src/components/navbar/CreateWalletButton.tsx
@@ -1,6 +1,4 @@
-import { useCallback } from 'react';
 import styled from 'styled-components';
-import { useConnect } from 'wagmi';
 import { RESPONSIVE_BREAKPOINTS } from '../../data/constants/Breakpoints';
 
 export function CoinbaseWalletLogo({ size = 26 }) {
@@ -39,17 +37,15 @@ const StyledButton = styled.button`
   }
 `;
 
-export function BlueCreateWalletButton({ shouldShortenText }: { shouldShortenText: boolean }) {
-  const { connectors, connect } = useConnect();
-
-  const createWallet = useCallback(() => {
-    const coinbaseWalletConnector = connectors.find((connector) => connector.id === 'coinbaseWalletSDK');
-    if (coinbaseWalletConnector) {
-      connect({ connector: coinbaseWalletConnector });
-    }
-  }, [connectors, connect]);
+export function BlueCreateWalletButton({
+  shouldShortenText,
+  onClick,
+}: {
+  shouldShortenText: boolean;
+  onClick: () => void;
+}) {
   return (
-    <StyledButton onClick={createWallet}>
+    <StyledButton onClick={onClick}>
       <CoinbaseWalletLogo size={18} />
       {shouldShortenText ? 'Create' : 'Create Wallet'}
     </StyledButton>
diff --git a/shared/src/components/navbar/NavBar.tsx b/shared/src/components/navbar/NavBar.tsx
index 954211db..37f7f756 100644
--- a/shared/src/components/navbar/NavBar.tsx
+++ b/shared/src/components/navbar/NavBar.tsx
@@ -26,8 +26,6 @@ import { TERMS_OF_SERVICE_URL } from '../../data/constants/Values';
 import { OutlinedGradientRoundedButton } from '../common/Buttons';
 import { GNFormat } from '../../data/GoodNumber';
 import { useLeaderboardValue } from '../../hooks/UseLeaderboard';
-import { BlueCreateWalletButton } from './CreateWalletButton';
-import { isDevelopment } from '../../util/Utils';
 
 const DesktopLogo = styled(AloeDesktopLogo)`
   width: 100px;
@@ -319,14 +317,11 @@ export function NavBar(props: NavBarProps) {
             </OutlinedGradientRoundedButton>
           )}
           {!account.isConnected ? (
-            <>
-              {isDevelopment() && <BlueCreateWalletButton shouldShortenText={shouldShortedWalletButtonsText} />}
-              <ConnectWalletButton
-                shouldShortenText={shouldShortedWalletButtonsText}
-                checkboxes={checkboxes}
-                disabled={!isAllowedToInteract}
-              />
-            </>
+            <ConnectWalletButton
+              shouldShortenText={shouldShortedWalletButtonsText}
+              checkboxes={checkboxes}
+              disabled={!isAllowedToInteract}
+            />
           ) : (
             <AccountInfo account={account} closeChainSelector={() => setIsSelectChainDropdownOpen(false)} />
           )}