fix: show pusher payout result

Author: akbarsaputrait

packages/connectkit/.eslintignore

@@ -0,0 +1,7 @@
+node_modules
+build
+dist
+*.d.ts
+rollup.config.js
+bundle-analysis.html
+

packages/connectkit/.eslintrc.json

@@ -5,11 +5,23 @@
     "sourceType": "module",
     "ecmaFeatures": { "jsx": true }
   },
-  "plugins": ["react-hooks"],
-  "extends": ["plugin:react/recommended", "plugin:react-hooks/recommended"],
+  "plugins": ["@typescript-eslint", "react", "react-hooks"],
+  "extends": [
+    "eslint:recommended",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:react/recommended",
+    "plugin:react-hooks/recommended"
+  ],
+  "settings": {
+    "react": {
+      "version": "detect"
+    }
+  },
   "rules": {
     "react-hooks/rules-of-hooks": "error",
     "react-hooks/exhaustive-deps": "warn",
-    "react/react-in-jsx-scope": "off"
+    "react/react-in-jsx-scope": "off",
+    "@typescript-eslint/no-explicit-any": "warn",
+    "@typescript-eslint/no-unused-vars": ["warn", { "argsIgnorePattern": "^_" }]
   }
 }

packages/connectkit/bundle-analysis.html

@@ -12,10 +12,6 @@
     ".": {
       "import": "./build/src/index.js",
       "types": "./build/index.d.ts"
-    },
-    "./world": {
-      "import": "./build/src/world.js",
-      "types": "./build/world.d.ts"
     }
   },
   "types": "./build/index.d.ts",
@@ -69,7 +65,8 @@
     "react-use-measure": "^2.1.1",
     "resize-observer-polyfill": "^1.5.1",
     "styled-components": "^5.3.5",
-    "pino-pretty": "^10.0.0"
+    "pino-pretty": "^10.0.0",
+    "pusher-js": "^8.4.0"
   },
   "peerDependencies": {
     "@creit.tech/stellar-wallets-kit": "^1.9.5",
@@ -101,7 +98,11 @@
     "@types/react-dom": "^18.2.18",
     "@types/rollup-plugin-peer-deps-external": "^2.2.5",
     "@types/styled-components": "^5.1.25",
+    "@typescript-eslint/eslint-plugin": "^6.21.0",
+    "@typescript-eslint/parser": "^6.21.0",
     "@walletconnect/types": "^2.22.3",
+    "eslint": "^8.57.0",
+    "eslint-plugin-react": "^7.37.0",
     "eslint-plugin-react-hooks": "^5.2.0",
     "rollup": "^3.29.5",
     "rollup-plugin-dts": "^6.1.1",

packages/connectkit/package.json

@@ -7,7 +7,7 @@ import { visualizer } from "rollup-plugin-visualizer";
 export default [
   // Build a folder of files for better tree-shaking
   {
-    input: ["./src/index.ts", "./src/world.ts"],
+    input: ["./src/index.ts"],
     external: [
       "@creit.tech/stellar-wallets-kit",
       "@reown/appkit",
@@ -35,6 +35,7 @@ export default [
       "styled-components",
       "wagmi",
       "react",
+      "pusher-js",
     ],
     output: [
       {

packages/connectkit/rollup.config.js

@@ -31,6 +31,7 @@ import {
 } from "../../../constants/rozoConfig";
 import { useRozoPay } from "../../../hooks/useDaimoPay";
 import { usePayoutPolling } from "../../../hooks/usePayoutPolling";
+import { usePusherPayout } from "../../../hooks/usePusherPayout";
 import { useSupportedChains } from "../../../hooks/useSupportedChains";
 import styled from "../../../styles/styled";
 import Button from "../../Common/Button";
@@ -58,6 +59,14 @@ const Confirmation: React.FC = () => {
   const paymentCompletedSent = React.useRef<string | null>(null);
   const payoutCompletedSent = React.useRef<string | null>(null);
 
+  // Local state for Pusher payout transaction hash
+  const [pusherPayoutTxHash, setPusherPayoutTxHash] = useState<
+    string | undefined
+  >(undefined);
+  const [pusherPayoutTxHashUrl, setPusherPayoutTxHashUrl] = useState<
+    string | undefined
+  >(undefined);
+
   const showProcessingPayout = useMemo(() => {
     const { payParams, tokenMode } = paymentStateContext;
 
@@ -165,7 +174,7 @@ const Confirmation: React.FC = () => {
 
   // Use payout polling hook
   const { payoutLoading, payoutTxHash, payoutTxHashUrl } = usePayoutPolling({
-    enabled: showProcessingPayout,
+    enabled: false,
     rozoPaymentId,
     order,
     done,
@@ -174,6 +183,42 @@ const Confirmation: React.FC = () => {
     triggerResize,
   });
 
+  // Use Pusher hook for real-time status updates
+  const enablePusher = context.options?.enablePusher ?? false;
+  usePusherPayout({
+    enabled: enablePusher,
+    rozoPaymentId,
+    onPayoutCompleted: (payload) => {
+      context.log("[CONFIRMATION] Pusher payout completed:", payload);
+      // If we receive payout completed from Pusher and have the destination txhash,
+      // we can use it to update the payout state
+      if (payload.destination_txhash && rozoPaymentId) {
+        const payoutKey = `${payload.destination_txhash}-${rozoPaymentId}`;
+        if (payoutCompletedSent.current !== payoutKey) {
+          payoutCompletedSent.current = payoutKey;
+
+          // Update local state for UI display
+          setPusherPayoutTxHash(payload.destination_txhash);
+
+          // Generate transaction URL if we have the order
+          if (order) {
+            const destChainId = getOrderDestChainId(order);
+            const txUrl = getChainExplorerTxUrl(
+              destChainId,
+              payload.destination_txhash
+            );
+            setPusherPayoutTxHashUrl(txUrl);
+          }
+
+          // Update payment state
+          setPaymentPayoutCompleted(payload.destination_txhash, rozoPaymentId);
+          triggerResize();
+        }
+      }
+    },
+    log: context.log,
+  });
+
   /**
    * Sets the payment completed state.
    * This is called when the payment is confirmed and the transaction hash is available.
@@ -297,14 +342,17 @@ const Confirmation: React.FC = () => {
                     <ModalBody>
                       {payoutLoading ? (
                         <LoadingText>Processing payout...</LoadingText>
-                      ) : payoutTxHashUrl && payoutTxHash ? (
+                      ) : (pusherPayoutTxHashUrl && pusherPayoutTxHash) ||
+                        (payoutTxHashUrl && payoutTxHash) ? (
                         <Link
-                          href={payoutTxHashUrl}
+                          href={pusherPayoutTxHashUrl || payoutTxHashUrl || "#"}
                           target="_blank"
                           rel="noopener noreferrer"
                           style={{ fontSize: 14, fontWeight: 400 }}
                         >
-                          {getAddressContraction(payoutTxHash)}
+                          {getAddressContraction(
+                            pusherPayoutTxHash || payoutTxHash || ""
+                          )}
                           <ExternalIcon />
                         </Link>
                       ) : (