21a9696ea0
* Use SSR for wallet forms * Fix back/forward navigation with useData hook * Fix protocol fallback not working with shallow routing * Fix wallet refetch * Replace useEffect for default selection with smart link * Remove unused useWalletQuery * Move server2client wallet transform into single function * Add comment about graphql-tag fragment warning * Check if wallet not found * Handle wallet is sometimes null on back or forward navigation
78 lines
2.7 KiB
JavaScript
78 lines
2.7 KiB
JavaScript
import { Card } from 'react-bootstrap'
|
|
import classNames from 'classnames'
|
|
import styles from '@/styles/wallet.module.css'
|
|
import Plug from '@/svgs/plug.svg'
|
|
import Gear from '@/svgs/settings-5-fill.svg'
|
|
import Link from 'next/link'
|
|
import RecvIcon from '@/svgs/arrow-left-down-line.svg'
|
|
import SendIcon from '@/svgs/arrow-right-up-line.svg'
|
|
import DragIcon from '@/svgs/draggable.svg'
|
|
import { useWalletImage, useWalletSupport, useWalletStatus, WalletStatus, useProtocolTemplates } from '@/wallets/client/hooks'
|
|
import { isWallet, urlify, walletDisplayName } from '@/wallets/lib/util'
|
|
import { Draggable } from '@/wallets/client/components'
|
|
|
|
export function WalletCard ({ wallet, draggable = false, index, ...props }) {
|
|
const image = useWalletImage(wallet.name)
|
|
const status = useWalletStatus(wallet)
|
|
const support = useWalletSupport(wallet)
|
|
|
|
const card = (
|
|
<Card
|
|
className={styles.card}
|
|
{...props}
|
|
>
|
|
<div className={styles.indicators}>
|
|
{draggable && <DragIcon className={classNames(styles.indicator, styles.drag, 'me-auto')} />}
|
|
{support.receive && <RecvIcon className={`${styles.indicator} ${statusToClass(status.receive)}`} />}
|
|
{support.send && <SendIcon className={`${styles.indicator} ${statusToClass(status.send)}`} />}
|
|
</div>
|
|
<Card.Body>
|
|
<div className='d-flex text-center align-items-center h-100'>
|
|
{image
|
|
? <img className={styles.walletLogo} {...image} />
|
|
: <Card.Title className={styles.walletLogo}>{walletDisplayName(wallet.name)}</Card.Title>}
|
|
</div>
|
|
</Card.Body>
|
|
<WalletLink wallet={wallet}>
|
|
<Card.Footer className={styles.attach}>
|
|
{isWallet(wallet)
|
|
? <>configure<Gear width={14} height={14} /></>
|
|
: <>attach<Plug width={14} height={14} /></>}
|
|
</Card.Footer>
|
|
</WalletLink>
|
|
</Card>
|
|
)
|
|
|
|
if (draggable) {
|
|
return (
|
|
<Draggable index={index}>
|
|
{card}
|
|
</Draggable>
|
|
)
|
|
}
|
|
|
|
return card
|
|
}
|
|
|
|
function WalletLink ({ wallet, children }) {
|
|
const support = useWalletSupport(wallet)
|
|
const protocols = useProtocolTemplates(wallet)
|
|
const firstSend = protocols.find(p => p.send)
|
|
const firstRecv = protocols.find(p => !p.send)
|
|
|
|
let href = '/wallets'
|
|
href += isWallet(wallet) ? `/${wallet.id}` : `/${urlify(wallet.name)}`
|
|
href += support.send ? `/send/${urlify(firstSend.name)}` : `/receive/${urlify(firstRecv.name)}`
|
|
|
|
return <Link href={href}>{children}</Link>
|
|
}
|
|
|
|
function statusToClass (status) {
|
|
switch (status) {
|
|
case WalletStatus.OK: return styles.success
|
|
case WalletStatus.ERROR: return styles.error
|
|
case WalletStatus.WARNING: return styles.warning
|
|
case WalletStatus.DISABLED: return styles.disabled
|
|
}
|
|
}
|