Fouad
e5f41731ae
* bootstrap next app + add overview page * fix AssetList type * fix up nav stuff * Refactor Nav component and add network components pages * Refactor WorldMap component and update TelegramIcon, GitHubIcon, NymVpnIcon, DiscordIcon, and TwitterIcon components * add service providers page * mixnodes page * delegations page + use material react table for all tables * nodes map page * Refactor StyledLink component and remove unnecessary console.log statements * Refactor ESLint configuration, remove unused dependencies, and update component imports * update deps * Refactor imports and update dependencies * fix dark mode * build single mixnode page * build single gateway page * Refactor handleOnDelegate function to use useCallback in mixnodes page.tsx * Add defaults for constants --------- Co-authored-by: Mark Sinclair <mmsinclair@users.noreply.github.com>
51 lines
1.2 KiB
TypeScript
51 lines
1.2 KiB
TypeScript
import React from 'react'
|
|
import { Button, IconButton, Stack, CircularProgress } from '@mui/material'
|
|
import CloseIcon from '@mui/icons-material/Close'
|
|
import { useIsMobile } from '@/app/hooks/useIsMobile'
|
|
import { useWalletContext } from '@/app/context/wallet'
|
|
import { WalletAddress, WalletBalance } from '@/app/components/Wallet'
|
|
|
|
export const ConnectKeplrWallet = () => {
|
|
const {
|
|
connectWallet,
|
|
disconnectWallet,
|
|
isWalletConnected,
|
|
isWalletConnecting,
|
|
} = useWalletContext()
|
|
const isMobile = useIsMobile(1200)
|
|
|
|
if (!connectWallet || !disconnectWallet) {
|
|
return null
|
|
}
|
|
|
|
if (isWalletConnected) {
|
|
return (
|
|
<Stack direction="row" spacing={1}>
|
|
<WalletBalance />
|
|
<WalletAddress />
|
|
<IconButton
|
|
size="small"
|
|
onClick={async () => {
|
|
await disconnectWallet()
|
|
}}
|
|
>
|
|
<CloseIcon fontSize="small" sx={{ color: 'white' }} />
|
|
</IconButton>
|
|
</Stack>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<Button
|
|
variant="outlined"
|
|
onClick={() => connectWallet()}
|
|
disabled={isWalletConnecting}
|
|
endIcon={
|
|
isWalletConnecting && <CircularProgress size={14} color="inherit" />
|
|
}
|
|
>
|
|
Connect {isMobile ? '' : ' Wallet'}
|
|
</Button>
|
|
)
|
|
}
|