long press tip dialog

2021-10-30 11:52:24 -05:00 · 2021-10-30 11:52:24 -05:00 · 41504ba06b
parent 2eaf407f17
commit 41504ba06b
4 changed files with 62 additions and 42 deletions
--- a/components/lnqr.js
+++ b/components/lnqr.js
@ -21,7 +21,9 @@ export default function LnQR ({ value, webLn, statusVariant, status }) {
  return (
    <>
      <a className='d-block' href={qrValue}>
-        <QRCode className='h-auto mw-100' value={qrValue} renderAs='svg' size={300} />
+        <QRCode
+          className='h-auto mw-100' value={qrValue} renderAs='svg' size={300}
+        />
      </a>
      <div className='mt-3 w-100'>
        <CopyInput type='text' placeholder={value} readOnly />
--- a/components/upvote.js
+++ b/components/upvote.js
@ -9,6 +9,7 @@ import { useItemAct } from './item-act'
 import Window from '../svgs/window-2-fill.svg'
 import { useMe } from './me'
 import { useState } from 'react'
+import LongPressable from 'react-longpressable'

 export default function UpVote ({ item, className }) {
  const { setError } = useFundError()
@ -88,16 +89,21 @@ export default function UpVote ({ item, className }) {
    <LightningConsumer>
      {({ strike }) =>
        <ActionTooltip notForm disable={noSelfTips} overlayText={overlayText()}>
-          <UpArrow
-            width={24}
-            height={24}
-            className={
-            `${styles.upvote}
-            ${className || ''}
-            ${noSelfTips ? styles.noSelfTips : ''}
-            ${item?.meVote ? styles.voted : ''}`
-          }
-            onClick={
+          <LongPressable
+            onLongPress={
+              async (e) => {
+                e.stopPropagation()
+                if (!item || voteLock) return
+
+                // we can't tip ourselves
+                if (noSelfTips) {
+                  return
+                }
+
+                setItem({ itemId: item.id, act, strike })
+              }
+            }
+            onShortPress={
            me
              ? async (e) => {
                  e.stopPropagation()
@ -139,7 +145,18 @@ export default function UpVote ({ item, className }) {
                }
              : signIn
          }
-          />
+          >
+            <UpArrow
+              width={24}
+              height={24}
+              className={
+            `${styles.upvote}
+            ${className || ''}
+            ${noSelfTips ? styles.noSelfTips : ''}
+            ${item?.meVote ? styles.voted : ''}`
+          }
+            />
+          </LongPressable>
        </ActionTooltip>}
    </LightningConsumer>
  )
--- a/package-lock.json
+++ b/package-lock.json
@ -33,6 +33,7 @@
        "react-bootstrap": "^1.5.2",
        "react-countdown": "^2.3.2",
        "react-dom": "^17.0.2",
+        "react-longpressable": "^1.1.1",
        "react-markdown": "^6.0.2",
        "react-syntax-highlighter": "^15.4.3",
        "react-textarea-autosize": "^8.3.3",
@ -8336,6 +8337,15 @@
      "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
      "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
    },
+    "node_modules/react-longpressable": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/react-longpressable/-/react-longpressable-1.1.1.tgz",
+      "integrity": "sha512-Q8S7CzZVNmP123tHrMp0U0+/fgDEZCi5CpOGkabz3a2zQ0aek5IAizetxtxBAt1hQHHaAYynPHhtcSkLIkqEzQ==",
+      "peerDependencies": {
+        "prop-types": "^15.6.1",
+        "react": "^16.4.0"
+      }
+    },
    "node_modules/react-markdown": {
      "version": "6.0.3",
      "resolved": "https://registry.npmjs.org/react-markdown/-/react-markdown-6.0.3.tgz",
@ -11835,8 +11845,7 @@
    "@graphql-typed-document-node/core": {
      "version": "3.1.0",
      "resolved": "https://registry.npmjs.org/@graphql-typed-document-node/core/-/core-3.1.0.tgz",
-      "integrity": "sha512-wYn6r8zVZyQJ6rQaALBEln5B1pzxb9shV5Ef97kTvn6yVGrqyXVnDqnU24MXnFubR+rZjBY9NWuxX3FB2sTsjg==",
-      "requires": {}
+      "integrity": "sha512-wYn6r8zVZyQJ6rQaALBEln5B1pzxb9shV5Ef97kTvn6yVGrqyXVnDqnU24MXnFubR+rZjBY9NWuxX3FB2sTsjg=="
    },
    "@grpc/grpc-js": {
      "version": "1.3.7",
@ -12059,8 +12068,7 @@
    "@next/react-refresh-utils": {
      "version": "11.1.2",
      "resolved": "https://registry.npmjs.org/@next/react-refresh-utils/-/react-refresh-utils-11.1.2.tgz",
-      "integrity": "sha512-hsoJmPfhVqjZ8w4IFzoo8SyECVnN+8WMnImTbTKrRUHOVJcYMmKLL7xf7T0ft00tWwAl/3f3Q3poWIN2Ueql/Q==",
-      "requires": {}
+      "integrity": "sha512-hsoJmPfhVqjZ8w4IFzoo8SyECVnN+8WMnImTbTKrRUHOVJcYMmKLL7xf7T0ft00tWwAl/3f3Q3poWIN2Ueql/Q=="
    },
    "@next/swc-darwin-arm64": {
      "version": "11.1.2",
@ -12179,8 +12187,7 @@
    "@restart/context": {
      "version": "2.1.4",
      "resolved": "https://registry.npmjs.org/@restart/context/-/context-2.1.4.tgz",
-      "integrity": "sha512-INJYZQJP7g+IoDUh/475NlGiTeMfwTXUEr3tmRneckHIxNolGOW9CTq83S8cxq0CgJwwcMzMJFchxvlwe7Rk8Q==",
-      "requires": {}
+      "integrity": "sha512-INJYZQJP7g+IoDUh/475NlGiTeMfwTXUEr3tmRneckHIxNolGOW9CTq83S8cxq0CgJwwcMzMJFchxvlwe7Rk8Q=="
    },
    "@restart/hooks": {
      "version": "0.3.27",
@ -12536,8 +12543,7 @@
      "version": "5.3.2",
      "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.2.tgz",
      "integrity": "sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==",
-      "dev": true,
-      "requires": {}
+      "dev": true
    },
    "agent-base": {
      "version": "5.1.1",
@ -12726,8 +12732,7 @@
    "apollo-server-errors": {
      "version": "2.5.0",
      "resolved": "https://registry.npmjs.org/apollo-server-errors/-/apollo-server-errors-2.5.0.tgz",
-      "integrity": "sha512-lO5oTjgiC3vlVg2RKr3RiXIIQ5pGXBFxYGGUkKDhTud3jMIhs+gel8L8zsEjKaKxkjHhCQAA/bcEfYiKkGQIvA==",
-      "requires": {}
+      "integrity": "sha512-lO5oTjgiC3vlVg2RKr3RiXIIQ5pGXBFxYGGUkKDhTud3jMIhs+gel8L8zsEjKaKxkjHhCQAA/bcEfYiKkGQIvA=="
    },
    "apollo-server-micro": {
      "version": "2.25.2",
@ -13215,8 +13220,7 @@
    "bootstrap": {
      "version": "4.6.0",
      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.6.0.tgz",
-      "integrity": "sha512-Io55IuQY3kydzHtbGvQya3H+KorS/M9rSNyfCGCg9WZ4pyT/lCxIlpJgG1GXW/PswzC84Tr2fBYi+7+jFVQQBw==",
-      "requires": {}
+      "integrity": "sha512-Io55IuQY3kydzHtbGvQya3H+KorS/M9rSNyfCGCg9WZ4pyT/lCxIlpJgG1GXW/PswzC84Tr2fBYi+7+jFVQQBw=="
    },
    "brace-expansion": {
      "version": "1.1.11",
@ -16778,14 +16782,12 @@
    "next-plausible": {
      "version": "2.1.3",
      "resolved": "https://registry.npmjs.org/next-plausible/-/next-plausible-2.1.3.tgz",
-      "integrity": "sha512-EyKvwYs+5zSPbjdsX8sWZs23LfwhsaDUMjdUitj07GADAuKwCM3w29LBmjhf0cp6QqZi79y3o76+fXVYutsyuw==",
-      "requires": {}
+      "integrity": "sha512-EyKvwYs+5zSPbjdsX8sWZs23LfwhsaDUMjdUitj07GADAuKwCM3w29LBmjhf0cp6QqZi79y3o76+fXVYutsyuw=="
    },
    "next-seo": {
      "version": "4.28.1",
      "resolved": "https://registry.npmjs.org/next-seo/-/next-seo-4.28.1.tgz",
-      "integrity": "sha512-WZgwdM+UhpNF3A37zFllzmPhnOVJ9vYeYlc0n3Z/kYfz/QQgy8NEdncNNggS9dU4JD8xriaCcyknhy5OsrFsJw==",
-      "requires": {}
+      "integrity": "sha512-WZgwdM+UhpNF3A37zFllzmPhnOVJ9vYeYlc0n3Z/kYfz/QQgy8NEdncNNggS9dU4JD8xriaCcyknhy5OsrFsJw=="
    },
    "node-addon-api": {
      "version": "2.0.2",
@ -17752,8 +17754,7 @@
        "ws": {
          "version": "7.5.5",
          "resolved": "https://registry.npmjs.org/ws/-/ws-7.5.5.tgz",
-          "integrity": "sha512-BAkMFcAzl8as1G/hArkxOxq3G7pjUqQ3gzYbLL0/5zNkph70e+lCoxBGnm6AW1+/aiNeV4fnKqZ8m4GZewmH2w==",
-          "requires": {}
+          "integrity": "sha512-BAkMFcAzl8as1G/hArkxOxq3G7pjUqQ3gzYbLL0/5zNkph70e+lCoxBGnm6AW1+/aiNeV4fnKqZ8m4GZewmH2w=="
        }
      }
    },
@ -17933,6 +17934,11 @@
      "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
      "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
    },
+    "react-longpressable": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/react-longpressable/-/react-longpressable-1.1.1.tgz",
+      "integrity": "sha512-Q8S7CzZVNmP123tHrMp0U0+/fgDEZCi5CpOGkabz3a2zQ0aek5IAizetxtxBAt1hQHHaAYynPHhtcSkLIkqEzQ=="
+    },
    "react-markdown": {
      "version": "6.0.3",
      "resolved": "https://registry.npmjs.org/react-markdown/-/react-markdown-6.0.3.tgz",
@ -18660,15 +18666,13 @@
          "version": "16.0.2",
          "resolved": "https://registry.npmjs.org/eslint-config-standard/-/eslint-config-standard-16.0.2.tgz",
          "integrity": "sha512-fx3f1rJDsl9bY7qzyX8SAtP8GBSk6MfXFaTfaGgk12aAYW4gJSyRm7dM790L6cbXv63fvjY4XeSzXnb4WM+SKw==",
-          "dev": true,
-          "requires": {}
+          "dev": true
        },
        "eslint-config-standard-jsx": {
          "version": "10.0.0",
          "resolved": "https://registry.npmjs.org/eslint-config-standard-jsx/-/eslint-config-standard-jsx-10.0.0.tgz",
          "integrity": "sha512-hLeA2f5e06W1xyr/93/QJulN/rLbUVUmqTlexv9PRKHFwEC9ffJcH2LvJhMoEqYQBEYafedgGZXH2W8NUpt5lA==",
-          "dev": true,
-          "requires": {}
+          "dev": true
        },
        "eslint-plugin-import": {
          "version": "2.22.1",
@ -19262,8 +19266,7 @@
    "stylis-rule-sheet": {
      "version": "0.0.10",
      "resolved": "https://registry.npmjs.org/stylis-rule-sheet/-/stylis-rule-sheet-0.0.10.tgz",
-      "integrity": "sha512-nTbZoaqoBnmK+ptANthb10ZRZOGC+EmTLLUxeYIuHNkEKcmKgXX1XWKkUBT2Ac4es3NybooPe0SmvKdhKJZAuw==",
-      "requires": {}
+      "integrity": "sha512-nTbZoaqoBnmK+ptANthb10ZRZOGC+EmTLLUxeYIuHNkEKcmKgXX1XWKkUBT2Ac4es3NybooPe0SmvKdhKJZAuw=="
    },
    "subscriptions-transport-ws": {
      "version": "0.9.19",
@ -19285,8 +19288,7 @@
        "ws": {
          "version": "7.5.5",
          "resolved": "https://registry.npmjs.org/ws/-/ws-7.5.5.tgz",
-          "integrity": "sha512-BAkMFcAzl8as1G/hArkxOxq3G7pjUqQ3gzYbLL0/5zNkph70e+lCoxBGnm6AW1+/aiNeV4fnKqZ8m4GZewmH2w==",
-          "requires": {}
+          "integrity": "sha512-BAkMFcAzl8as1G/hArkxOxq3G7pjUqQ3gzYbLL0/5zNkph70e+lCoxBGnm6AW1+/aiNeV4fnKqZ8m4GZewmH2w=="
        }
      }
    },
@ -19886,8 +19888,7 @@
    "use-isomorphic-layout-effect": {
      "version": "1.1.1",
      "resolved": "https://registry.npmjs.org/use-isomorphic-layout-effect/-/use-isomorphic-layout-effect-1.1.1.tgz",
-      "integrity": "sha512-L7Evj8FGcwo/wpbv/qvSfrkHFtOpCzvM5yl2KVyDJoylVuSvzphiiasmjgQPttIGBAy2WKiBNR98q8w7PiNgKQ==",
-      "requires": {}
+      "integrity": "sha512-L7Evj8FGcwo/wpbv/qvSfrkHFtOpCzvM5yl2KVyDJoylVuSvzphiiasmjgQPttIGBAy2WKiBNR98q8w7PiNgKQ=="
    },
    "use-latest": {
      "version": "1.2.0",
@ -20161,8 +20162,7 @@
    "ws": {
      "version": "8.2.2",
      "resolved": "https://registry.npmjs.org/ws/-/ws-8.2.2.tgz",
-      "integrity": "sha512-Q6B6H2oc8QY3llc3cB8kVmQ6pnJWVQbP7Q5algTcIxx7YEpc0oU4NBVHlztA7Ekzfhw2r0rPducMUiCGWKQRzw==",
-      "requires": {}
+      "integrity": "sha512-Q6B6H2oc8QY3llc3cB8kVmQ6pnJWVQbP7Q5algTcIxx7YEpc0oU4NBVHlztA7Ekzfhw2r0rPducMUiCGWKQRzw=="
    },
    "xdg-basedir": {
      "version": "4.0.0",
--- a/package.json
+++ b/package.json
@ -34,6 +34,7 @@
    "react-bootstrap": "^1.5.2",
    "react-countdown": "^2.3.2",
    "react-dom": "^17.0.2",
+    "react-longpressable": "^1.1.1",
    "react-markdown": "^6.0.2",
    "react-syntax-highlighter": "^15.4.3",
    "react-textarea-autosize": "^8.3.3",