99 lines
3.1 KiB
JavaScript
99 lines
3.1 KiB
JavaScript
import { getGetServerSideProps } from '@/api/ssrApollo'
|
|
import Layout from '@/components/layout'
|
|
import styles from '@/styles/wallet.module.css'
|
|
import { WALLETS as WALLETS_QUERY } from '@/fragments/wallet'
|
|
import Link from 'next/link'
|
|
import { useWallets } from '@/components/wallet'
|
|
import { useState } from 'react'
|
|
import dynamic from 'next/dynamic'
|
|
|
|
const WalletCard = dynamic(() => import('@/components/wallet-card'), { ssr: false })
|
|
|
|
export const getServerSideProps = getGetServerSideProps({ query: WALLETS_QUERY, authRequired: true })
|
|
|
|
export default function Wallet ({ ssrData }) {
|
|
const wallets = useWallets()
|
|
|
|
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 = async (e) => {
|
|
setSourceIndex(null)
|
|
setTargetIndex(null)
|
|
|
|
if (sourceIndex === targetIndex) return
|
|
|
|
const newOrder = [...wallets]
|
|
|
|
const [source] = newOrder.splice(sourceIndex, 1)
|
|
const newTargetIndex = sourceIndex < targetIndex ? targetIndex - 1 : targetIndex
|
|
const append = sourceIndex < targetIndex
|
|
|
|
newOrder.splice(newTargetIndex + (append ? 1 : 0), 0, source)
|
|
|
|
await Promise.all(
|
|
newOrder.map((w, i) =>
|
|
w.setPriority(i).catch(console.error)
|
|
)
|
|
)
|
|
}
|
|
|
|
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>
|
|
<div className='text-center'>
|
|
<Link href='/wallet/logs' className='text-muted fw-bold text-underline'>
|
|
wallet logs
|
|
</Link>
|
|
</div>
|
|
<div className={styles.walletGrid} onDragEnd={onDragEnd}>
|
|
{wallets
|
|
.sort((w1, w2) => {
|
|
if (!w2.isConfigured || !w2.enabled) {
|
|
return -1
|
|
}
|
|
return w1.priority - w2.priority
|
|
})
|
|
.map((w, i) => {
|
|
const draggable = w.isConfigured
|
|
return (
|
|
<div
|
|
key={w.name}
|
|
draggable={draggable}
|
|
style={{ cursor: draggable ? 'move' : 'default' }}
|
|
onDragStart={draggable ? onDragStart(i) : undefined}
|
|
onDragEnter={draggable ? onDragEnter(i) : undefined}
|
|
className={
|
|
!draggable
|
|
? ''
|
|
: (`${sourceIndex === i ? styles.drag : ''} ${draggable && targetIndex === i ? styles.drop : ''}`)
|
|
}
|
|
suppressHydrationWarning
|
|
>
|
|
<WalletCard wallet={w} />
|
|
</div>
|
|
)
|
|
}
|
|
)}
|
|
|
|
</div>
|
|
</div>
|
|
</Layout>
|
|
)
|
|
}
|