Fix wallet double tap on mobile (#1467)

* Fix wallet double tap on mobile

* also add icon that card can be dragged

* Fix ugly drag image

components/wallet-card.js

@@ -4,8 +4,9 @@ import Plug from '@/svgs/plug.svg'
 import Gear from '@/svgs/settings-5-fill.svg'
 import Link from 'next/link'
 import { Status } from 'wallets'
+import DraggableIcon from '@/svgs/draggable.svg'
 
-export default function WalletCard ({ wallet }) {
+export default function WalletCard ({ wallet, draggable, onDragStart, onDragEnter, onDragEnd, onTouchStart, sourceIndex, targetIndex, index }) {
   const { card: { title, badges } } = wallet
 
   let indicator = styles.disabled
@@ -27,9 +28,26 @@ export default function WalletCard ({ wallet }) {
   }
 
   return (
-    <Card className={styles.card}>
-      <div className={`${styles.indicator} ${indicator}`} />
-      <Card.Body>
+    <Card
+      className={styles.card}
+      // we attach the drag listeners to the whole card to have a proper drag image
+      draggable={draggable}
+      onDragStart={onDragStart}
+      onDragEnter={onDragEnter}
+      onDragEnd={onDragEnd}
+    >
+      <div className={styles.cardMeta}>
+        {wallet.status === Status.Enabled && <DraggableIcon className={styles.drag} width={16} height={16} />}
+        <div className={`${styles.indicator} ${indicator}`} />
+      </div>
+      <Card.Body
+        // we attach touch listener only to card body to not interfere with wallet link
+        onTouchStart={onTouchStart}
+        className={draggable
+          ? (`${sourceIndex === index ? styles.drag : ''} ${draggable && targetIndex === index ? styles.drop : ''}`)
+          : ''}
+        style={{ cursor: draggable ? 'move' : 'default' }}
+      >
         <Card.Title>{title}</Card.Title>
         <Card.Subtitle className='mt-2'>
           {badges?.map(

fragments/users.js

@@ -15,31 +15,16 @@ export const ME = gql`
         diagnostics
         noReferralLinks
         fiatCurrency
+        autoWithdrawMaxFeePercent
+        autoWithdrawThreshold
+        withdrawMaxFeeDefault
         satsFilter
-        hideCowboyHat
         hideFromTopUsers
-        hideGithub
-        hideNostr
-        hideTwitter
-        hideInvoiceDesc
-        hideIsContributor
         hideWalletBalance
         hideWelcomeBanner
         imgproxyOnly
         showImagesAndVideos
-        lastCheckedJobs
         nostrCrossposting
-        noteAllDescendants
-        noteCowboyHat
-        noteDeposits
-        noteWithdrawals
-        noteEarning
-        noteForwardedSats
-        noteInvites
-        noteItemSats
-        noteJobIndicator
-        noteMentions
-        noteItemMentions
         sats
         tipDefault
         tipRandom
@@ -50,19 +35,12 @@ export const ME = gql`
         zapUndos
         upvotePopover
         wildWestMode
-        withdrawMaxFeeDefault
-        lnAddr
-        autoWithdrawMaxFeePercent
-        autoWithdrawThreshold
         disableFreebies
       }
       optional {
         isContributor
         stacked
         streak
-        githubId
-        nostrAuthPubkey
-        twitterId
       }
     }
   }`

pages/settings/index.js

@@ -385,14 +385,14 @@ export default function Settings ({ ssrData }) {
             groupClassName='mb-0'
           />
           <Checkbox
-            disabled={me.optional.githubId === null}
+            disabled={!settings?.authMethods?.github}
             label={
               <div className='d-flex align-items-center'>hide my linked github profile
                 <Info>
                   <ul>
                     <li>Linked accounts are hidden from your profile by default</li>
                     <li>uncheck this to display your github on your profile</li>
-                    {me.optional.githubId === null &&
+                    {!settings?.authMethods?.github &&
                       <div className='my-2'>
                         <li><i>You don't seem to have a linked github account</i></li>
                         <ul><li>If this is wrong, try unlinking/relinking</li></ul>
@@ -405,14 +405,14 @@ export default function Settings ({ ssrData }) {
             groupClassName='mb-0'
           />
           <Checkbox
-            disabled={me.optional.nostrAuthPubkey === null}
+            disabled={!settings?.authMethods?.nostr}
             label={
               <div className='d-flex align-items-center'>hide my linked nostr profile
                 <Info>
                   <ul>
                     <li>Linked accounts are hidden from your profile by default</li>
                     <li>Uncheck this to display your npub on your profile</li>
-                    {me.optional.nostrAuthPubkey === null &&
+                    {!settings?.authMethods?.nostr &&
                       <div className='my-2'>
                         <li>You don't seem to have a linked nostr account</li>
                         <ul><li>If this is wrong, try unlinking/relinking</li></ul>
@@ -425,14 +425,14 @@ export default function Settings ({ ssrData }) {
             groupClassName='mb-0'
           />
           <Checkbox
-            disabled={me.optional.twitterId === null}
+            disabled={!settings?.authMethods?.twitter}
             label={
               <div className='d-flex align-items-center'>hide my linked twitter profile
                 <Info>
                   <ul>
                     <li>Linked accounts are hidden from your profile by default</li>
                     <li>Uncheck this to display your twitter on your profile</li>
-                    {me.optional.twitterId === null &&
+                    {!settings?.authMethods?.twitter &&
                       <div className='my-2'>
                         <i>You don't seem to have a linked twitter account</i>
                         <ul><li>If this is wrong, try unlinking/relinking</li></ul>

pages/settings/wallets/index.js

@@ -93,11 +93,6 @@ export default function Wallet ({ ssrData }) {
               return (
                 <div
                   key={w.name}
-                  draggable={draggable}
-                  style={{ cursor: draggable ? 'move' : 'default' }}
-                  onDragStart={draggable ? onDragStart(i) : undefined}
-                  onTouchStart={draggable ? onTouchStart(i) : undefined}
-                  onDragEnter={draggable ? onDragEnter(i) : undefined}
                   className={
                     !draggable
                       ? ''
@@ -105,7 +100,16 @@ export default function Wallet ({ ssrData }) {
                     }
                   suppressHydrationWarning
                 >
-                  <WalletCard wallet={w} />
+                  <WalletCard
+                    wallet={w}
+                    draggable={draggable}
+                    onDragStart={draggable ? onDragStart(i) : undefined}
+                    onTouchStart={draggable ? onTouchStart(i) : undefined}
+                    onDragEnter={draggable ? onDragEnter(i) : undefined}
+                    sourceIndex={sourceIndex}
+                    targetIndex={targetIndex}
+                    index={i}
+                  />
                 </div>
               )
             }

styles/wallet.module.css

@@ -20,6 +20,17 @@
   height: 180px;
 }
 
+.cardMeta {
+  position: absolute;
+  width: 100%;
+  display: grid;
+  align-items: center;
+  justify-content: end;
+  padding: 10px 10px 0 10px;
+  grid-gap: 0.2rem;
+  grid-auto-flow: column;
+}
+
 .badge {
   color: var(--theme-grey) !important;
   background: var(--theme-clickToContextColor) !important;
@@ -42,11 +53,7 @@
 .indicator {
   width: 10px;
   height: 10px;
-  right: 10px;
-  top: 10px;
   border-radius: 50%;
-  display: inline-block;
-  position: absolute;
 }
 
 .indicator.success {

svgs/draggable.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M8.5 7C9.32843 7 10 6.32843 10 5.5C10 4.67157 9.32843 4 8.5 4C7.67157 4 7 4.67157 7 5.5C7 6.32843 7.67157 7 8.5 7ZM8.5 13.5C9.32843 13.5 10 12.8284 10 12C10 11.1716 9.32843 10.5 8.5 10.5C7.67157 10.5 7 11.1716 7 12C7 12.8284 7.67157 13.5 8.5 13.5ZM10 18.5C10 19.3284 9.32843 20 8.5 20C7.67157 20 7 19.3284 7 18.5C7 17.6716 7.67157 17 8.5 17C9.32843 17 10 17.6716 10 18.5ZM15.5 7C16.3284 7 17 6.32843 17 5.5C17 4.67157 16.3284 4 15.5 4C14.6716 4 14 4.67157 14 5.5C14 6.32843 14.6716 7 15.5 7ZM17 12C17 12.8284 16.3284 13.5 15.5 13.5C14.6716 13.5 14 12.8284 14 12C14 11.1716 14.6716 10.5 15.5 10.5C16.3284 10.5 17 11.1716 17 12ZM15.5 20C16.3284 20 17 19.3284 17 18.5C17 17.6716 16.3284 17 15.5 17C14.6716 17 14 17.6716 14 18.5C14 19.3284 14.6716 20 15.5 20Z"></path></svg>