Merge branch 'main' into 557-reveal-button-in-key-permissions-is-not-working

apps/wallet/components/hooks/use-cancel-transfer-from-savings-mutation.ts

+import { useUser } from '@smart-signer/lib/auth/use-user';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { transactionService } from '@transaction/index';
+import { logger } from '@ui/lib/logger';
+
+export function useCancelTransferFromSavingsMutation() {
+  const queryClient = useQueryClient();
+  const { user } = useUser();
+  const cancelTransferFromSavingsMutation = useMutation({
+    mutationFn: async (params: { fromAccount: string; requestId: number }) => {
+      const broadcastResult = await transactionService.cancelTransferFromSavings(
+        params.fromAccount,
+        params.requestId,
+        {
+          observe: true
+        }
+      );
+
+      const response = { ...params, broadcastResult };
+
+      logger.info('Done cancel transfer from savings transaction: %o', response);
+    },
+    onSuccess: (data) => {
+      logger.info('useCancelTransferFromSavingsMutation onSuccess data: %o', data);
+      const { username } = user;
+      queryClient.invalidateQueries({ queryKey: ['savingsWithdrawalsFrom', username] });
+    }
+  });
+
+  return cancelTransferFromSavingsMutation;
+}

apps/wallet/components/hooks/use-transfer-hive-mutation.ts

 import { getSavingsWithdrawals } from '@/wallet/lib/hive';
 import { asset } from '@hiveio/wax';
-import { useMutation } from '@tanstack/react-query';
+import { useUser } from '@smart-signer/lib/auth/use-user';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
 import { transactionService } from '@transaction/index';
 import { logger } from '@ui/lib/logger';
 
@@ -65,6 +66,8 @@ export function useTransferToSavingsMutation() {
  * @returns
  */
 export function useWithdrawFromSavingsMutation() {
+  const queryClient = useQueryClient();
+  const { user } = useUser();
   const withdrawFromSavingsMutation = useMutation({
     mutationFn: async (params: {
       fromAccount: string;
@@ -89,6 +92,8 @@ export function useWithdrawFromSavingsMutation() {
     },
     onSuccess: (data) => {
       logger.info('useWithdrawFromSavingsMutation onSuccess data: %o', data);
+      const { username } = user;
+      queryClient.invalidateQueries({ queryKey: ['savingsWithdrawalsFrom', username] });
     }
   });
 

apps/wallet/lib/hive.ts

@@ -293,7 +293,7 @@ export const getRecentTrades = async (limit: number = 1000): Promise<IRecentTrad
   return chain.extend<GetRecentTradesyData>().api.condenser_api.get_recent_trades([limit]);
 };
 
-type SavingsWithdrawals = {
+export type SavingsWithdrawals = {
   withdrawals: {
     amount: asset;
     complete: Date;

apps/wallet/lib/utils.ts

@@ -4,6 +4,7 @@ import { AccountHistoryData } from '../pages/[param]/transfers';
 import { TransferFilters } from '@/wallet/components/transfers-history-filter';
 import { useUpdateAuthorityOperationMutation } from '../components/hooks/use-update-authority-mutation';
 import { hiveChainService } from '@transaction/lib/hive-chain-service';
+import { SavingsWithdrawals } from './hive';
 
 export function getCurrentHpApr(data: IDynamicGlobalProperties) {
   // The inflation was set to 9.5% at block 7m
@@ -116,6 +117,15 @@ export const getVests = async (value: string) => {
   return chain.vests(amount);
 };
 
+const HIVE_NAI_STRING = '@@000000021';
+
+export const getAmountFromWithdrawal = (withdrawal: SavingsWithdrawals['withdrawals'][number]) => {
+  const amount = Number(withdrawal.amount.amount) / 10 ** withdrawal.amount.precision;
+  const currency = withdrawal.amount.nai === HIVE_NAI_STRING ? 'HIVE' : 'HBD';
+
+  return `${amount.toFixed(3)} ${currency}`;
+};
+
 // The default is the blog domain
 export const getExternalLink = (path: string, baseUrl?: string) => {
   if (!baseUrl) {

apps/wallet/locales/en/common_wallet.json

@@ -401,7 +401,12 @@
     "savings_withdraw": "Savings Withdraw",
     "savings_withdraw_desc": "Withdraw funds after the required 3 day waiting period.",
     "delegatee": "Delegatee",
-    "delegator": "Delegator"
+    "delegator": "Delegator",
+    "pending_savings": "Pending Savings Withdraws",
+    "withdraw": "Withdraw",
+    "to_lower": "to",
+    "cancel_withdraw_request": "Cancel this withdraw request?",
+    "cancel_withdraw_from_savings": "Cancel withdraw from savings"
   },
   "permissions": {
     "reveal": "Reveal",

apps/wallet/locales/pl/common_wallet.json

@@ -344,7 +344,13 @@
       "required": "Nazwa konta 'Do' jest wymagana.",
       "insufficient_funds": "Niewystarczające środki.",
       "not_found": "Nie znaleziono konta."
-    }
+    },
+    "cancel": "Anuluj",
+    "pending_savings": "Oczekujące wypłąty z oszczędności",
+    "withdraw": "Wypłata",
+    "to_lower": "do",
+    "cancel_withdraw_request": "Czy chcesz anulować wypłatę oszczędnośći?",
+    "cancel_withdraw_from_savings": "Anuluj wypłątę oszczędności"
   },
   "permissions": {
     "reveal": "Ujawnij",

apps/wallet/pages/[param]/transfers.tsx

@@ -7,9 +7,9 @@ import {
   getFindAccounts
 } from '@transaction/lib/hive';
 import moment from 'moment';
-import { getAccountHistory, getOpenOrder } from '@/wallet/lib/hive';
-import { getCurrentHpApr, getFilter } from '@/wallet/lib/utils';
-import { delegatedHive, vestingHive, powerdownHive, handleError } from '@ui/lib/utils';
+import { getAccountHistory, getOpenOrder, getSavingsWithdrawals } from '@/wallet/lib/hive';
+import { getAmountFromWithdrawal, getCurrentHpApr, getFilter } from '@/wallet/lib/utils';
+import { delegatedHive, vestingHive, powerdownHive, handleError, cn } from '@ui/lib/utils';
 import { numberWithCommas } from '@ui/lib/utils';
 import { dateToFullRelative } from '@ui/lib/parse-date';
 import { convertStringToBig } from '@ui/lib/helpers';
@@ -39,6 +39,7 @@ import { useClaimRewardsMutation } from '@/wallet/components/hooks/use-claim-rew
 import { useMemo } from 'react';
 import { useCancelPowerDownMutation } from '@/wallet/components/hooks/use-power-hive-mutation';
 import env from '@beam-australia/react-env';
+import { useCancelTransferFromSavingsMutation } from '@/wallet/components/hooks/use-cancel-transfer-from-savings-mutation';
 
 const initialFilters: TransferFilters = {
   search: '',
@@ -220,8 +221,13 @@ function TransfersPage({ username }: InferGetServerSidePropsType<typeof getServe
     getFeedHistory()
   );
 
+  const { data: withdrawals } = useQuery(['savingsWithdrawalsFrom', username], () =>
+    getSavingsWithdrawals(username)
+  );
+
   const claimRewardsMutation = useClaimRewardsMutation();
   const cancelPowerDownMutation = useCancelPowerDownMutation();
+  const cancelTransferFromSavingsMutation = useCancelTransferFromSavingsMutation();
 
   const rewardsStr = useMemo(() => {
     const allRewards = [
@@ -326,6 +332,15 @@ function TransfersPage({ username }: InferGetServerSidePropsType<typeof getServe
     }
   };
 
+  const cancelTransferFromSavings = async (requestId: number) => {
+    const params = { fromAccount: username, requestId: requestId };
+    try {
+      await cancelTransferFromSavingsMutation.mutateAsync(params);
+    } catch (error) {
+      handleError(error, { method: 'cancel_transfer_from_savings', params });
+    }
+  };
+
   function historyItemDescription(operation: Operation) {
     switch (operation.type) {
       case 'claim_reward_balance':
@@ -765,6 +780,56 @@ function TransfersPage({ username }: InferGetServerSidePropsType<typeof getServe
           </div>
         ) : null}
         <div className="w-full max-w-6xl">
+          {!!withdrawals?.withdrawals.length && (
+            <div className="flex flex-col">
+              <div className="p-2 font-semibold sm:p-4">{t('transfers_page.pending_savings')}</div>
+              <table className="max-w-6xl text-sm">
+                <tbody>
+                  {withdrawals?.withdrawals.map((withdrawal, index) => {
+                    const withdrawMessage = `${t('transfers_page.withdraw')} ${getAmountFromWithdrawal(withdrawal)} ${t('transfers_page.to_lower')} ${withdrawal.to}`;
+                    return (
+                      <tr
+                        className={cn('flex flex-col py-2 sm:table-row', {
+                          'bg-background-secondary': index % 2 === 0
+                        })}
+                        key={withdrawal.id}
+                      >
+                        <td className="px-2 sm:px-4 sm:py-2">
+                          {dateToFullRelative(withdrawal.complete.toString(), t)}
+                        </td>
+                        <td className="flex flex-row items-center px-2 sm:px-4 sm:py-2">
+                          <div>{withdrawMessage}</div>
+                          <Dialog>
+                            <DialogTrigger asChild>
+                              <Button variant="link" className="text-destructive hover:no-underline">
+                                {t('transfers_page.cancel')}
+                              </Button>
+                            </DialogTrigger>
+                            <DialogContent className="text-left sm:max-w-[425px]">
+                              <div className="flex flex-col gap-y-2">
+                                <div>{t('transfers_page.cancel_withdraw_request')}</div>
+                                <div>{withdrawMessage}</div>
+                              </div>
+                              <DialogFooter className="flex flex-row items-start gap-4 sm:flex-row-reverse sm:justify-start">
+                                <DialogTrigger asChild>
+                                  <Button
+                                    variant="redHover"
+                                    onClick={() => cancelTransferFromSavings(withdrawal.request_id)}
+                                  >
+                                    {t('transfers_page.cancel_withdraw_from_savings')}
+                                  </Button>
+                                </DialogTrigger>
+                              </DialogFooter>
+                            </DialogContent>
+                          </Dialog>
+                        </td>
+                      </tr>
+                    );
+                  })}
+                </tbody>
+              </table>
+            </div>
+          )}
           {user.username === username && <FinancialReport username={user.username} />}
           <TransfersHistoryFilter
             onFiltersChange={(value) => {

packages/transaction/index.ts

@@ -1062,6 +1062,21 @@ export class TransactionService {
       });
     }, transactionOptions);
   }
+
+  async cancelTransferFromSavings(
+    fromAccount: string,
+    requestId: number,
+    transactionOptions: TransactionOptions = {}
+  ) {
+    return await this.processHiveAppOperation((builder) => {
+      builder.pushOperation({
+        cancel_transfer_from_savings: {
+          from_account: fromAccount,
+          request_id: requestId
+        }
+      });
+    }, transactionOptions);
+  }
 }
 
 export const transactionService = new TransactionService();