feat: enable custom fee address and fee amount (#140)

Author: aimensahnoun

packages/payment-widget/src/lib/components/payment-confirmation.svelte

@@ -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;
@@ -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;
 
@@ -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
@@ -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 {
@@ -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}
@@ -216,11 +251,15 @@
         try {
           const requestParameters = prepareRequestParameters({
             currency: selectedCurrency,
+            feeAddress,
+            feeAmountInUSD,
+            feeAmountInCrypto,
             productInfo,
             sellerInfo,
             buyerInfo,
             payerAddress,
             amountInCrypto,
+            totalAmountInCrypto: totalPayment,
             exchangeRate,
             amountInUSD,
             builderId,
@@ -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;
@@ -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 {

packages/payment-widget/src/lib/payment-widget.svelte

@@ -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,
@@ -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;
@@ -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;
@@ -193,7 +195,7 @@
 
   <section class="rn-payment-widget-body">
     <h2>Pay with crypto</h2>
-    <Button
+    <button
       disabled={!amountInUSD ||
         !sellerAddress ||
         amountInUSD === 0 ||
@@ -204,7 +206,7 @@
         } else {
           isModalOpen = true;
         }
-      }}>Pay</Button
+      }}>Pay</button
     >
   </section>
   <Modal
@@ -230,6 +232,8 @@
       />
     {:else if selectedCurrency && currentPaymentStep === "confirmation"}
       <PaymentConfirmation
+        {feeAddress}
+        {feeAmountInUSD}
         {enableBuyerInfo}
         {productInfo}
         {amountInUSD}
@@ -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;

packages/payment-widget/src/lib/react/PaymentWidget.d.ts

@@ -21,6 +21,8 @@ export interface PaymentWidgetProps {
   buyerInfo?: BuyerInfo;
   enableBuyerInfo?: boolean;
   invoiceNumber?: string;
+  feeAddress?: string;
+  feeAmountInUSD?: number;
 }
 
 /**
@@ -70,6 +72,8 @@ export interface PaymentWidgetProps {
  *   onError={(error) => {
  *     console.error(error);
  *   }}
+ *   feeAddress="0x1234567890123456789012345678901234567890
+ *   feeAmountInUSD={22}
  * />
  */
 declare const PaymentWidget: React.FC<PaymentWidgetProps>;