blockworks-foundation
/
mango-ui-v3
mirror of https://github.com/blockworks-foundation/mango-ui-v3.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

add a connection spinner to wallet connect button

This commit is contained in:
tjs 2022-08-30 14:12:54 -04:00
parent 97b27644b1
commit 0becdd4ef7
1 changed files with 7 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
components/ConnectWalletButton.tsx
View File

@ -26,13 +26,14 @@ import { useRouter } from 'next/router'
import { PublicKey } from '@solana/web3.js' import { PublicKey } from '@solana/web3.js'
import { breakpoints } from '../components/TradePageGrid' import { breakpoints } from '../components/TradePageGrid'
import { useViewport } from 'hooks/useViewport' import { useViewport } from 'hooks/useViewport'
import Loading from './Loading'
export const handleWalletConnect = (wallet: Wallet) => { export const handleWalletConnect = (wallet: Wallet) => {
if (!wallet) { if (!wallet) {
return return
} }
wallet?.adapter?.connect().catch((e) => { return wallet?.adapter?.connect().catch((e) => {
if (e.name.includes('WalletLoadError')) { if (e.name.includes('WalletLoadError')) {
notify({ notify({
title: `${wallet.adapter.name} Error`, title: `${wallet.adapter.name} Error`,
@ -50,6 +51,7 @@ export const ConnectWalletButton: React.FC = () => {
const set = useMangoStore((s) => s.set) const set = useMangoStore((s) => s.set)
const mangoGroup = useMangoStore((s) => s.selectedMangoGroup.current) const mangoGroup = useMangoStore((s) => s.selectedMangoGroup.current)
const [showAccountsModal, setShowAccountsModal] = useState(false) const [showAccountsModal, setShowAccountsModal] = useState(false)
const [connecting, setConnecting] = useState(false)
const actions = useMangoStore((s) => s.actions) const actions = useMangoStore((s) => s.actions)
const profileDetails = useMangoStore((s) => s.profile.details) const profileDetails = useMangoStore((s) => s.profile.details)
const loadProfileDetails = useMangoStore((s) => s.profile.loadDetails) const loadProfileDetails = useMangoStore((s) => s.profile.loadDetails)
@ -82,7 +84,8 @@ export const ConnectWalletButton: React.FC = () => {
const handleConnect = useCallback(() => { const handleConnect = useCallback(() => {
if (wallet) { if (wallet) {
handleWalletConnect(wallet) setConnecting(true)
handleWalletConnect(wallet)?.then(() => setConnecting(false))
} }
}, [wallet]) }, [wallet])
@ -209,8 +212,8 @@ export const ConnectWalletButton: React.FC = () => {
<div className="default-transition flex h-full flex-row items-center justify-center px-3"> <div className="default-transition flex h-full flex-row items-center justify-center px-3">
<WalletIcon className="mr-2 h-4 w-4 fill-current" /> <WalletIcon className="mr-2 h-4 w-4 fill-current" />
<div className="text-left"> <div className="text-left">
<div className="mb-1 whitespace-nowrap font-bold leading-none"> <div className="mb-1 flex justify-center whitespace-nowrap font-bold leading-none">
{t('connect')} {connecting ? <Loading className="h-4 w-4" /> : t('connect')}
</div> </div>
{wallet?.adapter?.name && ( {wallet?.adapter?.name && (
<div className="text-xxs font-normal leading-3 tracking-wider text-th-bkg-2"> <div className="text-xxs font-normal leading-3 tracking-wider text-th-bkg-2">