Merge pull request #577 from Peersyst/feat/send-all-balance-front

Feat/send all funds

Author: AgustinMJ

src/locale/locales/el/common.json

@@ -226,5 +226,6 @@
     "edit": "Επεξεργασία",
     "purchaseCompleted": "Η αγορά ολοκληρώθηκε!",
     "orderCompletedText": "Θυμηθείτε ότι θα χρειαστούν λίγα λεπτά για να αντικατοπτρίσει ο λογαριασμός σας το νέο ποσό.",
-    "selectAddressOfDomain": "{{count}} διευθύνσεις CKB εντοπίστηκαν κάτω από τη διεύθυνση {{domain}}:"
+    "selectAddressOfDomain": "{{count}} διευθύνσεις CKB εντοπίστηκαν κάτω από τη διεύθυνση {{domain}}:",
+    "sendAllBalance": "Αποστολή όλου του υπολοίπου"
 }

src/locale/locales/en/common.json

@@ -226,5 +226,6 @@
     "edit": "Edit",
     "purchaseCompleted": "Purchase completed!",
     "orderCompletedText": "Remember that it will take a few minutes for your account balance to reflect the new amount.",
-    "selectAddressOfDomain": "{{count}} CKB addresses detected under {{domain}} address:"
+    "selectAddressOfDomain": "{{count}} CKB addresses detected under {{domain}} address:",
+    "sendAllBalance": "Send all balance"
 }

src/locale/locales/es/common.json

@@ -226,5 +226,6 @@
     "edit": "Editar",
     "purchaseCompleted": "Compra completada!",
     "orderCompletedText": "Recuerda que tomará unos minutos para que el saldo de tu cuenta refleje tu nuevo balance.",
-    "selectAddressOfDomain": "{{count}} direcciones CKB detectadas bajo la dirección {{domain}}:"
+    "selectAddressOfDomain": "{{count}} direcciones CKB detectadas bajo la dirección {{domain}}:",
+    "sendAllBalance": "Enviar todo el saldo"
 }

src/locale/locales/fr/common.json

@@ -226,5 +226,6 @@
     "edit": "Modifier",
     "purchaseCompleted": "Achat terminé!",
     "orderCompletedText": "Rappelez-vous qu'il faudra quelques minutes pour que le solde de votre compte reflète le nouveau montant.",
-    "selectAddressOfDomain": "{{count}} adresses CKB détectées sous l'adresse {{domain}}:"
+    "selectAddressOfDomain": "{{count}} adresses CKB détectées sous l'adresse {{domain}}:",
+    "sendAllBalance": "Envoyer tout le solde"
 }

src/locale/locales/pt/common.json

@@ -226,5 +226,6 @@
     "edit": "Editar",
     "purchaseCompleted": "Compra concluída!",
     "orderCompletedText": "Lembre-se de que levará alguns minutos para que o saldo da sua conta reflita o novo valor.",
-    "selectAddressOfDomain": "{{count}} endereços CKB detectados sob o endereço {{domain}}:"
+    "selectAddressOfDomain": "{{count}} endereços CKB detectados sob o endereço {{domain}}:",
+    "sendAllBalance": "Enviar todo o saldo"
 }

src/locale/locales/zh/common.json

@@ -226,5 +226,6 @@
     "edit": "编辑",
     "purchaseCompleted": "购买完成!",
     "orderCompletedText": "请记住，您的账户余额将需要几分钟才能反映出新的金额。",
-    "selectAddressOfDomain": "在{{domain}}地址下检测到{{count}}个CKB地址："
+    "selectAddressOfDomain": "在{{domain}}地址下检测到{{count}}个CKB地址：",
+    "sendAllBalance": "发送所有余额"
 }

src/module/transaction/hook/useSend.ts

@@ -18,7 +18,14 @@ export interface UseSendTransactionReturn extends SignStatus {
 }
 
 export function useSend(): UseSendTransactionReturn {
-    const { senderWalletIndex = 0, asset, amount = "0", receiver, receiverDomainAddress }: SendState = useRecoilValue(sendState);
+    const {
+        senderWalletIndex = 0,
+        asset,
+        amount = "0",
+        receiver,
+        receiverDomainAddress,
+        sendAllFunds,
+    }: SendState = useRecoilValue(sendState);
     const sendCKBMutationResult = useSendCKB(senderWalletIndex);
     const sendFTMutationResult = useSendTokens(senderWalletIndex);
     const sendNFTsMutationResult = useSendNFT(senderWalletIndex);
@@ -90,6 +97,7 @@ export function useSend(): UseSendTransactionReturn {
                     {
                         amount: convertCKBToShannons(amount),
                         to: receiverAddress!,
+                        sendAllFunds,
                         feeRate: fee,
                     },
                     {

src/module/transaction/screen/SendConfirmationScreen/SendConfirmationScreen.tsx

@@ -8,10 +8,11 @@ import useServiceInstance from "module/wallet/hook/useServiceInstance";
 import { useSend } from "module/transaction/hook/useSend";
 import SendModal from "module/transaction/component/core/SendModal/SendModal";
 import CallbackModal from "module/common/component/feedback/SignModal/SignModal";
+import useGetBalance from "module/wallet/query/useGetBalance";
 
 const SendConfirmationScreen = (): JSX.Element => {
     const translate = useTranslate();
-    const { amount, senderWalletIndex, receiver, receiverDomainAddress, message, asset } = useRecoilValue(sendState);
+    const { amount, senderWalletIndex, receiver, receiverDomainAddress, message, asset, sendAllFunds } = useRecoilValue(sendState);
     const {
         state: { wallets },
     } = useWalletState();
@@ -27,13 +28,15 @@ const SendConfirmationScreen = (): JSX.Element => {
         hideModal(SendModal.id);
     }
 
+    const { data: { freeBalance = 0 } = {} } = useGetBalance(index);
+    const amountToSend = sendAllFunds ? freeBalance : amount;
     return (
         <CallbackModal onSign={sendTransaction} {...restSendTransactionWithStatus} onError={closeSendModal} onExited={closeSendModal}>
             {({ showModal, isSuccess, isLoading }) => (
                 <Col gap={24} onStartShouldSetResponder={() => true}>
                     <SendSummary
                         showTotal
-                        amount={amount!}
+                        amount={amountToSend!}
                         receiverAddress={receiverAddress!}
                         token={asset.ft}
                         nft={asset.nft}

src/module/transaction/screen/SendSetAmountScreen/SendSetAmountScreen.tsx

@@ -1,4 +1,4 @@
-import { Col, Form, useSetTab, Suspense } from "@peersyst/react-native-components";
+import { Col, Form, useSetTab, Suspense, Switch } from "@peersyst/react-native-components";
 import Button from "module/common/component/input/Button/Button";
 import { useRecoilState } from "recoil";
 import sendRecoilState, { SendState } from "module/transaction/state/SendState";
@@ -12,17 +12,19 @@ import { useState } from "react";
 import { Asset } from "module/wallet/wallet.types";
 import { AssetType } from "module/wallet/wallet.types";
 
-export type SendAmountAndMessageResult = Pick<SendState, "amount" | "asset">;
+export type SendAmountAndMessageResult = Pick<SendState, "amount" | "asset" | "sendAllFunds">;
 
 export const SEND_SET_AMOUNT_FORM_KEYS: Partial<Record<keyof SendState, keyof SendState>> = {
     asset: "asset",
     amount: "amount",
+    sendAllFunds: "sendAllFunds",
 };
 
 const SendSetAmountScreen = (): JSX.Element => {
     const [sendState, setSendState] = useRecoilState(sendRecoilState);
     const [asset, setAsset] = useState<Asset | undefined>(sendState.asset);
     const [amount, setAmount] = useState<string | undefined>(sendState.amount?.toString() ?? undefined);
+    const [sendAllFunds, setSendAllFunds] = useState(false);
     const translate = useTranslate();
 
     const senderWalletIndex = sendState.senderWalletIndex!;
@@ -53,16 +55,29 @@ const SendSetAmountScreen = (): JSX.Element => {
                         index={senderWalletIndex}
                         name={SEND_SET_AMOUNT_FORM_KEYS.asset}
                     />
-                    <AssetAmountTextField
-                        hideError={amount === ""}
-                        value={amount}
-                        onChange={(amount: string) => setAmount(amount)}
-                        label={translate("select_the_amount_to_send")}
-                        asset={asset ?? { type: AssetType.NATIVE_TOKEN }}
-                        placeholder={translate("enter_amount")}
-                        name={SEND_SET_AMOUNT_FORM_KEYS.amount}
-                        index={sendState.senderWalletIndex}
-                    />
+
+                    {!sendAllFunds && (
+                        <AssetAmountTextField
+                            hideError={amount === "" || sendAllFunds}
+                            value={amount}
+                            onChange={(amount: string) => setAmount(amount)}
+                            label={translate("select_the_amount_to_send")}
+                            asset={asset ?? { type: AssetType.NATIVE_TOKEN }}
+                            placeholder={translate("enter_amount")}
+                            name={SEND_SET_AMOUNT_FORM_KEYS.amount}
+                            index={sendState.senderWalletIndex}
+                            disabled={sendAllFunds}
+                        />
+                    )}
+
+                    {asset && asset.type === AssetType.NATIVE_TOKEN && (
+                        <Switch
+                            label={translate("sendAllBalance")}
+                            name={SEND_SET_AMOUNT_FORM_KEYS.sendAllFunds}
+                            value={sendAllFunds}
+                            onChange={setSendAllFunds}
+                        />
+                    )}
                     <Button variant="primary" type="submit" fullWidth>
                         {translate("next")}
                     </Button>

src/module/transaction/state/SendState.ts

@@ -9,6 +9,7 @@ export interface SendState {
     message?: string;
     receiverDomainAddress?: BitAccountRecordAddress;
     asset: Asset;
+    sendAllFunds?: boolean;
 }
 
 const sendState = atom<SendState>({