From 25ccdd9e7772af664bdb1b2b12708c38b4df6f6d Mon Sep 17 00:00:00 2001 From: "a.bouhuolia" Date: Sun, 5 Jun 2022 07:09:18 +0200 Subject: [PATCH] chore(Markets): Styling markets transactions table. --- packages/renderer/assets/check-circle.svg | 3 + .../MarketTransactions.stories.tsx | 9 +- .../MarketTransactions.test.tsx | 5 +- .../MarketTransactions/MarketTransactions.tsx | 112 +++++++++++------- .../MarketTransactionsCell.tsx | 37 ++++-- .../organisms/MarketTransactions/_types.ts | 6 +- .../renderer/src/constants/lang/LangKeys.ts | 8 ++ packages/renderer/src/constants/lang/en.ts | 8 ++ 8 files changed, 134 insertions(+), 54 deletions(-) create mode 100644 packages/renderer/assets/check-circle.svg diff --git a/packages/renderer/assets/check-circle.svg b/packages/renderer/assets/check-circle.svg new file mode 100644 index 0000000..d6c0d38 --- /dev/null +++ b/packages/renderer/assets/check-circle.svg @@ -0,0 +1,3 @@ + + + diff --git a/packages/renderer/src/components/organisms/MarketTransactions/MarketTransactions.stories.tsx b/packages/renderer/src/components/organisms/MarketTransactions/MarketTransactions.stories.tsx index 56e65b2..508497a 100644 --- a/packages/renderer/src/components/organisms/MarketTransactions/MarketTransactions.stories.tsx +++ b/packages/renderer/src/components/organisms/MarketTransactions/MarketTransactions.stories.tsx @@ -16,9 +16,10 @@ import type { ComponentStory, ComponentMeta } from "@storybook/react"; import { MarketTransactions } from "./MarketTransactions"; +import { MarketTransactionPaymentMethod } from "./_types"; export default { - title: "organisms/Markets/Transactions", + title: "organisms/Markets/MarketsTransactions", component: MarketTransactions, } as ComponentMeta; @@ -33,23 +34,25 @@ Default.args = {}; const data = [ { price: 123, + priceCurrency: "EUR", priceComparison: 0.12, amount: 123123, amountCurrency: "EUR", cost: 123, costCurrency: "USD", - paymentMethod: "ASD", + paymentMethod: MarketTransactionPaymentMethod.CashByMail, accountAge: 12, accountTrades: 1212, }, { price: 123, + priceCurrency: "EUR", priceComparison: 0.12, amount: 123123, amountCurrency: "EUR", cost: 123, costCurrency: "USD", - paymentMethod: "ASD", + paymentMethod: MarketTransactionPaymentMethod.CashByMail, accountAge: 12, accountTrades: 1212, }, diff --git a/packages/renderer/src/components/organisms/MarketTransactions/MarketTransactions.test.tsx b/packages/renderer/src/components/organisms/MarketTransactions/MarketTransactions.test.tsx index 4c5bd14..ecd934a 100644 --- a/packages/renderer/src/components/organisms/MarketTransactions/MarketTransactions.test.tsx +++ b/packages/renderer/src/components/organisms/MarketTransactions/MarketTransactions.test.tsx @@ -18,6 +18,7 @@ import { describe, expect, it } from "vitest"; import { render, screen } from "@testing-library/react"; import { MarketTransactions } from "./MarketTransactions"; import { AppProviders } from "@atoms/AppProviders"; +import { MarketTransactionPaymentMethod } from "./_types"; describe("organisms::MarketTransactions", () => { it("renders without exploding.", () => { @@ -99,7 +100,7 @@ const data = [ amountCurrency: "XMR", cost: 532.34, costCurrency: "USD", - paymentMethod: "ASD", + paymentMethod: MarketTransactionPaymentMethod.CashByMail, accountAge: 12, accountTrades: 1212, }, @@ -111,7 +112,7 @@ const data = [ amountCurrency: "XMR", cost: 983.32, costCurrency: "USD", - paymentMethod: "ASD", + paymentMethod: MarketTransactionPaymentMethod.CashByMail, accountAge: 12, accountTrades: 3412, }, diff --git a/packages/renderer/src/components/organisms/MarketTransactions/MarketTransactions.tsx b/packages/renderer/src/components/organisms/MarketTransactions/MarketTransactions.tsx index d26127e..5fd3ce1 100644 --- a/packages/renderer/src/components/organisms/MarketTransactions/MarketTransactions.tsx +++ b/packages/renderer/src/components/organisms/MarketTransactions/MarketTransactions.tsx @@ -8,56 +8,20 @@ import { MarketTransactionsAccountTradesCell, MarketTransactionsCostsCell, MarketTransactionsAccountAgeCell, + MarketTransactionsPaymentCell, } from "./MarketTransactionsCell"; +import { useIntl } from "react-intl"; +import { LangKeys } from "@constants/lang"; const table = createTable().setRowType(); -const columns = [ - table.createDataColumn("price", { - id: "price", - header: "Price", - cell: ({ row }) => , - size: 400, - }), - table.createDataColumn("amount", { - id: "amount", - header: "Amount", - size: 400, - cell: ({ row }) => , - }), - table.createDataColumn("cost", { - id: "costs", - header: "Costs", - size: 400, - cell: ({ row }) => , - }), - table.createDataColumn("paymentMethod", { - id: "paymentMethod", - header: "Payment Method", - size: 400, - }), - table.createDataColumn("accountAge", { - id: "accountAge", - header: "Account Age", - size: 400, - cell: ({ row }) => , - }), - table.createDataColumn("accountTrades", { - id: "accountTrades", - header: "Account Trades", - size: 400, - cell: ({ row }) => ( - - ), - }), -]; - interface MarketTransactionsProps { data: MarketTransaction[]; } export function MarketTransactions({ data }: MarketTransactionsProps) { const { classes, cx } = useStyles(); + const columns = useMarketTransactionsColumns(); return ( ({ root: { "thead tr": { backgroundColor: "#F8F8F8", - color: "#B7B6BD", th: { fontSize: 10, letterSpacing: "0.05em", textTransform: "uppercase", borderBottomColor: "#E8E7EC", + color: "#B7B6BD", + fontWeight: 700, }, }, "tbody tr": { @@ -94,3 +59,68 @@ const useStyles = createStyles(() => ({ }, }, })); + +const useMarketTransactionsColumns = () => { + const { formatMessage } = useIntl(); + + return [ + table.createDataColumn("price", { + id: "price", + header: formatMessage({ + id: LangKeys.MarketsTransactionsColumnPrice, + defaultMessage: "Price", + }), + cell: ({ row }) => , + size: 400, + }), + table.createDataColumn("amount", { + id: "amount", + header: formatMessage({ + id: LangKeys.MarketsTransactionsColumnAmount, + defaultMessage: "Amount", + }), + size: 400, + cell: ({ row }) => , + }), + table.createDataColumn("cost", { + id: "costs", + header: formatMessage({ + id: LangKeys.MarketsTransactionsColumnCost, + defaultMessage: "Costs", + }), + size: 400, + cell: ({ row }) => , + }), + table.createDataColumn("paymentMethod", { + id: "paymentMethod", + header: formatMessage({ + id: LangKeys.MarketsTransactionsColumnPaymentMethod, + defaultMessage: "Payment Method", + }), + size: 400, + cell: ({ row }) => , + }), + table.createDataColumn("accountAge", { + id: "accountAge", + header: formatMessage({ + id: LangKeys.MarketsTransactionsColumnAccountAge, + defaultMessage: "Account Age", + }), + size: 400, + cell: ({ row }) => ( + + ), + }), + table.createDataColumn("accountTrades", { + id: "accountTrades", + header: formatMessage({ + id: LangKeys.MarketsTransactionsColumnAccountTrades, + defaultMessage: "Account Trades", + }), + size: 400, + cell: ({ row }) => ( + + ), + }), + ]; +}; diff --git a/packages/renderer/src/components/organisms/MarketTransactions/MarketTransactionsCell.tsx b/packages/renderer/src/components/organisms/MarketTransactions/MarketTransactionsCell.tsx index 8aa01dc..1e75c6c 100644 --- a/packages/renderer/src/components/organisms/MarketTransactions/MarketTransactionsCell.tsx +++ b/packages/renderer/src/components/organisms/MarketTransactions/MarketTransactionsCell.tsx @@ -1,7 +1,11 @@ import { Currency } from "@atoms/Currency"; import { BodyText } from "@atoms/Typography"; -import { Group, Text, ThemeIcon } from "@mantine/core"; +import { Group, Text } from "@mantine/core"; import type { MarketTransaction } from "./_types"; +import { MarketTransactionPaymentMethod } from "./_types"; +import { ReactComponent as CheckCircle } from "@assets/check-circle.svg"; +import { useIntl } from "react-intl"; +import { LangKeys } from "@constants/lang"; export function MarketTransactionsAccountAgeCell({ row, @@ -10,10 +14,8 @@ export function MarketTransactionsAccountAgeCell({ }) { return ( - - X - - 65 Days + + 65 Days ); } @@ -32,7 +34,7 @@ export function MarketTransactionsPriceCell({ currentDisplay="symbol" /> - -1% + -1% ); } @@ -43,7 +45,9 @@ export function MarketTransactionsAmountCell({ row?: MarketTransaction; }) { return ( - + + + ); } @@ -74,3 +78,22 @@ export function MarketTransactionsAccountTradesCell({ ); } + +export function MarketTransactionsPaymentCell({ + row, +}: { + row?: MarketTransaction; +}) { + const { formatMessage } = useIntl(); + + return ( + + {row?.paymentMethod === MarketTransactionPaymentMethod.CashByMail + ? formatMessage({ + id: LangKeys.MarketsTransactionsCashByMail, + defaultMessage: "Cash by mail", + }) + : ""} + + ); +} diff --git a/packages/renderer/src/components/organisms/MarketTransactions/_types.ts b/packages/renderer/src/components/organisms/MarketTransactions/_types.ts index c6c59d7..98bc6d6 100644 --- a/packages/renderer/src/components/organisms/MarketTransactions/_types.ts +++ b/packages/renderer/src/components/organisms/MarketTransactions/_types.ts @@ -6,7 +6,11 @@ export interface MarketTransaction { amountCurrency: string; cost: number; costCurrency: string; - paymentMethod: string; + paymentMethod: MarketTransactionPaymentMethod; accountAge: number; accountTrades: number; } + +export enum MarketTransactionPaymentMethod { + CashByMail = "CashByMail", +} diff --git a/packages/renderer/src/constants/lang/LangKeys.ts b/packages/renderer/src/constants/lang/LangKeys.ts index 1c49a78..77aeaae 100644 --- a/packages/renderer/src/constants/lang/LangKeys.ts +++ b/packages/renderer/src/constants/lang/LangKeys.ts @@ -99,4 +99,12 @@ export enum LangKeys { AccountBackupRestoreBtn = "account.backup.restore.btn", AccountBackupDownloadSuccessNotif = "account.backup.download.successNotification", AccountBackupRestoreSuccessNotif = "account.backup.restore.successNotification", + + MarketsTransactionsColumnPrice = "marketsTransactions.columnPrice", + MarketsTransactionsColumnAmount = "marketsTransactions.columnAmount", + MarketsTransactionsColumnCost = "marketsTransactions.columnCost", + MarketsTransactionsColumnPaymentMethod = "marketsTransactions.columnPaymentMethod", + MarketsTransactionsColumnAccountAge = "marketsTransactions.columnAccountAge", + MarketsTransactionsColumnAccountTrades = "marketsTransactions.columnAccountTypes", + MarketsTransactionsCashByMail = "marketsTransactions.cashByMail", } diff --git a/packages/renderer/src/constants/lang/en.ts b/packages/renderer/src/constants/lang/en.ts index 433afcd..eec7d74 100644 --- a/packages/renderer/src/constants/lang/en.ts +++ b/packages/renderer/src/constants/lang/en.ts @@ -116,6 +116,14 @@ const LangPackEN: { [key in LangKeys]: string } = { "The backup has been downloaded successfully.", [LangKeys.AccountBackupRestoreSuccessNotif]: "The backup has been restored successfully.", + + [LangKeys.MarketsTransactionsColumnPrice]: "Price", + [LangKeys.MarketsTransactionsColumnAmount]: "Amount", + [LangKeys.MarketsTransactionsColumnCost]: "Costs", + [LangKeys.MarketsTransactionsColumnAccountAge]: "Account Age", + [LangKeys.MarketsTransactionsColumnAccountTrades]: "Account Trades", + [LangKeys.MarketsTransactionsColumnPaymentMethod]: "Payment Method", + [LangKeys.MarketsTransactionsCashByMail]: "Cash by mail", }; export default LangPackEN;