diff --git a/advanced/dapps/pos-dapp/package.json b/advanced/dapps/pos-dapp/package.json
index dbc2cfe49..c937f71bc 100644
--- a/advanced/dapps/pos-dapp/package.json
+++ b/advanced/dapps/pos-dapp/package.json
@@ -9,12 +9,12 @@
"lint": "eslint"
},
"dependencies": {
- "@reown/appkit": "1.8.2",
+ "@reown/appkit": "1.8.12",
"next": "15.5.2",
"react": "19.1.0",
"react-dom": "19.1.0",
"react-hot-toast": "^2.6.0",
- "@walletconnect/pos-client": "0.0.0-canary.1"
+ "@walletconnect/pos-client": "0.0.0-canary.4"
},
"devDependencies": {
"@eslint/eslintrc": "^3",
diff --git a/advanced/dapps/pos-dapp/src/app/page.tsx b/advanced/dapps/pos-dapp/src/app/page.tsx
index 41eb3fba9..21f8357f9 100644
--- a/advanced/dapps/pos-dapp/src/app/page.tsx
+++ b/advanced/dapps/pos-dapp/src/app/page.tsx
@@ -82,6 +82,9 @@ export default function Home() {
const [merchantAddress, setMerchantAddress] = useState("");
const [isSetupComplete, setIsSetupComplete] = useState(false);
const [tempMerchantAddress, setTempMerchantAddress] = useState("");
+ const [isManualControl, setIsManualControl] = useState(false);
+ const [isWalletConnected, setIsWalletConnected] = useState(false);
+ const [hasRequestsSent, setHasRequestsSent] = useState(false);
useEffect(() => {
// Check for saved merchant address in localStorage
@@ -91,6 +94,12 @@ export default function Home() {
setIsSetupComplete(true);
}
+ // Check for saved manual mode state
+ const savedManualMode = localStorage.getItem("isManualMode");
+ if (savedManualMode !== null) {
+ setIsManualControl(savedManualMode === "true");
+ }
+
if (appkit) return;
setPaymentState("connecting");
@@ -134,9 +143,10 @@ export default function Home() {
const setupEventListeners = () => {
if (!posClient) return;
- posClient.on("connected", (connected) => {
- connected = true;
- console.log("connected", connected);
+ posClient.on("connected", ({ session }) => {
+ console.log("connected", session);
+ setIsWalletConnected(true);
+ setHasRequestsSent(false);
toast.success("Customer wallet connected", {
icon: "🔗",
duration: 3000,
@@ -146,6 +156,7 @@ export default function Home() {
posClient.on("disconnected", (disconnected) => {
console.log("disconnected", disconnected);
+ setIsWalletConnected(false);
toast.error("Customer wallet disconnected", {
icon: "🔌",
duration: 3000,
@@ -193,13 +204,14 @@ export default function Home() {
});
appkit?.close();
setPaymentState("payment_failed");
+ setIsWalletConnected(false);
});
- posClient.on("payment_broadcasted", (paymentBroadcasted) => {
- console.log("paymentBroadcasted", paymentBroadcasted);
+ posClient.on("payment_broadcasted", ({ result }) => {
+ console.log("paymentBroadcasted", result);
setTransactionHashes((prev) => {
const newTransaction: TransactionHash = {
- hash: paymentBroadcasted,
+ hash: result,
status: "pending",
};
const newHashes = [...prev, newTransaction];
@@ -224,14 +236,13 @@ export default function Home() {
setPaymentState("payment_requesting");
});
- posClient.on("payment_successful", (paymentSuccessful) => {
- console.log("paymentSuccessful", paymentSuccessful);
- const { transaction } = paymentSuccessful;
+ posClient.on("payment_successful", ({ result }) => {
+ console.log("paymentSuccessful", result);
// Update transaction status to successful
setTransactionHashes((prev) =>
prev.map((tx) =>
- tx.hash === transaction
+ tx.hash === result
? { ...tx, status: "success" as TransactionStatus }
: tx
)
@@ -351,7 +362,10 @@ export default function Home() {
);
try {
- await posClient.createPaymentIntent({ paymentIntents });
+ await posClient.createPaymentIntent({
+ paymentIntents,
+ manualControl: isManualControl,
+ });
toast.success(
`Payment request created for ${paymentItems.length} item${
paymentItems.length > 1 ? "s" : ""
@@ -401,6 +415,8 @@ export default function Home() {
const resetTransaction = () => {
setPaymentState("idle");
setTransactionHashes([]);
+ setIsWalletConnected(false);
+ setHasRequestsSent(false);
// Reset all payment item statuses to idle
setPaymentItems((prev) =>
prev.map((item) => ({ ...item, status: "idle" as PaymentItemStatus }))
@@ -410,6 +426,8 @@ export default function Home() {
const restart = (reinit = true) => {
setPaymentState("idle");
setTransactionHashes([]);
+ setIsWalletConnected(false);
+ setHasRequestsSent(false);
// Reset all payment item statuses to idle
setPaymentItems((prev) =>
prev.map((item) => ({ ...item, status: "idle" as PaymentItemStatus }))
@@ -444,6 +462,33 @@ export default function Home() {
setIsSetupComplete(false);
};
+ const handleManualModeToggle = () => {
+ const newValue = !isManualControl;
+ setIsManualControl(newValue);
+ localStorage.setItem("isManualControl", String(newValue));
+ };
+
+ const handleSendRequestsToWallet = async () => {
+ if (!posClient) {
+ toast.error("POS client not available");
+ return;
+ }
+
+ setHasRequestsSent(true);
+
+ try {
+ await posClient.sendPaymentsToWallet();
+ toast.success("Payment requests sent to wallet", {
+ icon: "📤",
+ duration: 3000,
+ });
+ } catch (error) {
+ console.error("Failed to send payment requests:", error);
+ toast.error("Failed to send payment requests");
+ setHasRequestsSent(false);
+ }
+ };
+
const getStatusMessage = () => {
switch (paymentState) {
case "connecting":
@@ -549,12 +594,37 @@ export default function Home() {
{/* Merchant Address Display */}
-
- Merchant Address:
-
-
- {merchantAddress}
-
+
+
+
+ Merchant Address:
+
+
+ {merchantAddress}
+
+
+
+
+
+
+
+ {isManualControl && isWalletConnected && (
+
+ )}