implement new connect wallet button
This commit is contained in:
parent
5eaf63bfe6
commit
1c868995a1
|
@ -3,7 +3,7 @@ import styled from '@emotion/styled'
|
||||||
import tw from 'twin.macro'
|
import tw from 'twin.macro'
|
||||||
|
|
||||||
export const idleGradient =
|
export const idleGradient =
|
||||||
'bg-gradient-to-r from-secondary-2-light to-primary-light'
|
'bg-gradient-to-r from-secondary-2-light to-primary-dark'
|
||||||
export const activeGradient =
|
export const activeGradient =
|
||||||
'bg-gradient-to-bl from-secondary-1-light via-primary-dark to-secondary-2-light'
|
'bg-gradient-to-bl from-secondary-1-light via-primary-dark to-secondary-2-light'
|
||||||
|
|
||||||
|
@ -55,7 +55,7 @@ const Button: FunctionComponent<ButtonProps> = ({
|
||||||
}) => {
|
}) => {
|
||||||
return (
|
return (
|
||||||
<StyledButton
|
<StyledButton
|
||||||
className={`${className} relative z-10 px-8 py-2 rounded-full text-fgd-1 ${
|
className={`${className} relative z-10 py-2 rounded-full text-fgd-1 ${
|
||||||
gray ? 'bg-bkg-4' : idleGradient
|
gray ? 'bg-bkg-4' : idleGradient
|
||||||
}`}
|
}`}
|
||||||
gray={gray}
|
gray={gray}
|
||||||
|
|
|
@ -1,63 +1,89 @@
|
||||||
import styled from '@emotion/styled'
|
import { Menu } from '@headlessui/react'
|
||||||
import useWalletStore from '../stores/useWalletStore'
|
|
||||||
import { WALLET_PROVIDERS, DEFAULT_PROVIDER } from '../hooks/useWallet'
|
|
||||||
import useLocalStorageState from '../hooks/useLocalStorageState'
|
|
||||||
import WalletSelect from './WalletSelect'
|
|
||||||
import WalletIcon from './WalletIcon'
|
|
||||||
import { LinkIcon } from '@heroicons/react/solid'
|
import { LinkIcon } from '@heroicons/react/solid'
|
||||||
|
import useWallet, { WALLET_PROVIDERS } from '../hooks/useWallet'
|
||||||
import Button from './Button'
|
import Button from './Button'
|
||||||
|
|
||||||
const StyledWalletTypeLabel = styled.div`
|
const ChevronDownIcon = (props) => (
|
||||||
font-size: 0.6rem;
|
<svg
|
||||||
`
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
fill="none"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
stroke="currentColor"
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
strokeLinecap="round"
|
||||||
|
strokeLinejoin="round"
|
||||||
|
d="M19 9l-7 7-7-7"
|
||||||
|
></path>
|
||||||
|
</svg>
|
||||||
|
)
|
||||||
|
|
||||||
const ConnectWalletButton = () => {
|
const CheckIcon = (props) => (
|
||||||
const wallet = useWalletStore((s) => s.current)
|
<svg
|
||||||
const [savedProviderUrl] = useLocalStorageState(
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
'walletProvider',
|
fill="none"
|
||||||
DEFAULT_PROVIDER.url
|
viewBox="0 0 24 24"
|
||||||
)
|
stroke="currentColor"
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
strokeLinecap="round"
|
||||||
|
strokeLinejoin="round"
|
||||||
|
d="M5 13l4 4L19 7"
|
||||||
|
></path>
|
||||||
|
</svg>
|
||||||
|
)
|
||||||
|
|
||||||
|
const ConnectWalletButton = (props) => {
|
||||||
|
const { connected, provider, setSavedProviderUrl } = useWallet()
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="flex justify-between border border-primary-light hover:border-fgd-1 rounded-md h-11 w-48">
|
<div className="flex">
|
||||||
<button
|
<Button
|
||||||
onClick={() => wallet.connect()}
|
className={`h-9 z-30 px-8 flex items-center`}
|
||||||
disabled={!wallet}
|
gray={connected}
|
||||||
className="focus:outline-none disabled:text-fgd-4 disabled:cursor-wait"
|
{...props}
|
||||||
>
|
>
|
||||||
<div className="flex flex-row items-center px-2 justify-center h-full rounded-l default-transition text-primary-light text-sm hover:bg-primary hover:text-fgd-1">
|
<LinkIcon className="h-4 w-4 mr-2" />
|
||||||
<WalletIcon className="w-5 h-5 mr-3 fill-current" />
|
{connected ? 'Disconnect' : 'Connect Wallet'}
|
||||||
<div>
|
</Button>
|
||||||
<span className="whitespace-nowrap">Connect Wallet</span>
|
|
||||||
<StyledWalletTypeLabel className="font-normal text-fgd-1 text-left leading-3">
|
<div className="relative pl-2">
|
||||||
{WALLET_PROVIDERS.filter((p) => p.url === savedProviderUrl).map(
|
<Menu>
|
||||||
({ name }) => name
|
{({ open }) => (
|
||||||
|
<>
|
||||||
|
<Menu.Button className="cursor-pointer rounded-full h-9 w-9 py-2 px-2 bg-bkg-4 hover:bg-bkg-3 focus:outline-none">
|
||||||
|
{open ? (
|
||||||
|
<ChevronDownIcon className="w-4 h-4 m-auto stroke-3" />
|
||||||
|
) : (
|
||||||
|
<img src={provider?.icon} className="w-4 h-4 m-auto" />
|
||||||
)}
|
)}
|
||||||
</StyledWalletTypeLabel>
|
</Menu.Button>
|
||||||
</div>
|
<Menu.Items className="z-20 p-1 absolute right-0 top-12 bg-bkg-1 shadow-lg border-2 border-bkg-3 outline-none rounded-2xl">
|
||||||
</div>
|
{WALLET_PROVIDERS.map(({ name, url, icon }) => (
|
||||||
|
<Menu.Item key={name}>
|
||||||
|
<button
|
||||||
|
className="flex p-2 h-9 hover:bg-bkg-2 hover:cursor-pointer hover:rounded-2xl font-normal focus:outline-none"
|
||||||
|
onClick={() => setSavedProviderUrl(url)}
|
||||||
|
style={{ width: '14rem' }}
|
||||||
|
>
|
||||||
|
<img src={icon} className="h-4 w-4 mr-2" />
|
||||||
|
<span className="text-sm">{name}</span>
|
||||||
|
|
||||||
|
{provider?.url === url ? (
|
||||||
|
<CheckIcon className="h-4 w-4 text-green-400 stroke-3" />
|
||||||
|
) : null}
|
||||||
</button>
|
</button>
|
||||||
<div className="relative h-full">
|
</Menu.Item>
|
||||||
<WalletSelect isPrimary />
|
))}
|
||||||
|
</Menu.Items>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</Menu>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
export default ConnectWalletButton
|
export default ConnectWalletButton
|
||||||
|
|
||||||
export const ConnectWalletButtonSmall = ({ connected, ...props }) => (
|
|
||||||
<div className="relative">
|
|
||||||
<Button
|
|
||||||
className="rounded-full h-9 w-44 z-30 relative"
|
|
||||||
gray={connected}
|
|
||||||
{...props}
|
|
||||||
>
|
|
||||||
<LinkIcon className="h-4 w-4 relative top-1 mr-2" />
|
|
||||||
{connected ? 'Disconnect' : 'Connect Wallet'}
|
|
||||||
</Button>
|
|
||||||
{!connected && (
|
|
||||||
<div className="absolute animate-connect-wallet-ping bg-secondary-2-light top-0 rounded-full h-10 w-48" />
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
|
|
|
@ -7,7 +7,7 @@ import {
|
||||||
import useWalletStore from '../stores/useWalletStore'
|
import useWalletStore from '../stores/useWalletStore'
|
||||||
import Input from './Input'
|
import Input from './Input'
|
||||||
import Button from './Button'
|
import Button from './Button'
|
||||||
import { ConnectWalletButtonSmall } from './ConnectWalletButton'
|
import ConnectWalletButton from './ConnectWalletButton'
|
||||||
import PoolCountdown from './PoolCountdown'
|
import PoolCountdown from './PoolCountdown'
|
||||||
import Slider from './Slider'
|
import Slider from './Slider'
|
||||||
import Loading from './Loading'
|
import Loading from './Loading'
|
||||||
|
@ -273,12 +273,8 @@ const ContributionModal = () => {
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex justify-center">
|
<div className="flex items-center justify-center">
|
||||||
<ConnectWalletButtonSmall
|
<ConnectWalletButton onClick={handleConnectDisconnect} />
|
||||||
className="flex pl-6"
|
|
||||||
connected={connected}
|
|
||||||
onClick={handleConnectDisconnect}
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
|
|
|
@ -2,7 +2,7 @@ import { useEffect, useState } from 'react'
|
||||||
import useWalletStore from '../stores/useWalletStore'
|
import useWalletStore from '../stores/useWalletStore'
|
||||||
import Button from './Button'
|
import Button from './Button'
|
||||||
import Input from './Input'
|
import Input from './Input'
|
||||||
import { ConnectWalletButtonSmall } from './ConnectWalletButton'
|
import ConnectWalletButton from './ConnectWalletButton'
|
||||||
import Loading from './Loading'
|
import Loading from './Loading'
|
||||||
import useLargestAccounts from '../hooks/useLargestAccounts'
|
import useLargestAccounts from '../hooks/useLargestAccounts'
|
||||||
import useVaults from '../hooks/useVaults'
|
import useVaults from '../hooks/useVaults'
|
||||||
|
@ -155,11 +155,7 @@ const RedeemModal = () => {
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex justify-center">
|
<div className="flex justify-center">
|
||||||
<ConnectWalletButtonSmall
|
<ConnectWalletButton onClick={handleConnectDisconnect} />
|
||||||
className="flex pl-6"
|
|
||||||
connected={connected}
|
|
||||||
onClick={handleConnectDisconnect}
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
|
|
|
@ -1,55 +1,4 @@
|
||||||
import { useEffect, useState } from 'react'
|
|
||||||
import { Menu } from '@headlessui/react'
|
|
||||||
import styled from '@emotion/styled'
|
|
||||||
import {
|
|
||||||
ChevronUpIcon,
|
|
||||||
ChevronDownIcon,
|
|
||||||
DuplicateIcon,
|
|
||||||
LogoutIcon,
|
|
||||||
} from '@heroicons/react/outline'
|
|
||||||
import ConnectWalletButton from './ConnectWalletButton'
|
|
||||||
import WalletIcon from './WalletIcon'
|
|
||||||
import useWalletStore from '../stores/useWalletStore'
|
|
||||||
|
|
||||||
const Code = styled.code`
|
|
||||||
border: 1px solid hsla(0, 0%, 39.2%, 0.2);
|
|
||||||
border-radius: 3px;
|
|
||||||
background: hsla(0, 0%, 58.8%, 0.1);
|
|
||||||
font-size: 13px;
|
|
||||||
`
|
|
||||||
|
|
||||||
const WALLET_OPTIONS = [
|
|
||||||
{ name: 'Copy address', icon: <DuplicateIcon /> },
|
|
||||||
{ name: 'Disconnect', icon: <LogoutIcon /> },
|
|
||||||
]
|
|
||||||
|
|
||||||
const TopBar = () => {
|
const TopBar = () => {
|
||||||
const { connected, current: wallet } = useWalletStore((s) => s)
|
|
||||||
const [isCopied, setIsCopied] = useState(false)
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
if (isCopied) {
|
|
||||||
const timer = setTimeout(() => {
|
|
||||||
setIsCopied(false)
|
|
||||||
}, 2000)
|
|
||||||
return () => clearTimeout(timer)
|
|
||||||
}
|
|
||||||
}, [isCopied])
|
|
||||||
|
|
||||||
const handleWalletMenu = (option) => {
|
|
||||||
if (option === 'Copy address') {
|
|
||||||
const el = document.createElement('textarea')
|
|
||||||
el.value = wallet.publicKey.toString()
|
|
||||||
document.body.appendChild(el)
|
|
||||||
el.select()
|
|
||||||
document.execCommand('copy')
|
|
||||||
document.body.removeChild(el)
|
|
||||||
setIsCopied(true)
|
|
||||||
} else {
|
|
||||||
wallet.disconnect()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<nav className={`bg-bkg-1`}>
|
<nav className={`bg-bkg-1`}>
|
||||||
<div className={`px-4 sm:px-6 lg:px-8`}>
|
<div className={`px-4 sm:px-6 lg:px-8`}>
|
||||||
|
@ -59,54 +8,6 @@ const TopBar = () => {
|
||||||
<img className={`h-8 w-auto`} src="/logo.svg" alt="logo" />
|
<img className={`h-8 w-auto`} src="/logo.svg" alt="logo" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex">
|
|
||||||
<div className="flex items-center">
|
|
||||||
<div className="hidden sm:ml-4 sm:block">
|
|
||||||
{connected && wallet?.publicKey ? (
|
|
||||||
<Menu>
|
|
||||||
{({ open }) => (
|
|
||||||
<div className="relative">
|
|
||||||
<Menu.Button className="w-48 h-11 pl-2 pr-2.5 border border-green hover:border-fgd-1 focus:outline-none rounded-md text-fgd-4 hover:text-fgd-1">
|
|
||||||
<div className="flex flex-row items-center justify-between">
|
|
||||||
<div className="flex items-center">
|
|
||||||
<WalletIcon className="w-5 h-5 mr-2 fill-current text-green" />
|
|
||||||
<Code className="p-1 text-fgd-3 font-light">
|
|
||||||
{isCopied
|
|
||||||
? 'Copied!'
|
|
||||||
: wallet.publicKey.toString().substr(0, 5) +
|
|
||||||
'...' +
|
|
||||||
wallet.publicKey.toString().substr(-5)}
|
|
||||||
</Code>
|
|
||||||
</div>
|
|
||||||
{open ? (
|
|
||||||
<ChevronUpIcon className="h-5 w-5" />
|
|
||||||
) : (
|
|
||||||
<ChevronDownIcon className="h-5 w-5" />
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</Menu.Button>
|
|
||||||
<Menu.Items className="z-20 p-1 absolute right-0 top-11 bg-bkg-1 divide-y divide-bkg-3 shadow-lg outline-none rounded-md w-48">
|
|
||||||
{WALLET_OPTIONS.map(({ name, icon }) => (
|
|
||||||
<Menu.Item key={name}>
|
|
||||||
<button
|
|
||||||
className="flex flex-row items-center w-full p-2 hover:bg-bkg-2 hover:cursor-pointer font-normal"
|
|
||||||
onClick={() => handleWalletMenu(name)}
|
|
||||||
>
|
|
||||||
<div className="w-5 h-5 mr-2">{icon}</div>
|
|
||||||
{name}
|
|
||||||
</button>
|
|
||||||
</Menu.Item>
|
|
||||||
))}
|
|
||||||
</Menu.Items>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</Menu>
|
|
||||||
) : (
|
|
||||||
<ConnectWalletButton />
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</nav>
|
</nav>
|
||||||
|
|
|
@ -139,5 +139,5 @@ export default function useWallet() {
|
||||||
actions.fetchUsdcVault()
|
actions.fetchUsdcVault()
|
||||||
}, 20 * SECONDS)
|
}, 20 * SECONDS)
|
||||||
|
|
||||||
return { connected, wallet }
|
return { connected, wallet, provider, setSavedProviderUrl }
|
||||||
}
|
}
|
||||||
|
|
|
@ -110,6 +110,7 @@ const useWalletStore = create<WalletStore>((set, get) => ({
|
||||||
const connection = get().connection.current
|
const connection = get().connection.current
|
||||||
const wallet = get().current
|
const wallet = get().current
|
||||||
const programId = get().connection.programId
|
const programId = get().connection.programId
|
||||||
|
const set = get().set
|
||||||
|
|
||||||
console.log('fetchPool', connection, poolIdl)
|
console.log('fetchPool', connection, poolIdl)
|
||||||
if (connection) {
|
if (connection) {
|
||||||
|
|
Loading…
Reference in New Issue