connect wallet button to seperate componenet and secondary connect wallet button styling
This commit is contained in:
saml33
parent
64f9c44224
commit
f6938720be
|
|
@ -0,0 +1,44 @@
|
|||
import styled from '@emotion/styled'
|
||||
import useMangoStore from '../stores/useMangoStore'
|
||||
import { WALLET_PROVIDERS, DEFAULT_PROVIDER } from '../hooks/useWallet'
|
||||
import useLocalStorageState from '../hooks/useLocalStorageState'
|
||||
import WalletSelect from './WalletSelect'
|
||||
import { WalletIcon } from './icons'
|
||||
|
||||
const StyledWalletTypeLabel = styled.div`
|
||||
font-size: 0.6rem;
|
||||
`
|
||||
|
||||
const ConnectWalletButton = () => {
|
||||
const wallet = useMangoStore((s) => s.wallet.current)
|
||||
const [savedProviderUrl] = useLocalStorageState(
|
||||
'walletProvider',
|
||||
DEFAULT_PROVIDER.url
|
||||
)
|
||||
|
||||
return (
|
||||
<div className="flex justify-between border border-th-primary rounded-md h-11 w-48">
|
||||
<button
|
||||
onClick={() => wallet.connect()}
|
||||
className="text-th-primary hover:text-th-fgd-1 focus:outline-none"
|
||||
>
|
||||
<div className="flex flex-row items-center px-2 justify-center h-full rounded-l default-transition hover:bg-th-primary hover:text-th-fgd-1">
|
||||
<WalletIcon className="w-5 h-5 mr-3 fill-current" />
|
||||
<div>
|
||||
<span className="whitespace-nowrap">Connect Wallet</span>
|
||||
<StyledWalletTypeLabel className="font-normal text-th-fgd-1 text-left leading-3">
|
||||
{WALLET_PROVIDERS.filter((p) => p.url === savedProviderUrl).map(
|
||||
({ name }) => name
|
||||
)}
|
||||
</StyledWalletTypeLabel>
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
<div className="relative h-full">
|
||||
<WalletSelect isPrimary />
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default ConnectWalletButton
|
||||
|
|
@ -14,10 +14,8 @@ import ThemeSwitch from './ThemeSwitch'
|
|||
import { WalletIcon } from './icons'
|
||||
import UiLock from './UiLock'
|
||||
import { useRouter } from 'next/router'
|
||||
import WalletSelect from './WalletSelect'
|
||||
import useMangoStore from '../stores/useMangoStore'
|
||||
import { WALLET_PROVIDERS, DEFAULT_PROVIDER } from '../hooks/useWallet'
|
||||
import useLocalStorageState from '../hooks/useLocalStorageState'
|
||||
import ConnectWalletButton from './ConnectWalletButton'
|
||||
|
||||
const Code = styled.code`
|
||||
border: 1px solid hsla(0, 0%, 39.2%, 0.2);
|
||||
|
|
@ -26,20 +24,12 @@ const Code = styled.code`
|
|||
font-size: 13px;
|
||||
`
|
||||
|
||||
const StyledWalletTypeLabel = styled.div`
|
||||
font-size: 0.6rem;
|
||||
`
|
||||
|
||||
const TopBar = () => {
|
||||
const { asPath } = useRouter()
|
||||
const connected = useMangoStore((s) => s.wallet.connected)
|
||||
const wallet = useMangoStore((s) => s.wallet.current)
|
||||
const [showMenu, setShowMenu] = useState(false)
|
||||
const [isCopied, setIsCopied] = useState(false)
|
||||
const [savedProviderUrl] = useLocalStorageState(
|
||||
'walletProvider',
|
||||
DEFAULT_PROVIDER.url
|
||||
)
|
||||
|
||||
useEffect(() => {
|
||||
if (isCopied) {
|
||||
|
|
@ -132,31 +122,7 @@ const TopBar = () => {
|
|||
)}
|
||||
</Menu>
|
||||
) : (
|
||||
<div className="flex justify-between border border-th-primary rounded-md h-11 w-48">
|
||||
<button
|
||||
onClick={() => wallet.connect()}
|
||||
className="text-th-primary hover:text-th-fgd-1 focus:outline-none font-semibold"
|
||||
>
|
||||
<div className="flex flex-row items-center px-2 justify-center h-full rounded-l default-transition hover:bg-th-primary hover:text-th-fgd-1">
|
||||
<WalletIcon className="w-5 h-5 mr-3 fill-current" />
|
||||
<div>
|
||||
<span className="whitespace-nowrap">
|
||||
Connect Wallet
|
||||
</span>
|
||||
<StyledWalletTypeLabel className="font-normal text-th-fgd-1 text-left leading-3">
|
||||
{WALLET_PROVIDERS.filter(
|
||||
(p) => p.url === savedProviderUrl
|
||||
).map(({ name }) => name)}
|
||||
</StyledWalletTypeLabel>
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
{!connected && (
|
||||
<div className="relative h-full">
|
||||
<WalletSelect />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<ConnectWalletButton />
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -15,6 +15,8 @@ import Button from './Button'
|
|||
import TradeType from './TradeType'
|
||||
import Input from './Input'
|
||||
import Switch from './Switch'
|
||||
import { WalletIcon } from './icons'
|
||||
import WalletSelect from './WalletSelect'
|
||||
|
||||
const StyledRightInput = styled(Input)`
|
||||
border-left: 1px solid transparent;
|
||||
|
|
@ -304,14 +306,14 @@ export default function TradeForm() {
|
|||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
<div className={`flex mt-4`}>
|
||||
<div className={`flex pt-6`}>
|
||||
{ipAllowed ? (
|
||||
connected ? (
|
||||
side === 'buy' ? (
|
||||
<Button
|
||||
disabled={disabledTradeButton}
|
||||
onClick={onsubmit}
|
||||
className={`rounded text-lg ${
|
||||
className={`rounded ${
|
||||
!disabledTradeButton &&
|
||||
'border-th-green hover:border-th-green-dark'
|
||||
} text-th-green hover:text-th-fgd-1 hover:bg-th-green-dark flex-grow`}
|
||||
|
|
@ -322,7 +324,7 @@ export default function TradeForm() {
|
|||
<Button
|
||||
disabled={disabledTradeButton}
|
||||
onClick={onSubmit}
|
||||
className={`rounded text-lg ${
|
||||
className={`rounded ${
|
||||
!disabledTradeButton &&
|
||||
'border-th-red hover:border-th-red-dark'
|
||||
} text-th-red hover:text-th-fgd-1 hover:bg-th-red-dark flex-grow`}
|
||||
|
|
@ -331,12 +333,18 @@ export default function TradeForm() {
|
|||
</Button>
|
||||
)
|
||||
) : (
|
||||
<Button
|
||||
onClick={() => wallet.connect()}
|
||||
className={`rounded text-lg flex-grow`}
|
||||
>
|
||||
Connect Wallet
|
||||
</Button>
|
||||
<div className="flex justify-between border border-th-fgd-4 rounded-md w-full">
|
||||
<Button
|
||||
onClick={() => wallet.connect()}
|
||||
className={`rounded-r-none flex flex-grow items-center justify-center border-none`}
|
||||
>
|
||||
<WalletIcon className="fill-current h-4 w-4 mr-2" />
|
||||
Connect Wallet
|
||||
</Button>
|
||||
<div className="relative h-full">
|
||||
<WalletSelect />
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
) : (
|
||||
<Button disabled className="flex-grow">
|
||||
|
|
|
|||
|
|
@ -1,25 +0,0 @@
|
|||
const MangoIcon = ({ className }) => {
|
||||
return (
|
||||
<svg
|
||||
className={className}
|
||||
width="20"
|
||||
height="17"
|
||||
viewBox="0 0 20 17"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M14.625 8.24561C13.7276 8.24561 13 8.97325 13 9.87061C13 10.768 13.7276 11.4956 14.625 11.4956C15.5224 11.4956 16.25 10.768 16.25 9.87061C16.25 8.97325 15.5224 8.24561 14.625 8.24561ZM14 9.87061C14 9.52554 14.2799 9.24561 14.625 9.24561C14.9701 9.24561 15.25 9.52554 15.25 9.87061C15.25 10.2157 14.9701 10.4956 14.625 10.4956C14.2799 10.4956 14 10.2157 14 9.87061Z"
|
||||
/>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M3.25 0.25C1.59301 0.25 0.25 1.59301 0.25 3.25L0.250676 13.8083C0.250702 15.4652 1.59371 16.8083 3.25068 16.8083H17.2147C18.5735 16.8083 19.7507 15.755 19.7507 14.3708V5.37076C19.7507 4.51126 19.2968 3.77937 18.6275 3.34799C18.6257 2.86554 18.5949 2.24606 18.3863 1.7108C18.2324 1.31604 17.973 0.930835 17.5462 0.652726C17.1244 0.377893 16.6042 0.25 16 0.25H3.25ZM17.6434 4.51627C17.6217 4.50923 17.6004 4.50122 17.5796 4.4923C17.4681 4.45439 17.3457 4.43326 17.2147 4.43326H4.81318C4.39896 4.43326 4.06318 4.09747 4.06318 3.68326C4.06318 3.26904 4.39896 2.93326 4.81318 2.93326H17.1143C17.0993 2.67796 17.0651 2.45157 16.9887 2.2555C16.9238 2.08899 16.8395 1.98262 16.7273 1.90947C16.61 1.83305 16.3958 1.75 16 1.75H3.25C2.42146 1.75 1.75003 2.42141 1.75 3.24995L1.75068 13.8082C1.75068 14.6368 2.42212 15.3083 3.25068 15.3083H17.2147C17.8262 15.3083 18.2507 14.8477 18.2507 14.3708V5.37076C18.2507 5.01586 18.0156 4.67002 17.6434 4.51627Z"
|
||||
/>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
export default MangoIcon
|
||||
|
|
@ -8,7 +8,7 @@ import useMangoStore from '../stores/useMangoStore'
|
|||
import { WALLET_PROVIDERS, DEFAULT_PROVIDER } from '../hooks/useWallet'
|
||||
import useLocalStorageState from '../hooks/useLocalStorageState'
|
||||
|
||||
export default function WalletSelect() {
|
||||
export default function WalletSelect({ isPrimary }) {
|
||||
const setMangoStore = useMangoStore((s) => s.set)
|
||||
const [savedProviderUrl] = useLocalStorageState(
|
||||
'walletProvider',
|
||||
|
|
@ -25,7 +25,13 @@ export default function WalletSelect() {
|
|||
<Menu>
|
||||
{({ open }) => (
|
||||
<>
|
||||
<Menu.Button className="px-3 flex justify-center items-center h-full rounded-r focus:outline-none text-th-primary hover:text-th-fgd-1 hover:bg-th-primary cursor-pointer">
|
||||
<Menu.Button
|
||||
className={`flex justify-center items-center h-full rounded-r focus:outline-none text-th-primary hover:text-th-fgd-1 ${
|
||||
isPrimary
|
||||
? 'px-3 hover:bg-th-primary'
|
||||
: 'px-2 hover:bg-th-bkg-3 border-l border-th-fgd-4'
|
||||
} cursor-pointer`}
|
||||
>
|
||||
{open ? (
|
||||
<ChevronUpIcon className="h-5 w-5" />
|
||||
) : (
|
||||
|
|
|
|||
Loading…
Reference in New Issue