Skip to content

Commit

Permalink
Require accepting terms before connecting Smart Wallet
Browse files Browse the repository at this point in the history
  • Loading branch information
@haydenshively
haydenshively committed Jun 6, 2024
1 parent f25901e commit 0a0df5d
Show file tree
Hide file tree
Showing 3 changed files with 128 additions and 111 deletions.
204 changes: 115 additions & 89 deletions shared/src/components/navbar/ConnectWalletButton.tsx
View file
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -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')};
Expand All @@ -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;
Expand Down Expand Up @@ -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>
</>
);
}
20 changes: 8 additions & 12 deletions shared/src/components/navbar/CreateWalletButton.tsx
View file
Original file line number Diff line number Diff line change
@@ -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 }) {
Expand Down Expand Up @@ -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>
Expand Down
15 changes: 5 additions & 10 deletions shared/src/components/navbar/NavBar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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)} />
)}
Expand Down

0 comments on commit 0a0df5d

Please sign in to comment.