const sender = Ethers.send("eth_requestAccounts", [])[0]; if (!sender) return "Please login first"; const signer = Ethers.provider().getSigner(); const PaymentRequest = "(address payable requester, uint256 amount, bytes32 zelleEmailHash, address payable executor)"; const abi = [ "function createPaymentRequest(uint256 amount, bytes32 _zelleEmailHash) external returns (uint256)", `function getPaymentRequestsByIds(uint256[] memory requestIds) external view returns (${PaymentRequest}[] memory)`, "function reservePayment(uint256 requestId)", "function confirmPayment(uint256 requestId, uint256 transactionId)", "event PaymentReserved(uint256 requestId, address indexed reserver)", ]; const CONTRACT = "0xa50ba5122f1d3a68C0493c7dda4Fd717aa235B8D"; const tokenAddress = "0x8c9e6c40d3402480ACE624730524fACC5482798c"; const erc20abi = ["function approve(address _spender, uint _value)"]; const erc20 = new ethers.Contract(tokenAddress, erc20abi, signer); const peer2peer = new ethers.Contract(CONTRACT, abi, signer); const daiDecimal = 18; peer2peer.getPaymentRequestsByIds([props.order]).then(([data]) => { State.update({ order: { requester: data[0], amount: ethers.utils.formatEther(data[1], daiDecimal), zelleHash: data[2], executor: data[3], }, }); }); const handleVerify = (proof) => { peer2peer .confirmPayment(props.order, proof.transactionId, { gasLimit: 40_000 }) .then((tx) => { tx.wait().then(() => console.log("SUCCESS!!")); }); }; const order = state.order; if (!order) return ""; const Container = styled.div` * { font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif; } display: flex; justify-content: center; flex-direction: column; width: 400px; `; const isRequester = order.requester.toLowerCase() === sender.toLowerCase(); const isExecuter = order.executor.toLowerCase() === sender.toLowerCase(); return ( <div style={{ display: "flex", gap: 32, justifyContent: "center", marginTop: 32, width: "100%", }} > <Container> <h4 style={{ lineBreak: "anywhere" }}> {isRequester ? "Your order, you SELL" : order.requester} </h4> <h5 style={{ marginBottom: 32 }}>{order.amount} DAI</h5> {order.executor !== "0x0000000000000000000000000000000000000000" && ( <Widget src="azbang.near/widget/xmtp-chat" props={{ receiver: isRequester ? order.executor : order.requester }} /> )} {order.executor === "0x0000000000000000000000000000000000000000" && ( <div style={{ margin: "auto", display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", marginTop: 100, }} > <p style={{ marginTop: 24 }}>Wait order executor</p> <Widget src="azbang.near/widget/dots-spinner" props={{ style: { height: 32, display: "flex", alignItems: "center", margin: "auto", }, }} /> </div> )} </Container> {isExecuter && ( <div style={{ marginTop: -48 }}> <Widget src="azbang.near/widget/plaid" props={{ onVerified: handleVerify }} /> </div> )} </div> );