From 9b111d051ab3a9eadd33fd020bc92d80bdc275bd Mon Sep 17 00:00:00 2001
From: Jose Felix <jfelx@outlook.com>
Date: Thu, 12 Dec 2024 17:03:23 -0400
Subject: [PATCH] (Deposit/Withdraw) Address design feedback for Bitcoin
 deposits and withdrawals (#4010)

* feat: address Nomic design feedback

* fix: nomic pending transfers reactivity

* improvement: remove placeholder value
---
 .../web/components/bridge/amount-screen.tsx   |  2 +-
 .../bridge/bridge-wallet-select-modal.tsx     |  4 +--
 .../bridge/deposit-address-screen.tsx         | 25 ++++++++++++++++---
 .../web/components/input/textarea-box.tsx     |  4 +--
 .../nomic/nomic-pending-transfers.tsx         |  5 ++--
 packages/web/localizations/de.json            |  4 +--
 packages/web/localizations/en.json            |  4 +--
 packages/web/localizations/es.json            |  4 +--
 packages/web/localizations/fa.json            |  4 +--
 packages/web/localizations/fr.json            |  4 +--
 packages/web/localizations/gu.json            |  4 +--
 packages/web/localizations/hi.json            |  4 +--
 packages/web/localizations/ja.json            |  4 +--
 packages/web/localizations/ko.json            |  4 +--
 packages/web/localizations/pl.json            |  4 +--
 packages/web/localizations/pt-br.json         |  4 +--
 packages/web/localizations/ro.json            |  4 +--
 packages/web/localizations/ru.json            |  4 +--
 packages/web/localizations/tr.json            |  4 +--
 packages/web/localizations/zh-cn.json         |  4 +--
 packages/web/localizations/zh-hk.json         |  4 +--
 packages/web/localizations/zh-tw.json         |  4 +--
 22 files changed, 63 insertions(+), 45 deletions(-)

diff --git a/packages/web/components/bridge/amount-screen.tsx b/packages/web/components/bridge/amount-screen.tsx
index 03b07f4581..3bb2dc80a5 100644
--- a/packages/web/components/bridge/amount-screen.tsx
+++ b/packages/web/components/bridge/amount-screen.tsx
@@ -1177,7 +1177,7 @@ export const AmountScreen = observer(
                   <h6 className="flex items-center gap-3">
                     {toChain?.chainType === "bitcoin" &&
                     direction === "withdraw"
-                      ? t("transfer.continue")
+                      ? t("transfer.confirmAmount")
                       : pendingChainApproval
                       ? t("transfer.pendingApproval")
                       : t("transfer.connectTo", {
diff --git a/packages/web/components/bridge/bridge-wallet-select-modal.tsx b/packages/web/components/bridge/bridge-wallet-select-modal.tsx
index 1067b7de50..438da83218 100644
--- a/packages/web/components/bridge/bridge-wallet-select-modal.tsx
+++ b/packages/web/components/bridge/bridge-wallet-select-modal.tsx
@@ -66,7 +66,7 @@ export const BridgeWalletSelectModal: FunctionComponent<
     props.direction === "withdraw" &&
     props.toChain.chainType === "bitcoin"
   ) {
-    modalTitle = t("transfer.inputBitcoinAddress");
+    modalTitle = t("transfer.enterBitcoinAddress");
   } else {
     modalTitle = t("transfer.selectWithdrawWallet", {
       network: props.toChain.prettyName,
@@ -578,7 +578,7 @@ const SendToAnotherAddressForm: FunctionComponent<
       <Button
         onClick={handleConfirm}
         disabled={!isAcknowledged || isInvalidAddress || !address}
-        className="w-full"
+        className="w-full !text-subtitle1"
       >
         {t("transfer.done")}
       </Button>
diff --git a/packages/web/components/bridge/deposit-address-screen.tsx b/packages/web/components/bridge/deposit-address-screen.tsx
index b6f106298b..188dfa40c1 100644
--- a/packages/web/components/bridge/deposit-address-screen.tsx
+++ b/packages/web/components/bridge/deposit-address-screen.tsx
@@ -155,7 +155,7 @@ export const DepositAddressScreen = observer(
           )}
         >
           {showQrCode ? (
-            <div className="z-20 flex w-full items-center gap-4 rounded-2xl bg-osmoverse-100 p-4">
+            <div className="z-20 flex w-full items-center gap-4 rounded-2xl bg-osmoverse-100 p-4 relative">
               <div className="flex h-[180px] w-[180px] items-center justify-center">
                 {isLoading || !data?.depositData?.depositAddress ? (
                   <Spinner className="text-black" />
@@ -188,6 +188,13 @@ export const DepositAddressScreen = observer(
                     : t("transfer.copyToClipboard")}
                 </button>
               </div>
+              <IconButton
+                aria-label="Close"
+                data-testid="close"
+                className="absolute transition-colors duration-200 top-0 right-0 !bg-transparent !shadow-none z-50 !h-12 !w-12 cursor-pointer !py-0 text-wosmongton-800 hover:text-osmoverse-500"
+                icon={<Icon id="close" className="w-4 h-4" />}
+                onClick={() => setShowQrCode(false)}
+              />
             </div>
           ) : (
             <div className="z-20 flex w-full items-center justify-between rounded-2xl bg-osmoverse-850 p-4">
@@ -443,8 +450,12 @@ const TransferDetails: FunctionComponent<{
                         {totalFees
                           .inequalitySymbol(showTotalFeeIneqSymbol)
                           .toString()}
-                        {" + "}
-                        {depositData.providerFee.toString()}{" "}
+                        {!depositData.providerFee.toDec().isZero() && (
+                          <>
+                            {" + "}
+                            {depositData.providerFee.toString()}
+                          </>
+                        )}{" "}
                         {t("transfer.fees")}
                       </span>
                     )}
@@ -521,7 +532,13 @@ const ProviderFeesRow: FunctionComponent<{
       label={t("transfer.providerFees")}
       isLoading={isRefetchingQuote}
     >
-      <p className="text-osmoverse-100">{depositData.providerFee.toString()}</p>
+      {depositData.providerFee.toDec().isZero() ? (
+        <p className="text-bullish-400">{t("transfer.free")}</p>
+      ) : (
+        <p className="text-osmoverse-100">
+          {depositData.providerFee.toString()}
+        </p>
+      )}
     </QuoteDetailRow>
   );
 };
diff --git a/packages/web/components/input/textarea-box.tsx b/packages/web/components/input/textarea-box.tsx
index d5dd1cd558..91fe98db51 100644
--- a/packages/web/components/input/textarea-box.tsx
+++ b/packages/web/components/input/textarea-box.tsx
@@ -74,7 +74,7 @@ export const TextareaBox: FunctionComponent<TextareaBoxProps> = ({
           key={textareaKey}
           ref={textareaRef}
           className={classNames(
-            "md:leading-0 w-full resize-none appearance-none bg-transparent pt-px align-middle leading-10 outline-none placeholder:text-osmoverse-500 md:p-0",
+            "w-full resize-none appearance-none bg-transparent py-2 align-middle outline-none placeholder:text-osmoverse-500 md:p-0",
             {
               "text-white-disabled": disabled,
               "text-white-high": currentValue != "" && !disabled,
@@ -103,7 +103,7 @@ export const TextareaBox: FunctionComponent<TextareaBoxProps> = ({
         />
 
         {trailingSymbol && (
-          <span className={classNames("pt-3", classes?.trailingSymbol)}>
+          <span className={classNames("pt-2", classes?.trailingSymbol)}>
             {trailingSymbol}
           </span>
         )}
diff --git a/packages/web/components/nomic/nomic-pending-transfers.tsx b/packages/web/components/nomic/nomic-pending-transfers.tsx
index 1e183143da..12d794413d 100644
--- a/packages/web/components/nomic/nomic-pending-transfers.tsx
+++ b/packages/web/components/nomic/nomic-pending-transfers.tsx
@@ -44,7 +44,7 @@ const useNomicTransactionsStore = create(
       transactions: new Map(),
       upsertTransaction: (transactions) => {
         set((state) => {
-          const nextTransactions = state.transactions;
+          const nextTransactions = new Map(state.transactions);
           transactions.forEach((transaction) => {
             nextTransactions.set(transaction.transactionId, transaction);
           });
@@ -336,7 +336,8 @@ const TransactionDetailsModal = ({
                   </p>
                 </div>
               </div>
-              <p className="body1 text-osmoverse-300">bc0123ab...456def</p>
+              {/* TODO: Get origin bitcoin address from pending deposit */}
+              {/* <p className="body1 text-osmoverse-300">bc0123ab...456def</p> */}
             </div>
 
             <div className="flex h-12 w-12 items-center justify-center self-start">
diff --git a/packages/web/localizations/de.json b/packages/web/localizations/de.json
index 7de8bc7782..f3c5c963f4 100644
--- a/packages/web/localizations/de.json
+++ b/packages/web/localizations/de.json
@@ -928,8 +928,8 @@
     "addressAboutToExpire": "Diese Adresse läuft bald ab. Bitte fordern Sie eine neue Adresse an, um Geldverluste zu vermeiden.",
     "createNewDepositAddress": "Neue Einzahlungsadresse erstellen",
     "transactionDetails": "Details der Transaktion",
-    "continue": "Weitermachen",
-    "inputBitcoinAddress": "Bitcoin-Adresse eingeben"
+    "confirmAmount": "Betrag bestätigen",
+    "enterBitcoinAddress": "Bitcoin-Adresse eingeben"
   },
   "unknownError": "Unbekannter Fehler",
   "viewExplorer": "Explorer anzeigen",
diff --git a/packages/web/localizations/en.json b/packages/web/localizations/en.json
index e82f34fa9e..9ea8c6a95a 100644
--- a/packages/web/localizations/en.json
+++ b/packages/web/localizations/en.json
@@ -928,8 +928,8 @@
     "addressAboutToExpire": "This address is about to expire. Please request a new address to avoid losing funds.",
     "createNewDepositAddress": "Create new deposit address",
     "transactionDetails": "Transaction details",
-    "continue": "Continue",
-    "inputBitcoinAddress": "Input Bitcoin address"
+    "confirmAmount": "Confirm Amount",
+    "enterBitcoinAddress": "Enter Bitcoin address"
   },
   "unknownError": "Unknown error",
   "viewExplorer": "View explorer",
diff --git a/packages/web/localizations/es.json b/packages/web/localizations/es.json
index 463237c081..1b454ee07c 100644
--- a/packages/web/localizations/es.json
+++ b/packages/web/localizations/es.json
@@ -928,8 +928,8 @@
     "addressAboutToExpire": "Esta dirección está a punto de caducar. Solicite una nueva dirección para evitar perder fondos.",
     "createNewDepositAddress": "Crear nueva dirección de depósito",
     "transactionDetails": "Detalles de la transacción",
-    "continue": "Continuar",
-    "inputBitcoinAddress": "Introducir dirección de Bitcoin"
+    "confirmAmount": "Confirmar importe",
+    "enterBitcoinAddress": "Introducir dirección de Bitcoin"
   },
   "unknownError": "Error desconocido",
   "viewExplorer": "Ver Explorador",
diff --git a/packages/web/localizations/fa.json b/packages/web/localizations/fa.json
index c8863ce971..8dd5f6c0c9 100644
--- a/packages/web/localizations/fa.json
+++ b/packages/web/localizations/fa.json
@@ -928,8 +928,8 @@
     "addressAboutToExpire": "این آدرس رو به اتمام است. لطفاً برای جلوگیری از از دست دادن وجوه، یک آدرس جدید درخواست کنید.",
     "createNewDepositAddress": "آدرس سپرده جدید ایجاد کنید",
     "transactionDetails": "جزئیات معامله",
-    "continue": "ادامه دهید",
-    "inputBitcoinAddress": "آدرس بیت کوین را وارد کنید"
+    "confirmAmount": "مبلغ را تأیید کنید",
+    "enterBitcoinAddress": "آدرس بیت کوین را وارد کنید"
   },
   "unknownError": "خطای نا شناس",
   "viewExplorer": "مشاهده جزئیات تراکنش",
diff --git a/packages/web/localizations/fr.json b/packages/web/localizations/fr.json
index b83af190f2..1d2d606971 100644
--- a/packages/web/localizations/fr.json
+++ b/packages/web/localizations/fr.json
@@ -928,8 +928,8 @@
     "addressAboutToExpire": "Cette adresse est sur le point d'expirer. Veuillez demander une nouvelle adresse pour éviter de perdre des fonds.",
     "createNewDepositAddress": "Créer une nouvelle adresse de dépôt",
     "transactionDetails": "Détails de la transaction",
-    "continue": "Continuer",
-    "inputBitcoinAddress": "Entrez l'adresse Bitcoin"
+    "confirmAmount": "Confirmer le montant",
+    "enterBitcoinAddress": "Entrez l'adresse Bitcoin"
   },
   "unknownError": "Erreur inconnue",
   "viewExplorer": "Voir dans l'exploreur",
diff --git a/packages/web/localizations/gu.json b/packages/web/localizations/gu.json
index 2dcb5d1346..866ea5a52f 100644
--- a/packages/web/localizations/gu.json
+++ b/packages/web/localizations/gu.json
@@ -928,8 +928,8 @@
     "addressAboutToExpire": "આ સરનામું સમાપ્ત થવામાં છે. ભંડોળ ગુમાવવાનું ટાળવા માટે કૃપા કરીને નવા સરનામાની વિનંતી કરો.",
     "createNewDepositAddress": "નવું ડિપોઝિટ સરનામું બનાવો",
     "transactionDetails": "વ્યવહારની વિગતો",
-    "continue": "ચાલુ રાખો",
-    "inputBitcoinAddress": "ઇનપુટ Bitcoin સરનામું"
+    "confirmAmount": "રકમની પુષ્ટિ કરો",
+    "enterBitcoinAddress": "Bitcoin સરનામું દાખલ કરો"
   },
   "unknownError": "અજાણી ભૂલ",
   "viewExplorer": "સંશોધક જુઓ",
diff --git a/packages/web/localizations/hi.json b/packages/web/localizations/hi.json
index 79d85cf6bd..e546f079a4 100644
--- a/packages/web/localizations/hi.json
+++ b/packages/web/localizations/hi.json
@@ -928,8 +928,8 @@
     "addressAboutToExpire": "यह पता समाप्त होने वाला है। कृपया धनराशि खोने से बचने के लिए नया पता मांगें।",
     "createNewDepositAddress": "नया जमा पता बनाएं",
     "transactionDetails": "लेन-देन विवरण",
-    "continue": "जारी रखना",
-    "inputBitcoinAddress": "बिटकॉइन पता इनपुट करें"
+    "confirmAmount": "राशि की पुष्टि करें",
+    "enterBitcoinAddress": "बिटकॉइन पता दर्ज करें"
   },
   "unknownError": "अज्ञात त्रुटि",
   "viewExplorer": "एक्सप्लोरर देखें",
diff --git a/packages/web/localizations/ja.json b/packages/web/localizations/ja.json
index 3962007d2f..0f6e650829 100644
--- a/packages/web/localizations/ja.json
+++ b/packages/web/localizations/ja.json
@@ -928,8 +928,8 @@
     "addressAboutToExpire": "このアドレスは有効期限が近づいています。資金の損失を避けるために、新しいアドレスをリクエストしてください。",
     "createNewDepositAddress": "新しい入金アドレスを作成する",
     "transactionDetails": "取引の詳細",
-    "continue": "続く",
-    "inputBitcoinAddress": "Bitcoinアドレスを入力"
+    "confirmAmount": "金額を確認",
+    "enterBitcoinAddress": "ビットコインアドレスを入力"
   },
   "unknownError": "不明なエラー",
   "viewExplorer": "エクスプローラーを表示する",
diff --git a/packages/web/localizations/ko.json b/packages/web/localizations/ko.json
index f2a53be22d..f3562e4099 100644
--- a/packages/web/localizations/ko.json
+++ b/packages/web/localizations/ko.json
@@ -928,8 +928,8 @@
     "addressAboutToExpire": "이 주소는 곧 만료됩니다. 자금 손실을 피하려면 새 주소를 요청하세요.",
     "createNewDepositAddress": "새로운 입금 주소 생성",
     "transactionDetails": "거래내역",
-    "continue": "계속하다",
-    "inputBitcoinAddress": "비트코인 주소를 입력하세요"
+    "confirmAmount": "금액 확인",
+    "enterBitcoinAddress": "비트코인 주소를 입력하세요"
   },
   "unknownError": "알 수 없는 에러",
   "viewExplorer": "블록 익스플로러 보기",
diff --git a/packages/web/localizations/pl.json b/packages/web/localizations/pl.json
index ecdd1bfd5a..72005cab7f 100644
--- a/packages/web/localizations/pl.json
+++ b/packages/web/localizations/pl.json
@@ -928,8 +928,8 @@
     "addressAboutToExpire": "Ten adres wkrótce wygaśnie. Poproś o nowy adres, aby uniknąć utraty środków.",
     "createNewDepositAddress": "Utwórz nowy adres depozytowy",
     "transactionDetails": "Szczegóły transakcji",
-    "continue": "Kontynuować",
-    "inputBitcoinAddress": "Wprowadź adres Bitcoin"
+    "confirmAmount": "Potwierdź kwotę",
+    "enterBitcoinAddress": "Wprowadź adres Bitcoin"
   },
   "unknownError": "Nieznany błąd",
   "viewExplorer": "zobacz eksplorer",
diff --git a/packages/web/localizations/pt-br.json b/packages/web/localizations/pt-br.json
index d3c8f34b94..aef1df2819 100644
--- a/packages/web/localizations/pt-br.json
+++ b/packages/web/localizations/pt-br.json
@@ -928,8 +928,8 @@
     "addressAboutToExpire": "Este endereço está prestes a expirar. Solicite um novo endereço para evitar perda de fundos.",
     "createNewDepositAddress": "Criar novo endereço de depósito",
     "transactionDetails": "Detalhes da transação",
-    "continue": "Continuar",
-    "inputBitcoinAddress": "Insira o endereço do Bitcoin"
+    "confirmAmount": "Confirmar valor",
+    "enterBitcoinAddress": "Insira o endereço do Bitcoin"
   },
   "unknownError": "Erro desconhecido",
   "viewExplorer": "Visualizar explorer",
diff --git a/packages/web/localizations/ro.json b/packages/web/localizations/ro.json
index f30052567d..16ebbe6520 100644
--- a/packages/web/localizations/ro.json
+++ b/packages/web/localizations/ro.json
@@ -928,8 +928,8 @@
     "addressAboutToExpire": "Această adresă este pe cale să expire. Vă rugăm să solicitați o nouă adresă pentru a evita pierderea fondurilor.",
     "createNewDepositAddress": "Creați o nouă adresă de depozit",
     "transactionDetails": "Detalii tranzacție",
-    "continue": "Continua",
-    "inputBitcoinAddress": "Introdu adresa Bitcoin"
+    "confirmAmount": "Confirmați suma",
+    "enterBitcoinAddress": "Introdu adresa Bitcoin"
   },
   "unknownError": "Eroare necunoscuta",
   "viewExplorer": "vezi explorer",
diff --git a/packages/web/localizations/ru.json b/packages/web/localizations/ru.json
index 46cfddb2e3..a52c5bbdf6 100644
--- a/packages/web/localizations/ru.json
+++ b/packages/web/localizations/ru.json
@@ -928,8 +928,8 @@
     "addressAboutToExpire": "Срок действия этого адреса истекает. Пожалуйста, запросите новый адрес, чтобы избежать потери средств.",
     "createNewDepositAddress": "Создать новый адрес депозита",
     "transactionDetails": "Подробности транзакции",
-    "continue": "Продолжать",
-    "inputBitcoinAddress": "Введите адрес Bitcoin"
+    "confirmAmount": "Подтвердите сумму",
+    "enterBitcoinAddress": "Введите адрес Bitcoin"
   },
   "unknownError": "Неизвестная ошибка",
   "viewExplorer": "Посмотреть проводник",
diff --git a/packages/web/localizations/tr.json b/packages/web/localizations/tr.json
index 3d68a242a5..c8cfa844c5 100644
--- a/packages/web/localizations/tr.json
+++ b/packages/web/localizations/tr.json
@@ -928,8 +928,8 @@
     "addressAboutToExpire": "Bu adresin süresi dolmak üzere. Lütfen para kaybetmemek için yeni bir adres talep edin.",
     "createNewDepositAddress": "Yeni para yatırma adresi oluştur",
     "transactionDetails": "İşlem detayları",
-    "continue": "Devam etmek",
-    "inputBitcoinAddress": "Bitcoin adresini girin"
+    "confirmAmount": "Tutarı Onayla",
+    "enterBitcoinAddress": "Bitcoin adresini girin"
   },
   "unknownError": "Bilinmeyen hata",
   "viewExplorer": "gezginde görüntüle",
diff --git a/packages/web/localizations/zh-cn.json b/packages/web/localizations/zh-cn.json
index d900572c35..ec063e8299 100644
--- a/packages/web/localizations/zh-cn.json
+++ b/packages/web/localizations/zh-cn.json
@@ -928,8 +928,8 @@
     "addressAboutToExpire": "此地址即将过期。请申请新地址以避免资金损失。",
     "createNewDepositAddress": "创建新的存款地址",
     "transactionDetails": "交易详情",
-    "continue": "继续",
-    "inputBitcoinAddress": "输入比特币地址"
+    "confirmAmount": "确认金额",
+    "enterBitcoinAddress": "输入比特币地址"
   },
   "unknownError": "未知错误",
   "viewExplorer": "浏览器查看",
diff --git a/packages/web/localizations/zh-hk.json b/packages/web/localizations/zh-hk.json
index e646b585df..ddd9e95be9 100644
--- a/packages/web/localizations/zh-hk.json
+++ b/packages/web/localizations/zh-hk.json
@@ -928,8 +928,8 @@
     "addressAboutToExpire": "該地址即將過期。請申請新地址以避免資金損失。",
     "createNewDepositAddress": "建立新的儲值地址",
     "transactionDetails": "交易詳情",
-    "continue": "繼續",
-    "inputBitcoinAddress": "輸入比特幣地址"
+    "confirmAmount": "確認金額",
+    "enterBitcoinAddress": "輸入比特幣地址"
   },
   "unknownError": "未知錯誤",
   "viewExplorer": "使用區塊瀏覽器查看",
diff --git a/packages/web/localizations/zh-tw.json b/packages/web/localizations/zh-tw.json
index 48e02280ef..98b25a3068 100644
--- a/packages/web/localizations/zh-tw.json
+++ b/packages/web/localizations/zh-tw.json
@@ -928,8 +928,8 @@
     "addressAboutToExpire": "該地址即將過期。請申請新地址以避免資金損失。",
     "createNewDepositAddress": "建立新的儲值地址",
     "transactionDetails": "交易詳情",
-    "continue": "繼續",
-    "inputBitcoinAddress": "輸入比特幣地址"
+    "confirmAmount": "確認金額",
+    "enterBitcoinAddress": "輸入比特幣地址"
   },
   "unknownError": "未知錯誤",
   "viewExplorer": "使用區塊瀏覽器查看",