From 76a81fa88652ea475180f84080a024382b1c21d9 Mon Sep 17 00:00:00 2001
From: Iveta <quietbits@users.noreply.github.com>
Date: Fri, 20 Oct 2023 12:54:51 -0400
Subject: [PATCH] Show which SEP-12 KYC fields are optional (#326)

---
 .../src/components/Sep31Send.tsx              | 26 ++++++++++++-------
 .../src/components/Sep6/Sep6Deposit.tsx       | 24 ++++++++++-------
 .../src/components/Sep6/Sep6Withdraw.tsx      | 24 ++++++++++-------
 3 files changed, 46 insertions(+), 28 deletions(-)

diff --git a/packages/demo-wallet-client/src/components/Sep31Send.tsx b/packages/demo-wallet-client/src/components/Sep31Send.tsx
index 23abcf1a..a3d79176 100644
--- a/packages/demo-wallet-client/src/components/Sep31Send.tsx
+++ b/packages/demo-wallet-client/src/components/Sep31Send.tsx
@@ -327,16 +327,22 @@ export const Sep31Send = () => {
               return (
                 <div className="vertical-spacing" key={sectionTitle}>
                   <Heading3>{capitalizeString(sectionTitle)}</Heading3>
-                  {Object.entries(sectionItems || {}).map(([id, input]) => (
-                    // TODO: if input.choices, render Select
-                    <Input
-                      key={`${sectionTitle}#${id}`}
-                      id={`${sectionTitle}#${id}`}
-                      label={(input as any).description}
-                      required={!(input as any).optional}
-                      onChange={handleChange}
-                    />
-                  ))}
+                  {Object.entries(sectionItems || {}).map(([id, input]) => {
+                    const label = `${(input as any).description}${
+                      input.optional ? " (optional)" : ""
+                    }`;
+
+                    return (
+                      // TODO: if input.choices, render Select
+                      <Input
+                        key={`${sectionTitle}#${id}`}
+                        id={`${sectionTitle}#${id}`}
+                        label={label}
+                        required={!(input as any).optional}
+                        onChange={handleChange}
+                      />
+                    );
+                  })}
                 </div>
               );
             })}
diff --git a/packages/demo-wallet-client/src/components/Sep6/Sep6Deposit.tsx b/packages/demo-wallet-client/src/components/Sep6/Sep6Deposit.tsx
index 15fa6f2f..380fb74a 100644
--- a/packages/demo-wallet-client/src/components/Sep6/Sep6Deposit.tsx
+++ b/packages/demo-wallet-client/src/components/Sep6/Sep6Deposit.tsx
@@ -259,15 +259,21 @@ export const Sep6Deposit = () => {
           ) : null}
           <div className="vertical-spacing">
             {Object.entries(sep6DepositAsset.data.customerFields || {}).map(
-              ([id, input]) => (
-                <Input
-                  key={id}
-                  id={id}
-                  label={(input as any).description}
-                  required
-                  onChange={handleCustomerFieldChange}
-                />
-              ),
+              ([id, input]) => {
+                const label = `${(input as any).description}${
+                  input.optional ? " (optional)" : ""
+                }`;
+
+                return (
+                  <Input
+                    key={id}
+                    id={id}
+                    label={label}
+                    required={!(input as any).optional}
+                    onChange={handleCustomerFieldChange}
+                  />
+                );
+              },
             )}
           </div>
         </Modal.Body>
diff --git a/packages/demo-wallet-client/src/components/Sep6/Sep6Withdraw.tsx b/packages/demo-wallet-client/src/components/Sep6/Sep6Withdraw.tsx
index 0de53646..b1776438 100644
--- a/packages/demo-wallet-client/src/components/Sep6/Sep6Withdraw.tsx
+++ b/packages/demo-wallet-client/src/components/Sep6/Sep6Withdraw.tsx
@@ -223,15 +223,21 @@ export const Sep6Withdraw = () => {
 
           <div className="vertical-spacing">
             {Object.entries(sep6WithdrawAsset.data.fields || {}).map(
-              ([field, fieldInfo]) => (
-                <Input
-                  key={field}
-                  id={field}
-                  label={(fieldInfo as any)?.description}
-                  required
-                  onChange={handleCustomerFieldChange}
-                />
-              ),
+              ([field, fieldInfo]) => {
+                const label = `${(fieldInfo as any).description}${
+                  fieldInfo.optional ? " (optional)" : ""
+                }`;
+
+                return (
+                  <Input
+                    key={field}
+                    id={field}
+                    label={label}
+                    required={!(fieldInfo as any).optional}
+                    onChange={handleCustomerFieldChange}
+                  />
+                );
+              },
             )}
           </div>