Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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
129 changes: 97 additions & 32 deletions packages/payment-widget/src/lib/components/payment-confirmation.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@
} from "../utils/request";
import Spinner from "./spinner.svelte";
import WalletInfo from "./wallet-info.svelte";
import { ethers } from "ethers";
export let selectedCurrency: Currency;
export let amountInUSD: number;
Expand All @@ -36,6 +37,8 @@
export let onPaymentSuccess: (request: any) => void;
export let onPaymentError: (error: string) => void;
export let invoiceNumber: string | undefined;
export let feeAddress: string;
export let feeAmountInUSD: number;
const COUNTDOWN_INTERVAL = 30;
Expand All @@ -44,9 +47,11 @@
let intervalId: NodeJS.Timeout;
let exchangeRate: number = 0;
let error: string = "";
let feeAmountInCrypto: number = 0;
$: isLoadingPrice = true;
$: isPaying = false;
$: totalPayment = amountInCrypto + feeAmountInCrypto;
const currencySymbol = selectedCurrency.symbol.includes(
selectedCurrency.network
Expand All @@ -72,6 +77,7 @@
const rate = data.data.rates[lookupSymbol];
exchangeRate = parseFloat(rate);
amountInCrypto = amountInUSD * exchangeRate;
feeAmountInCrypto = feeAmountInUSD * exchangeRate;
} catch (error) {
alert("Unable to fetch exchange rate. Please try again later");
} finally {
Expand Down Expand Up @@ -145,29 +151,58 @@
>
</div>
</div>
<div class="payment-confirmation-tab payment-confirmation-seller-address">
<div class="payment-confirmation-tab payment-confirmation-address">
<h4>Payment to</h4>
<a
href={getExplorerUrl(selectedCurrency.network, sellerAddress)}
target="_blank"
>
<span>{sellerAddress}</span>
</a>
<button
on:click={() => {
navigator.clipboard.writeText(sellerAddress);
}}
>
<CopyIcon />
</button>
<div class="address-container">
<a
href={getExplorerUrl(selectedCurrency.network, sellerAddress)}
target="_blank"
>
<span>{sellerAddress}</span>
</a>
<button
on:click={() => {
navigator.clipboard.writeText(sellerAddress);
}}
>
<CopyIcon />
</button>
</div>
</div>
{#if feeAddress !== ethers.constants.AddressZero && feeAmountInUSD > 0}
<div class="payment-confirmation-tab payment-confirmation-address">
<h4>Fee to</h4>
<div class="address-container">
<a
href={getExplorerUrl(selectedCurrency.network, feeAddress)}
target="_blank"
>
<span>{feeAddress}</span>
</a>
<button
on:click={() => {
navigator.clipboard.writeText(feeAddress);
}}
>
<CopyIcon />
</button>
</div>
</div>
<div class="payment-confirmation-tab">
<h4>Fee Amount</h4>
<span>
${feeAmountInUSD} USD / {trimTrailingDecimalZeros(feeAmountInCrypto)}
{currencySymbol}
</span>
</div>
{/if}
<div class="payment-confirmation-tab">
<h4>Payment network</h4>
<span>{NETWORK_LABEL[selectedCurrency.network]}</span>
</div>
<div class="payment-confirmation-tab">
<h4>Total</h4>
<span>{trimTrailingDecimalZeros(amountInCrypto)} {currencySymbol}</span>
<span>{trimTrailingDecimalZeros(totalPayment)} {currencySymbol}</span>
</div>

{#if !isPaying}
Expand Down Expand Up @@ -216,11 +251,15 @@
try {
const requestParameters = prepareRequestParameters({
currency: selectedCurrency,
feeAddress,
feeAmountInUSD,
feeAmountInCrypto,
productInfo,
sellerInfo,
buyerInfo,
payerAddress,
amountInCrypto,
totalAmountInCrypto: totalPayment,
exchangeRate,
amountInUSD,
builderId,
Expand Down Expand Up @@ -286,23 +325,6 @@
width: 100%;
gap: 16px;
.payment-confirmation-seller-address {
display: flex;
align-items: center;
gap: 2px;
font-size: 12px;
button {
background: none;
border: none;
padding: 0;
margin: 0;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
}
}
&-amount-info {
display: flex;
align-items: center;
Expand Down Expand Up @@ -351,6 +373,49 @@
font-weight: 500;
font-size: 14px;
}
&.payment-confirmation-address {
flex-direction: column;
align-items: flex-start;
gap: 8px;
h4 {
margin: 0;
}
.address-container {
display: flex;
align-items: center;
gap: 8px;
width: 100%;
a {
flex-grow: 1;
text-decoration: none;
color: inherit;
font-size: 14px;
span {
display: inline-block;
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
button {
background: none;
border: none;
padding: 0;
margin: 0;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
}
}
}
}
&-warning {
Expand Down
49 changes: 44 additions & 5 deletions packages/payment-widget/src/lib/payment-widget.svelte
Original file line number Diff line number Diff line change
@@ -1,15 +1,16 @@
<svelte:options customElement="payment-widget" />

<script lang="ts">
import { Button } from "@requestnetwork/shared-components/button";
import Modal from "@requestnetwork/shared-components/modal.svelte";
import PoweredBy from "@requestnetwork/shared-components/powered-by.svelte";
import type { EventsControllerState } from "@web3modal/core";
import type { Web3Modal } from "@web3modal/ethers5";
import { ethers } from "ethers";
import { onDestroy, onMount } from "svelte";
import BuyerInfoForm from "./components/buyer-info-form.svelte";
import CurrencySelector from "./components/currency-selector.svelte";
import PaymentComplete from "./components/payment-complete.svelte";
import PaymentConfirmation from "./components/payment-confirmation.svelte";
import PoweredBy from "@requestnetwork/shared-components/powered-by.svelte";
import type {
AmountInUSD,
BuyerInfo,
Expand All @@ -21,7 +22,6 @@
} from "./types";
import { getSupportedCurrencies } from "./utils/currencies";
import { initWalletConnector } from "./utils/walletConnector";
import BuyerInfoForm from "./components/buyer-info-form.svelte";
// Props
export let sellerInfo: SellerInfo;
Expand All @@ -37,6 +37,8 @@
export let buyerInfo: BuyerInfo | undefined = undefined;
export let enableBuyerInfo: boolean = true;
export let invoiceNumber: string | undefined = undefined;
export let feeAddress: string = ethers.constants.AddressZero;
export let feeAmountInUSD: number = 0;
// State
let web3Modal: Web3Modal | null = null;
Expand Down Expand Up @@ -193,7 +195,7 @@

<section class="rn-payment-widget-body">
<h2>Pay with crypto</h2>
<Button
<button
Copy link
Member

Choose a reason for hiding this comment

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

@aimensahnoun for future reference, odd changes like this warrant a comment in the code to explain why we're breaking from convention.

disabled={!amountInUSD ||
!sellerAddress ||
amountInUSD === 0 ||
Expand All @@ -204,7 +206,7 @@
} else {
isModalOpen = true;
}
}}>Pay</Button
}}>Pay</button
>
</section>
<Modal
Expand All @@ -230,6 +232,8 @@
/>
{:else if selectedCurrency && currentPaymentStep === "confirmation"}
<PaymentConfirmation
{feeAddress}
{feeAmountInUSD}
{enableBuyerInfo}
{productInfo}
{amountInUSD}
Expand Down Expand Up @@ -367,6 +371,41 @@
height: 100%;
border-radius: 0px 0px 20px 20px;
button {
display: inline-flex;
cursor: pointer;
align-items: center;
justify-content: center;
white-space: nowrap;
border-radius: 0.375rem;
font-size: 0.875rem;
font-weight: 500;
transition-property: color, background-color, border-color,
text-decoration-color, fill, stroke;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
background-color: #0bb489;
color: white;
padding: 0.5rem 1rem;
border: none;
outline: none;
&:focus-visible {
outline: 2px solid transparent;
outline-offset: 2px;
box-shadow: 0 0 0 2px var(--ring-color, #000);
}
&:disabled {
pointer-events: none;
opacity: 0.5;
}
&:hover {
background-color: rgba($color: #0bb489, $alpha: 0.8);
}
}
h2 {
color: black;
font-size: 18px;
Expand Down
4 changes: 4 additions & 0 deletions packages/payment-widget/src/lib/react/PaymentWidget.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,8 @@ export interface PaymentWidgetProps {
buyerInfo?: BuyerInfo;
enableBuyerInfo?: boolean;
invoiceNumber?: string;
feeAddress?: string;
feeAmountInUSD?: number;
}

/**
Expand Down Expand Up @@ -70,6 +72,8 @@ export interface PaymentWidgetProps {
* onError={(error) => {
* console.error(error);
* }}
* feeAddress="0x1234567890123456789012345678901234567890
* feeAmountInUSD={22}
* />
*/
declare const PaymentWidget: React.FC<PaymentWidgetProps>;
Expand Down
Loading