chore: integrate CipherProvider in invoice forms (#245)

Author: rodrigopavezi

package-lock.json

@@ -23,12 +23,13 @@
   import Button from "@requestnetwork/shared-components/button.svelte";
   import Status from "@requestnetwork/shared-components/status.svelte";
   import Modal from "@requestnetwork/shared-components/modal.svelte";
-  import { EncryptionTypes } from '@requestnetwork/types';
+  import { EncryptionTypes, CipherProviderTypes } from '@requestnetwork/types';
 
   export let config: IConfig;
   export let wagmiConfig: WagmiConfig;
   export let requestNetwork: RequestNetwork | null | undefined;
   export let currencies: CurrencyTypes.CurrencyInput[] = [];
+  let cipherProvider: CipherProviderTypes.ICipherProvider | undefined = requestNetwork?.getCipherProvider();
 
   let account: GetAccountReturnType;
   let isTimeout = false;
@@ -185,7 +186,7 @@
       try {
         addToStatus(APP_STATUS.PERSISTING_TO_IPFS);
         let request;
-        if(formData.isEncrypted) {
+        if(cipherProvider && formData.isEncrypted) {
           const payeeEncryptionParams = {
             key: requestCreateParameters.requestInfo.payee?.value!,
             method: EncryptionTypes.METHOD.KMS,
@@ -247,6 +248,7 @@
       {networks}
       {currencyManager}
       {invoiceCurrency}
+      {cipherProvider}
     />
     <div class="invoice-view-wrapper">
       <InvoiceView

packages/create-invoice-form/src/lib/create-invoice-form.svelte

@@ -19,7 +19,7 @@
   import { checkAddress } from "@requestnetwork/shared-utils/checkEthAddress";
   import { inputDateFormat } from "@requestnetwork/shared-utils/formatDate";
   import { Types } from "@requestnetwork/request-client.js";
-  import { CurrencyTypes } from "@requestnetwork/types";
+  import { CurrencyTypes, CipherProviderTypes } from "@requestnetwork/types";
   import isEmail from "validator/es/lib/isEmail";
 
   export let config: IConfig;
@@ -37,6 +37,7 @@
     | CurrencyTypes.NativeCurrency
     | undefined;
   export let network: any;
+  export let cipherProvider: CipherProviderTypes.ICipherProvider | undefined;
 
   let validationErrors = {
     payeeAddress: false,
@@ -453,13 +454,14 @@
           }))}
           onchange={handleCurrencyChange}
         />
-
-        <Input
-          type="checkbox"
-          id="isEncrypted"
-          label="Encrypt invoice"
-          bind:checked={formData.isEncrypted}
-          />
+        {#if cipherProvider}
+          <Input
+            type="checkbox"
+            id="isEncrypted"
+            label="Encrypt invoice"
+            bind:checked={formData.isEncrypted}
+            />
+        {/if}
       </div>
     </div>
     <div class="invoice-form-dates">

packages/create-invoice-form/src/lib/invoice/form.svelte

@@ -44,17 +44,17 @@
   import { debounce, formatAddress } from "../utils";
   import { Drawer, InvoiceView } from "./dashboard";
   import { getPaymentNetworkExtension } from "@requestnetwork/payment-detection";
-  import { CurrencyTypes } from "@requestnetwork/types";
+  import { CipherProviderTypes, CurrencyTypes } from "@requestnetwork/types";
     import { checkStatus } from "@requestnetwork/shared-utils/checkStatus";
 
   export let config: IConfig;
   export let wagmiConfig: WagmiConfig;
   export let requestNetwork: RequestNetwork | null | undefined;
   export let currencies: CurrencyTypes.CurrencyInput[] = [];
-  export let isDecryptionEnabled: boolean;
-  export let enableDecryption: (option: boolean) => void | undefined;
 
-  let sliderValueForDecryption = isDecryptionEnabled ? "on" : "off";
+  let cipherProvider: CipherProviderTypes.ICipherProvider | undefined = requestNetwork?.getCipherProvider();
+
+  let sliderValueForDecryption = cipherProvider?.isDecryptionEnabled() ? "on" : "off";
 
   let signer: `0x${string}` | undefined;
   let activeConfig = config ? config : defaultConfig;
@@ -395,9 +395,9 @@
 
   $: {
     if(sliderValueForDecryption === 'on') {
-      enableDecryption(true);
+      cipherProvider?.enableDecryption(true);
     } else {
-      enableDecryption(false);
+      cipherProvider?.enableDecryption(false);
     }
   }
 
@@ -441,9 +441,11 @@
             <Search />
           </div>
         </Input>
-        <div class="width: fit-content;">
-          <Switch bind:value={sliderValueForDecryption} label="Show encrypted requests" fontSize={14} design="slider" />
-        </div>
+        {#if cipherProvider}
+          <div class="width: fit-content;">
+            <Switch bind:value={sliderValueForDecryption} label="Show encrypted requests" fontSize={14} design="slider" />
+          </div>
+        {/if}
       </div>
 
       <Dropdown