import { AbstractConnector } from '@web3-react/abstract-connector' import { useState, useMemo } from 'react' import Close from '../../assets/svg/close.svg' import { text, useTheme } from '../..' import { Anchor, SubHeader, Body } from '../../atoms' import { useWeb3ConnectorsCtx } from '../../providers/web3Connectors' import { stakingTermsUrl } from '../../constants' import { buildWalletOptionsMobile, buildWalletOptionsWeb, } from './walletConnectorOptions' type Props = { onSelect?: () => void onClose?: () => void mobile?: boolean } export const ConnectWeb3Options = ({ onSelect, onClose, mobile }: Props) => { const theme = useTheme() const [selectedIdx, setSelectedIdx] = useState(null) const { connectors, handleConnect } = useWeb3ConnectorsCtx() const walletOptions = useMemo( () => mobile ? buildWalletOptionsMobile(connectors) : buildWalletOptionsWeb(connectors), [connectors, mobile], ) const _select = (connector: AbstractConnector, idx: number) => { setSelectedIdx(idx) handleConnect(connector) onSelect && onSelect() } return (

Connect Wallet

{walletOptions.map((o, i) => ( _select(o.connector, i)} /> ))}

By connecting, you accept the{' '} Terms of Service for using the Roll protocol

) } type OptionProps = { title: string logo: JSX.Element active?: boolean onClick?: () => void } const ConnectWalletOption = ({ title, logo, active, onClick }: OptionProps) => { const theme = useTheme() return (

{title} {logo}

) }