Implented recent transactions

frontend/src/app/(routes)/(overview)/overview-components/History.tsx

@@ -4,6 +4,8 @@ import SideAd from './SideAd';
 import useGetAssetsAmount from '@/custom-hooks/useGetAssetsAmount';
 import { formatDollarAmount } from '@/utils/util';
 import Profile from './Profile';
+import TransactionItem from './TransactionItem';
+import { useAppSelector } from '@/custom-hooks/StateHooks';
 
 const History = ({ chainIDs }: { chainIDs: string[] }) => {
   return (
@@ -14,7 +16,16 @@ const History = ({ chainIDs }: { chainIDs: string[] }) => {
 
       <Balance chainIDs={chainIDs} />
       <SideAd />
-      <RecentTransactions />
+
+      <div className="flex justify-between items-center">
+        <h2 className="text-white text-md font-bold leading-normal">
+          Recent Transactions
+        </h2>
+        <div className="text-[#9C9C9C] cursor-pointer text-sm font-extralight leading-normal underline underline-offset-2">
+          View All
+        </div>
+      </div>
+      <RecentTransactions chainIDs={chainIDs} />
     </div>
   );
 };
@@ -56,42 +67,33 @@ const Balance = ({ chainIDs }: { chainIDs: string[] }) => {
           {formatDollarAmount(staked + available + rewards)}
         </span>
       </div>
-      <div className="flex justify-between">
+      <div className="flex justify-center gap-6">
         <button className="primary-action-btn">Send</button>
         <button className="primary-action-btn">Delegate</button>
       </div>
     </div>
   );
 };
 
-const RecentTransactions = () => {
+const RecentTransactions = ({ chainIDs }: { chainIDs: string[] }) => {
+
+  /**
+   * Note: Currently, this implementation of recent transactions addresses scenarios involving either a single chain or all chains.
+   *        If the system evolves to support multiple selected chains in the future,
+   *        modifications to this logic will be necessary.
+   */
+  const transactions = useAppSelector((state) =>
+    chainIDs.length == 1
+      ? state.transactionHistory.chains[chainIDs[0]]
+      : state.transactionHistory.allTransactions
+  );
   return (
-    <div className="flex-1">
-      <div className="flex justify-between items-center">
-        <h2 className="text-white text-md font-bold leading-normal">
-          Recent Transactions
-        </h2>
-        <div className="text-[#9C9C9C] cursor-pointer text-sm font-extralight leading-normal underline underline-offset-2">
-          View All
-        </div>
-      </div>
-      <div className="text-white h-full w-full text-center pt-20">
-        coming soon...
+    <div className="flex-1 overflow-y-scroll">
+      <div className="text-white w-full space-y-2 mt-6">
+        {transactions.map((tx) => (
+          <TransactionItem key={tx.transactionHash} transaction={tx} />
+        ))}
       </div>
     </div>
   );
 };
-
-// const RecentTransactionItem = () => {
-//   return (
-//     <div className="h-[60px] px-2 flex gap-4 items-center cursor-pointer hover:bg-[#1F184E] rounded-lg">
-//       <div className="recent-txn-item-icon w-10 h-10 flex justify-center items-center">
-//         <Image src="/send-icon.svg" height={24} width={24} alt="Sent" />
-//       </div>
-//       <div className="text-sm">
-//         <div className="text-white">Sent 1 Atom to cosmos1le7v2...</div>
-//         <div className="text-[#FFFFFF80]">10 mins ago</div>
-//       </div>
-//     </div>
-//   );
-// };

frontend/src/app/(routes)/(overview)/overview-components/TransactionItem.tsx

@@ -0,0 +1,53 @@
+import { formatTransaction } from '@/utils/transaction';
+import Image from 'next/image';
+
+const TransactionItem = ({ transaction }: { transaction: Transaction }) => {
+  const uiTx = formatTransaction(transaction);
+
+  return (
+    <div className="w-full flex gap-4">
+      <div className="flex gap-2 min-w-[88px]">
+        <div className="space-y-4">
+          <div className="ml-auto text-right text-[12px]">{uiTx.time}</div>
+          <Image
+            className="ml-auto"
+            src="/back-arrow.svg"
+            width={24}
+            height={24}
+            alt="transaction"
+          />
+        </div>
+        <Image
+          width={12}
+          height={112}
+          alt="transaction"
+          src="/vertical-divider.svg"
+        />
+      </div>
+      <div className="space-y-2">
+        <div className="formatted-text-1">{uiTx.firstMessage}</div>
+        <div className="flex gap-2">
+          <Image width={20} height={20} alt="success" src="round-checked.svg" />
+          <div className="text-xs not-italic font-normal leading-4 tracking-[0.48px]">
+            {uiTx.isTxSuccess ? 'Transaction Successful' : 'Transaction Failed'}
+          </div>
+        </div>
+        <div className="flex gap-4">
+          {uiTx.showMsgs[0] && <Chip msg={uiTx.showMsgs[0]} />}
+          {uiTx.showMsgs[1] && <Chip msg={uiTx.showMsgs[1]} />}
+          {uiTx.showMsgs[2] && <FilledChip />}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export const Chip = ({ msg }: { msg: string }) => {
+  return <div className="chip bg-[#26233b]">{msg}</div>;
+};
+
+export const FilledChip = () => {
+  return <div className="chip fill">+ 5 more</div>;
+};
+
+export default TransactionItem;

frontend/src/app/(routes)/(overview)/overview.css

@@ -40,6 +40,28 @@
 }
 
 .right-section {
-    @apply flex flex-col p-6 bg-[#0e0b26] min-w-[500px] min-h-screen overflow-y-scroll;
+    @apply flex flex-col p-6 bg-[#0e0b26] min-w-[500px] min-h-screen max-h-screen overflow-y-scroll;
     box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
+}
+
+.recent-txn-item-icon {
+    @apply rounded-lg;
+    background: linear-gradient(180deg, #0b071d 0%, #0e0b26 100%);
+    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25) inset;
+}
+
+.chip {
+    @apply rounded-2xl px-2 py-1 text-[12px]
+}
+
+.fill {
+    background: linear-gradient(180deg, #4AA29C 0%, #8B3DA7 100%);
+}
+
+.formatted-text-1 {
+    @apply text-sm font-normal leading-[14px];
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    max-width: 293px;
 }

frontend/src/store/features/transactionHistory/transactionHistorySlice.ts

@@ -4,41 +4,43 @@ import { createSlice, PayloadAction } from '@reduxjs/toolkit';
 import { addTransanctions, getTransactions } from '@/utils/localStorage';
 
 type TransactionHistoryState = {
-  [chainID: string]: Transaction[];
+  chains: { [chainID: string]: Transaction[] };
+  allTransactions: Transaction[];
 };
 
-const initialState: TransactionHistoryState = {};
+const initialState: TransactionHistoryState = {
+  chains: {},
+  allTransactions: [],
+};
 
 export const transactionHistorySlice = createSlice({
   name: 'transactionHistory',
   initialState,
   reducers: {
     addTransactions: (state, action: PayloadAction<AddTransanctionInputs>) => {
-      const { transactions, address, chainID } = action.payload;
-      state[chainID] = [...state[chainID], ...transactions];
-      addTransanctions(chainID, address, transactions);
+      const { transactions, chainID, address } = action.payload;
+      state.allTransactions = [...state.allTransactions, ...transactions];
+      state.chains[chainID] = [...state.chains[chainID], ...transactions];
+      addTransanctions(transactions, address);
     },
+
     loadTransactions: (
       state,
       action: PayloadAction<LoadTransactionsInputs>
     ) => {
-      const { chains } = action.payload;
-      chains.forEach((chain) => {
-        const { chainID, address } = chain;
-        state[chainID] = getTransactions(chainID, address);
+      const { address } = action.payload;
+      const transactions = getTransactions(address);
+      state.allTransactions = transactions;
+      transactions.forEach((tx) => {
+        const { chainID } = tx;
+        if (!state.chains[chainID]) state.chains[chainID] = [];
+        state.chains[chainID] = [...state.chains[chainID], tx];
       });
     },
-    loadChainTransactions: (
-      state,
-      action: PayloadAction<{ chainID: string; address: string }>
-    ) => {
-      const { chainID, address } = action.payload;
-      state[chainID] = getTransactions(chainID, address);
-    },
   },
 });
 
-export const { addTransactions, loadTransactions, loadChainTransactions } =
+export const { addTransactions, loadTransactions } =
   transactionHistorySlice.actions;
 
 export default transactionHistorySlice.reducer;

frontend/src/store/features/wallet/walletSlice.ts

@@ -3,7 +3,7 @@ import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';
 import { getWalletAmino } from '../../../txns/execute';
 import { isWalletInstalled } from './walletService';
 import { setConnected, setWalletName } from '../../../utils/localStorage';
-import { loadChainTransactions } from '../transactionHistory/transactionHistorySlice';
+import { loadTransactions } from '../transactionHistory/transactionHistorySlice';
 
 declare let window: WalletWindow;
 
@@ -85,12 +85,6 @@ export const establishWalletConnection = createAsyncThunk(
           walletInfo.pubKey = Buffer.from(walletInfo?.pubKey).toString(
             'base64'
           );
-          dispatch(
-            loadChainTransactions({
-              chainID: chainId,
-              address: walletInfo.bech32Address,
-            })
-          );
           delete walletInfo?.address;
           walletName = walletInfo?.name;
           isNanoLedger = walletInfo?.isNanoLedger || false;
@@ -114,7 +108,11 @@ export const establishWalletConnection = createAsyncThunk(
       } else {
         setConnected();
         setWalletName(data.walletName);
-
+        dispatch(
+          loadTransactions({
+            address: chainInfos['cosmoshub-4'].walletInfo.bech32Address,
+          })
+        );
         return fulfillWithValue({
           chainInfos,
           nameToChainIDs,

frontend/src/txns/bank/send.ts

@@ -1,5 +1,5 @@
-import { MsgSend } from "cosmjs-types/cosmos/bank/v1beta1/tx";
-const msgSendTypeUrl: string = "/cosmos.bank.v1beta1.MsgSend";
+import { MsgSend } from 'cosmjs-types/cosmos/bank/v1beta1/tx';
+export const msgSendTypeUrl: string = '/cosmos.bank.v1beta1.MsgSend';
 
 export function SendMsg(
   from: string,
@@ -21,3 +21,8 @@ export function SendMsg(
     }),
   };
 }
+
+export function serialize(msg: Msg): string {
+  const { fromAddress, toAddress, amount } = msg.value;
+  return `$${fromAddress} sent $${amount[0].amount} ${amount[0].denom} to $${toAddress}`;
+}

frontend/src/txns/distribution/withDrawRewards.ts

@@ -1,6 +1,6 @@
 import { MsgWithdrawDelegatorReward } from 'cosmjs-types/cosmos/distribution/v1beta1/tx';
 
-const msgWithdrawRewards =
+export const msgWithdrawRewards =
   '/cosmos.distribution.v1beta1.MsgWithdrawDelegatorReward';
 
 export function WithdrawAllRewardsMsg(
@@ -15,3 +15,8 @@ export function WithdrawAllRewardsMsg(
     }),
   };
 }
+
+export function serialize(msg: Msg): string {
+  const { delegatorAddress, validatorAddress } = msg.value;
+  return `$${delegatorAddress} withdrew rewards from ${validatorAddress}`;
+}

frontend/src/txns/staking/delegate.ts

@@ -1,8 +1,7 @@
-import { Coin } from "cosmjs-types/cosmos/base/v1beta1/coin";
-import { MsgDelegate } from "cosmjs-types/cosmos/staking/v1beta1/tx";
+import { Coin } from 'cosmjs-types/cosmos/base/v1beta1/coin';
+import { MsgDelegate } from 'cosmjs-types/cosmos/staking/v1beta1/tx';
 
-
-const msgDelegate = "/cosmos.staking.v1beta1.MsgDelegate";
+export const msgDelegate = '/cosmos.staking.v1beta1.MsgDelegate';
 
 export function Delegate(
   delegator: string,
@@ -21,4 +20,9 @@ export function Delegate(
       }),
     }),
   };
-}
+}
+
+export function serialize(msg: Msg): string {
+  const { delegatorAddress, validatorAddress, amount } = msg.value;
+  return `$${delegatorAddress} delegated $${amount[0].amount} ${amount[0].denom} to $${validatorAddress}`;
+}

frontend/src/txns/staking/redelegate.ts

@@ -1,9 +1,7 @@
+import { Coin } from 'cosmjs-types/cosmos/base/v1beta1/coin';
+import { MsgBeginRedelegate } from 'cosmjs-types/cosmos/staking/v1beta1/tx';
 
-import { Coin } from "cosmjs-types/cosmos/base/v1beta1/coin";
-import { MsgBeginRedelegate } from "cosmjs-types/cosmos/staking/v1beta1/tx";
-
-
-const msgReDelegate = "/cosmos.staking.v1beta1.MsgBeginRedelegate";
+export const msgReDelegate = '/cosmos.staking.v1beta1.MsgBeginRedelegate';
 
 export function Redelegate(
   delegator: string,
@@ -24,4 +22,10 @@ export function Redelegate(
       }),
     }),
   };
-}
+}
+
+export function serialize(msg: Msg): string {
+  const { delegatorAddress, validatorSrcAddress, validatorDstAddress, amount } =
+    msg.value;
+  return `$${delegatorAddress} re-delegated $${amount[0].amount} ${amount[0].denom} to $${validatorDstAddress} from ${validatorSrcAddress}`;
+}