Skip to content

Merged 'Prepare Transaction' & 'Send Transaction' into single "Pay" Step #17

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
shrestha-das wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Merged 'Prepare Transaction' & 'Send Transaction' into single "Pay" Step #17

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
107 changes: 33 additions & 74 deletions stablepay-sdk/src/widget/TransactionReview.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,13 +20,11 @@ const TransactionReview = () => {
connectWallet,
account,
walletClient,
publicClient,
Copy link
Contributor

@Tanya-ruby Tanya-ruby Dec 11, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@shrestha-das why is the public client removed here?

Copy link
Author

@shrestha-das shrestha-das Dec 11, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hello @Tanya-ruby, actually the public client is removed because it's not used in this code.

Copy link
Contributor

@Tanya-ruby Tanya-ruby Dec 11, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

okay , makes sense since we do not use txdata anywhere.Although I see the explorer links functions with diffferent networks link was removed ,can you add that back ?

we would need to modify in such a way that the link is not just for mordor testnet but also other networks.

-> Another thing which will help is if you can add a screenshot or screenrecording of the changes.

Package the sdk locally and use the merchantdashboard repo and replace the stablepay sdk with the locally packged one and you can test it directly and also sharre the screenshots! @shrestha-das

Copy link
Author

@shrestha-das shrestha-das Dec 11, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@Tanya-ruby , Can you please help me to figure out what other tests to do and screenshots to take here?

Github-StablePay-SS1

Copy link
Author

@shrestha-das shrestha-das Dec 11, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

okay , makes sense since we do not use txdata anywhere.Although I see the explorer links functions with diffferent networks link was removed ,can you add that back ?

we would need to modify in such a way that the link is not just for mordor testnet but also other networks.

So I will add these lines again

+   const getExplorerUrl = () => {
+   if (!txHash || !selectedNetwork) return null;
+                                                 
+   const explorerBaseUrls = {
+    "ethereum-classic": "https://etc-mordor.blockscout.com/tx/",
+     "sepolia": "https://sepolia.etherscan.io/tx/",
+     "milkomeda-mainnet": "https://explorer-mainnet-cardano-evm.c1.milkomeda.com/tx/",
+    };
+      
+     return explorerBaseUrls[selectedNetwork]
+     ? `${explorerBaseUrls[selectedNetwork]}${txHash}`
+     : null;
+  };

And modify here -

-  <div className={styles.transactionLink}>
-    ✅ Transaction Hash:{" "}
-     <a
-       href={`https://blockscout.com/etc/mordor/tx/${txHash}`}

to -

+ {getExplorerUrl() && txHash && (
+   <div className={styles.transactionLink}>
+      ✅ Transaction Hash:{" "}
+       <a
+         href={`${getExplorerUrl}${txHash}`}
  • Is this okay?

Copy link
Contributor

@Tanya-ruby Tanya-ruby Dec 12, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@shrestha-das that is the merchant dashboard , you can add and test the sdk in the merchant demo website ,that's where you can check the sdk working

isConnecting,
} = useWallet();

const [transaction, setTransaction] = useState(null);
const [tradeDataBuySc, setTradeDataBuySc] = useState(null);
const [txData, setTxData] = useState(null);
const [message, setMessage] = useState("");
const [txHash, setTxHash] = useState(null);
const [error, setError] = useState(null);
Expand Down Expand Up @@ -88,8 +86,9 @@ const TransactionReview = () => {
console.log("Wallet connected:", account);
}
};

const handleSendTransaction = async () => {

// Single Pay function to prepare and send the transaction
const handlePay = async () => {
if (!account || !contextTransactionDetails || !transaction) {
setMessage("❌ Wallet not connected or transaction details missing");
return;
Expand Down Expand Up @@ -137,54 +136,25 @@ const TransactionReview = () => {
functionName: "transfer",
args: [receiver, amountToSend],
}),
account: account,
};
}

setTxData(builtTx);
setMessage("✅ Transaction ready! Click 'Send Transaction' to proceed.");
} catch (error) {
setError(error);
setMessage(`❌ Transaction preparation failed.`);
}
};

const handleBuySc = async () => {
try {
if (!walletClient || !account || !txData) {
setMessage("❌ Wallet client, account, or transaction data is missing");
return;
}

setMessage("⏳ Sending transaction...");
// Now send it
setMessage("⏳ Sending transaction...");

const txHash = await walletClient.sendTransaction({
...txData,
...builtTx,
account: account,
});

setTxHash(txHash);
setMessage(`✅ Transaction sent!`);
setMessage("✅ Transaction sent!");
} catch (error) {
setError(error);
setMessage(`❌ Transaction failed.`);
setMessage("❌ Transaction failed.");
}
};

const getExplorerUrl = () => {
if (!txHash || !selectedNetwork) return null;

const explorerBaseUrls = {
"ethereum-classic": "https://etc-mordor.blockscout.com/tx/",
"sepolia": "https://sepolia.etherscan.io/tx/",
"milkomeda-mainnet": "https://explorer-mainnet-cardano-evm.c1.milkomeda.com/tx/",
};

return explorerBaseUrls[selectedNetwork]
? `${explorerBaseUrls[selectedNetwork]}${txHash}`
: null;
};

return (
<div className={styles.transactionReview}>
<div className={styles.transactionInfo}>
Expand All @@ -206,22 +176,13 @@ const TransactionReview = () => {
<button className={styles.walletButton} onClick={handleConnectWallet} disabled={isConnecting}>
{isConnecting ? "Connecting..." : "Connect Wallet"}
</button>

{account && !txData && (
<button className={styles.walletButton} onClick={handleSendTransaction}>
Prepare Transaction
</button>

{/* Single button to prepare and send transaction (Pay button) */}
{account && (
<button className={styles.walletButton} onClick={handlePay}>
Pay
</button>
)}
{account && txData && (
<button
className={styles.walletButton}
onClick={handleBuySc}
disabled={txHash !== null} // Disable the button when txHash is set
>
Send Transaction
</button>
)}


{message && (
<div className="message-box">
Expand All @@ -243,28 +204,26 @@ const TransactionReview = () => {
</div>
)}


{txHash && (
<div className={styles.transactionLink}>
✅ Transaction Hash:{" "}
<a
href={`https://blockscout.com/etc/mordor/tx/${txHash}`}
target="_blank"
rel="noopener noreferrer"
className={styles.explorerLink}
style={{
color: "#007bff",
textDecoration: "underline",
fontWeight: "bold",
cursor: "pointer",
wordBreak: "break-word"
}}
>
{txHash.slice(0, 6)}...{txHash.slice(-6)}
</a>
</div>
)}

<div className={styles.transactionLink}>
✅ Transaction Hash:{" "}
<a
href={`https://blockscout.com/etc/mordor/tx/${txHash}`}
target="_blank"
rel="noopener noreferrer"
className={styles.explorerLink}
style={{
color: "#007bff",
textDecoration: "underline",
fontWeight: "bold",
cursor: "pointer",
wordBreak: "break-word"
}}
>
{txHash.slice(0, 6)}...{txHash.slice(-6)}
</a>
</div>
)}
</div>
);
};
Expand Down