add component to display for awaiting tx

janndriessen · Jan 18, 2024 · a73cf8c · a73cf8c
1 parent f7e5e24
commit a73cf8c
Show file tree

Hide file tree

Showing 2 changed files with 73 additions and 20 deletions.
diff --git 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 (
     <motion.div className="background shadow-xl p-8" variants={sidebar}>
-      <motion.ul variants={variants}>
-        <PayHeadline
-          label={`Pay ${amount} GHO`}
-          subtitle={`$${amountUsd}`}
-          key={0}
-        />
-        <QRCode url={data ?? ''} key={1} />
-        <div className="mt-6">
-          <Text label="To pay, scan the code inside the app" key={2} />
-        </div>
-        <div className="mt-16">
-          <Text label="or..." key={3} />
+      {!isWaiting && !transactionHash && (
+        <motion.ul variants={variants}>
+          <PayHeadline
+            label={`Pay ${amount} GHO`}
+            subtitle={`$${amountUsd}`}
+            key={0}
+          />
+          <QRCode url={data ?? ''} key={1} />
+          <div className="mt-6">
+            <Text label="To pay, scan the code inside the app" key={2} />
+          </div>
+          <div className="mt-16">
+            <Text label="or..." key={3} />
+          </div>
+          <div className="flex flex-col items-center mt-8 w-full">
+            <motion.li variants={variantsItems}>
+              <ConnectKitButton />
+            </motion.li>
+          </div>
+        </motion.ul>
+      )}
+      {(isWaiting || transactionHash !== null) && (
+        <div>
+          <TextTransaction label={txText} hash={transactionHash} />
         </div>
-        <div className="flex flex-col items-center mt-8 w-full">
-          <motion.li variants={variantsItems}>
-            <ConnectKitButton />
-          </motion.li>
-        </div>
-      </motion.ul>
+      )}
     </motion.div>
   )
 }
@@ -118,3 +129,41 @@ export const Text = ({ label }: { label: string }) => {
     </motion.li>
   )
 }
+
+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 (
+    <div className="flex-col mt-20">
+      <p className="font-semibold text-3xl text-center">{label}</p>
+      {hash && (
+        <div className="grid place-items-center w-full mt-8">
+          <a
+            href={`https://sepolia.etherscan.io/tx/${hash}`}
+            target="_blank"
+            className="underline"
+          >
+            {shortenAddress(hash)}
+          </a>
+        </div>
+      )}
+    </div>
+  )
+}
diff --git 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<string | null>(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 }
 }