feat(add-funds): refresh the add funds screen

extension/src/popup/locales/en/translation.json

@@ -1,7 +1,6 @@
 {
   "{{domain}} is not currently connected to Freighter": "{{domain}} is not currently connected to Freighter",
   "* All Stellar accounts must maintain a minimum balance of lumens.": "* All Stellar accounts must maintain a minimum balance of lumens.",
-  "* payment methods may vary based on your location": "* payment methods may vary based on your location",
   "0.5 XLM required": "0.5 XLM required",
   "A destination account requires the use of the memo field which is not present in the transaction you’re about to sign.": "A destination account requires the use of the memo field which is not present in the transaction you’re about to sign.",
   "A new signing request arrived while you were reviewing another. Please review it carefully before approving.": "A new signing request arrived while you were reviewing another. Please review it carefully before approving.",
@@ -112,7 +111,6 @@
   "Check the destination account memo requirements and include it in the transaction.": "Check the destination account memo requirements and include it in the transaction.",
   "Choose asset": "Choose asset",
   "Choose Recipient": "Choose Recipient",
-  "Choose your method": "Choose your method",
   "Clear": "Clear",
   "Clear Flags": "Clear Flags",
   "Clear Override": "Clear Override",
@@ -499,6 +497,7 @@
   "Read before importing your key": "Read before importing your key",
   "Ready to migrate": "Ready to migrate",
   "Receive": "Receive",
+  "Receive funds from another wallet": "Receive funds from another wallet",
   "Received": "Received",
   "Recent": "Recent",
   "Recents": "Recents",
@@ -542,7 +541,6 @@
   "Send": "Send",
   "Send Amount": "Send Amount",
   "Send at least 1 XLM to create account.": "Send at least 1 XLM to create account.",
-  "Send funds to this account address": "Send funds to this account address",
   "Send Max": "Send Max",
   "Send settings": "Send settings",
   "Send Settings": "Send Settings",
@@ -666,8 +664,8 @@
   "This site does not appear safe for the following reasons": "This site does not appear safe for the following reasons",
   "This site has been flagged with potential concerns": "This site has been flagged with potential concerns",
   "This site was flagged as malicious": "This site was flagged as malicious",
-  "This token already has a trustline added.": "This token already has a trustline added.",
   "This site was flagged as suspicious": "This site was flagged as suspicious",
+  "This token already has a trustline added.": "This token already has a trustline added.",
   "This token does not appear safe for the following reasons.": "This token does not appear safe for the following reasons.",
   "This token does not support muxed address (M-) as a target destination.": "This token does not support muxed address (M-) as a target destination.",
   "This token has been flagged as malicious for the following reasons.": "This token has been flagged as malicious for the following reasons.",
@@ -698,8 +696,8 @@
   "To receive {{tokenCode}}, your wallet needs a trustline on Stellar.": "To receive {{tokenCode}}, your wallet needs a trustline on Stellar.",
   "To start using this account, fund it with at least 1 XLM.": "To start using this account, fund it with at least 1 XLM.",
   "Toggle Assets": "Toggle Assets",
-  "Token address": "Token address",
   "Token": "Token",
+  "Token address": "Token address",
   "Token Code": "Token Code",
   "Token discovery is temporarily unavailable. You can still swap between tokens you already hold.": "Token discovery is temporarily unavailable. You can still swap between tokens you already hold.",
   "Token ID": "Token ID",
@@ -722,7 +720,7 @@
   "Transaction Request": "Transaction Request",
   "Transaction Timeout": "Transaction Timeout",
   "Transfer from another account": "Transfer from another account",
-  "Transfer from Coinbase, buy with debit and credit cards or bank transfer *": "Transfer from Coinbase, buy with debit and credit cards or bank transfer *",
+  "Transfer from Coinbase & other options": "Transfer from Coinbase & other options",
   "Trending": "Trending",
   "trustlines": "trustlines",
   "Trustor": "Trustor",

extension/src/popup/locales/pt/translation.json

@@ -1,7 +1,6 @@
 {
   "{{domain}} is not currently connected to Freighter": "{{domain}} não está atualmente conectado ao Freighter",
   "* All Stellar accounts must maintain a minimum balance of lumens.": "* Todas as contas Stellar devem manter um saldo mínimo de lumens.",
-  "* payment methods may vary based on your location": "* Os métodos de pagamento podem variar com base na sua localização",
   "0.5 XLM required": "0,5 XLM necessários",
   "A destination account requires the use of the memo field which is not present in the transaction you’re about to sign.": "Uma conta de destino requer o uso do campo memo que não está presente na transação que você está prestes a assinar.",
   "A new signing request arrived while you were reviewing another. Please review it carefully before approving.": "Uma nova solicitação de assinatura chegou enquanto você revisava outra. Revise-a com atenção antes de aprovar.",
@@ -112,7 +111,6 @@
   "Check the destination account memo requirements and include it in the transaction.": "Verifique os requisitos de memo da conta de destino e inclua-o na transação.",
   "Choose asset": "Escolher ativo",
   "Choose Recipient": "Escolher Destinatário",
-  "Choose your method": "Escolha seu método",
   "Clear": "Limpar",
   "Clear Flags": "Limpar Flags",
   "Clear Override": "Limpar Substituição",
@@ -499,6 +497,7 @@
   "Read before importing your key": "Leia antes de importar sua chave",
   "Ready to migrate": "Pronto para migrar",
   "Receive": "Receber",
+  "Receive funds from another wallet": "Receber fundos de outra carteira",
   "Received": "Recebido",
   "Recent": "Recentes",
   "Recents": "Recentes",
@@ -542,7 +541,6 @@
   "Send": "Enviar",
   "Send Amount": "Quantia a Enviar",
   "Send at least 1 XLM to create account.": "Envie pelo menos 1 XLM para criar a conta.",
-  "Send funds to this account address": "Enviar fundos para este endereço de conta",
   "Send Max": "Enviar Max",
   "Send settings": "Configurações de envio",
   "Send Settings": "Configurações de Envio",
@@ -666,8 +664,8 @@
   "This site does not appear safe for the following reasons": "Este site não parece seguro pelos seguintes motivos",
   "This site has been flagged with potential concerns": "Este site foi sinalizado com possíveis preocupações",
   "This site was flagged as malicious": "Este site foi marcado como malicioso",
-  "This token already has a trustline added.": "Este token já tem uma trustline adicionada.",
   "This site was flagged as suspicious": "This site was flagged as suspicious",
+  "This token already has a trustline added.": "Este token já tem uma trustline adicionada.",
   "This token does not appear safe for the following reasons.": "Este token não parece seguro pelos seguintes motivos.",
   "This token does not support muxed address (M-) as a target destination.": "Este token não suporta endereço muxed (M-) como destino.",
   "This token has been flagged as malicious for the following reasons.": "Este token foi marcado como malicioso pelos seguintes motivos.",
@@ -698,8 +696,8 @@
   "To receive {{tokenCode}}, your wallet needs a trustline on Stellar.": "Para receber {{tokenCode}}, sua carteira precisa de uma linha de confiança na Stellar.",
   "To start using this account, fund it with at least 1 XLM.": "Para começar a usar esta conta, financie-a com pelo menos 1 XLM.",
   "Toggle Assets": "Alternar Ativos",
-  "Token address": "Endereço do token",
   "Token": "Token",
+  "Token address": "Endereço do token",
   "Token Code": "Token Code",
   "Token discovery is temporarily unavailable. You can still swap between tokens you already hold.": "A descoberta de tokens está temporariamente indisponível. Você ainda pode trocar entre tokens que já possui.",
   "Token ID": "ID do Token",
@@ -722,7 +720,7 @@
   "Transaction Request": "Solicitação de Transação",
   "Transaction Timeout": "Tempo Limite da Transação",
   "Transfer from another account": "Transferir de outra conta",
-  "Transfer from Coinbase, buy with debit and credit cards or bank transfer *": "Transferir do Coinbase, comprar com cartões de débito e crédito ou transferência bancária *",
+  "Transfer from Coinbase & other options": "Transferir do Coinbase e outras opções",
   "Trending": "Em alta",
   "trustlines": "linhas de confiança",
   "Trustor": "Fidedigno",

extension/src/popup/views/AddFunds/index.tsx

@@ -44,9 +44,9 @@ export const AddFunds = () => {
     <>
       <SubviewHeader
         title={isAddXlm ? t("Add XLM") : t("Add funds")}
-        subtitle={<div>{t("Choose your method")}</div>}
+        customBackIcon={<Icon.X />}
       />
-      <View.Content>
+      <View.Content hasNoTopPadding>
         <div className="AddFunds">
           <div className="AddFunds__content">
             <div
@@ -59,11 +59,11 @@ export const AddFunds = () => {
                 src={CoinbaseLogo}
                 alt={t("Coinbase Logo")}
               />
-              <div>
+              <div className="AddFunds__button__text">
                 <Text
                   as="div"
                   size="sm"
-                  weight="semi-bold"
+                  weight="medium"
                   addlClassName="AddFunds__button__title"
                 >
                   {isAddXlm
@@ -72,48 +72,41 @@ export const AddFunds = () => {
                 </Text>
                 <Text
                   as="div"
-                  size="sm"
+                  size="xs"
                   weight="medium"
                   addlClassName="AddFunds__button__description"
                 >
-                  {t(
-                    "Transfer from Coinbase, buy with debit and credit cards or bank transfer *",
-                  )}
+                  {t("Transfer from Coinbase & other options")}
                 </Text>
               </div>
             </div>
             <div className="AddFunds__button" onClick={handleTransferClick}>
               <div className="AddFunds__button__qr">
                 <Icon.QrCode01 />
               </div>
-              <div>
+              <div className="AddFunds__button__text">
                 <Text
                   as="div"
                   size="sm"
-                  weight="semi-bold"
+                  weight="medium"
                   addlClassName="AddFunds__button__title"
                 >
                   {t("Transfer from another account")}
                 </Text>
                 <Text
                   as="div"
-                  size="sm"
+                  size="xs"
                   weight="medium"
                   addlClassName="AddFunds__button__description"
                 >
                   {isAddXlm
                     ? t("Send XLM to this account address")
-                    : t("Send funds to this account address")}
+                    : t("Receive funds from another wallet")}
                 </Text>
               </div>
             </div>
             {tokenError && <div className="AddFunds__error">{tokenError}</div>}
           </div>
-          <div className="AddFunds__footer">
-            <Text as="div" size="xs" weight="medium">
-              {t("* payment methods may vary based on your location")}
-            </Text>
-          </div>
         </div>
       </View.Content>
     </>

extension/src/popup/views/AddFunds/styles.scss

@@ -3,65 +3,64 @@
 .AddFunds {
   display: flex;
   flex-direction: column;
-  height: 100%;
 
   &__content {
     display: flex;
     flex-direction: column;
-    flex: 1;
-    gap: pxToRem(12);
-  }
-
-  &__onrampLogo {
-    width: pxToRem(32);
-    height: pxToRem(32);
-  }
-
-  &__error {
-    color: var(--sds-clr-red-09);
-    font-size: pxToRem(12);
-    line-height: pxToRem(16);
-    margin-top: pxToRem(8);
-    text-align: center;
+    gap: pxToRem(24px);
   }
 
   &__button {
-    background: var(--sds-clr-gray-03);
-    border-radius: pxToRem(6);
-    cursor: pointer;
     display: flex;
-    font-size: pxToRem(14);
-    font-weight: var(--sds-fw-semi-bold);
     flex-direction: column;
-    justify-content: center;
-    align-items: flex-start;
-    gap: pxToRem(12);
-    padding: pxToRem(12) pxToRem(16);
+    gap: pxToRem(12px);
+    background-color: var(--sds-clr-gray-03);
+    border-radius: pxToRem(12px);
+    padding: pxToRem(16px);
+    cursor: pointer;
+
+    &__text {
+      display: flex;
+      flex-direction: column;
+      gap: pxToRem(4px);
+    }
+
+    &__title {
+      color: var(--sds-clr-gray-12) !important; // sds Text override
+    }
 
     &__description {
-      color: var(--sds-clr-gray-11);
+      color: var(--sds-clr-gray-11) !important; // sds Text override
     }
 
     &__qr {
-      align-items: flex;
-      background: var(--sds-clr-mint-03);
-      border-radius: pxToRem(100);
       display: flex;
-      height: pxToRem(32);
+      align-items: center;
       justify-content: center;
-      padding: pxToRem(6);
-      width: pxToRem(32);
+      width: pxToRem(24px);
+      height: pxToRem(24px);
+      border-radius: 50%;
+      background-color: var(--sds-clr-lilac-03);
+      border: 1px solid var(--sds-clr-lilac-06);
+      color: var(--sds-clr-lilac-11);
 
       svg {
-        height: pxToRem(20);
-        stroke: var(--sds-clr-mint-09);
-        width: pxToRem(20);
+        width: pxToRem(16px);
+        height: pxToRem(16px);
       }
     }
   }
 
-  &__footer {
-    color: var(--sds-clr-gray-10);
-    text-align: center;
+  &__onrampLogo {
+    width: pxToRem(24px);
+    height: pxToRem(24px);
+  }
+
+  &__error {
+    color: var(--sds-clr-red-09);
+    font-size: pxToRem(12px);
+    font-weight: var(--font-weight-medium);
+    line-height: pxToRem(18px);
+    margin-top: pxToRem(8px);
   }
 }