Wallet indicators (#2002)

* Add wallet indicator

* Reveal wallets page via button

components/nav/common.js

@@ -22,6 +22,7 @@ import classNames from 'classnames'
 import SnIcon from '@/svgs/sn.svg'
 import { useHasNewNotes } from '../use-has-new-notes'
 import { useWallets } from '@/wallets/index'
+import { useWalletIndicator } from '@/components/wallet-indicator'
 import SwitchAccountList, { nextAccount, useAccounts } from '@/components/account'
 import { useShowModal } from '@/components/modal'
 import { numWithUnits } from '@/lib/format'
@@ -190,6 +191,8 @@ export function MeDropdown ({ me, dropNavKey }) {
   if (!me) return null
 
   const profileIndicator = !me.bioId
+  const walletIndicator = useWalletIndicator()
+  const indicator = profileIndicator || walletIndicator
 
   return (
     <div className=''>
@@ -198,7 +201,7 @@ export function MeDropdown ({ me, dropNavKey }) {
           <div className='d-flex align-items-center'>
             <Nav.Link eventKey={me.name} as='span' className='p-0 position-relative'>
               {`@${me.name}`}
-              {profileIndicator && <Indicator superscript />}
+              {indicator && <Indicator superscript />}
             </Nav.Link>
             <Badges user={me} />
           </div>
@@ -214,7 +217,10 @@ export function MeDropdown ({ me, dropNavKey }) {
             <Dropdown.Item active={me.name + '/bookmarks' === dropNavKey}>bookmarks</Dropdown.Item>
           </Link>
           <Link href='/wallets' passHref legacyBehavior>
-            <Dropdown.Item eventKey='wallets'>wallets</Dropdown.Item>
+            <Dropdown.Item eventKey='wallets'>
+              wallets
+              {walletIndicator && <Indicator />}
+            </Dropdown.Item>
           </Link>
           <Link href='/credits' passHref legacyBehavior>
             <Dropdown.Item eventKey='credits'>credits</Dropdown.Item>

components/nav/mobile/offcanvas.js

@@ -7,6 +7,7 @@ import AnonIcon from '@/svgs/spy-fill.svg'
 import styles from './footer.module.css'
 import canvasStyles from './offcanvas.module.css'
 import classNames from 'classnames'
+import { useWalletIndicator } from '@/components/wallet-indicator'
 
 export default function OffCanvas ({ me, dropNavKey }) {
   const [show, setShow] = useState(false)
@@ -26,6 +27,7 @@ export default function OffCanvas ({ me, dropNavKey }) {
     : <span className='text-muted pointer'><AnonIcon onClick={onClick} width='22' height='22' /></span>
 
   const profileIndicator = me && !me.bioId
+  const walletIndicator = useWalletIndicator()
 
   return (
     <>
@@ -59,7 +61,10 @@ export default function OffCanvas ({ me, dropNavKey }) {
                     <Dropdown.Item active={me.name + '/bookmarks' === dropNavKey}>bookmarks</Dropdown.Item>
                   </Link>
                   <Link href='/wallets' passHref legacyBehavior>
-                    <Dropdown.Item eventKey='wallets'>wallets</Dropdown.Item>
+                    <Dropdown.Item eventKey='wallets'>
+                      wallets
+                      {walletIndicator && <Indicator />}
+                    </Dropdown.Item>
                   </Link>
                   <Link href='/credits' passHref legacyBehavior>
                     <Dropdown.Item eventKey='credits'>credits</Dropdown.Item>

components/wallet-indicator.js

@@ -0,0 +1,6 @@
+import { useConfiguredWallets } from '@/wallets'
+
+export function useWalletIndicator () {
+  const wallets = useConfiguredWallets()
+  return wallets.length === 0
+}

pages/wallets/index.js

@@ -12,6 +12,8 @@ import RecvIcon from '@/svgs/arrow-left-down-line.svg'
 import SendIcon from '@/svgs/arrow-right-up-line.svg'
 import { useRouter } from 'next/router'
 import { supportsReceive, supportsSend } from '@/wallets/common'
+import { useWalletIndicator } from '@/components/wallet-indicator'
+import { Button } from 'react-bootstrap'
 
 export const getServerSideProps = getGetServerSideProps({ authRequired: true })
 
@@ -83,6 +85,24 @@ export default function Wallet ({ ssrData }) {
     }
   }, [router])
 
+  const indicator = useWalletIndicator()
+  const [showWallets, setShowWallets] = useState(!indicator)
+
+  if (indicator && !showWallets) {
+    return (
+      <Layout>
+        <div className='py-5 text-center d-flex flex-column align-items-center justify-content-center flex-grow-1'>
+          <Button
+            onClick={() => setShowWallets(true)}
+            size='md' variant='secondary'
+          >attach wallet
+          </Button>
+          <small className='d-block mt-3 text-muted'>attach a wallet to send and receive sats</small>
+        </div>
+      </Layout>
+    )
+  }
+
   return (
     <Layout>
       <div className='py-5 w-100'>

wallets/index.js

@@ -223,6 +223,11 @@ export function useWallet (name) {
   return wallets.find(w => w.def.name === name)
 }
 
+export function useConfiguredWallets () {
+  const { wallets } = useWallets()
+  return useMemo(() => wallets.filter(w => isConfigured(w)), [wallets])
+}
+
 export function useSendWallets () {
   const { wallets } = useWallets()
   // return all enabled wallets that are available and can send