chore(Markets): Styling markets transactions table.

packages/renderer/assets/check-circle.svg

@@ -0,0 +1,3 @@
+<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.5 0C3.36316 0 0 3.36316 0 7.5C0 11.6368 3.36316 15 7.5 15C11.6368 15 15 11.6368 15 7.5C15 3.36316 11.6368 0 7.5 0ZM11.1316 5.81053L6.82105 10.5632C6.71053 10.6895 6.50526 10.6895 6.37895 10.5789L3.69474 7.87895C3.56842 7.75263 3.56842 7.56316 3.69474 7.45263L4.48421 6.66316C4.61053 6.53684 4.8 6.53684 4.91053 6.66316L6.55263 8.32105L9.86842 4.65789C9.97895 4.53158 10.1684 4.53158 10.2947 4.64211L11.1158 5.38421C11.2421 5.49474 11.2421 5.68421 11.1316 5.81053Z" fill="#0B65DA"/>
+</svg>

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<typeof MarketTransactions>;
 
@@ -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,
   },

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,
   },

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<MarketTransaction>();
 
-const columns = [
-  table.createDataColumn("price", {
-    id: "price",
-    header: "Price",
-    cell: ({ row }) => <MarketTransactionsPriceCell row={row.original} />,
-    size: 400,
-  }),
-  table.createDataColumn("amount", {
-    id: "amount",
-    header: "Amount",
-    size: 400,
-    cell: ({ row }) => <MarketTransactionsAmountCell row={row.original} />,
-  }),
-  table.createDataColumn("cost", {
-    id: "costs",
-    header: "Costs",
-    size: 400,
-    cell: ({ row }) => <MarketTransactionsCostsCell row={row.original} />,
-  }),
-  table.createDataColumn("paymentMethod", {
-    id: "paymentMethod",
-    header: "Payment Method",
-    size: 400,
-  }),
-  table.createDataColumn("accountAge", {
-    id: "accountAge",
-    header: "Account Age",
-    size: 400,
-    cell: ({ row }) => <MarketTransactionsAccountAgeCell row={row.original} />,
-  }),
-  table.createDataColumn("accountTrades", {
-    id: "accountTrades",
-    header: "Account Trades",
-    size: 400,
-    cell: ({ row }) => (
-      <MarketTransactionsAccountTradesCell row={row.original} />
-    ),
-  }),
-];
-
 interface MarketTransactionsProps {
   data: MarketTransaction[];
 }
 
 export function MarketTransactions({ data }: MarketTransactionsProps) {
   const { classes, cx } = useStyles();
+  const columns = useMarketTransactionsColumns();
 
   return (
     <Table
@@ -76,13 +40,14 @@ const useStyles = createStyles(() => ({
   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 }) => <MarketTransactionsPriceCell row={row.original} />,
+      size: 400,
+    }),
+    table.createDataColumn("amount", {
+      id: "amount",
+      header: formatMessage({
+        id: LangKeys.MarketsTransactionsColumnAmount,
+        defaultMessage: "Amount",
+      }),
+      size: 400,
+      cell: ({ row }) => <MarketTransactionsAmountCell row={row.original} />,
+    }),
+    table.createDataColumn("cost", {
+      id: "costs",
+      header: formatMessage({
+        id: LangKeys.MarketsTransactionsColumnCost,
+        defaultMessage: "Costs",
+      }),
+      size: 400,
+      cell: ({ row }) => <MarketTransactionsCostsCell row={row.original} />,
+    }),
+    table.createDataColumn("paymentMethod", {
+      id: "paymentMethod",
+      header: formatMessage({
+        id: LangKeys.MarketsTransactionsColumnPaymentMethod,
+        defaultMessage: "Payment Method",
+      }),
+      size: 400,
+      cell: ({ row }) => <MarketTransactionsPaymentCell row={row.original} />,
+    }),
+    table.createDataColumn("accountAge", {
+      id: "accountAge",
+      header: formatMessage({
+        id: LangKeys.MarketsTransactionsColumnAccountAge,
+        defaultMessage: "Account Age",
+      }),
+      size: 400,
+      cell: ({ row }) => (
+        <MarketTransactionsAccountAgeCell row={row.original} />
+      ),
+    }),
+    table.createDataColumn("accountTrades", {
+      id: "accountTrades",
+      header: formatMessage({
+        id: LangKeys.MarketsTransactionsColumnAccountTrades,
+        defaultMessage: "Account Trades",
+      }),
+      size: 400,
+      cell: ({ row }) => (
+        <MarketTransactionsAccountTradesCell row={row.original} />
+      ),
+    }),
+  ];
+};

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 (
     <Group>
-      <ThemeIcon radius="xl" size="sm">
-        X
-      </ThemeIcon>
-      <Text>65 Days</Text>
+      <CheckCircle width={15} height={15} />
+      <BodyText heavy>65 Days</BodyText>
     </Group>
   );
 }
@@ -32,7 +34,7 @@ export function MarketTransactionsPriceCell({
           currentDisplay="symbol"
         />
       </BodyText>
-      <Text color="gray">-1%</Text>
+      <BodyText color="gray">-1%</BodyText>
     </Group>
   );
 }
@@ -43,7 +45,9 @@ export function MarketTransactionsAmountCell({
   row?: MarketTransaction;
 }) {
   return (
-    <Currency currencyCode={row?.amountCurrency} value={row?.amount || 0} />
+    <BodyText heavy>
+      <Currency currencyCode={row?.amountCurrency} value={row?.amount || 0} />
+    </BodyText>
   );
 }
 
@@ -74,3 +78,22 @@ export function MarketTransactionsAccountTradesCell({
     </BodyText>
   );
 }
+
+export function MarketTransactionsPaymentCell({
+  row,
+}: {
+  row?: MarketTransaction;
+}) {
+  const { formatMessage } = useIntl();
+
+  return (
+    <BodyText heavy>
+      {row?.paymentMethod === MarketTransactionPaymentMethod.CashByMail
+        ? formatMessage({
+            id: LangKeys.MarketsTransactionsCashByMail,
+            defaultMessage: "Cash by mail",
+          })
+        : ""}
+    </BodyText>
+  );
+}

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",
+}

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",
 }

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;