From d42a2e3acff1e0a16695cb732ed62832f3e29c99 Mon Sep 17 00:00:00 2001 From: MRVDH Date: Thu, 10 Aug 2023 14:12:04 +0200 Subject: [PATCH 1/3] Sidebar account transactions --- packages/apps/tools/locales/en/common.json | 1 + .../account-transactions/results/index.tsx | 56 +++++++++++++++++-- .../results/styles.css.ts | 6 ++ 3 files changed, 58 insertions(+), 5 deletions(-) diff --git a/packages/apps/tools/locales/en/common.json b/packages/apps/tools/locales/en/common.json index a067ab4d49..8c2f91d5a6 100644 --- a/packages/apps/tools/locales/en/common.json +++ b/packages/apps/tools/locales/en/common.json @@ -94,6 +94,7 @@ "Search for transactions": "Search for transactions", "Filters": "Filters", "Filtered by": "Filtered by", + "Transaction Details": "Transaction Details", "Reset all filters": "Reset all filters", "Reload": "Reload", "Finisher": "Finisher", diff --git a/packages/apps/tools/src/pages/account/account-transactions/results/index.tsx b/packages/apps/tools/src/pages/account/account-transactions/results/index.tsx index 86f0ec5fd9..2ceefc97d7 100644 --- a/packages/apps/tools/src/pages/account/account-transactions/results/index.tsx +++ b/packages/apps/tools/src/pages/account/account-transactions/results/index.tsx @@ -3,15 +3,22 @@ import { Box, Breadcrumbs, Button, + Card, ContentHeader, Grid, Heading, + ProductIcon, SystemIcon, Table, Text, + TrackerCard, } from '@kadena/react-ui'; -import { filterItemClass, headerButtonGroupClass } from './styles.css'; +import { + filterItemClass, + headerButtonGroupClass, + mainContentClass, +} from './styles.css'; import { Network } from '@/constants/kadena'; import Routes from '@/constants/routes'; @@ -23,7 +30,8 @@ import { import Debug from 'debug'; import { useRouter } from 'next/router'; import useTranslation from 'next-translate/useTranslation'; -import React, { FC, useEffect, useState } from 'react'; +import React, { FC, useEffect, useRef, useState } from 'react'; +import DrawerToolbar from '@/components/Common/DrawerToolbar'; const CheckTransactions: FC = () => { const debug = Debug( @@ -36,6 +44,8 @@ const CheckTransactions: FC = () => { const [results, setResults] = useState([]); const [loadingState, setLoadingState] = useState(true); + const transactionDetailsRef = useRef(null); + function displayAccountName(accountName: string): string { if (accountName.length > 20) { return `${accountName.replace(/(\w{4}).*(\w{4})/, '$1****$2')}`; @@ -121,8 +131,38 @@ const CheckTransactions: FC = () => { await router.push(Routes.ACCOUNT_TRANSACTIONS_FILTERS); } + const handleOpenTransactionDetails = (result: ITransaction): void => { + console.log(result); + // @ts-ignore + transactionDetailsRef.openSection(0); + }; + return ( -
+
+ + + + ), + }, + ]} + /> {t('Account')} {t('Transactions')} @@ -197,7 +237,10 @@ const CheckTransactions: FC = () => { } return ( - + handleOpenTransactionDetails(result)} + > {new Date(result.blockTime).toLocaleString()} @@ -236,7 +279,10 @@ const CheckTransactions: FC = () => { } return ( - + handleOpenTransactionDetails(result)} + > {new Date(result.blockTime).toLocaleString()} diff --git a/packages/apps/tools/src/pages/account/account-transactions/results/styles.css.ts b/packages/apps/tools/src/pages/account/account-transactions/results/styles.css.ts index 930716aa71..46dbe12c6a 100644 --- a/packages/apps/tools/src/pages/account/account-transactions/results/styles.css.ts +++ b/packages/apps/tools/src/pages/account/account-transactions/results/styles.css.ts @@ -2,6 +2,12 @@ import { sprinkles, vars } from '@kadena/react-ui/theme'; import { style } from '@vanilla-extract/css'; +export const mainContentClass = style([ + { + width: `calc(100% - ${vars.sizes.$16})`, + }, +]); + export const headerButtonGroupClass = style([ sprinkles({ display: 'flex', From ae6e364a4b91938ce9341c2ea7758d41d031fcd4 Mon Sep 17 00:00:00 2001 From: MRVDH Date: Mon, 14 Aug 2023 12:19:02 +0200 Subject: [PATCH 2/3] Tracker card and progress bar initial version --- .../account-transactions/results/index.tsx | 43 +++++++++++++++++-- 1 file changed, 39 insertions(+), 4 deletions(-) diff --git a/packages/apps/tools/src/pages/account/account-transactions/results/index.tsx b/packages/apps/tools/src/pages/account/account-transactions/results/index.tsx index 2ceefc97d7..d91d147d90 100644 --- a/packages/apps/tools/src/pages/account/account-transactions/results/index.tsx +++ b/packages/apps/tools/src/pages/account/account-transactions/results/index.tsx @@ -8,6 +8,7 @@ import { Grid, Heading, ProductIcon, + ProgressBar, SystemIcon, Table, Text, @@ -43,6 +44,7 @@ const CheckTransactions: FC = () => { const [results, setResults] = useState([]); const [loadingState, setLoadingState] = useState(true); + const [transactionDetails, setTransactionDetails] = useState(); const transactionDetailsRef = useRef(null); @@ -132,7 +134,7 @@ const CheckTransactions: FC = () => { } const handleOpenTransactionDetails = (result: ITransaction): void => { - console.log(result); + setTransactionDetails(result); // @ts-ignore transactionDetailsRef.openSection(0); }; @@ -150,14 +152,47 @@ const CheckTransactions: FC = () => { + + + + ), }, From 109c37cd9c03bd71554968daa8167b124447ab09 Mon Sep 17 00:00:00 2001 From: MRVDH Date: Mon, 21 Aug 2023 17:00:10 +0200 Subject: [PATCH 3/3] lint fixes --- .../pages/account/account-transactions/results/index.tsx | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/packages/apps/tools/src/pages/account/account-transactions/results/index.tsx b/packages/apps/tools/src/pages/account/account-transactions/results/index.tsx index d91d147d90..4ce403bad9 100644 --- a/packages/apps/tools/src/pages/account/account-transactions/results/index.tsx +++ b/packages/apps/tools/src/pages/account/account-transactions/results/index.tsx @@ -3,7 +3,6 @@ import { Box, Breadcrumbs, Button, - Card, ContentHeader, Grid, Heading, @@ -21,6 +20,7 @@ import { mainContentClass, } from './styles.css'; +import DrawerToolbar from '@/components/Common/DrawerToolbar'; import { Network } from '@/constants/kadena'; import Routes from '@/constants/routes'; import { useToolbar } from '@/context/layout-context'; @@ -32,7 +32,6 @@ import Debug from 'debug'; import { useRouter } from 'next/router'; import useTranslation from 'next-translate/useTranslation'; import React, { FC, useEffect, useRef, useState } from 'react'; -import DrawerToolbar from '@/components/Common/DrawerToolbar'; const CheckTransactions: FC = () => { const debug = Debug( @@ -274,7 +273,7 @@ const CheckTransactions: FC = () => { return ( handleOpenTransactionDetails(result)} + onClick={() => handleOpenTransactionDetails(result)} > {new Date(result.blockTime).toLocaleString()} @@ -316,7 +315,7 @@ const CheckTransactions: FC = () => { return ( handleOpenTransactionDetails(result)} + onClick={() => handleOpenTransactionDetails(result)} > {new Date(result.blockTime).toLocaleString()}