2024-06-24 12:22:07 +00:00
|
|
|
import { getGetServerSideProps } from '@/api/ssrApollo'
|
2024-03-20 00:37:31 +00:00
|
|
|
import Layout from '@/components/layout'
|
|
|
|
import styles from '@/styles/wallet.module.css'
|
|
|
|
import { WalletCard } from '@/components/wallet-card'
|
2024-06-24 12:22:07 +00:00
|
|
|
import { WALLETS as WALLETS_QUERY } from '@/fragments/wallet'
|
2024-04-27 02:22:30 +00:00
|
|
|
import Link from 'next/link'
|
2024-06-03 22:41:15 +00:00
|
|
|
import { WALLET_DEFS } from '@/components/wallet'
|
2024-07-05 02:59:32 +00:00
|
|
|
import { useState } from 'react'
|
2024-01-07 17:00:24 +00:00
|
|
|
|
2024-06-24 12:22:07 +00:00
|
|
|
export const getServerSideProps = getGetServerSideProps({ query: WALLETS_QUERY, authRequired: true })
|
2024-02-13 19:17:56 +00:00
|
|
|
|
2024-06-24 12:22:07 +00:00
|
|
|
export default function Wallet ({ ssrData }) {
|
2024-07-05 02:59:32 +00:00
|
|
|
const [wallets, setWallets] = useState(WALLET_DEFS)
|
|
|
|
const [sourceIndex, setSourceIndex] = useState()
|
|
|
|
const [targetIndex, setTargetIndex] = useState()
|
|
|
|
|
|
|
|
const onDragStart = (i) => (e) => {
|
|
|
|
// e.dataTransfer.dropEffect = 'move'
|
|
|
|
// We can only use the DataTransfer API inside the drop event
|
|
|
|
// see https://html.spec.whatwg.org/multipage/dnd.html#security-risks-in-the-drag-and-drop-model
|
|
|
|
// e.dataTransfer.setData('text/plain', name)
|
|
|
|
// That's why we use React state instead
|
|
|
|
setSourceIndex(i)
|
|
|
|
}
|
|
|
|
|
|
|
|
const onDragEnter = (i) => (e) => {
|
|
|
|
setTargetIndex(i)
|
|
|
|
}
|
|
|
|
|
|
|
|
const onDragEnd = (e) => {
|
|
|
|
setSourceIndex(null)
|
|
|
|
setTargetIndex(null)
|
|
|
|
if (sourceIndex === targetIndex) return
|
|
|
|
setWallets(wallets => {
|
|
|
|
const copy = [...wallets]
|
|
|
|
|
|
|
|
const [source] = copy.splice(sourceIndex, 1)
|
|
|
|
const newTargetIndex = sourceIndex < targetIndex ? targetIndex - 1 : targetIndex
|
|
|
|
const append = sourceIndex < targetIndex
|
|
|
|
|
|
|
|
copy.splice(newTargetIndex + (append ? 1 : 0), 0, source)
|
|
|
|
return copy
|
|
|
|
})
|
|
|
|
}
|
|
|
|
|
2024-01-07 17:00:24 +00:00
|
|
|
return (
|
|
|
|
<Layout>
|
|
|
|
<div className='py-5 w-100'>
|
|
|
|
<h2 className='mb-2 text-center'>attach wallets</h2>
|
|
|
|
<h6 className='text-muted text-center'>attach wallets to supplement your SN wallet</h6>
|
2024-04-27 02:22:30 +00:00
|
|
|
<div className='text-center'>
|
|
|
|
<Link href='/wallet/logs' className='text-muted fw-bold text-underline'>
|
|
|
|
wallet logs
|
|
|
|
</Link>
|
|
|
|
</div>
|
2024-07-05 02:59:32 +00:00
|
|
|
<div className={styles.walletGrid} onDragEnd={onDragEnd}>
|
|
|
|
{wallets
|
|
|
|
.map((def, i) =>
|
|
|
|
<div
|
|
|
|
key={def.name}
|
|
|
|
draggable
|
|
|
|
onDragStart={onDragStart(i)}
|
|
|
|
onDragEnter={onDragEnter(i)}
|
|
|
|
className={`${sourceIndex === i ? styles.drag : ''} ${targetIndex === i ? styles.drop : ''}`}
|
|
|
|
>
|
|
|
|
<WalletCard name={def.name} {...def.card} />
|
|
|
|
</div>
|
|
|
|
)}
|
2024-01-07 17:00:24 +00:00
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</Layout>
|
|
|
|
)
|
|
|
|
}
|