From e6301e6413d9b1f5167cd742a61659d1918fcc94 Mon Sep 17 00:00:00 2001 From: JD Date: Thu, 18 Jan 2024 08:59:58 +0100 Subject: [PATCH 1/8] return payment id --- shop/src/app/payment/components/payment-popup/index.tsx | 2 +- shop/src/app/payment/components/payment-popup/providers.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/shop/src/app/payment/components/payment-popup/index.tsx b/shop/src/app/payment/components/payment-popup/index.tsx index e64369d..a2c99c0 100644 --- a/shop/src/app/payment/components/payment-popup/index.tsx +++ b/shop/src/app/payment/components/payment-popup/index.tsx @@ -53,7 +53,7 @@ const variantsItems = { } export const PaymentPopup = () => { - const { amount, amountUsd, data } = usePayment() + const { amount, amountUsd, data, paymentId } = usePayment() return ( diff --git a/shop/src/app/payment/components/payment-popup/providers.ts b/shop/src/app/payment/components/payment-popup/providers.ts index 026aa5f..770fafc 100644 --- a/shop/src/app/payment/components/payment-popup/providers.ts +++ b/shop/src/app/payment/components/payment-popup/providers.ts @@ -28,5 +28,5 @@ export function usePayment() { generatePaymentData() }, []) - return { amount, amountUsd, data } + return { amount, amountUsd, data, paymentId } } From aea7e54259c4372b6323552653e172a455d9f7e5 Mon Sep 17 00:00:00 2001 From: JD Date: Thu, 18 Jan 2024 09:38:24 +0100 Subject: [PATCH 2/8] add pusher lib --- shop/package-lock.json | 14 ++++++++++++++ shop/package.json | 1 + 2 files changed, 15 insertions(+) diff --git a/shop/package-lock.json b/shop/package-lock.json index 719add8..9434757 100644 --- a/shop/package-lock.json +++ b/shop/package-lock.json @@ -26,6 +26,7 @@ "framer-motion": "^10.18.0", "lucide-react": "^0.309.0", "next": "14.0.4", + "pusher-js": "^8.4.0-rc2", "qrcode": "^1.5.3", "react": "^18", "react-day-picker": "^8.10.0", @@ -8297,6 +8298,14 @@ "node": ">=6" } }, + "node_modules/pusher-js": { + "version": "8.4.0-rc2", + "resolved": "https://registry.npmjs.org/pusher-js/-/pusher-js-8.4.0-rc2.tgz", + "integrity": "sha512-d87GjOEEl9QgO5BWmViSqW0LOzPvybvX6WA9zLUstNdB57jVJuR27zHkRnrav2a3+zAMlHbP2Og8wug+rG8T+g==", + "dependencies": { + "tweetnacl": "^1.0.3" + } + }, "node_modules/qrcode": { "version": "1.5.3", "resolved": "https://registry.npmjs.org/qrcode/-/qrcode-1.5.3.tgz", @@ -9635,6 +9644,11 @@ "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz", "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==" }, + "node_modules/tweetnacl": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/tweetnacl/-/tweetnacl-1.0.3.tgz", + "integrity": "sha512-6rt+RN7aOi1nGMyC4Xa5DdYiukl2UWCbcJft7YhxReBGQD7OAM8Pbxw6YMo4r2diNEA8FEmu32YOn9rhaiE5yw==" + }, "node_modules/type-check": { "version": "0.4.0", "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz", diff --git a/shop/package.json b/shop/package.json index d3bbaab..755d936 100644 --- a/shop/package.json +++ b/shop/package.json @@ -27,6 +27,7 @@ "framer-motion": "^10.18.0", "lucide-react": "^0.309.0", "next": "14.0.4", + "pusher-js": "^8.4.0-rc2", "qrcode": "^1.5.3", "react": "^18", "react-day-picker": "^8.10.0", From 218791e37e72344fdb1a1af1e91088d23747bff7 Mon Sep 17 00:00:00 2001 From: JD Date: Thu, 18 Jan 2024 09:38:50 +0100 Subject: [PATCH 3/8] rename to use create payment --- shop/src/app/payment/components/payment-popup/index.tsx | 4 ++-- shop/src/app/payment/components/payment-popup/providers.ts | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/shop/src/app/payment/components/payment-popup/index.tsx b/shop/src/app/payment/components/payment-popup/index.tsx index a2c99c0..92785df 100644 --- a/shop/src/app/payment/components/payment-popup/index.tsx +++ b/shop/src/app/payment/components/payment-popup/index.tsx @@ -1,7 +1,7 @@ import { ConnectKitButton } from 'connectkit' import { motion } from 'framer-motion' -import { usePayment } from './providers' +import { useCreatePayment } from './providers' import './styles.css' @@ -53,7 +53,7 @@ const variantsItems = { } export const PaymentPopup = () => { - const { amount, amountUsd, data, paymentId } = usePayment() + const { amount, amountUsd, data, paymentId } = useCreatePayment() return ( diff --git a/shop/src/app/payment/components/payment-popup/providers.ts b/shop/src/app/payment/components/payment-popup/providers.ts index 770fafc..c0983d2 100644 --- a/shop/src/app/payment/components/payment-popup/providers.ts +++ b/shop/src/app/payment/components/payment-popup/providers.ts @@ -2,7 +2,7 @@ import { useEffect, useState } from 'react' import QRCode from 'qrcode' import { v4 as uuidv4 } from 'uuid' -export function usePayment() { +export function useCreatePayment() { const [data, setData] = useState(null) const paymentId = uuidv4() From d66d8575f86d82be3c12ea2c3d504bd59bd57d49 Mon Sep 17 00:00:00 2001 From: JD Date: Thu, 18 Jan 2024 09:49:30 +0100 Subject: [PATCH 4/8] add subscribing to payment id --- shop/.env.default | 2 ++ .../components/payment-popup/index.tsx | 3 +- .../components/payment-popup/providers.ts | 32 +++++++++++++++++++ 3 files changed, 36 insertions(+), 1 deletion(-) diff --git a/shop/.env.default b/shop/.env.default index 031ab05..8d78b90 100644 --- a/shop/.env.default +++ b/shop/.env.default @@ -1,2 +1,4 @@ ALCHEMY_ID= +NEXT_PUBLIC_PUSHER_APP_CLUSTER= +NEXT_PUBLIC_PUSHER_APP_KEY= WALLETCONNECT_PROJECT_ID= diff --git a/shop/src/app/payment/components/payment-popup/index.tsx b/shop/src/app/payment/components/payment-popup/index.tsx index 92785df..f21a296 100644 --- a/shop/src/app/payment/components/payment-popup/index.tsx +++ b/shop/src/app/payment/components/payment-popup/index.tsx @@ -1,7 +1,7 @@ import { ConnectKitButton } from 'connectkit' import { motion } from 'framer-motion' -import { useCreatePayment } from './providers' +import { useCreatePayment, useTrackPayment } from './providers' import './styles.css' @@ -54,6 +54,7 @@ const variantsItems = { export const PaymentPopup = () => { const { amount, amountUsd, data, paymentId } = useCreatePayment() + const { transactionHash } = useTrackPayment(paymentId) return ( diff --git a/shop/src/app/payment/components/payment-popup/providers.ts b/shop/src/app/payment/components/payment-popup/providers.ts index c0983d2..cf28a92 100644 --- a/shop/src/app/payment/components/payment-popup/providers.ts +++ b/shop/src/app/payment/components/payment-popup/providers.ts @@ -1,4 +1,5 @@ import { useEffect, useState } from 'react' +import Pusher from 'pusher-js' import QRCode from 'qrcode' import { v4 as uuidv4 } from 'uuid' @@ -30,3 +31,34 @@ export function useCreatePayment() { return { amount, amountUsd, data, paymentId } } + +export function useTrackPayment(paymentId: string) { + const [transactionHash, setTransactionHash] = useState(null) + + useEffect(() => { + console.log('Connecting to pusher:...') + const pusher = new Pusher(process.env.NEXT_PUBLIC_PUSHER_APP_KEY!, { + cluster: process.env.NEXT_PUBLIC_PUSHER_APP_CLUSTER!, + }) + pusher.connection.bind('error', function (err: any) { + console.error('Pusher connection error:', err) + }) + const channel = pusher.subscribe(paymentId) + console.log('Subscribed to channel:', paymentId) + console.log('subscribed channels:') + pusher.allChannels().forEach((channel) => console.log(channel.name)) + channel.bind('payment-submitted', function (data: { message: string }) { + console.log('Received pusher event:', data) + const taskId = data.message + console.log('task_id:', taskId) + // TODO: await gelato task + // TODO: get tx hash + // TODO set tx hash + }) + return () => { + pusher.unsubscribe(paymentId) + } + }, [paymentId]) + + return { transactionHash } +} From 42ff654a4268b71d8af61f7be4f08775f49e4f44 Mon Sep 17 00:00:00 2001 From: JD Date: Thu, 18 Jan 2024 09:59:11 +0100 Subject: [PATCH 5/8] add gelato relay sdk --- shop/package-lock.json | 196 +++++++++++++++++++++++++++++++++++++++++ shop/package.json | 1 + 2 files changed, 197 insertions(+) diff --git a/shop/package-lock.json b/shop/package-lock.json index 9434757..66472c5 100644 --- a/shop/package-lock.json +++ b/shop/package-lock.json @@ -8,6 +8,7 @@ "name": "ghopay", "version": "0.1.0", "dependencies": { + "@gelatonetwork/relay-sdk": "^5.5.5", "@radix-ui/react-avatar": "^1.0.4", "@radix-ui/react-dialog": "^1.0.5", "@radix-ui/react-dropdown-menu": "^2.0.6", @@ -740,6 +741,28 @@ "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.1.tgz", "integrity": "sha512-9TANp6GPoMtYzQdt54kfAyMmz1+osLlXdg2ENroU7zzrtflTLrrC/lgrIfaSe+Wu0b89GKccT7vxXA0MoAIO+Q==" }, + "node_modules/@gelatonetwork/relay-sdk": { + "version": "5.5.5", + "resolved": "https://registry.npmjs.org/@gelatonetwork/relay-sdk/-/relay-sdk-5.5.5.tgz", + "integrity": "sha512-aLiN8CmWBTei5JMoSg3LHX3MmB+IoaM+Rw1kkm9x/ECrS6FhWZH1WU76+xvmeIVnbncEUc3xNOQfz7UAwUZI0w==", + "dependencies": { + "axios": "0.27.2", + "ethers": "6.7.0", + "isomorphic-ws": "^5.0.0", + "ws": "^8.5.0" + }, + "engines": { + "node": ">=14.0.0" + } + }, + "node_modules/@gelatonetwork/relay-sdk/node_modules/isomorphic-ws": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/isomorphic-ws/-/isomorphic-ws-5.0.0.tgz", + "integrity": "sha512-muId7Zzn9ywDsyXgTIafTry2sV3nySZeUDe6YedVd1Hvuuep5AsIlqK+XefWpYTyJG5e503F2xIuT2lcU6rCSw==", + "peerDependencies": { + "ws": "*" + } + }, "node_modules/@humanwhocodes/config-array": { "version": "0.11.14", "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.14.tgz", @@ -1149,6 +1172,17 @@ "url": "https://paulmillr.com/funding/" } }, + "node_modules/@noble/secp256k1": { + "version": "1.7.1", + "resolved": "https://registry.npmjs.org/@noble/secp256k1/-/secp256k1-1.7.1.tgz", + "integrity": "sha512-hOUk6AyBFmqVrv7k5WAw/LpszxVbj9gGN4JRkIX52fdFAj1UA61KXmZDvqVEm+pOyec3+fIeZB02LYa/pWOArw==", + "funding": [ + { + "type": "individual", + "url": "https://paulmillr.com/funding/" + } + ] + }, "node_modules/@nodelib/fs.scandir": { "version": "2.1.5", "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz", @@ -3814,6 +3848,11 @@ "has-symbols": "^1.0.3" } }, + "node_modules/asynckit": { + "version": "0.4.0", + "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz", + "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==" + }, "node_modules/atomic-sleep": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/atomic-sleep/-/atomic-sleep-1.0.0.tgz", @@ -3879,6 +3918,15 @@ "node": ">=4" } }, + "node_modules/axios": { + "version": "0.27.2", + "resolved": "https://registry.npmjs.org/axios/-/axios-0.27.2.tgz", + "integrity": "sha512-t+yRIyySRTp/wua5xEr+z1q60QmLq8ABsS5O9Me1AsE5dfKqgnCFzwiCZZ/cGNd1lq4/7akDWMxdhVlucjmnOQ==", + "dependencies": { + "follow-redirects": "^1.14.9", + "form-data": "^4.0.0" + } + }, "node_modules/axobject-query": { "version": "3.2.1", "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-3.2.1.tgz", @@ -4575,6 +4623,17 @@ "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==" }, + "node_modules/combined-stream": { + "version": "1.0.8", + "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz", + "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==", + "dependencies": { + "delayed-stream": "~1.0.0" + }, + "engines": { + "node": ">= 0.8" + } + }, "node_modules/command-score": { "version": "0.1.2", "resolved": "https://registry.npmjs.org/command-score/-/command-score-0.1.2.tgz", @@ -4954,6 +5013,14 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/delayed-stream": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz", + "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==", + "engines": { + "node": ">=0.4.0" + } + }, "node_modules/denque": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/denque/-/denque-2.1.0.tgz", @@ -5719,6 +5786,84 @@ "fast-safe-stringify": "^2.0.6" } }, + "node_modules/ethers": { + "version": "6.7.0", + "resolved": "https://registry.npmjs.org/ethers/-/ethers-6.7.0.tgz", + "integrity": "sha512-pxt5hK82RNwcTX2gOZP81t6qVPVspnkpeivwEgQuK9XUvbNtghBnT8GNIb/gPh+WnVSfi8cXC9XlfT8sqc6D6w==", + "funding": [ + { + "type": "individual", + "url": "https://github.com/sponsors/ethers-io/" + }, + { + "type": "individual", + "url": "https://www.buymeacoffee.com/ricmoo" + } + ], + "dependencies": { + "@adraffy/ens-normalize": "1.9.2", + "@noble/hashes": "1.1.2", + "@noble/secp256k1": "1.7.1", + "@types/node": "18.15.13", + "aes-js": "4.0.0-beta.5", + "tslib": "2.4.0", + "ws": "8.5.0" + }, + "engines": { + "node": ">=14.0.0" + } + }, + "node_modules/ethers/node_modules/@adraffy/ens-normalize": { + "version": "1.9.2", + "resolved": "https://registry.npmjs.org/@adraffy/ens-normalize/-/ens-normalize-1.9.2.tgz", + "integrity": "sha512-0h+FrQDqe2Wn+IIGFkTCd4aAwTJ+7834Ek1COohCyV26AXhwQ7WQaz+4F/nLOeVl/3BtWHOHLPsq46V8YB46Eg==" + }, + "node_modules/ethers/node_modules/@noble/hashes": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/@noble/hashes/-/hashes-1.1.2.tgz", + "integrity": "sha512-KYRCASVTv6aeUi1tsF8/vpyR7zpfs3FUzy2Jqm+MU+LmUKhQ0y2FpfwqkCcxSg2ua4GALJd8k2R76WxwZGbQpA==", + "funding": [ + { + "type": "individual", + "url": "https://paulmillr.com/funding/" + } + ] + }, + "node_modules/ethers/node_modules/@types/node": { + "version": "18.15.13", + "resolved": "https://registry.npmjs.org/@types/node/-/node-18.15.13.tgz", + "integrity": "sha512-N+0kuo9KgrUQ1Sn/ifDXsvg0TTleP7rIy4zOBGECxAljqvqfqpTfzx0Q1NUedOixRMBfe2Whhb056a42cWs26Q==" + }, + "node_modules/ethers/node_modules/aes-js": { + "version": "4.0.0-beta.5", + "resolved": "https://registry.npmjs.org/aes-js/-/aes-js-4.0.0-beta.5.tgz", + "integrity": "sha512-G965FqalsNyrPqgEGON7nIx1e/OVENSgiEIzyC63haUMuvNnwIgIjMs52hlTCKhkBny7A2ORNlfY9Zu+jmGk1Q==" + }, + "node_modules/ethers/node_modules/tslib": { + "version": "2.4.0", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.0.tgz", + "integrity": "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ==" + }, + "node_modules/ethers/node_modules/ws": { + "version": "8.5.0", + "resolved": "https://registry.npmjs.org/ws/-/ws-8.5.0.tgz", + "integrity": "sha512-BWX0SWVgLPzYwF8lTzEy1egjhS4S4OEAHfsO8o65WOVsrnSRGaSiUaa9e0ggGlkMTtBlmOpEXiie9RUcBO86qg==", + "engines": { + "node": ">=10.0.0" + }, + "peerDependencies": { + "bufferutil": "^4.0.1", + "utf-8-validate": "^5.0.2" + }, + "peerDependenciesMeta": { + "bufferutil": { + "optional": true + }, + "utf-8-validate": { + "optional": true + } + } + }, "node_modules/eventemitter3": { "version": "4.0.7", "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-4.0.7.tgz", @@ -5912,6 +6057,25 @@ "integrity": "sha512-36yxDn5H7OFZQla0/jFJmbIKTdZAQHngCedGxiMmpNfEZM0sdEeT+WczLQrjK6D7o2aiyLYDnkw0R3JK0Qv1RQ==", "dev": true }, + "node_modules/follow-redirects": { + "version": "1.15.5", + "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.5.tgz", + "integrity": "sha512-vSFWUON1B+yAw1VN4xMfxgn5fTUiaOzAJCKBwIIgT/+7CuGy9+r+5gITvP62j3RmaD5Ph65UaERdOSRGUzZtgw==", + "funding": [ + { + "type": "individual", + "url": "https://github.com/sponsors/RubenVerborgh" + } + ], + "engines": { + "node": ">=4.0" + }, + "peerDependenciesMeta": { + "debug": { + "optional": true + } + } + }, "node_modules/for-each": { "version": "0.3.3", "resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.3.tgz", @@ -5935,6 +6099,19 @@ "url": "https://github.com/sponsors/isaacs" } }, + "node_modules/form-data": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz", + "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==", + "dependencies": { + "asynckit": "^0.4.0", + "combined-stream": "^1.0.8", + "mime-types": "^2.1.12" + }, + "engines": { + "node": ">= 6" + } + }, "node_modules/fraction.js": { "version": "4.3.7", "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.3.7.tgz", @@ -7413,6 +7590,25 @@ "node": ">=10.0.0" } }, + "node_modules/mime-db": { + "version": "1.52.0", + "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz", + "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==", + "engines": { + "node": ">= 0.6" + } + }, + "node_modules/mime-types": { + "version": "2.1.35", + "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz", + "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==", + "dependencies": { + "mime-db": "1.52.0" + }, + "engines": { + "node": ">= 0.6" + } + }, "node_modules/mimic-fn": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-4.0.0.tgz", diff --git a/shop/package.json b/shop/package.json index 755d936..70f4c33 100644 --- a/shop/package.json +++ b/shop/package.json @@ -9,6 +9,7 @@ "lint": "next lint" }, "dependencies": { + "@gelatonetwork/relay-sdk": "^5.5.5", "@radix-ui/react-avatar": "^1.0.4", "@radix-ui/react-dialog": "^1.0.5", "@radix-ui/react-dropdown-menu": "^2.0.6", From f7e5e249f446425dbf244a598dea91649ac3ff88 Mon Sep 17 00:00:00 2001 From: JD Date: Thu, 18 Jan 2024 10:02:14 +0100 Subject: [PATCH 6/8] add setting tx hash --- .../components/payment-popup/gelato.ts | 27 +++++++++++++++++++ .../components/payment-popup/providers.ts | 17 +++++++++--- 2 files changed, 41 insertions(+), 3 deletions(-) create mode 100644 shop/src/app/payment/components/payment-popup/gelato.ts diff --git a/shop/src/app/payment/components/payment-popup/gelato.ts b/shop/src/app/payment/components/payment-popup/gelato.ts new file mode 100644 index 0000000..5904194 --- /dev/null +++ b/shop/src/app/payment/components/payment-popup/gelato.ts @@ -0,0 +1,27 @@ +import { + GelatoRelay, + TransactionStatusResponse, +} from '@gelatonetwork/relay-sdk' + +export async function awaitGelatoTask( + taskId: string, +): Promise { + const relay = new GelatoRelay() + return await new Promise((resolve, reject) => { + const maxRetry = 100 + let retryNum = 0 + const interval = setInterval(async () => { + retryNum++ + if (retryNum > maxRetry) { + clearInterval(interval) + reject('Max retry reached') + } + const taskStatus = await relay.getTaskStatus(taskId) + console.log('Gelato task status:', taskStatus) + if (taskStatus?.taskState == 'ExecSuccess') { + clearInterval(interval) + resolve(taskStatus) + } + }, 500) + }) +} diff --git a/shop/src/app/payment/components/payment-popup/providers.ts b/shop/src/app/payment/components/payment-popup/providers.ts index cf28a92..36c8af4 100644 --- a/shop/src/app/payment/components/payment-popup/providers.ts +++ b/shop/src/app/payment/components/payment-popup/providers.ts @@ -2,6 +2,7 @@ import { useEffect, useState } from 'react' import Pusher from 'pusher-js' import QRCode from 'qrcode' import { v4 as uuidv4 } from 'uuid' +import { awaitGelatoTask } from './gelato' export function useCreatePayment() { const [data, setData] = useState(null) @@ -35,6 +36,18 @@ export function useCreatePayment() { export function useTrackPayment(paymentId: string) { const [transactionHash, setTransactionHash] = useState(null) + const waitForTaskToComplete = async (taskId: string) => { + const task = await awaitGelatoTask(taskId) + console.log('task:', task) + const hash = task?.transactionHash + if (!hash) { + console.error('Error waiting for task - no tx hash') + return + } + console.log(`https://sepolia.etherscan.io/tx/${hash}`) + setTransactionHash(hash) + } + useEffect(() => { console.log('Connecting to pusher:...') const pusher = new Pusher(process.env.NEXT_PUBLIC_PUSHER_APP_KEY!, { @@ -51,9 +64,7 @@ export function useTrackPayment(paymentId: string) { console.log('Received pusher event:', data) const taskId = data.message console.log('task_id:', taskId) - // TODO: await gelato task - // TODO: get tx hash - // TODO set tx hash + waitForTaskToComplete(taskId) }) return () => { pusher.unsubscribe(paymentId) From a73cf8c92625e71fbc9381610eb6ca3d3123ccd5 Mon Sep 17 00:00:00 2001 From: JD Date: Thu, 18 Jan 2024 10:33:36 +0100 Subject: [PATCH 7/8] add component to display for awaiting tx --- .../components/payment-popup/index.tsx | 87 +++++++++++++++---- .../components/payment-popup/providers.ts | 6 +- 2 files changed, 73 insertions(+), 20 deletions(-) diff --git a/shop/src/app/payment/components/payment-popup/index.tsx b/shop/src/app/payment/components/payment-popup/index.tsx index f21a296..f488fa4 100644 --- a/shop/src/app/payment/components/payment-popup/index.tsx +++ b/shop/src/app/payment/components/payment-popup/index.tsx @@ -54,29 +54,40 @@ const variantsItems = { export const PaymentPopup = () => { const { amount, amountUsd, data, paymentId } = useCreatePayment() - const { transactionHash } = useTrackPayment(paymentId) + const { isWaiting, transactionHash } = useTrackPayment(paymentId) + + const txText = isWaiting + ? 'Receiving payment. Waiting for transaction to complete.' + : 'The payment was successful. 👻' return ( - - - -
- -
-
- + {!isWaiting && !transactionHash && ( + + + +
+ +
+
+ +
+
+ + + +
+ + )} + {(isWaiting || transactionHash !== null) && ( +
+
-
- - - -
- + )} ) } @@ -118,3 +129,41 @@ export const Text = ({ label }: { label: string }) => { ) } + +export function shortenAddress( + address: string, + startLength: number = 6, + endLength: number = 4, +): string { + if (address.length < startLength + endLength) { + throw new Error('Address is too short to be shortened.') + } + const shortenedStart = address.substring(0, startLength) + const shortenedEnd = address.substring(address.length - endLength) + return `${shortenedStart}...${shortenedEnd}` +} + +export const TextTransaction = ({ + label, + hash, +}: { + label: string + hash: string | null +}) => { + return ( +
+

{label}

+ {hash && ( + + )} +
+ ) +} diff --git a/shop/src/app/payment/components/payment-popup/providers.ts b/shop/src/app/payment/components/payment-popup/providers.ts index 36c8af4..4f7546a 100644 --- a/shop/src/app/payment/components/payment-popup/providers.ts +++ b/shop/src/app/payment/components/payment-popup/providers.ts @@ -34,18 +34,22 @@ export function useCreatePayment() { } export function useTrackPayment(paymentId: string) { + const [isWaiting, setIsWaiting] = useState(false) const [transactionHash, setTransactionHash] = useState(null) const waitForTaskToComplete = async (taskId: string) => { + setIsWaiting(true) const task = await awaitGelatoTask(taskId) console.log('task:', task) const hash = task?.transactionHash if (!hash) { console.error('Error waiting for task - no tx hash') + setIsWaiting(false) return } console.log(`https://sepolia.etherscan.io/tx/${hash}`) setTransactionHash(hash) + setIsWaiting(false) } useEffect(() => { @@ -71,5 +75,5 @@ export function useTrackPayment(paymentId: string) { } }, [paymentId]) - return { transactionHash } + return { isWaiting, transactionHash } } From 6f30fd1fa4183a3400b49dbf4e8196e5c8c8dc6c Mon Sep 17 00:00:00 2001 From: JD Date: Thu, 18 Jan 2024 20:24:47 +0100 Subject: [PATCH 8/8] use different port for payment app (for local testing) --- payment_app/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/payment_app/package.json b/payment_app/package.json index a597106..8418a9c 100644 --- a/payment_app/package.json +++ b/payment_app/package.json @@ -3,7 +3,7 @@ "version": "0.1.0", "private": true, "scripts": { - "dev": "eth-sdk && graphclient build && next dev", + "dev": "eth-sdk && graphclient build && next dev -p 4000", "build": "eth-sdk && graphclient build && next build", "start": "next start", "lint": "next lint",