Merge pull request #9 from janndriessen/feat/add-subscribe-to-payment

feat: add subscribe to payment

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",

shop/.env.default

@@ -1,2 +1,4 @@
 ALCHEMY_ID=
+NEXT_PUBLIC_PUSHER_APP_CLUSTER=
+NEXT_PUBLIC_PUSHER_APP_KEY=
 WALLETCONNECT_PROJECT_ID=

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",
@@ -27,6 +28,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",

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<TransactionStatusResponse | null> {
+  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)
+  })
+}