Dev to Main: Feature/safe withdraw send, Enable personal IBAN feature for all users

.env.dev

@@ -16,4 +16,3 @@ REACT_APP_WC_PID={WC_PID}
 REACT_APP_SIFT_BEACON_KEY={SIFT_BEACON_KEY}
 REACT_APP_ALCHEMY_KEY={ALCHEMY_KEY}
 REACT_APP_TATUM_KEY={TATUM_KEY}
-REACT_APP_PERSONAL_IBAN_ENABLED=true

.env.loc

@@ -16,4 +16,3 @@ REACT_APP_WC_PID={WC_PID}
 REACT_APP_SIFT_BEACON_KEY={SIFT_BEACON_KEY}
 REACT_APP_ALCHEMY_KEY={ALCHEMY_KEY}
 REACT_APP_TATUM_KEY={TATUM_KEY}
-REACT_APP_PERSONAL_IBAN_ENABLED=true

src/components/order/order-interface.tsx

@@ -50,6 +50,7 @@ interface OrderInterfaceProps {
   pairMap?: (asset: string) => Asset | Fiat | undefined;
   onFetchPaymentInfo: (data: OrderFormData) => Promise<OrderPaymentInfo>;
   confirmPayment: () => Promise<void>;
+  confirmButtonLabel?: string;
   balanceFunc?: (asset: Asset) => string;
   onSourceAssetChange?: (sourceAsset: string) => void;
 }
@@ -67,6 +68,7 @@ export const OrderInterface: React.FC<OrderInterfaceProps> = ({
   pairMap,
   onFetchPaymentInfo,
   confirmPayment,
+  confirmButtonLabel,
   balanceFunc,
   onSourceAssetChange,
 }: OrderInterfaceProps) => {
@@ -255,7 +257,7 @@ export const OrderInterface: React.FC<OrderInterfaceProps> = ({
             label={header ?? translate('general/actions', 'Next')}
             width={StyledButtonWidth.FULL}
             disabled={!paymentInfo || amountError?.hideInfos}
-            hidden={!!paymentInfo && !amountError?.hideInfos}
+            hidden={(!!paymentInfo && !amountError?.hideInfos) || bankAccountSelection}
             onClick={() => debouncedData && handlePaymentInfoFetch(debouncedData, onFetchPaymentInfo, setValue)}
           />
         </div>
@@ -271,6 +273,7 @@ export const OrderInterface: React.FC<OrderInterfaceProps> = ({
           kycError={kycError}
           errorMessage={paymentInfoError}
           confirmPayment={confirmPayment}
+          confirmButtonLabel={confirmButtonLabel}
           retry={() => debouncedData && handlePaymentInfoFetch(debouncedData, onFetchPaymentInfo, setValue)}
         />
       </StyledVerticalStack>

src/components/order/payment-info.tsx

@@ -45,6 +45,7 @@ export interface PaymentInfoProps {
   errorMessage?: string;
   amountError?: AmountError;
   kycError?: TransactionError;
+  confirmButtonLabel?: string;
   retry: () => void;
   confirmPayment: () => Promise<void>;
 }
@@ -60,6 +61,7 @@ export const PaymentInfo = React.memo(function PaymentInfoComponent({
   kycError,
   sourceAsset,
   targetAsset,
+  confirmButtonLabel,
   retry,
   confirmPayment,
 }: PaymentInfoProps): JSX.Element {
@@ -194,7 +196,10 @@ export const PaymentInfo = React.memo(function PaymentInfoComponent({
                       ) : isBankWire ? (
                         <StyledButton
                           width={StyledButtonWidth.FULL}
-                          label={translate('screens/buy', 'Click here once you have issued the transfer')}
+                          label={
+                            confirmButtonLabel ??
+                            translate('screens/buy', 'Click here once you have issued the transfer')
+                          }
                           onClick={confirmPayment}
                           className="mt-4"
                           caps={false}

src/components/safe/send-interface.tsx

@@ -1,5 +1,6 @@
 import { ApiError, Asset, UserAddress, Utils, Validations, useUserContext } from '@dfx.swiss/react';
 import {
+  AlignContent,
   Form,
   StyledButton,
   StyledButtonWidth,
@@ -31,7 +32,7 @@ interface SendFormData {
 export const SendInterface = () => {
   const { translate, translateError } = useSettingsContext();
   const { width } = useWindowContext();
-  const { sendableAssets, fetchSendInfo, confirmSend, portfolio } = useSafe();
+  const { sendableAssets, fetchSendInfo, confirmSend, portfolio, custodyBlockchains } = useSafe();
   const { setCompletionType } = useOrderUIContext();
 
   const [quote, setQuote] = useState<OrderPaymentInfo>();
@@ -50,16 +51,10 @@ export const SendInterface = () => {
   const data = watch();
   const debouncedData = useDebounce(data, 500);
   const addressItems = useMemo(() => {
-    const walletAddresses = user?.addresses?.filter((a) => !a.isCustody) ?? [];
-    return [
-      ...walletAddresses,
-      {
-        address: translate('screens/buy', 'Switch address'),
-        label: translate('screens/buy', 'Login with a different address'),
-        blockchains: [],
-      } as any,
-    ];
-  }, [user?.addresses, translate]);
+    return (
+      user?.addresses?.filter((a) => !a.isCustody && a.blockchains.some((b) => custodyBlockchains?.includes(b))) ?? []
+    );
+  }, [user?.addresses, custodyBlockchains]);
 
   useEffect(() => {
     if (sendableAssets?.length && !data.sendAsset) {
@@ -135,8 +130,8 @@ export const SendInterface = () => {
           name="address"
           label={translate('screens/sell', 'Destination address')}
           items={addressItems}
-          labelFunc={(item) => (item.blockchains?.length ? blankedAddress(item.address, { width }) : item.address)}
-          descriptionFunc={(item) => (item.blockchains?.length ? item.blockchains[0] : item.label)}
+          labelFunc={(item) => blankedAddress(item.address, { width })}
+          descriptionFunc={(item) => item.blockchains[0]}
           full
           forceEnable
         />
@@ -146,10 +141,10 @@ export const SendInterface = () => {
         {quote?.paymentInfo && (
           <StyledVerticalStack gap={3} full>
             <StyledInfoText>
-              {translate('screens/safe', 'Please verify the address and confirm to send your assets.')}
+              {translate('screens/safe', 'Please verify the address and confirm to withdraw your assets.')}
             </StyledInfoText>
 
-            <StyledDataTable showBorder>
+            <StyledDataTable alignContent={AlignContent.RIGHT} showBorder minWidth={false}>
               <StyledDataTableRow label={translate('screens/payment', 'Amount')}>
                 {quote.paymentInfo.amount} {quote.paymentInfo.sourceAsset}
               </StyledDataTableRow>
@@ -168,11 +163,12 @@ export const SendInterface = () => {
 
         <StyledButton
           type="button"
-          label={translate('screens/safe', 'Send {{asset}}', { asset: data.sendAsset?.name ?? '' })}
+          label={translate('screens/safe', 'Click here to confirm the withdrawal')}
           width={StyledButtonWidth.FULL}
           disabled={!quote?.paymentInfo || isFetchingQuote}
           isLoading={isFetchingQuote}
           onClick={onConfirmSend}
+          caps={false}
         />
       </StyledVerticalStack>
     </Form>

src/components/safe/withdraw-interface.tsx

@@ -10,8 +10,7 @@ import { OrderInterface } from '../order/order-interface';
 
 export const WithdrawInterface = () => {
   const { translate } = useSettingsContext();
-  const { withdrawableAssets, withdrawableCurrencies, pairMap, fetchWithdrawInfo, confirmWithdraw, portfolio } =
-    useSafe();
+  const { withdrawableAssets, pairMap, fetchWithdrawInfo, confirmWithdraw, portfolio } = useSafe();
   const { setCompletionType } = useOrderUIContext();
   const { bankAccounts } = useBankAccountContext();
 
@@ -32,13 +31,12 @@ export const WithdrawInterface = () => {
     <OrderInterface
       orderType={OrderType.SELL}
       header={translate('screens/safe', 'Withdraw')}
-      sourceInputLabel={translate('screens/buy', 'You spend')}
-      targetInputLabel={translate('screens/buy', 'You get about')}
+      sourceInputLabel={translate('screens/payment', 'Amount')}
       sourceAssets={withdrawableAssets}
-      targetAssets={withdrawableCurrencies}
       pairMap={pairMap}
       hideAddressSelection={true}
       confirmPayment={onConfirmWithdraw}
+      confirmButtonLabel={translate('screens/safe', 'Click here to confirm the withdrawal')}
       onFetchPaymentInfo={handleFetchWithdrawInfo}
       balanceFunc={(asset) => findCustodyBalanceString(asset, portfolio.balances)}
       defaultValues={{ bankAccount: defaultBankAccount }}

src/hooks/safe.hook.ts

@@ -158,7 +158,11 @@ export function useSafe(): UseSafeResult {
   const withdrawableAssets = useMemo(() => {
     const assets =
       custodyBlockchains.length > 0 ? getAssets(custodyBlockchains, { sellable: true, comingSoon: false }) : [];
-    return assets.filter((a) => portfolio.balances.find((b) => b.asset.name === a.name && b.balance > 0));
+    return assets.filter(
+      (a) =>
+        Object.keys(WITHDRAW_PAIRS).includes(a.name) &&
+        portfolio.balances.find((b) => b.asset.name === a.name && b.balance > 0),
+    );
   }, [getAssets, custodyBlockchains, portfolio.balances]);
 
   const withdrawableCurrencies = useMemo(() => {
@@ -278,7 +282,7 @@ export function useSafe(): UseSafeResult {
       data: {
         type: CustodyOrderType.WITHDRAWAL,
         sourceAsset: data.sourceAsset.name,
-        targetAsset: data.targetAsset.name,
+        targetAsset: WITHDRAW_PAIRS[data.sourceAsset.name],
         sourceAmount: data.sourceAmount ? Number(data.sourceAmount) : undefined,
         targetAmount: data.targetAmount ? Number(data.targetAmount) : undefined,
         targetIban: data.bankAccount?.iban,

src/screens/buy.screen.tsx

@@ -16,7 +16,6 @@ import {
   useFiat,
   useSessionContext,
   useUserContext,
-  UserRole,
   Utils,
   Validations,
 } from '@dfx.swiss/react';
@@ -626,9 +625,7 @@ export default function BuyScreen(): JSX.Element {
                                 <PaymentInformationContent info={paymentInfo} />
                               </div>
                               <SanctionHint />
-                              {(process.env.REACT_APP_PERSONAL_IBAN_ENABLED === 'true' ||
-                                session?.role === UserRole.VIP) &&
-                                !paymentInfo.isPersonalIban && (
+                              {!paymentInfo.isPersonalIban && (
                                   <StyledVerticalStack gap={4}>
                                     <h2 className="text-dfxBlue-800 text-center">
                                       {translate('screens/payment', 'New: Personal IBAN in your own name!')}

src/translations/languages/de.json

@@ -588,6 +588,7 @@
     "Bank Transaction Details": "Angaben zur Banktransaktion",
     "Recipient": "Empfänger",
     "Amount": "Betrag",
+    "Estimated amount": "Geschätzter Betrag",
     "Amount in {{currency}}": "Betrag in {{currency}}",
     "Currency": "Währung",
     "IBAN": "IBAN",
@@ -971,10 +972,10 @@
     "Your incoming transaction will be processed and added to your Safe portfolio. We will inform you by email about the progress of your transactions.": "Deine eingehende Transaktion wird verarbeitet und zu Deinem Safe-Portfolio hinzugefügt. Wir werden Dich per E-Mail über den Fortschritt Deiner Transaktionen informieren.",
     "Your withdrawal will be processed and paid out to your bank account. We will inform you by email about the progress of your transactions.": "Deine Auszahlung wird verarbeitet und auf Dein Bankkonto überwiesen. Wir werden Dich per E-Mail über den Fortschritt Deiner Transaktionen informieren.",
     "Your send transaction will be processed and sent to your external wallet. We will inform you by email about the progress of your transactions.": "Deine Send-Transaktion wird verarbeitet und an Dein externes Wallet gesendet. Wir werden Dich per E-Mail über den Fortschritt Deiner Transaktionen informieren.",
-    "Send {{asset}}": "Sende {{asset}}",
-    "Please verify the address and confirm to send your assets.": "Bitte überprüfe die Adresse und bestätige, um Deine Assets zu senden.",
     "Network fee": "Netzwerkgebühr",
     "Destination address": "Zieladresse",
+    "Please verify the address and confirm to withdraw your assets.": "Bitte überprüfe die Adresse und bestätige, um Deine Assets abzuheben.",
+    "Click here to confirm the withdrawal": "Klicke hier, um die Auszahlung zu bestätigen",
     "Your swap will be processed and reflected in your Safe portfolio. We will inform you by email about the progress of your transactions.": "Dein Swap wird verarbeitet und in Deinem Safe-Portfolio angezeigt. Wir werden Dich per E-Mail über den Fortschritt Deiner Transaktionen informieren.",
     "Download PDF": "PDF herunterladen",
     "Select a date for your portfolio report": "Wähle ein Datum für Deinen Portfolio-Bericht"

src/translations/languages/fr.json

@@ -588,6 +588,7 @@
     "Bank Transaction Details": "Détails de la transaction bancaire",
     "Recipient": "Bénéficiaire",
     "Amount": "Montant",
+    "Estimated amount": "Montant estimé",
     "Amount in {{currency}}": "Montant en {{currency}}",
     "Currency": "Devise",
     "IBAN": "IBAN",
@@ -970,10 +971,10 @@
     "Your incoming transaction will be processed and added to your Safe portfolio. We will inform you by email about the progress of your transactions.": "Votre transaction entrante sera traitée et ajoutée à votre portefeuille Safe. Nous vous informerons par e-mail de l'état d'avancement de vos transactions.",
     "Your withdrawal will be processed and paid out to your bank account. We will inform you by email about the progress of your transactions.": "Votre retrait sera traité et versé sur votre compte bancaire. Nous vous informerons par e-mail de l'état d'avancement de vos transactions.",
     "Your send transaction will be processed and sent to your external wallet. We will inform you by email about the progress of your transactions.": "Votre envoi sera traité et envoyé vers votre portefeuille externe. Nous vous informerons par e-mail de l'état d'avancement de vos transactions.",
-    "Send {{asset}}": "Envoyer {{asset}}",
-    "Please verify the address and confirm to send your assets.": "Veuillez vérifier l'adresse et confirmer pour envoyer vos actifs.",
     "Network fee": "Frais de réseau",
     "Destination address": "Adresse de destination",
+    "Please verify the address and confirm to withdraw your assets.": "Veuillez vérifier l'adresse et confirmer pour retirer vos actifs.",
+    "Click here to confirm the withdrawal": "Cliquez ici pour confirmer le retrait",
     "Your swap will be processed and reflected in your Safe portfolio. We will inform you by email about the progress of your transactions.": "Votre swap sera traité et reflété dans votre portefeuille Safe. Nous vous informerons par e-mail de l'état d'avancement de vos transactions.",
     "Download PDF": "Télécharger PDF",
     "Select a date for your portfolio report": "Sélectionnez une date pour votre rapport de portefeuille"

src/translations/languages/it.json

@@ -588,6 +588,7 @@
     "Bank Transaction Details": "Dettagli della transazione bancarian",
     "Recipient": "Destinatario",
     "Amount": "Importo",
+    "Estimated amount": "Importo stimato",
     "Amount in {{currency}}": "Importo in {{currency}}",
     "Currency": "Valuta",
     "IBAN": "IBAN",
@@ -970,10 +971,10 @@
     "Your incoming transaction will be processed and added to your Safe portfolio. We will inform you by email about the progress of your transactions.": "La tua transazione in entrata verrà elaborata e aggiunta al tuo portafoglio Safe. Ti informeremo via e-mail sui progressi delle tue transazioni.",
     "Your withdrawal will be processed and paid out to your bank account. We will inform you by email about the progress of your transactions.": "Il tuo prelievo verrà elaborato e accreditato sul tuo conto bancario. Ti informeremo via e-mail sui progressi delle tue transazioni.",
     "Your send transaction will be processed and sent to your external wallet. We will inform you by email about the progress of your transactions.": "La tua transazione di invio verrà elaborata e inviata al tuo wallet esterno. Ti informeremo via e-mail sui progressi delle tue transazioni.",
-    "Send {{asset}}": "Invia {{asset}}",
-    "Please verify the address and confirm to send your assets.": "Verifica l'indirizzo e conferma per inviare i tuoi asset.",
     "Network fee": "Commissione di rete",
     "Destination address": "Indirizzo di destinazione",
+    "Please verify the address and confirm to withdraw your assets.": "Verifica l'indirizzo e conferma per prelevare i tuoi asset.",
+    "Click here to confirm the withdrawal": "Clicca qui per confermare il prelievo",
     "Your swap will be processed and reflected in your Safe portfolio. We will inform you by email about the progress of your transactions.": "Il tuo swap verrà elaborato e riflesso nel tuo portafoglio Safe. Ti informeremo via e-mail sui progressi delle tue transazioni.",
     "Download PDF": "Scarica PDF",
     "Select a date for your portfolio report": "Seleziona una data per il tuo report del portafoglio"