From ff656e930d5d5e3db84720bcab7ea9693a343933 Mon Sep 17 00:00:00 2001
From: Alec Chen <93971719+0xAlec@users.noreply.github.com>
Date: Mon, 9 Sep 2024 19:04:40 -0400
Subject: [PATCH] add `PayStatus`

---
 .../nextjs-app-router/components/demo/Pay.tsx | 33 +++++++++--------
 src/pay/components/PayStatus.tsx              | 14 ++++++++
 src/pay/hooks/useGetPayStatus.tsx             | 35 +++++++++++++++++++
 src/pay/index.ts                              |  1 +
 4 files changed, 66 insertions(+), 17 deletions(-)
 create mode 100644 src/pay/components/PayStatus.tsx
 create mode 100644 src/pay/hooks/useGetPayStatus.tsx

diff --git a/playground/nextjs-app-router/components/demo/Pay.tsx b/playground/nextjs-app-router/components/demo/Pay.tsx
index 78c6f99107..e706b6e624 100644
--- a/playground/nextjs-app-router/components/demo/Pay.tsx
+++ b/playground/nextjs-app-router/components/demo/Pay.tsx
@@ -1,6 +1,6 @@
 import { ENVIRONMENT, ENVIRONMENT_VARIABLES } from '@/lib/constants';
 import { useCallback, useContext, useEffect, useState } from 'react';
-import { Pay, PayButton } from '../../onchainkit/src/pay';
+import { Pay, PayButton, PayStatus } from '../../onchainkit/src/pay';
 import { AppContext } from '../AppProvider';
 
 function PayComponent() {
@@ -16,7 +16,7 @@ function PayComponent() {
       `${ENVIRONMENT_VARIABLES[ENVIRONMENT.API_URL]}/api/createCharge`,
       {
         method: 'POST',
-      }
+      },
     );
     const data = await res.json();
     console.log('Charge id', data.id);
@@ -28,23 +28,22 @@ function PayComponent() {
   }, [createCharge]);
 
   return (
-    chargeId && (
-      <Pay
-        key={chargeId}
-        chainId={chainId || 8453}
-        chargeId={chargeId}
-        onStatus={handleOnStatus}
-      >
-        <PayButton />
-      </Pay>
-    )
+    <div className="mx-auto grid w-1/2 gap-8">
+      {chargeId && (
+        <Pay
+          key={chargeId}
+          chainId={chainId || 8453}
+          chargeId={chargeId}
+          onStatus={handleOnStatus}
+        >
+          <PayButton coinbaseBranded={true} />
+          <PayStatus />
+        </Pay>
+      )}
+    </div>
   );
 }
 
 export default function PayDemo() {
-  return (
-    <div className="mx-auto">
-      <PayComponent />
-    </div>
-  );
+  return <PayComponent />;
 }
diff --git a/src/pay/components/PayStatus.tsx b/src/pay/components/PayStatus.tsx
new file mode 100644
index 0000000000..8df63fe1b8
--- /dev/null
+++ b/src/pay/components/PayStatus.tsx
@@ -0,0 +1,14 @@
+import { cn, text } from '../../styles/theme';
+import { useGetPayStatus } from '../hooks/useGetPayStatus';
+
+export function PayStatus({ className }: { className?: string }) {
+  const { label, labelClassName } = useGetPayStatus();
+
+  return (
+    <div className={cn('flex justify-between', className)}>
+      <div className={cn(text.label2, className)}>
+        <p className={labelClassName}>{label}</p>
+      </div>
+    </div>
+  );
+}
diff --git a/src/pay/hooks/useGetPayStatus.tsx b/src/pay/hooks/useGetPayStatus.tsx
new file mode 100644
index 0000000000..7afedf1d22
--- /dev/null
+++ b/src/pay/hooks/useGetPayStatus.tsx
@@ -0,0 +1,35 @@
+import { useMemo } from 'react';
+import { color } from '../../styles/theme';
+import { usePayContext } from '../components/PayProvider';
+
+export function useGetPayStatus() {
+  const { errorMessage, lifeCycleStatus } = usePayContext();
+  const isInit = lifeCycleStatus?.statusName === 'init';
+  const isPending = lifeCycleStatus?.statusName === 'transactionPending';
+  const isSuccess = lifeCycleStatus?.statusName === 'success';
+
+  return useMemo(() => {
+    let label = '';
+    let labelClassName: string = color.foregroundMuted;
+
+    if (isInit) {
+      label = 'Zero transaction fee';
+    }
+
+    if (isPending) {
+      label = 'Payment in progress...';
+    }
+
+    if (isSuccess) {
+      label = 'Payment successful!';
+      labelClassName = color.success;
+    }
+
+    if (errorMessage) {
+      label = errorMessage;
+      labelClassName = color.error;
+    }
+
+    return { label, labelClassName };
+  }, [errorMessage, isInit, isPending, isSuccess]);
+}
diff --git a/src/pay/index.ts b/src/pay/index.ts
index 5e33770d23..6982d9460a 100644
--- a/src/pay/index.ts
+++ b/src/pay/index.ts
@@ -1,2 +1,3 @@
 export { Pay } from './components/Pay';
 export { PayButton } from './components/PayButton';
+export { PayStatus } from './components/PayStatus';