wip: wallet flow

Author: ekzyis

api/typeDefs/wallet.js

@@ -139,8 +139,7 @@ const typeDefs = gql`
     ): Boolean!
 
     # delete
-    removeWallet(id: ID!): Boolean
-    removeWalletProtocol(id: ID!): Boolean
+    deleteWallet(id: ID!): Boolean
 
     # crypto
     updateWalletEncryption(keyHash: String!, wallets: [WalletEncryptionUpdate!]!): Boolean
@@ -149,7 +148,7 @@ const typeDefs = gql`
     disablePassphraseExport: Boolean
 
     # settings
-    setWalletSettings(settings: WalletSettingsInput!): Boolean
+    setWalletSettings(settings: WalletSettingsInput!): WalletSettings!
     setWalletPriorities(priorities: [WalletPriorityUpdate!]!): Boolean
 
     # logs

fragments/users.js

@@ -131,11 +131,6 @@ export const SET_SETTINGS = gql`
     }
   }`
 
-export const DELETE_WALLET = gql`
-  mutation removeWallet {
-    removeWallet
-  }`
-
 export const NAME_QUERY = gql`
   query nameAvailable($name: String!) {
     nameAvailable(name: $name)

pages/wallets/[...slug].js renamed to pages/wallets/[type].js

@@ -8,8 +8,8 @@ import { useQuery } from '@apollo/client'
 import { useRouter } from 'next/router'
 
 const variablesFunc = params => {
-  const id = Number(params.slug[0])
-  return !Number.isNaN(id) ? { id } : { name: unurlify(params.slug[0]) }
+  const id = Number(params.type)
+  return !Number.isNaN(id) ? { id } : { name: unurlify(params.type) }
 }
 export const getServerSideProps = getGetServerSideProps({ query: WALLET, variables: variablesFunc, authRequired: true })
 
@@ -20,9 +20,9 @@ export default function WalletForms ({ ssrData }) {
   //   Warning: fragment with name WalletTemplateFields already exists.
   //   graphql-tag enforces all fragment names across your application to be unique
   // this is not a problem because the warning is only meant to avoid overwriting fragments but we're reusing it
-  const { data, refetch } = useQuery(WALLET, { variables })
+  const { data } = useQuery(WALLET, { variables })
   const dat = useData(data, ssrData)
 
   const decryptedWallet = useDecryptedWallet(dat?.wallet)
-  return <WalletFormsComponent wallet={decryptedWallet ?? dat?.wallet} refetch={refetch} />
+  return <WalletFormsComponent wallet={decryptedWallet ?? ssrData?.wallet} />
 }

pages/wallets/index.js

@@ -113,8 +113,6 @@ export default function Wallet () {
         <WalletLayoutSubHeader>use real bitcoin</WalletLayoutSubHeader>
         <div className='text-center'>
           <WalletLayoutLink href='/wallets/logs'>wallet logs</WalletLayoutLink>
-          <span className='mx-2'>•</span>
-          <WalletLayoutLink href='/wallets/settings'>settings</WalletLayoutLink>
           {showPassphrase && (
             <>
               <span className='mx-2'>•</span>

pages/wallets/settings.js

@@ -106,6 +106,12 @@
   flex-direction: column;
 }
 
+@media (max-width: 768px) {
+  .form {
+    margin-top: 1rem;
+  }
+}
+
 .separator {
   display: flex;
   align-items: center;
@@ -136,3 +142,12 @@
   grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
   container-type: inline-size;
 }
+
+.progressNumber {
+  display: inline-block;
+  background-color: var(--bs-body-bg);
+  border-radius: 50%;
+  width: 24px;
+  height: 24px;
+  line-height: 24px;
+}

styles/wallet.module.css

@@ -7,7 +7,7 @@ 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 { useWalletImage, useWalletSupport, useWalletStatus, WalletStatus } from '@/wallets/client/hooks'
 import { isWallet, urlify, walletDisplayName } from '@/wallets/lib/util'
 import { Draggable } from '@/wallets/client/components'
 
@@ -55,15 +55,7 @@ export function WalletCard ({ wallet, draggable = false, index, ...props }) {
 }
 
 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)}`
-
+  const href = '/wallets' + (isWallet(wallet) ? `/${wallet.id}` : `/${urlify(wallet.name)}`)
   return <Link href={href}>{children}</Link>
 }
 

wallets/client/components/card.js

@@ -0,0 +1,20 @@
+import classNames from 'classnames'
+import { Button } from 'react-bootstrap'
+import ArrowLeft from '@/svgs/arrow-left-line.svg'
+
+import { useBack, useSkip } from './hooks'
+
+export function BackButton ({ className }) {
+  const back = useBack()
+  return (
+    <Button className={classNames('me-3 text-muted nav-link fw-bold', className)} variant='link' onClick={back}>
+      {/* 'theme' adds hover style */}
+      <ArrowLeft className='theme' width={24} height={24} />
+    </Button>
+  )
+}
+
+export function SkipButton ({ className }) {
+  const skip = useSkip()
+  return <Button className={classNames('ms-auto me-3 text-muted nav-link fw-bold', className)} variant='link' onClick={skip}>skip</Button>
+}