From 610748ab9762435234788dcdb188776e58f727eb Mon Sep 17 00:00:00 2001 From: Corwin Smith Date: Wed, 31 Jul 2024 21:56:51 -0600 Subject: [PATCH 001/143] wip --- package.json | 1 + src/@chakra-ui/components/Accordion.ts | 6 +- .../FindWallet/FindWallet.stories.tsx | 35 ++++++ .../ProductTable/FindWallet/WalletColumns.tsx | 45 +++++++ .../ProductTable/FindWallet/index.tsx | 0 src/components/ProductTable/index.tsx | 110 ++++++++++++++++ .../ui/__stories__/Heading.stories.tsx | 8 +- src/components/ui/table.tsx | 117 ++++++++++++++++++ yarn.lock | 12 ++ 9 files changed, 326 insertions(+), 8 deletions(-) create mode 100644 src/components/ProductTable/FindWallet/FindWallet.stories.tsx create mode 100644 src/components/ProductTable/FindWallet/WalletColumns.tsx create mode 100644 src/components/ProductTable/FindWallet/index.tsx create mode 100644 src/components/ProductTable/index.tsx create mode 100644 src/components/ui/table.tsx diff --git a/package.json b/package.json index 2d3be73046e..bda0d4b4211 100644 --- a/package.json +++ b/package.json @@ -39,6 +39,7 @@ "@radix-ui/react-popover": "^1.1.1", "@radix-ui/react-slot": "^1.1.0", "@socialgouv/matomo-next": "^1.8.0", + "@tanstack/react-table": "^8.19.3", "chart.js": "^4.4.2", "chartjs-plugin-datalabels": "^2.2.0", "class-variance-authority": "^0.7.0", diff --git a/src/@chakra-ui/components/Accordion.ts b/src/@chakra-ui/components/Accordion.ts index f4cd82b924d..f69674790a8 100644 --- a/src/@chakra-ui/components/Accordion.ts +++ b/src/@chakra-ui/components/Accordion.ts @@ -6,10 +6,10 @@ const { defineMultiStyleConfig, definePartsStyle } = const baseStyle = definePartsStyle({ container: { - '& > :is(h2, h3)': { + "& > :is(h2, h3)": { fontSize: "initial", - fontWeight: 'initial' - } + fontWeight: "initial", + }, }, button: { py: "2", diff --git a/src/components/ProductTable/FindWallet/FindWallet.stories.tsx b/src/components/ProductTable/FindWallet/FindWallet.stories.tsx new file mode 100644 index 00000000000..36ce1083c5a --- /dev/null +++ b/src/components/ProductTable/FindWallet/FindWallet.stories.tsx @@ -0,0 +1,35 @@ +import { useState } from "react" +import { Meta, StoryObj } from "@storybook/react" + +import ProductTable from "@/components/ProductTable" +import { columns } from "@/components/ProductTable/FindWallet/WalletColumns" + +import walletsData from "@/data/wallets/wallet-data" + +const meta = { + title: "Pages / Special cases / Product Table", + component: ProductTable, + decorators: [ + (Story) => ( +
+ +
+ ), + ], +} satisfies Meta + +export default meta + +type Story = StoryObj + +export const WalletProductTableStory: Story = { + args: { + columns: columns, + data: walletsData, + getRowCanExpand: () => true, + }, + render: (args) => { + const [data, _] = useState(args.data) + return + }, +} diff --git a/src/components/ProductTable/FindWallet/WalletColumns.tsx b/src/components/ProductTable/FindWallet/WalletColumns.tsx new file mode 100644 index 00000000000..c1692c5a4b6 --- /dev/null +++ b/src/components/ProductTable/FindWallet/WalletColumns.tsx @@ -0,0 +1,45 @@ +"use client" + +import { StaticImageData } from "next/image" +import { IoChevronDownSharp, IoChevronUpSharp } from "react-icons/io5" +import { ColumnDef } from "@tanstack/react-table" + +import { WalletData } from "@/lib/types" + +import { Image } from "@/components/Image" + +// This type is used to define the shape of our data. +// You can use a Zod schema here if you want. +export type WalletColumns = { + id: string + logo: StaticImageData + walletInfo: WalletData +} + +export const columns: ColumnDef[] = [ + { + accessorKey: "logo", + header: () => null, + size: 56, + cell: ({ row }) => { + return + }, + }, + { + accessorKey: "walletInfo", + header: () => null, + size: 56, + cell: ({ row }) => { + return `${row.original.name}` + }, + }, + { + id: "expander", + header: () => null, + cell: ({ row }) => { + { + row.getIsExpanded() ? : + } + }, + }, +] diff --git a/src/components/ProductTable/FindWallet/index.tsx b/src/components/ProductTable/FindWallet/index.tsx new file mode 100644 index 00000000000..e69de29bb2d diff --git a/src/components/ProductTable/index.tsx b/src/components/ProductTable/index.tsx new file mode 100644 index 00000000000..d8e5d5a1c9d --- /dev/null +++ b/src/components/ProductTable/index.tsx @@ -0,0 +1,110 @@ +"use client" + +import { IoChevronDownSharp, IoChevronUpSharp } from "react-icons/io5" +import { + ColumnDef, + flexRender, + getCoreRowModel, + getExpandedRowModel, + Row, + useReactTable, +} from "@tanstack/react-table" + +import { + Table, + TableBody, + TableCell, + TableHead, + TableHeader, + TableRow, +} from "@/components/ui/table" + +interface ProductTableProps { + columns: ColumnDef[] + data: TData[] + getRowCanExpand: (row: Row) => boolean +} + +const ProductTable = ({ + columns, + data, + getRowCanExpand, +}: ProductTableProps) => { + const table = useReactTable({ + data, + columns, + getRowCanExpand, + getCoreRowModel: getCoreRowModel(), + getExpandedRowModel: getExpandedRowModel(), + }) + + return ( +
+ + + {table.getHeaderGroups().map((headerGroup) => ( + + {headerGroup.headers.map((header) => { + return ( + + {flexRender( + header.column.columnDef.header, + header.getContext() + )} + + ) + })} + + ))} + + + {table.getRowModel().rows?.length ? ( + // TODO: Implement table rows + table.getRowModel().rows.map((row) => { + return ( + <> + row.getToggleExpandedHandler()()} + style={{ cursor: "pointer" }} + > + {row.getVisibleCells().map((cell) => { + console.log(cell.column.getSize()) + return cell.column.id === "expander" ? ( + + {row.getIsExpanded() ? ( + + ) : ( + + )} + + ) : ( + + {flexRender( + cell.column.columnDef.cell, + cell.getContext() + )} + + ) + })} + + {row.getIsExpanded() && <>expanded} + + ) + }) + ) : ( + // TODO: Implement empty state + <> + )} + +
+
+ ) +} + +export default ProductTable diff --git a/src/components/ui/__stories__/Heading.stories.tsx b/src/components/ui/__stories__/Heading.stories.tsx index 2189fb62aad..065b35bc130 100644 --- a/src/components/ui/__stories__/Heading.stories.tsx +++ b/src/components/ui/__stories__/Heading.stories.tsx @@ -20,7 +20,7 @@ const meta = { }, decorators: [ (Story) => ( -
+
), @@ -31,7 +31,7 @@ export default meta type Story = StoryObj -const headings = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'] as const +const headings = ["h1", "h2", "h3", "h4", "h5", "h6"] as const export const Heading: Story = { render: () => ( @@ -42,9 +42,7 @@ export const Heading: Story = { {headings.map((Heading) => ( - - {`${Heading} base component`} - + {`${Heading} base component`} ))} diff --git a/src/components/ui/table.tsx b/src/components/ui/table.tsx new file mode 100644 index 00000000000..a8d4bb721aa --- /dev/null +++ b/src/components/ui/table.tsx @@ -0,0 +1,117 @@ +import * as React from "react" + +import { cn } from "@/lib/utils/cn" + +const Table = React.forwardRef< + HTMLTableElement, + React.HTMLAttributes +>(({ className, ...props }, ref) => ( +
+ + +)) +Table.displayName = "Table" + +const TableHeader = React.forwardRef< + HTMLTableSectionElement, + React.HTMLAttributes +>(({ className, ...props }, ref) => ( + +)) +TableHeader.displayName = "TableHeader" + +const TableBody = React.forwardRef< + HTMLTableSectionElement, + React.HTMLAttributes +>(({ className, ...props }, ref) => ( + +)) +TableBody.displayName = "TableBody" + +const TableFooter = React.forwardRef< + HTMLTableSectionElement, + React.HTMLAttributes +>(({ className, ...props }, ref) => ( + tr]:last:border-b-0", + className + )} + {...props} + /> +)) +TableFooter.displayName = "TableFooter" + +const TableRow = React.forwardRef< + HTMLTableRowElement, + React.HTMLAttributes +>(({ className, ...props }, ref) => ( + +)) +TableRow.displayName = "TableRow" + +const TableHead = React.forwardRef< + HTMLTableCellElement, + React.ThHTMLAttributes +>(({ className, ...props }, ref) => ( +
+)) +TableHead.displayName = "TableHead" + +const TableCell = React.forwardRef< + HTMLTableCellElement, + React.TdHTMLAttributes +>(({ className, ...props }, ref) => ( + +)) +TableCell.displayName = "TableCell" + +const TableCaption = React.forwardRef< + HTMLTableCaptionElement, + React.HTMLAttributes +>(({ className, ...props }, ref) => ( +
+)) +TableCaption.displayName = "TableCaption" + +export { + Table, + TableBody, + TableCaption, + TableCell, + TableFooter, + TableHead, + TableHeader, + TableRow, +} diff --git a/yarn.lock b/yarn.lock index 4790756573b..58ce115a815 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5019,6 +5019,18 @@ "@swc/counter" "^0.1.3" tslib "^2.4.0" +"@tanstack/react-table@^8.19.3": + version "8.19.3" + resolved "https://registry.yarnpkg.com/@tanstack/react-table/-/react-table-8.19.3.tgz#be1d9ee991ac06b7d4d17cc5c66469ac157bfd8a" + integrity sha512-MtgPZc4y+cCRtU16y1vh1myuyZ2OdkWgMEBzyjYsoMWMicKZGZvcDnub3Zwb6XF2pj9iRMvm1SO1n57lS0vXLw== + dependencies: + "@tanstack/table-core" "8.19.3" + +"@tanstack/table-core@8.19.3": + version "8.19.3" + resolved "https://registry.yarnpkg.com/@tanstack/table-core/-/table-core-8.19.3.tgz#669e3eca2179ee3456fc068fed8683df01607c43" + integrity sha512-IqREj9ADoml9zCAouIG/5kCGoyIxPFdqdyoxis9FisXFi5vT+iYfEfLosq4xkU/iDbMcEuAj+X8dWRLvKYDNoQ== + "@testing-library/dom@^9.3.4": version "9.3.4" resolved "https://registry.yarnpkg.com/@testing-library/dom/-/dom-9.3.4.tgz#50696ec28376926fec0a1bf87d9dbac5e27f60ce" From ccb0574b8314aa32cdc1b4820ddd8ba7438ea343 Mon Sep 17 00:00:00 2001 From: Corwin Smith Date: Thu, 8 Aug 2024 19:20:41 -0600 Subject: [PATCH 002/143] setup basic preset selection, and story implementation for find wallets --- .storybook/i18next.ts | 1 + src/components/DataTable/index.tsx | 108 ++++++++++++ .../FindWalletProductTable.stories.tsx | 33 ++++ .../data/WalletColumns.tsx | 45 +++++ .../data/WalletPersonaPresets.tsx | 162 ++++++++++++++++++ .../FindWalletProductTable/index.tsx | 9 + .../FindWallet/FindWallet.stories.tsx | 35 ---- .../ProductTable/FindWallet/WalletColumns.tsx | 45 ----- .../ProductTable/FindWallet/index.tsx | 0 src/components/ProductTable/PresetFilters.tsx | 39 +++++ src/components/ProductTable/index.tsx | 119 +++---------- src/lib/types.ts | 6 + 12 files changed, 425 insertions(+), 177 deletions(-) create mode 100644 src/components/DataTable/index.tsx create mode 100644 src/components/FindWalletProductTable/FindWalletProductTable.stories.tsx create mode 100644 src/components/FindWalletProductTable/data/WalletColumns.tsx create mode 100644 src/components/FindWalletProductTable/data/WalletPersonaPresets.tsx create mode 100644 src/components/FindWalletProductTable/index.tsx delete mode 100644 src/components/ProductTable/FindWallet/FindWallet.stories.tsx delete mode 100644 src/components/ProductTable/FindWallet/WalletColumns.tsx delete mode 100644 src/components/ProductTable/FindWallet/index.tsx create mode 100644 src/components/ProductTable/PresetFilters.tsx diff --git a/.storybook/i18next.ts b/.storybook/i18next.ts index 7e62b64b3ba..52f2c9744d1 100644 --- a/.storybook/i18next.ts +++ b/.storybook/i18next.ts @@ -22,6 +22,7 @@ export const ns = [ "page-developers-index", "page-what-is-ethereum", "page-upgrades-index", + "page-wallets-find-wallet", ] as const const supportedLngs = Object.keys(baseLocales) diff --git a/src/components/DataTable/index.tsx b/src/components/DataTable/index.tsx new file mode 100644 index 00000000000..965a4c76952 --- /dev/null +++ b/src/components/DataTable/index.tsx @@ -0,0 +1,108 @@ +"use client" + +import { IoChevronDownSharp, IoChevronUpSharp } from "react-icons/io5" +import { + ColumnDef, + flexRender, + getCoreRowModel, + getExpandedRowModel, + Row, + useReactTable, +} from "@tanstack/react-table" + +import { + Table, + TableBody, + TableCell, + TableHead, + TableHeader, + TableRow, +} from "@/components/ui/table" + +interface ProductTableProps { + columns: ColumnDef[] + data: TData[] + getRowCanExpand: (row: Row) => boolean +} + +const DataTable = ({ + columns, + data, + getRowCanExpand, +}: ProductTableProps) => { + const table = useReactTable({ + data, + columns, + getRowCanExpand, + getCoreRowModel: getCoreRowModel(), + getExpandedRowModel: getExpandedRowModel(), + }) + + return ( + + + {table.getHeaderGroups().map((headerGroup) => ( + + {headerGroup.headers.map((header) => { + return ( + + {flexRender( + header.column.columnDef.header, + header.getContext() + )} + + ) + })} + + ))} + + + {table.getRowModel().rows?.length ? ( + // TODO: Implement table rows + table.getRowModel().rows.map((row) => { + return ( + <> + row.getToggleExpandedHandler()()} + style={{ cursor: "pointer" }} + > + {row.getVisibleCells().map((cell) => { + console.log(cell.column.getSize()) + return cell.column.id === "expander" ? ( + + {row.getIsExpanded() ? ( + + ) : ( + + )} + + ) : ( + + {flexRender( + cell.column.columnDef.cell, + cell.getContext() + )} + + ) + })} + + {row.getIsExpanded() && <>expanded} + + ) + }) + ) : ( + // TODO: Implement empty state + <> + )} + +
+ ) +} + +export default DataTable diff --git a/src/components/FindWalletProductTable/FindWalletProductTable.stories.tsx b/src/components/FindWalletProductTable/FindWalletProductTable.stories.tsx new file mode 100644 index 00000000000..755bb31f3e0 --- /dev/null +++ b/src/components/FindWalletProductTable/FindWalletProductTable.stories.tsx @@ -0,0 +1,33 @@ +import { Meta, StoryObj } from "@storybook/react" + +import FindWalletProductTable from "@/components/FindWalletProductTable" +// import { columns } from "@/components/ProductTable/FindWallet/WalletColumns" + +// import walletsData from "@/data/wallets/wallet-data" + +const meta = { + title: "Pages / Special cases / Find Wallet Product Table", + component: FindWalletProductTable, + decorators: [ + (Story) => ( +
+ +
+ ), + ], +} satisfies Meta + +export default meta + +type Story = StoryObj + +export const WalletProductTableStory: Story = { + args: { + // columns: columns, + // data: walletsData, + // getRowCanExpand: () => true, + }, + render: (args) => { + return + }, +} diff --git a/src/components/FindWalletProductTable/data/WalletColumns.tsx b/src/components/FindWalletProductTable/data/WalletColumns.tsx new file mode 100644 index 00000000000..25dc628dda1 --- /dev/null +++ b/src/components/FindWalletProductTable/data/WalletColumns.tsx @@ -0,0 +1,45 @@ +// "use client" + +// import { StaticImageData } from "next/image" +// import { IoChevronDownSharp, IoChevronUpSharp } from "react-icons/io5" +// import { ColumnDef } from "@tanstack/react-table" + +// import { WalletData } from "@/lib/types" + +// import { Image } from "@/components/Image" + +// // This type is used to define the shape of our data. +// // You can use a Zod schema here if you want. +// export type WalletColumns = { +// id: string +// logo: StaticImageData +// walletInfo: WalletData +// } + +// export const columns: ColumnDef[] = [ +// { +// accessorKey: "logo", +// header: () => null, +// size: 56, +// cell: ({ row }) => { +// return +// }, +// }, +// { +// accessorKey: "walletInfo", +// header: () => null, +// size: 56, +// cell: ({ row }) => { +// return `${row.original.name}` +// }, +// }, +// { +// id: "expander", +// header: () => null, +// cell: ({ row }) => { +// { +// row.getIsExpanded() ? : +// } +// }, +// }, +// ] diff --git a/src/components/FindWalletProductTable/data/WalletPersonaPresets.tsx b/src/components/FindWalletProductTable/data/WalletPersonaPresets.tsx new file mode 100644 index 00000000000..5a6e71e7636 --- /dev/null +++ b/src/components/FindWalletProductTable/data/WalletPersonaPresets.tsx @@ -0,0 +1,162 @@ +import { useTranslation } from "next-i18next" + +import { WalletPersonas } from "@/lib/types" + +export const WalletPersonaPresets = () => { + const { t } = useTranslation("page-wallets-find-wallet") + const personas: WalletPersonas[] = [ + { + title: t("page-find-wallet-new-to-crypto-title"), + description: t("page-find-wallet-new-to-crypto-desc"), + presetFilters: { + android: false, + ios: false, + linux: false, + windows: false, + macOS: false, + firefox: false, + chromium: false, + hardware: false, + open_source: false, + non_custodial: false, + hardware_support: false, + rpc_importing: false, + nft_support: false, + connect_to_dapps: true, + staking: false, + swaps: false, + layer_2: true, + gas_fee_customization: false, + ens_support: false, + erc_20_support: true, + buy_crypto: true, + withdraw_crypto: false, + multisig: false, + social_recovery: false, + new_to_crypto: true, + }, + }, + { + title: t("page-find-wallet-nfts-title"), + description: t("page-find-wallet-nfts-desc"), + presetFilters: { + android: false, + ios: false, + linux: false, + windows: false, + macOS: false, + firefox: false, + chromium: false, + hardware: false, + open_source: false, + non_custodial: false, + hardware_support: false, + rpc_importing: false, + nft_support: true, + connect_to_dapps: true, + staking: false, + swaps: false, + layer_2: true, + gas_fee_customization: false, + ens_support: false, + erc_20_support: false, + buy_crypto: false, + withdraw_crypto: false, + multisig: false, + social_recovery: false, + }, + }, + { + title: t("page-find-wallet-hodler-title"), + description: t("page-find-wallet-hodler-desc"), + presetFilters: { + android: false, + ios: false, + linux: false, + windows: false, + macOS: false, + firefox: false, + chromium: false, + hardware: true, + open_source: false, + non_custodial: true, + hardware_support: false, + rpc_importing: false, + nft_support: false, + connect_to_dapps: false, + staking: false, + swaps: false, + layer_2: false, + gas_fee_customization: false, + ens_support: false, + erc_20_support: false, + buy_crypto: false, + withdraw_crypto: false, + multisig: false, + social_recovery: false, + }, + }, + { + title: t("page-find-wallet-finance-title"), + description: t("page-find-wallet-finance-desc"), + presetFilters: { + android: false, + ios: false, + linux: false, + windows: false, + macOS: false, + firefox: false, + chromium: false, + hardware: false, + open_source: false, + non_custodial: false, + hardware_support: true, + rpc_importing: false, + nft_support: false, + connect_to_dapps: true, + staking: false, + swaps: false, + layer_2: false, + gas_fee_customization: true, + ens_support: false, + erc_20_support: true, + buy_crypto: false, + withdraw_crypto: false, + multisig: false, + social_recovery: false, + }, + }, + { + title: t("page-find-wallet-developer-title"), + description: t("page-find-wallet-developer-desc"), + presetFilters: { + android: false, + ios: false, + linux: false, + windows: false, + macOS: false, + firefox: false, + chromium: false, + hardware: false, + open_source: true, + non_custodial: false, + hardware_support: false, + rpc_importing: true, + nft_support: false, + connect_to_dapps: true, + staking: false, + swaps: false, + layer_2: true, + gas_fee_customization: true, + ens_support: false, + erc_20_support: true, + buy_crypto: false, + withdraw_crypto: false, + multisig: false, + social_recovery: false, + }, + }, + ] + + return personas +} diff --git a/src/components/FindWalletProductTable/index.tsx b/src/components/FindWalletProductTable/index.tsx new file mode 100644 index 00000000000..dbf98572a72 --- /dev/null +++ b/src/components/FindWalletProductTable/index.tsx @@ -0,0 +1,9 @@ +import { WalletPersonaPresets } from "@/components/FindWalletProductTable/data/WalletPersonaPresets" +import ProductTable from "@/components/ProductTable" + +const FindWalletProductTable = () => { + const walletPersonas = WalletPersonaPresets() + return +} + +export default FindWalletProductTable diff --git a/src/components/ProductTable/FindWallet/FindWallet.stories.tsx b/src/components/ProductTable/FindWallet/FindWallet.stories.tsx deleted file mode 100644 index 36ce1083c5a..00000000000 --- a/src/components/ProductTable/FindWallet/FindWallet.stories.tsx +++ /dev/null @@ -1,35 +0,0 @@ -import { useState } from "react" -import { Meta, StoryObj } from "@storybook/react" - -import ProductTable from "@/components/ProductTable" -import { columns } from "@/components/ProductTable/FindWallet/WalletColumns" - -import walletsData from "@/data/wallets/wallet-data" - -const meta = { - title: "Pages / Special cases / Product Table", - component: ProductTable, - decorators: [ - (Story) => ( -
- -
- ), - ], -} satisfies Meta - -export default meta - -type Story = StoryObj - -export const WalletProductTableStory: Story = { - args: { - columns: columns, - data: walletsData, - getRowCanExpand: () => true, - }, - render: (args) => { - const [data, _] = useState(args.data) - return - }, -} diff --git a/src/components/ProductTable/FindWallet/WalletColumns.tsx b/src/components/ProductTable/FindWallet/WalletColumns.tsx deleted file mode 100644 index c1692c5a4b6..00000000000 --- a/src/components/ProductTable/FindWallet/WalletColumns.tsx +++ /dev/null @@ -1,45 +0,0 @@ -"use client" - -import { StaticImageData } from "next/image" -import { IoChevronDownSharp, IoChevronUpSharp } from "react-icons/io5" -import { ColumnDef } from "@tanstack/react-table" - -import { WalletData } from "@/lib/types" - -import { Image } from "@/components/Image" - -// This type is used to define the shape of our data. -// You can use a Zod schema here if you want. -export type WalletColumns = { - id: string - logo: StaticImageData - walletInfo: WalletData -} - -export const columns: ColumnDef[] = [ - { - accessorKey: "logo", - header: () => null, - size: 56, - cell: ({ row }) => { - return - }, - }, - { - accessorKey: "walletInfo", - header: () => null, - size: 56, - cell: ({ row }) => { - return `${row.original.name}` - }, - }, - { - id: "expander", - header: () => null, - cell: ({ row }) => { - { - row.getIsExpanded() ? : - } - }, - }, -] diff --git a/src/components/ProductTable/FindWallet/index.tsx b/src/components/ProductTable/FindWallet/index.tsx deleted file mode 100644 index e69de29bb2d..00000000000 diff --git a/src/components/ProductTable/PresetFilters.tsx b/src/components/ProductTable/PresetFilters.tsx new file mode 100644 index 00000000000..23feca62dfe --- /dev/null +++ b/src/components/ProductTable/PresetFilters.tsx @@ -0,0 +1,39 @@ +import type { TPresetFilters } from "@/lib/types" + +export interface PresetFiltersProps { + presets: TPresetFilters[] + activePresetIndex: number + setActivePresetIndex: (index: number) => void +} + +const PresetFilters = ({ + presets, + activePresetIndex, + setActivePresetIndex, +}: PresetFiltersProps) => { + return ( +
+ {presets.map((preset, idx) => { + return ( +
+
{ + setActivePresetIndex(idx) + }} + onKeyUp={(e) => { + if (e.key === "Enter") { + setActivePresetIndex(idx) + } + }} + > + {preset.title} +
+
+ ) + })} +
+ ) +} + +export default PresetFilters diff --git a/src/components/ProductTable/index.tsx b/src/components/ProductTable/index.tsx index d8e5d5a1c9d..f5c2cf5b128 100644 --- a/src/components/ProductTable/index.tsx +++ b/src/components/ProductTable/index.tsx @@ -1,108 +1,33 @@ -"use client" +import { useState } from "react" -import { IoChevronDownSharp, IoChevronUpSharp } from "react-icons/io5" -import { - ColumnDef, - flexRender, - getCoreRowModel, - getExpandedRowModel, - Row, - useReactTable, -} from "@tanstack/react-table" +import type { TPresetFilters } from "@/lib/types" -import { - Table, - TableBody, - TableCell, - TableHead, - TableHeader, - TableRow, -} from "@/components/ui/table" +import PresetFilters from "@/components/ProductTable/PresetFilters" -interface ProductTableProps { - columns: ColumnDef[] - data: TData[] - getRowCanExpand: (row: Row) => boolean +interface ProductTableProps { + presetFilters: TPresetFilters[] } -const ProductTable = ({ - columns, - data, - getRowCanExpand, -}: ProductTableProps) => { - const table = useReactTable({ - data, - columns, - getRowCanExpand, - getCoreRowModel: getCoreRowModel(), - getExpandedRowModel: getExpandedRowModel(), - }) +const ProductTable = ({ presetFilters }: ProductTableProps) => { + const [activePresetIndex, setActivePresetIndex] = useState(NaN) return (
- - - {table.getHeaderGroups().map((headerGroup) => ( - - {headerGroup.headers.map((header) => { - return ( - - {flexRender( - header.column.columnDef.header, - header.getContext() - )} - - ) - })} - - ))} - - - {table.getRowModel().rows?.length ? ( - // TODO: Implement table rows - table.getRowModel().rows.map((row) => { - return ( - <> - row.getToggleExpandedHandler()()} - style={{ cursor: "pointer" }} - > - {row.getVisibleCells().map((cell) => { - console.log(cell.column.getSize()) - return cell.column.id === "expander" ? ( - - {row.getIsExpanded() ? ( - - ) : ( - - )} - - ) : ( - - {flexRender( - cell.column.columnDef.cell, - cell.getContext() - )} - - ) - })} - - {row.getIsExpanded() && <>expanded} - - ) - }) - ) : ( - // TODO: Implement empty state - <> - )} - -
+ {presetFilters.length ? ( +
+ +
+ ) : ( + <> + )} +
+
Filters
+
Table
+
) } diff --git a/src/lib/types.ts b/src/lib/types.ts index b7faea71248..69f83cad0ff 100644 --- a/src/lib/types.ts +++ b/src/lib/types.ts @@ -664,6 +664,12 @@ export type FilterOption = { }> } +export interface TPresetFilters { + title: string + description: string + presetFilters: TPreset +} + export interface WalletPersonas { title: string description: string From aa870a39781d2ee4050c78efe582e6d4e11e3891 Mon Sep 17 00:00:00 2001 From: Corwin Smith Date: Thu, 8 Aug 2024 23:38:00 -0600 Subject: [PATCH 003/143] PresetFilter implemented --- src/components/ProductTable/PresetFilters.tsx | 35 ++++++++++++++++--- src/lib/types.ts | 2 ++ 2 files changed, 32 insertions(+), 5 deletions(-) diff --git a/src/components/ProductTable/PresetFilters.tsx b/src/components/ProductTable/PresetFilters.tsx index 23feca62dfe..69f50368c89 100644 --- a/src/components/ProductTable/PresetFilters.tsx +++ b/src/components/ProductTable/PresetFilters.tsx @@ -1,4 +1,4 @@ -import type { TPresetFilters } from "@/lib/types" +import type { ProductTablePresetFilters, TPresetFilters } from "@/lib/types" export interface PresetFiltersProps { presets: TPresetFilters[] @@ -10,7 +10,15 @@ const PresetFilters = ({ presets, activePresetIndex, setActivePresetIndex, -}: PresetFiltersProps) => { +}: PresetFiltersProps) => { + const handleSelectPreset = (idx: number) => { + if (idx === activePresetIndex) { + setActivePresetIndex(NaN) + } else { + setActivePresetIndex(idx) + } + } + return (
{presets.map((preset, idx) => { @@ -19,15 +27,32 @@ const PresetFilters = ({
{ - setActivePresetIndex(idx) + handleSelectPreset(idx) }} onKeyUp={(e) => { if (e.key === "Enter") { - setActivePresetIndex(idx) + handleSelectPreset(idx) } }} > - {preset.title} +
+ handleSelectPreset(idx)} + /> +
+

{preset.description}

) diff --git a/src/lib/types.ts b/src/lib/types.ts index 69f83cad0ff..628bd7c056f 100644 --- a/src/lib/types.ts +++ b/src/lib/types.ts @@ -702,6 +702,8 @@ export interface WalletPersonas { } } +export type ProductTablePresetFilters = WalletPersonas + export interface DropdownOption { label: string value: string From 02f2bb9d523d7d126694fa7706b7f4172051a131 Mon Sep 17 00:00:00 2001 From: Corwin Smith Date: Thu, 8 Aug 2024 23:53:10 -0600 Subject: [PATCH 004/143] typing --- src/components/ProductTable/index.tsx | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/src/components/ProductTable/index.tsx b/src/components/ProductTable/index.tsx index f5c2cf5b128..91e8b076b2d 100644 --- a/src/components/ProductTable/index.tsx +++ b/src/components/ProductTable/index.tsx @@ -1,6 +1,6 @@ import { useState } from "react" -import type { TPresetFilters } from "@/lib/types" +import type { ProductTablePresetFilters, TPresetFilters } from "@/lib/types" import PresetFilters from "@/components/ProductTable/PresetFilters" @@ -8,7 +8,9 @@ interface ProductTableProps { presetFilters: TPresetFilters[] } -const ProductTable = ({ presetFilters }: ProductTableProps) => { +const ProductTable = ({ + presetFilters, +}: ProductTableProps) => { const [activePresetIndex, setActivePresetIndex] = useState(NaN) return ( @@ -24,7 +26,7 @@ const ProductTable = ({ presetFilters }: ProductTableProps) => { ) : ( <> )} -
+
Filters
Table
From 4cd40f0115a7b2d8033a5a53234c6d28f3beda1e Mon Sep 17 00:00:00 2001 From: Corwin Smith Date: Mon, 12 Aug 2024 14:02:43 -0600 Subject: [PATCH 005/143] setup filters --- .../data/WalletFilters.tsx | 30 ++++ .../FindWalletProductTable/index.tsx | 13 +- src/components/ProductTable/Filters.tsx | 66 ++++++++ src/components/ProductTable/PresetFilters.tsx | 2 +- src/components/ProductTable/index.tsx | 28 ++-- src/pages/wallets/find-wallet.tsx | 144 +----------------- src/styles/global.css | 6 + tailwind.config.ts | 6 + tailwind/ui/accordion.tsx | 2 +- 9 files changed, 145 insertions(+), 152 deletions(-) create mode 100644 src/components/FindWalletProductTable/data/WalletFilters.tsx create mode 100644 src/components/ProductTable/Filters.tsx diff --git a/src/components/FindWalletProductTable/data/WalletFilters.tsx b/src/components/FindWalletProductTable/data/WalletFilters.tsx new file mode 100644 index 00000000000..236a21e6122 --- /dev/null +++ b/src/components/FindWalletProductTable/data/WalletFilters.tsx @@ -0,0 +1,30 @@ +import { useTranslation } from "next-i18next" + +export const WalletFilters = () => { + const { t } = useTranslation("page-wallets-find-wallet") + return [ + { + title: t("page-find-wallet-device"), + }, + { + title: t("page-find-wallet-languages-supported"), + }, + { + title: `${t("page-find-wallet-buy-crypto")} / ${t( + "page-find-wallet-sell-for-fiat" + )}`, + }, + { + title: t("page-find-wallet-features"), + }, + { + title: t("page-find-wallet-security"), + }, + { + title: t("page-find-wallet-smart-contract"), + }, + { + title: t("page-find-wallet-advanced"), + }, + ] +} diff --git a/src/components/FindWalletProductTable/index.tsx b/src/components/FindWalletProductTable/index.tsx index dbf98572a72..eac933bd1c0 100644 --- a/src/components/FindWalletProductTable/index.tsx +++ b/src/components/FindWalletProductTable/index.tsx @@ -1,9 +1,20 @@ +import { WalletFilters } from "@/components/FindWalletProductTable/data/WalletFilters" import { WalletPersonaPresets } from "@/components/FindWalletProductTable/data/WalletPersonaPresets" import ProductTable from "@/components/ProductTable" +import { WALLETS_FILTERS_DEFAULT } from "@/lib/constants" + const FindWalletProductTable = () => { const walletPersonas = WalletPersonaPresets() - return + const walletFilters = WalletFilters() + + return ( + + ) } export default FindWalletProductTable diff --git a/src/components/ProductTable/Filters.tsx b/src/components/ProductTable/Filters.tsx new file mode 100644 index 00000000000..997895c2b78 --- /dev/null +++ b/src/components/ProductTable/Filters.tsx @@ -0,0 +1,66 @@ +import { useTranslation } from "next-i18next" +import { BsArrowCounterclockwise } from "react-icons/bs" + +import { FilterOption } from "@/lib/types" + +import { + Accordion, + AccordionContent, + AccordionItem, + AccordionTrigger, +} from "@/../tailwind/ui/accordion" + +interface PresetFiltersProps { + activeFilters: unknown + filters: FilterOption[] + setActiveFilters: () => void +} + +const PresetFilters = ({ + // activeFilters, + filters, + // setActiveFilters, +}: PresetFiltersProps) => { + const { t } = useTranslation("page-wallets-find-wallet") + + return ( +
+
+

Filters ({0})

+
{ + console.log("RESET FILTERS") + }} + > + +

+ {t("page-find-wallet-reset-filters")} +

+
+
+ + {filters.map((filter, idx) => { + return ( + + +

{filter.title}

+ + Content + + ) + })} + +
+ ) +} + +export default PresetFilters diff --git a/src/components/ProductTable/PresetFilters.tsx b/src/components/ProductTable/PresetFilters.tsx index 69f50368c89..64e5961bf9b 100644 --- a/src/components/ProductTable/PresetFilters.tsx +++ b/src/components/ProductTable/PresetFilters.tsx @@ -20,7 +20,7 @@ const PresetFilters = ({ } return ( -
+
{presets.map((preset, idx) => { return (
diff --git a/src/components/ProductTable/index.tsx b/src/components/ProductTable/index.tsx index 91e8b076b2d..0db04029e10 100644 --- a/src/components/ProductTable/index.tsx +++ b/src/components/ProductTable/index.tsx @@ -2,32 +2,40 @@ import { useState } from "react" import type { ProductTablePresetFilters, TPresetFilters } from "@/lib/types" +import Filters from "@/components/ProductTable/Filters" import PresetFilters from "@/components/ProductTable/PresetFilters" interface ProductTableProps { + filters: unknown + filtersDefault: unknown presetFilters: TPresetFilters[] } const ProductTable = ({ + filters, + filtersDefault, presetFilters, }: ProductTableProps) => { const [activePresetIndex, setActivePresetIndex] = useState(NaN) + const [activeFilters, setActiveFilters] = useState(filtersDefault) return ( -
+
{presetFilters.length ? ( -
- -
+ ) : ( <> )} -
-
Filters
+
+
Table
diff --git a/src/pages/wallets/find-wallet.tsx b/src/pages/wallets/find-wallet.tsx index 2d4ec533e2d..da9d1b2cb9e 100644 --- a/src/pages/wallets/find-wallet.tsx +++ b/src/pages/wallets/find-wallet.tsx @@ -1,26 +1,14 @@ -import { useRef, useState } from "react" import { GetStaticProps, InferGetStaticPropsType } from "next" import { useRouter } from "next/router" import { useTranslation } from "next-i18next" import { serverSideTranslations } from "next-i18next/serverSideTranslations" -import { - Box, - calc, - Center, - Flex, - Show, - Text, - useDisclosure, -} from "@chakra-ui/react" +import { Box, Center, Flex, Text } from "@chakra-ui/react" import type { BasePageProps, ChildOnlyProp, Lang, Wallet } from "@/lib/types" import BannerNotification from "@/components/Banners/BannerNotification" import Breadcrumbs from "@/components/Breadcrumbs" -import { MobileFiltersMenu } from "@/components/FindWallet/MobileFiltersMenu" -import WalletFilterPersona from "@/components/FindWallet/WalletFilterPersona" -import WalletFilterSidebar from "@/components/FindWallet/WalletFilterSidebar" -import WalletTable from "@/components/FindWallet/WalletTable" +import FindWalletProductTable from "@/components/FindWalletProductTable" import { Image } from "@/components/Image" import InlineLink from "@/components/Link" import MainArticle from "@/components/MainArticle" @@ -37,15 +25,8 @@ import { getSupportedLocaleWallets, } from "@/lib/utils/wallets" -import { - BASE_TIME_UNIT, - DEFAULT_LOCALE, - NAV_BAR_PX_HEIGHT, - WALLETS_FILTERS_DEFAULT, -} from "@/lib/constants" +import { BASE_TIME_UNIT } from "@/lib/constants" -import { WalletSupportedLanguageContext } from "@/contexts/WalletSupportedLanguageContext" -import { useWalletTable } from "@/hooks/useWalletTable" import HeroImage from "@/public/images/wallets/wallet-hero.png" const Subtitle = ({ children }: ChildOnlyProp) => ( @@ -106,42 +87,7 @@ const FindWalletPage = ({ }: InferGetStaticPropsType) => { const { pathname } = useRouter() const { t } = useTranslation("page-wallets-find-wallet") - - const resetWalletFilter = useRef(() => {}) - - const [filters, setFilters] = useState(WALLETS_FILTERS_DEFAULT) - const [selectedPersona, setSelectedPersona] = useState(NaN) - const [supportedLanguage, setSupportedLanguage] = useState(DEFAULT_LOCALE) - - const { isOpen: showMobileSidebar, onOpen, onClose } = useDisclosure() - - const { - featureDropdownItems, - filteredWallets, - updateMoreInfo, - walletCardData, - } = useWalletTable({ filters, supportedLanguage, t, walletData: wallets }) - - const updateFilterOption = (key) => { - const updatedFilters = { ...filters } - updatedFilters[key] = !updatedFilters[key] - setFilters(updatedFilters) - } - - const updateFilterOptions = (keys, value) => { - const updatedFilters = { ...filters } - for (const key of keys) { - updatedFilters[key] = value - } - setFilters(updatedFilters) - } - - const resetFilters = () => { - setSelectedPersona(NaN) - setFilters(WALLETS_FILTERS_DEFAULT) - setSupportedLanguage(DEFAULT_LOCALE) - } - + console.log(wallets) return ( - - {/* Wallet Personas */} - - - {t("page-find-wallet-personas-title")} - - - - - - {/* Context value is updated when using the language filter */} - - {/* Mobile filters menu */} - - - - - - - {/* Filters sidebar */} - {/* Use `Show` instead of `hideBelow` prop to avoid rendering the sidebar on mobile */} - - - - - {/* Wallets table */} - - - - - - + ) } diff --git a/src/styles/global.css b/src/styles/global.css index c221c3b83e9..fac63e23bbe 100644 --- a/src/styles/global.css +++ b/src/styles/global.css @@ -10,10 +10,12 @@ /* Primitive Color Scheme */ --gray-100: #f7f7f7; --gray-150: #f2f2f2; + --gray-175: #ececec; --gray-200: #e7e7e7; --gray-300: #c8c8c8; --gray-400: #8c8c8c; --gray-500: #616161; + --gray-550: #404040; --gray-600: #333333; --gray-700: #222222; --gray-800: #1b1b1b; @@ -79,6 +81,8 @@ --background: white; --background-highlight: var(--gray-100); + --border-accordion: var(--gray-175); + --disabled: var(--gray-400); /* ! Deprecating neutral */ @@ -140,6 +144,8 @@ --background: var(--gray-800); --background-highlight: var(--gray-900); + --border-accordion: var(--gray-550); + --disabled: var(--gray-500); /* ! Deprecating neutral */ diff --git a/tailwind.config.ts b/tailwind.config.ts index 17d5794bf52..5d76b1fdfbb 100644 --- a/tailwind.config.ts +++ b/tailwind.config.ts @@ -60,6 +60,9 @@ const config = { toast: "1700", tooltip: "1800", }, + gridTemplateColumns: { + presetFilters: "200px", + }, colors: { gray: { 100: "var(--gray-100)", @@ -121,6 +124,9 @@ const config = { DEFAULT: "var(--background)", highlight: "var(--background-highlight)", }, + border: { + accordion: "var(--border-accordion)", + }, disabled: "var(--disabled)", neutral: "var(--neutral)", "tooltip-shadow": "var(--tooltip-shadow)", diff --git a/tailwind/ui/accordion.tsx b/tailwind/ui/accordion.tsx index 2e226205656..d66da7e7c98 100644 --- a/tailwind/ui/accordion.tsx +++ b/tailwind/ui/accordion.tsx @@ -28,7 +28,7 @@ const AccordionTrigger = React.forwardRef< {...props} > {children} - + )) From 34b983d57566b6200173f622816de9b68170948e Mon Sep 17 00:00:00 2001 From: Corwin Smith Date: Mon, 12 Aug 2024 23:19:14 -0600 Subject: [PATCH 006/143] switch boolean filters --- .../data/WalletFilters.tsx | 167 +++++++++++++++++- .../FindWalletProductTable/index.tsx | 7 +- src/components/MeetupList.tsx | 1 - src/components/ProductTable/Filters.tsx | 96 ++++++++-- src/components/ProductTable/index.tsx | 20 +-- src/lib/types.ts | 26 +-- 6 files changed, 272 insertions(+), 45 deletions(-) diff --git a/src/components/FindWalletProductTable/data/WalletFilters.tsx b/src/components/FindWalletProductTable/data/WalletFilters.tsx index 236a21e6122..44e456a226d 100644 --- a/src/components/FindWalletProductTable/data/WalletFilters.tsx +++ b/src/components/FindWalletProductTable/data/WalletFilters.tsx @@ -1,30 +1,195 @@ import { useTranslation } from "next-i18next" -export const WalletFilters = () => { +import { FilterOption } from "@/lib/types" + +import { + BrowserIcon, + BuyCryptoIcon, + ConnectDappsIcon, + DesktopIcon, + ENSSupportIcon, + ERC20SupportIcon, + GasFeeCustomizationIcon, + HardwareIcon, + HardwareSupportIcon, + Layer2Icon, + MobileIcon, + MultisigIcon, + NFTSupportIcon, + NonCustodialIcon, + OpenSourceWalletIcon, + RPCImportingIcon, + SocialRecoverIcon, + StakingIcon, + SwapIcon, + WithdrawCryptoIcon, +} from "@/components/icons/wallets" + +export const WalletFilters = (): FilterOption[] => { const { t } = useTranslation("page-wallets-find-wallet") return [ { title: t("page-find-wallet-device"), + items: [ + { + title: t("page-find-wallet-mobile"), + icon: MobileIcon, + input: "switch", + inputState: false, + }, + { + title: t("page-find-wallet-desktop"), + icon: DesktopIcon, + input: "switch", + inputState: false, + }, + { + title: t("page-find-wallet-browser"), + icon: BrowserIcon, + input: "switch", + inputState: false, + }, + { + title: t("page-find-wallet-hardware"), + icon: HardwareIcon, + input: "switch", + inputState: false, + }, + ], }, { title: t("page-find-wallet-languages-supported"), + items: [ + { + title: "", + icon: null, + input: "select", + inputState: null, + }, + ], }, { title: `${t("page-find-wallet-buy-crypto")} / ${t( "page-find-wallet-sell-for-fiat" )}`, + items: [ + { + title: t("page-find-wallet-buy-crypto"), + icon: BuyCryptoIcon, + input: "switch", + inputState: false, + }, + { + title: t("page-find-wallet-sell-for-fiat"), + icon: WithdrawCryptoIcon, + input: "switch", + inputState: false, + }, + ], }, { title: t("page-find-wallet-features"), + items: [ + { + title: t("page-find-wallet-connect-to-dapps"), + icon: ConnectDappsIcon, + input: "switch", + inputState: false, + }, + { + title: t("page-find-wallet-nft-support"), + icon: NFTSupportIcon, + input: "switch", + inputState: false, + }, + { + title: t("page-find-wallet-staking"), + icon: StakingIcon, + input: "switch", + inputState: false, + }, + { + title: t("page-find-wallet-layer-2"), + icon: Layer2Icon, + input: "switch", + inputState: false, + }, + { + title: t("page-find-wallet-swaps"), + icon: SwapIcon, + input: "switch", + inputState: false, + }, + { + title: t("page-find-wallet-hardware-wallet-support"), + icon: HardwareSupportIcon, + input: "switch", + inputState: false, + }, + { + title: t("page-find-wallet-ens-support"), + icon: ENSSupportIcon, + input: "switch", + inputState: false, + }, + ], }, { title: t("page-find-wallet-security"), + items: [ + { + title: t("page-find-wallet-open-source"), + icon: OpenSourceWalletIcon, + input: "switch", + inputState: false, + }, + { + title: t("page-find-wallet-non-custodial"), + icon: NonCustodialIcon, + input: "switch", + inputState: false, + }, + ], }, { title: t("page-find-wallet-smart-contract"), + items: [ + { + title: t("page-find-wallet-multisig"), + icon: MultisigIcon, + input: "switch", + inputState: false, + }, + { + title: t("page-find-wallet-social-recovery"), + icon: SocialRecoverIcon, + input: "switch", + inputState: false, + }, + ], }, { title: t("page-find-wallet-advanced"), + items: [ + { + title: t("page-find-wallet-rpc-importing"), + icon: RPCImportingIcon, + input: "switch", + inputState: false, + }, + { + title: t("page-find-wallet-token-importing"), + icon: ERC20SupportIcon, + input: "switch", + inputState: false, + }, + { + title: t("page-find-wallet-gas-fee-customization"), + icon: GasFeeCustomizationIcon, + input: "switch", + inputState: false, + }, + ], }, ] } diff --git a/src/components/FindWalletProductTable/index.tsx b/src/components/FindWalletProductTable/index.tsx index eac933bd1c0..db0386fea04 100644 --- a/src/components/FindWalletProductTable/index.tsx +++ b/src/components/FindWalletProductTable/index.tsx @@ -2,16 +2,13 @@ import { WalletFilters } from "@/components/FindWalletProductTable/data/WalletFi import { WalletPersonaPresets } from "@/components/FindWalletProductTable/data/WalletPersonaPresets" import ProductTable from "@/components/ProductTable" -import { WALLETS_FILTERS_DEFAULT } from "@/lib/constants" - const FindWalletProductTable = () => { const walletPersonas = WalletPersonaPresets() - const walletFilters = WalletFilters() + const walletFilterOptions = WalletFilters() return ( ) diff --git a/src/components/MeetupList.tsx b/src/components/MeetupList.tsx index 7e98f285706..ddfebbab1bb 100644 --- a/src/components/MeetupList.tsx +++ b/src/components/MeetupList.tsx @@ -9,7 +9,6 @@ import { LinkOverlay, List, ListItem, - useColorModeValue, useToken, VisuallyHidden, } from "@chakra-ui/react" diff --git a/src/components/ProductTable/Filters.tsx b/src/components/ProductTable/Filters.tsx index 997895c2b78..8bfbf3f875c 100644 --- a/src/components/ProductTable/Filters.tsx +++ b/src/components/ProductTable/Filters.tsx @@ -1,7 +1,7 @@ import { useTranslation } from "next-i18next" import { BsArrowCounterclockwise } from "react-icons/bs" -import { FilterOption } from "@/lib/types" +import { FilterInputState, FilterOption } from "@/lib/types" import { Accordion, @@ -9,20 +9,42 @@ import { AccordionItem, AccordionTrigger, } from "@/../tailwind/ui/accordion" +import Switch from "@/../tailwind/ui/Switch" interface PresetFiltersProps { - activeFilters: unknown filters: FilterOption[] - setActiveFilters: () => void + setFilters: (filterOptions: FilterOption[]) => void } -const PresetFilters = ({ - // activeFilters, - filters, - // setActiveFilters, -}: PresetFiltersProps) => { +const Filters = ({ filters, setFilters }: PresetFiltersProps) => { const { t } = useTranslation("page-wallets-find-wallet") + const updateFilterState = ( + filterIndex: number, + itemIndex: number, + newInputState: FilterInputState + ) => { + const updatedFilters = filters.map((filter, idx) => { + if (idx === filterIndex) { + const updatedItems = filter.items.map((item, i) => { + if (i === itemIndex) { + return { + ...item, + inputState: newInputState, + } + } + return item + }) + return { + ...filter, + items: updatedItems, + } + } + return filter + }) + setFilters(updatedFilters) + } + return (
@@ -40,21 +62,63 @@ const PresetFilters = ({
`item ${idx}`)} > - {filters.map((filter, idx) => { + {filters.map((filter, filterIndex) => { return ( -

{filter.title}

+

+ {filter.title} +

- Content + + {filter.items.map((item, itemIndex) => { + console.log(item.input) + return ( +
+ {item.input === "switch" && ( + <> +
+
+ {item.icon && ( + + )} +
+

{item.title}

+
+ {item.input === "switch" && ( + { + updateFilterState( + filterIndex, + itemIndex, + !item.inputState + ) + }} + /> + )} + + )} + {item.input === "select" && ( + <> +

Select

+ + )} +
+ ) + })} + ) })} @@ -63,4 +127,4 @@ const PresetFilters = ({ ) } -export default PresetFilters +export default Filters diff --git a/src/components/ProductTable/index.tsx b/src/components/ProductTable/index.tsx index 0db04029e10..53d47bc1d90 100644 --- a/src/components/ProductTable/index.tsx +++ b/src/components/ProductTable/index.tsx @@ -1,23 +1,25 @@ import { useState } from "react" -import type { ProductTablePresetFilters, TPresetFilters } from "@/lib/types" +import type { + FilterOption, + ProductTablePresetFilters, + TPresetFilters, +} from "@/lib/types" import Filters from "@/components/ProductTable/Filters" import PresetFilters from "@/components/ProductTable/PresetFilters" interface ProductTableProps { - filters: unknown - filtersDefault: unknown + filterOptions: FilterOption[] presetFilters: TPresetFilters[] } const ProductTable = ({ - filters, - filtersDefault, + filterOptions, presetFilters, }: ProductTableProps) => { const [activePresetIndex, setActivePresetIndex] = useState(NaN) - const [activeFilters, setActiveFilters] = useState(filtersDefault) + const [filters, setFilters] = useState(filterOptions) return (
@@ -31,11 +33,7 @@ const ProductTable = ({ <> )}
- +
Table
diff --git a/src/lib/types.ts b/src/lib/types.ts index 628bd7c056f..f11c561cb3b 100644 --- a/src/lib/types.ts +++ b/src/lib/types.ts @@ -646,21 +646,25 @@ export interface WalletFilterData { description: TranslationKey | "" } +export type FilterInputState = boolean | Lang | null + export type FilterOption = { title: string items: Array<{ title: string - icon: typeof Icon - description: string - filterKey: string | undefined - showOptions: boolean | undefined - options: - | Array<{ - name: string - filterKey?: string - inputType: "checkbox" - }> - | [] + icon: typeof Icon | null + input: string + inputState: FilterInputState + // description: string + // filterKey: string | undefined + // showOptions: boolean | undefined + // options: + // | Array<{ + // name: string + // filterKey?: string + // inputType: "checkbox" + // }> + // | [] }> } From c195f3ca46c412b178ad092e2a34bda33ec44319 Mon Sep 17 00:00:00 2001 From: Corwin Smith Date: Tue, 13 Aug 2024 16:20:47 -0600 Subject: [PATCH 007/143] setup filter switches --- .../data/WalletFilters.tsx | 310 ++++++++++++++---- .../FilterInputs/SwitchFilterInput.tsx | 48 +++ src/components/ProductTable/Filters.tsx | 42 +-- src/lib/types.ts | 14 +- 4 files changed, 311 insertions(+), 103 deletions(-) create mode 100644 src/components/ProductTable/FilterInputs/SwitchFilterInput.tsx diff --git a/src/components/FindWalletProductTable/data/WalletFilters.tsx b/src/components/FindWalletProductTable/data/WalletFilters.tsx index 44e456a226d..f98497a4742 100644 --- a/src/components/FindWalletProductTable/data/WalletFilters.tsx +++ b/src/components/FindWalletProductTable/data/WalletFilters.tsx @@ -24,6 +24,7 @@ import { SwapIcon, WithdrawCryptoIcon, } from "@/components/icons/wallets" +import SwitchFilterInput from "@/components/ProductTable/FilterInputs/SwitchFilterInput" export const WalletFilters = (): FilterOption[] => { const { t } = useTranslation("page-wallets-find-wallet") @@ -32,28 +33,64 @@ export const WalletFilters = (): FilterOption[] => { title: t("page-find-wallet-device"), items: [ { - title: t("page-find-wallet-mobile"), - icon: MobileIcon, - input: "switch", inputState: false, + input: (filterIndex, itemIndex, inputState, updateFilterState) => { + return ( + + ) + }, }, { - title: t("page-find-wallet-desktop"), - icon: DesktopIcon, - input: "switch", inputState: false, + input: (filterIndex, itemIndex, inputState, updateFilterState) => { + return ( + + ) + }, }, { - title: t("page-find-wallet-browser"), - icon: BrowserIcon, - input: "switch", inputState: false, + input: (filterIndex, itemIndex, inputState, updateFilterState) => { + return ( + + ) + }, }, { - title: t("page-find-wallet-hardware"), - icon: HardwareIcon, - input: "switch", inputState: false, + input: (filterIndex, itemIndex, inputState, updateFilterState) => { + return ( + + ) + }, }, ], }, @@ -61,10 +98,11 @@ export const WalletFilters = (): FilterOption[] => { title: t("page-find-wallet-languages-supported"), items: [ { - title: "", - icon: null, - input: "select", - inputState: null, + inputState: "en", + input: (filterIndex, itemIndex, state, updateFilterState) => { + console.log(filterIndex, itemIndex, state, updateFilterState) + return <> + }, }, ], }, @@ -74,16 +112,34 @@ export const WalletFilters = (): FilterOption[] => { )}`, items: [ { - title: t("page-find-wallet-buy-crypto"), - icon: BuyCryptoIcon, - input: "switch", inputState: false, + input: (filterIndex, itemIndex, inputState, updateFilterState) => { + return ( + + ) + }, }, { - title: t("page-find-wallet-sell-for-fiat"), - icon: WithdrawCryptoIcon, - input: "switch", inputState: false, + input: (filterIndex, itemIndex, inputState, updateFilterState) => { + return ( + + ) + }, }, ], }, @@ -91,46 +147,109 @@ export const WalletFilters = (): FilterOption[] => { title: t("page-find-wallet-features"), items: [ { - title: t("page-find-wallet-connect-to-dapps"), - icon: ConnectDappsIcon, - input: "switch", inputState: false, + input: (filterIndex, itemIndex, inputState, updateFilterState) => { + return ( + + ) + }, }, { - title: t("page-find-wallet-nft-support"), - icon: NFTSupportIcon, - input: "switch", inputState: false, + input: (filterIndex, itemIndex, inputState, updateFilterState) => { + return ( + + ) + }, }, { - title: t("page-find-wallet-staking"), - icon: StakingIcon, - input: "switch", inputState: false, + input: (filterIndex, itemIndex, inputState, updateFilterState) => { + return ( + + ) + }, }, { - title: t("page-find-wallet-layer-2"), - icon: Layer2Icon, - input: "switch", inputState: false, + input: (filterIndex, itemIndex, inputState, updateFilterState) => { + return ( + + ) + }, }, { - title: t("page-find-wallet-swaps"), - icon: SwapIcon, - input: "switch", inputState: false, + input: (filterIndex, itemIndex, inputState, updateFilterState) => { + return ( + + ) + }, }, { - title: t("page-find-wallet-hardware-wallet-support"), - icon: HardwareSupportIcon, - input: "switch", inputState: false, + input: (filterIndex, itemIndex, inputState, updateFilterState) => { + return ( + + ) + }, }, { - title: t("page-find-wallet-ens-support"), - icon: ENSSupportIcon, - input: "switch", inputState: false, + input: (filterIndex, itemIndex, inputState, updateFilterState) => { + return ( + + ) + }, }, ], }, @@ -138,16 +257,34 @@ export const WalletFilters = (): FilterOption[] => { title: t("page-find-wallet-security"), items: [ { - title: t("page-find-wallet-open-source"), - icon: OpenSourceWalletIcon, - input: "switch", inputState: false, + input: (filterIndex, itemIndex, inputState, updateFilterState) => { + return ( + + ) + }, }, { - title: t("page-find-wallet-non-custodial"), - icon: NonCustodialIcon, - input: "switch", inputState: false, + input: (filterIndex, itemIndex, inputState, updateFilterState) => { + return ( + + ) + }, }, ], }, @@ -155,16 +292,34 @@ export const WalletFilters = (): FilterOption[] => { title: t("page-find-wallet-smart-contract"), items: [ { - title: t("page-find-wallet-multisig"), - icon: MultisigIcon, - input: "switch", inputState: false, + input: (filterIndex, itemIndex, inputState, updateFilterState) => { + return ( + + ) + }, }, { - title: t("page-find-wallet-social-recovery"), - icon: SocialRecoverIcon, - input: "switch", inputState: false, + input: (filterIndex, itemIndex, inputState, updateFilterState) => { + return ( + + ) + }, }, ], }, @@ -172,22 +327,49 @@ export const WalletFilters = (): FilterOption[] => { title: t("page-find-wallet-advanced"), items: [ { - title: t("page-find-wallet-rpc-importing"), - icon: RPCImportingIcon, - input: "switch", inputState: false, + input: (filterIndex, itemIndex, inputState, updateFilterState) => { + return ( + + ) + }, }, { - title: t("page-find-wallet-token-importing"), - icon: ERC20SupportIcon, - input: "switch", inputState: false, + input: (filterIndex, itemIndex, inputState, updateFilterState) => { + return ( + + ) + }, }, { - title: t("page-find-wallet-gas-fee-customization"), - icon: GasFeeCustomizationIcon, - input: "switch", inputState: false, + input: (filterIndex, itemIndex, inputState, updateFilterState) => { + return ( + + ) + }, }, ], }, diff --git a/src/components/ProductTable/FilterInputs/SwitchFilterInput.tsx b/src/components/ProductTable/FilterInputs/SwitchFilterInput.tsx new file mode 100644 index 00000000000..3420288b389 --- /dev/null +++ b/src/components/ProductTable/FilterInputs/SwitchFilterInput.tsx @@ -0,0 +1,48 @@ +import { Icon } from "@chakra-ui/react" + +import { FilterInputState } from "@/lib/types" + +import Switch from "@/../tailwind/ui/Switch" + +interface SwitchFilterInputProps { + icon?: typeof Icon + label: string + filterIndex: number + itemIndex: number + inputState: FilterInputState + updateFilterState: ( + filterIndex: number, + itemIndex: number, + newInputState: boolean + ) => void +} + +const SwitchFilterInput = ({ + icon, + label, + filterIndex, + itemIndex, + inputState, + updateFilterState, +}: SwitchFilterInputProps) => { + console.log(icon) + return ( +
+
+
+ {icon && } +
+

{label}

+
+ { + console.log() + updateFilterState(filterIndex, itemIndex, e as boolean) + }} + /> +
+ ) +} + +export default SwitchFilterInput diff --git a/src/components/ProductTable/Filters.tsx b/src/components/ProductTable/Filters.tsx index 8bfbf3f875c..7cb550d6f73 100644 --- a/src/components/ProductTable/Filters.tsx +++ b/src/components/ProductTable/Filters.tsx @@ -9,7 +9,6 @@ import { AccordionItem, AccordionTrigger, } from "@/../tailwind/ui/accordion" -import Switch from "@/../tailwind/ui/Switch" interface PresetFiltersProps { filters: FilterOption[] @@ -80,42 +79,15 @@ const Filters = ({ filters, setFilters }: PresetFiltersProps) => { {filter.items.map((item, itemIndex) => { - console.log(item.input) return ( -
- {item.input === "switch" && ( - <> -
-
- {item.icon && ( - - )} -
-

{item.title}

-
- {item.input === "switch" && ( - { - updateFilterState( - filterIndex, - itemIndex, - !item.inputState - ) - }} - /> - )} - + <> + {item.input( + filterIndex, + itemIndex, + item.inputState, + updateFilterState )} - {item.input === "select" && ( - <> -

Select

- - )} -
+ ) })} diff --git a/src/lib/types.ts b/src/lib/types.ts index f11c561cb3b..d866c53f113 100644 --- a/src/lib/types.ts +++ b/src/lib/types.ts @@ -4,7 +4,6 @@ import type { AppProps } from "next/app" import { StaticImageData } from "next/image" import { SSRConfig } from "next-i18next" import type { ReactElement, ReactNode } from "react" -import { Icon } from "@chakra-ui/react" import type { DocsFrontmatter, @@ -651,10 +650,17 @@ export type FilterInputState = boolean | Lang | null export type FilterOption = { title: string items: Array<{ - title: string - icon: typeof Icon | null - input: string inputState: FilterInputState + input: ( + filterIndex: number, + itemIndex: number, + state: FilterInputState, + updateFilterState: ( + filterIndex: number, + itemIndex: number, + inputState: FilterInputState + ) => void + ) => ReactElement // description: string // filterKey: string | undefined // showOptions: boolean | undefined From 2f5237b5e2c964260bf0742c6e9c74fb98605bf3 Mon Sep 17 00:00:00 2001 From: Corwin Smith Date: Tue, 13 Aug 2024 16:21:18 -0600 Subject: [PATCH 008/143] setup select --- package.json | 1 + src/components/ui/select.tsx | 158 +++++++++++++++++++++++++++++++++++ yarn.lock | 39 +++++++-- 3 files changed, 192 insertions(+), 6 deletions(-) create mode 100644 src/components/ui/select.tsx diff --git a/package.json b/package.json index 1573966d066..50c6490c7ee 100644 --- a/package.json +++ b/package.json @@ -41,6 +41,7 @@ "@radix-ui/react-navigation-menu": "^1.2.0", "@radix-ui/react-popover": "^1.1.1", "@radix-ui/react-radio-group": "^1.2.0", + "@radix-ui/react-select": "^2.1.1", "@radix-ui/react-slot": "^1.1.0", "@radix-ui/react-switch": "^1.1.0", "@radix-ui/react-visually-hidden": "^1.1.0", diff --git a/src/components/ui/select.tsx b/src/components/ui/select.tsx new file mode 100644 index 00000000000..9368da20b9f --- /dev/null +++ b/src/components/ui/select.tsx @@ -0,0 +1,158 @@ +import * as React from "react" +import { Check, ChevronDown, ChevronUp } from "lucide-react" +import * as SelectPrimitive from "@radix-ui/react-select" + +import { cn } from "@/lib/utils/cn" + +const Select = SelectPrimitive.Root + +const SelectGroup = SelectPrimitive.Group + +const SelectValue = SelectPrimitive.Value + +const SelectTrigger = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, children, ...props }, ref) => ( + span]:line-clamp-1", + className + )} + {...props} + > + {children} + + + + +)) +SelectTrigger.displayName = SelectPrimitive.Trigger.displayName + +const SelectScrollUpButton = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + + + +)) +SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName + +const SelectScrollDownButton = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + + + +)) +SelectScrollDownButton.displayName = + SelectPrimitive.ScrollDownButton.displayName + +const SelectContent = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, children, position = "popper", ...props }, ref) => ( + + + + + {children} + + + + +)) +SelectContent.displayName = SelectPrimitive.Content.displayName + +const SelectLabel = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +SelectLabel.displayName = SelectPrimitive.Label.displayName + +const SelectItem = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, children, ...props }, ref) => ( + + + + + + + + {children} + +)) +SelectItem.displayName = SelectPrimitive.Item.displayName + +const SelectSeparator = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +SelectSeparator.displayName = SelectPrimitive.Separator.displayName + +export { + Select, + SelectContent, + SelectGroup, + SelectItem, + SelectLabel, + SelectScrollDownButton, + SelectScrollUpButton, + SelectSeparator, + SelectTrigger, + SelectValue, +} diff --git a/yarn.lock b/yarn.lock index 858c71888f5..835068d9682 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4118,6 +4118,11 @@ "@opentelemetry/instrumentation" "^0.49 || ^0.50 || ^0.51 || ^0.52.0" "@opentelemetry/sdk-trace-base" "^1.22" +"@radix-ui/number@1.1.0": + version "1.1.0" + resolved "https://registry.yarnpkg.com/@radix-ui/number/-/number-1.1.0.tgz#1e95610461a09cdf8bb05c152e76ca1278d5da46" + integrity sha512-V3gRzhVNU1ldS5XhAPTom1fOIo4ccrjjJgmE+LI2h/WaFpHmx0MQApT+KZHnx8abG6Avtfcz4WoEciMnpFT3HQ== + "@radix-ui/primitive@1.0.1": version "1.0.1" resolved "https://registry.yarnpkg.com/@radix-ui/primitive/-/primitive-1.0.1.tgz#e46f9958b35d10e9f6dc71c497305c22e3e55dbd" @@ -4465,6 +4470,33 @@ "@radix-ui/react-use-callback-ref" "1.1.0" "@radix-ui/react-use-controllable-state" "1.1.0" +"@radix-ui/react-select@^2.1.1": + version "2.1.1" + resolved "https://registry.yarnpkg.com/@radix-ui/react-select/-/react-select-2.1.1.tgz#df05cb0b29d3deaef83b505917c4042e0e418a9f" + integrity sha512-8iRDfyLtzxlprOo9IicnzvpsO1wNCkuwzzCM+Z5Rb5tNOpCdMvcc2AkzX0Fz+Tz9v6NJ5B/7EEgyZveo4FBRfQ== + dependencies: + "@radix-ui/number" "1.1.0" + "@radix-ui/primitive" "1.1.0" + "@radix-ui/react-collection" "1.1.0" + "@radix-ui/react-compose-refs" "1.1.0" + "@radix-ui/react-context" "1.1.0" + "@radix-ui/react-direction" "1.1.0" + "@radix-ui/react-dismissable-layer" "1.1.0" + "@radix-ui/react-focus-guards" "1.1.0" + "@radix-ui/react-focus-scope" "1.1.0" + "@radix-ui/react-id" "1.1.0" + "@radix-ui/react-popper" "1.2.0" + "@radix-ui/react-portal" "1.1.1" + "@radix-ui/react-primitive" "2.0.0" + "@radix-ui/react-slot" "1.1.0" + "@radix-ui/react-use-callback-ref" "1.1.0" + "@radix-ui/react-use-controllable-state" "1.1.0" + "@radix-ui/react-use-layout-effect" "1.1.0" + "@radix-ui/react-use-previous" "1.1.0" + "@radix-ui/react-visually-hidden" "1.1.0" + aria-hidden "^1.1.1" + react-remove-scroll "2.5.7" + "@radix-ui/react-slot@1.0.2", "@radix-ui/react-slot@^1.0.2": version "1.0.2" resolved "https://registry.yarnpkg.com/@radix-ui/react-slot/-/react-slot-1.0.2.tgz#a9ff4423eade67f501ffb32ec22064bc9d3099ab" @@ -13080,7 +13112,7 @@ prelude-ls@^1.2.1: resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.2.1.tgz#debc6489d7a6e6b0e7611888cec880337d316396" integrity sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g== -"prettier-fallback@npm:prettier@^3": +"prettier-fallback@npm:prettier@^3", prettier@^3.1.1: version "3.3.2" resolved "https://registry.yarnpkg.com/prettier/-/prettier-3.3.2.tgz#03ff86dc7c835f2d2559ee76876a3914cec4a90a" integrity sha512-rAVeHYMcv8ATV5d508CFdn+8/pHPpXeIid1DdrPwXnaAdH7cqjVbpJaT5eq4yRAFU/lsbwYwSF/n5iNrdJHPQA== @@ -13095,11 +13127,6 @@ prettier@^2.0.5, prettier@^2.8.8: resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.8.8.tgz#e8c5d7e98a4305ffe3de2e1fc4aca1a71c28b1da" integrity sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q== -prettier@^3.1.1: - version "3.3.2" - resolved "https://registry.yarnpkg.com/prettier/-/prettier-3.3.2.tgz#03ff86dc7c835f2d2559ee76876a3914cec4a90a" - integrity sha512-rAVeHYMcv8ATV5d508CFdn+8/pHPpXeIid1DdrPwXnaAdH7cqjVbpJaT5eq4yRAFU/lsbwYwSF/n5iNrdJHPQA== - prettier@^3.3.3: version "3.3.3" resolved "https://registry.yarnpkg.com/prettier/-/prettier-3.3.3.tgz#30c54fe0be0d8d12e6ae61dbb10109ea00d53105" From 2b34a319afced1d6df463e52e0eaf8c1cd1bd429 Mon Sep 17 00:00:00 2001 From: Corwin Smith Date: Tue, 13 Aug 2024 21:32:18 -0600 Subject: [PATCH 009/143] setup language filter --- .../data/WalletFilters.tsx | 13 ++- .../FilterInputs/LanguageSelectInput.tsx | 85 +++++++++++++++++++ .../FilterInputs/SwitchFilterInput.tsx | 1 - src/data/wallets/wallet-data.ts | 17 +--- src/lib/types.ts | 2 +- src/lib/utils/wallets.ts | 12 +++ 6 files changed, 110 insertions(+), 20 deletions(-) create mode 100644 src/components/ProductTable/FilterInputs/LanguageSelectInput.tsx diff --git a/src/components/FindWalletProductTable/data/WalletFilters.tsx b/src/components/FindWalletProductTable/data/WalletFilters.tsx index f98497a4742..4eb3ec3d6d5 100644 --- a/src/components/FindWalletProductTable/data/WalletFilters.tsx +++ b/src/components/FindWalletProductTable/data/WalletFilters.tsx @@ -24,6 +24,7 @@ import { SwapIcon, WithdrawCryptoIcon, } from "@/components/icons/wallets" +import LanguageSelectInput from "@/components/ProductTable/FilterInputs/LanguageSelectInput" import SwitchFilterInput from "@/components/ProductTable/FilterInputs/SwitchFilterInput" export const WalletFilters = (): FilterOption[] => { @@ -99,9 +100,15 @@ export const WalletFilters = (): FilterOption[] => { items: [ { inputState: "en", - input: (filterIndex, itemIndex, state, updateFilterState) => { - console.log(filterIndex, itemIndex, state, updateFilterState) - return <> + input: (filterIndex, itemIndex, inputState, updateFilterState) => { + return ( + + ) }, }, ], diff --git a/src/components/ProductTable/FilterInputs/LanguageSelectInput.tsx b/src/components/ProductTable/FilterInputs/LanguageSelectInput.tsx new file mode 100644 index 00000000000..91a995b370a --- /dev/null +++ b/src/components/ProductTable/FilterInputs/LanguageSelectInput.tsx @@ -0,0 +1,85 @@ +import { useRouter } from "next/router" +import { useTranslation } from "react-i18next" + +import { FilterInputState, Lang } from "@/lib/types" + +import { + Select, + SelectContent, + SelectItem, + SelectTrigger, + SelectValue, +} from "@/components/ui/select" + +import { getLanguageCountWalletsData } from "@/lib/utils/wallets" + +interface LanguageSelectInputProps { + filterIndex: number + itemIndex: number + inputState: FilterInputState + updateFilterState: ( + filterIndex: number, + itemIndex: number, + newInputState: boolean + ) => void +} + +// TODO: Abstract wallet logic out of here +const LanguageSelectInput = ({ + filterIndex, + itemIndex, + inputState, + updateFilterState, +}: LanguageSelectInputProps) => { + const { locale } = useRouter() + const { t } = useTranslation("page-wallets-find-wallet") + const languageCountWalletsData = getLanguageCountWalletsData(locale as string) + const countSortedLanguagesCount = languageCountWalletsData.sort( + (a, b) => b.count - a.count + ) + + return ( +
+ +

+ {t("page-find-wallet-popular-languages")} +

+
+ {countSortedLanguagesCount.slice(0, 5).map((language, index, array) => { + console.log(array) + return ( + { + updateFilterState(filterIndex, itemIndex, language.langCode) + }} + > + {`${language.name} (${language.count})${index < array.length - 1 ? ", " : ""}`} + + ) + })} +
+
+ ) +} + +export default LanguageSelectInput diff --git a/src/components/ProductTable/FilterInputs/SwitchFilterInput.tsx b/src/components/ProductTable/FilterInputs/SwitchFilterInput.tsx index 3420288b389..eb20f1027e0 100644 --- a/src/components/ProductTable/FilterInputs/SwitchFilterInput.tsx +++ b/src/components/ProductTable/FilterInputs/SwitchFilterInput.tsx @@ -25,7 +25,6 @@ const SwitchFilterInput = ({ inputState, updateFilterState, }: SwitchFilterInputProps) => { - console.log(icon) return (
diff --git a/src/data/wallets/wallet-data.ts b/src/data/wallets/wallet-data.ts index c03ac863d0d..ddc387b4144 100644 --- a/src/data/wallets/wallet-data.ts +++ b/src/data/wallets/wallet-data.ts @@ -294,7 +294,6 @@ export const walletsData: WalletData[] = [ "de", "el", "es", - "et", "fa", "fi", "fil", @@ -303,7 +302,6 @@ export const walletsData: WalletData[] = [ "he", "hi", "hr", - "ht", "hu", "id", "it", @@ -311,7 +309,6 @@ export const walletsData: WalletData[] = [ "kn", "ko", "lt", - "lv", "ml", "mr", "pt", @@ -321,12 +318,10 @@ export const walletsData: WalletData[] = [ "sk", "sl", "sr", - "sv", "sw", "ta", "te", "th", - "tl", "tr", "uk", "vi", @@ -434,7 +429,6 @@ export const walletsData: WalletData[] = [ "pt-br", "ro", "sr", - "sv", "vi", "tr", "ru", @@ -443,7 +437,7 @@ export const walletsData: WalletData[] = [ "km", "ko", "ja", - "zh-cn", + "zh", ], twitter: "https://twitter.com/CoinAppWallet", discord: "", @@ -680,7 +674,7 @@ export const walletsData: WalletData[] = [ brand_color: "#7501D9", url: "https://www.pillar.fi/", active_development_team: true, - languages_supported: ["en", "et", "bs", "zh"], + languages_supported: ["en", "bs", "zh"], twitter: "https://twitter.com/PillarWallet", discord: "https://chat.pillar.fi/", reddit: "", @@ -1550,7 +1544,6 @@ export const walletsData: WalletData[] = [ "fil", "hi", "it", - "mn", "pt", "ru", "th", @@ -1669,17 +1662,13 @@ export const walletsData: WalletData[] = [ "pt", "tr", "fil", - "my", "am", "ar", "gu", - "ha", "ig", - "pa", "sw", "ta", "te", - "yo", ], twitter: "https://twitter.com/phantom", discord: "", @@ -1774,7 +1763,6 @@ export const walletsData: WalletData[] = [ languages_supported: [ "en", "ar", - "ba", "fr", "de", "hi", @@ -1949,7 +1937,6 @@ export const walletsData: WalletData[] = [ "uk", "ko", "ar", - "ua", "vi", "pl", ], diff --git a/src/lib/types.ts b/src/lib/types.ts index d866c53f113..2b456cbe1f9 100644 --- a/src/lib/types.ts +++ b/src/lib/types.ts @@ -594,7 +594,7 @@ export interface WalletData { brand_color: string url: string active_development_team: boolean - languages_supported: string[] + languages_supported: Lang[] twitter: string discord: string reddit: string diff --git a/src/lib/utils/wallets.ts b/src/lib/utils/wallets.ts index 867f413d914..e6460681960 100644 --- a/src/lib/utils/wallets.ts +++ b/src/lib/utils/wallets.ts @@ -184,3 +184,15 @@ export const walletsListingCount = (filters: WalletFilter) => { 0 ) } + +export const getLanguageCountWalletsData = (locale: string) => { + const languageCountWalletsData = getAllWalletsLanguages(locale).map( + (language) => ({ + langCode: language.langCode, + count: getLanguageTotalCount(language.langCode), + name: getLanguageCodeName(language.langCode, locale), + }) + ) + languageCountWalletsData.sort((a, b) => a.name.localeCompare(b.name)) + return languageCountWalletsData +} From 8a85c7897c7b3859d4df8400a5752fa7026f3cc7 Mon Sep 17 00:00:00 2001 From: Corwin Smith Date: Tue, 13 Aug 2024 21:35:33 -0600 Subject: [PATCH 010/143] remove console logs --- src/components/ProductTable/FilterInputs/LanguageSelectInput.tsx | 1 - src/components/ProductTable/FilterInputs/SwitchFilterInput.tsx | 1 - 2 files changed, 2 deletions(-) diff --git a/src/components/ProductTable/FilterInputs/LanguageSelectInput.tsx b/src/components/ProductTable/FilterInputs/LanguageSelectInput.tsx index 91a995b370a..0f7a45f77c8 100644 --- a/src/components/ProductTable/FilterInputs/LanguageSelectInput.tsx +++ b/src/components/ProductTable/FilterInputs/LanguageSelectInput.tsx @@ -64,7 +64,6 @@ const LanguageSelectInput = ({

{countSortedLanguagesCount.slice(0, 5).map((language, index, array) => { - console.log(array) return ( { - console.log() updateFilterState(filterIndex, itemIndex, e as boolean) }} /> From 6706b5cbc45a9d5627aef1a93e4be62c8d34c267 Mon Sep 17 00:00:00 2001 From: Corwin Smith Date: Tue, 13 Aug 2024 22:24:03 -0600 Subject: [PATCH 011/143] refactor --- .../FindWalletProductTable/data/WalletFilters.tsx | 4 ++-- .../filters/FindWalletLanguageSelectInput.tsx} | 9 ++++----- 2 files changed, 6 insertions(+), 7 deletions(-) rename src/components/{ProductTable/FilterInputs/LanguageSelectInput.tsx => FindWalletProductTable/filters/FindWalletLanguageSelectInput.tsx} (92%) diff --git a/src/components/FindWalletProductTable/data/WalletFilters.tsx b/src/components/FindWalletProductTable/data/WalletFilters.tsx index 4eb3ec3d6d5..9fef3ca7031 100644 --- a/src/components/FindWalletProductTable/data/WalletFilters.tsx +++ b/src/components/FindWalletProductTable/data/WalletFilters.tsx @@ -2,6 +2,7 @@ import { useTranslation } from "next-i18next" import { FilterOption } from "@/lib/types" +import FindWalletLanguageSelectInput from "@/components/FindWalletProductTable/filters/FindWalletLanguageSelectInput" import { BrowserIcon, BuyCryptoIcon, @@ -24,7 +25,6 @@ import { SwapIcon, WithdrawCryptoIcon, } from "@/components/icons/wallets" -import LanguageSelectInput from "@/components/ProductTable/FilterInputs/LanguageSelectInput" import SwitchFilterInput from "@/components/ProductTable/FilterInputs/SwitchFilterInput" export const WalletFilters = (): FilterOption[] => { @@ -102,7 +102,7 @@ export const WalletFilters = (): FilterOption[] => { inputState: "en", input: (filterIndex, itemIndex, inputState, updateFilterState) => { return ( - void } -// TODO: Abstract wallet logic out of here -const LanguageSelectInput = ({ +const FindWalletLanguageSelectInput = ({ filterIndex, itemIndex, inputState, updateFilterState, -}: LanguageSelectInputProps) => { +}: FindWalletLanguageSelectInputProps) => { const { locale } = useRouter() const { t } = useTranslation("page-wallets-find-wallet") const languageCountWalletsData = getLanguageCountWalletsData(locale as string) @@ -81,4 +80,4 @@ const LanguageSelectInput = ({ ) } -export default LanguageSelectInput +export default FindWalletLanguageSelectInput From 9ce98a4616e49024b485b5e5a6ec0033ffeb723b Mon Sep 17 00:00:00 2001 From: Corwin Smith Date: Mon, 19 Aug 2024 08:18:32 -0600 Subject: [PATCH 012/143] add hidden filters --- .../data/WalletFilters.tsx | 41 ++++++++++++++ src/components/ProductTable/Filters.tsx | 56 ++++++++++--------- src/lib/types.ts | 3 +- 3 files changed, 72 insertions(+), 28 deletions(-) diff --git a/src/components/FindWalletProductTable/data/WalletFilters.tsx b/src/components/FindWalletProductTable/data/WalletFilters.tsx index 9fef3ca7031..b24d9baca83 100644 --- a/src/components/FindWalletProductTable/data/WalletFilters.tsx +++ b/src/components/FindWalletProductTable/data/WalletFilters.tsx @@ -32,8 +32,10 @@ export const WalletFilters = (): FilterOption[] => { return [ { title: t("page-find-wallet-device"), + showFilterOption: true, items: [ { + filterKey: "mobile", inputState: false, input: (filterIndex, itemIndex, inputState, updateFilterState) => { return ( @@ -49,6 +51,7 @@ export const WalletFilters = (): FilterOption[] => { }, }, { + filterKey: "desktop", inputState: false, input: (filterIndex, itemIndex, inputState, updateFilterState) => { return ( @@ -64,6 +67,7 @@ export const WalletFilters = (): FilterOption[] => { }, }, { + filterKey: "browser", inputState: false, input: (filterIndex, itemIndex, inputState, updateFilterState) => { return ( @@ -79,6 +83,7 @@ export const WalletFilters = (): FilterOption[] => { }, }, { + filterKey: "hardware", inputState: false, input: (filterIndex, itemIndex, inputState, updateFilterState) => { return ( @@ -97,8 +102,10 @@ export const WalletFilters = (): FilterOption[] => { }, { title: t("page-find-wallet-languages-supported"), + showFilterOption: true, items: [ { + filterKey: "languages", inputState: "en", input: (filterIndex, itemIndex, inputState, updateFilterState) => { return ( @@ -117,8 +124,10 @@ export const WalletFilters = (): FilterOption[] => { title: `${t("page-find-wallet-buy-crypto")} / ${t( "page-find-wallet-sell-for-fiat" )}`, + showFilterOption: true, items: [ { + filterKey: "buy_crypto", inputState: false, input: (filterIndex, itemIndex, inputState, updateFilterState) => { return ( @@ -134,6 +143,7 @@ export const WalletFilters = (): FilterOption[] => { }, }, { + filterKey: "withdraw_crypto", inputState: false, input: (filterIndex, itemIndex, inputState, updateFilterState) => { return ( @@ -152,8 +162,10 @@ export const WalletFilters = (): FilterOption[] => { }, { title: t("page-find-wallet-features"), + showFilterOption: true, items: [ { + filterKey: "connect_to_dapps", inputState: false, input: (filterIndex, itemIndex, inputState, updateFilterState) => { return ( @@ -169,6 +181,7 @@ export const WalletFilters = (): FilterOption[] => { }, }, { + filterKey: "nft_support", inputState: false, input: (filterIndex, itemIndex, inputState, updateFilterState) => { return ( @@ -184,6 +197,7 @@ export const WalletFilters = (): FilterOption[] => { }, }, { + filterKey: "staking", inputState: false, input: (filterIndex, itemIndex, inputState, updateFilterState) => { return ( @@ -199,6 +213,7 @@ export const WalletFilters = (): FilterOption[] => { }, }, { + filterKey: "layer_2", inputState: false, input: (filterIndex, itemIndex, inputState, updateFilterState) => { return ( @@ -214,6 +229,7 @@ export const WalletFilters = (): FilterOption[] => { }, }, { + filterKey: "swaps", inputState: false, input: (filterIndex, itemIndex, inputState, updateFilterState) => { return ( @@ -229,6 +245,7 @@ export const WalletFilters = (): FilterOption[] => { }, }, { + filterKey: "hardware_support", inputState: false, input: (filterIndex, itemIndex, inputState, updateFilterState) => { return ( @@ -244,6 +261,7 @@ export const WalletFilters = (): FilterOption[] => { }, }, { + filterKey: "ens_support", inputState: false, input: (filterIndex, itemIndex, inputState, updateFilterState) => { return ( @@ -262,8 +280,10 @@ export const WalletFilters = (): FilterOption[] => { }, { title: t("page-find-wallet-security"), + showFilterOption: true, items: [ { + filterKey: "open_source", inputState: false, input: (filterIndex, itemIndex, inputState, updateFilterState) => { return ( @@ -279,6 +299,7 @@ export const WalletFilters = (): FilterOption[] => { }, }, { + filterKey: "non_custodial", inputState: false, input: (filterIndex, itemIndex, inputState, updateFilterState) => { return ( @@ -297,8 +318,10 @@ export const WalletFilters = (): FilterOption[] => { }, { title: t("page-find-wallet-smart-contract"), + showFilterOption: true, items: [ { + filterKey: "multisig", inputState: false, input: (filterIndex, itemIndex, inputState, updateFilterState) => { return ( @@ -314,6 +337,7 @@ export const WalletFilters = (): FilterOption[] => { }, }, { + filterKey: "social_recovery", inputState: false, input: (filterIndex, itemIndex, inputState, updateFilterState) => { return ( @@ -332,8 +356,10 @@ export const WalletFilters = (): FilterOption[] => { }, { title: t("page-find-wallet-advanced"), + showFilterOption: true, items: [ { + filterKey: "rpc_importing", inputState: false, input: (filterIndex, itemIndex, inputState, updateFilterState) => { return ( @@ -349,6 +375,7 @@ export const WalletFilters = (): FilterOption[] => { }, }, { + filterKey: "erc_20_support", inputState: false, input: (filterIndex, itemIndex, inputState, updateFilterState) => { return ( @@ -364,6 +391,7 @@ export const WalletFilters = (): FilterOption[] => { }, }, { + filterKey: "gas_fee_customization", inputState: false, input: (filterIndex, itemIndex, inputState, updateFilterState) => { return ( @@ -380,5 +408,18 @@ export const WalletFilters = (): FilterOption[] => { }, ], }, + { + title: "Hidden filters", + showFilterOption: false, + items: [ + { + filterKey: "new_to_crypto", + inputState: false, + input: (_) => { + return <> + }, + }, + ], + }, ] } diff --git a/src/components/ProductTable/Filters.tsx b/src/components/ProductTable/Filters.tsx index 7cb550d6f73..7bd28347ee8 100644 --- a/src/components/ProductTable/Filters.tsx +++ b/src/components/ProductTable/Filters.tsx @@ -66,33 +66,35 @@ const Filters = ({ filters, setFilters }: PresetFiltersProps) => { defaultValue={filters.map((_, idx) => `item ${idx}`)} > {filters.map((filter, filterIndex) => { - return ( - - -

- {filter.title} -

- - - {filter.items.map((item, itemIndex) => { - return ( - <> - {item.input( - filterIndex, - itemIndex, - item.inputState, - updateFilterState - )} - - ) - })} - - - ) + if (filter.showFilterOption) { + return ( + + +

+ {filter.title} +

+ + + {filter.items.map((item, itemIndex) => { + return ( + <> + {item.input( + filterIndex, + itemIndex, + item.inputState, + updateFilterState + )} + + ) + })} + + + ) + } })}
diff --git a/src/lib/types.ts b/src/lib/types.ts index 2b456cbe1f9..c46ea44f121 100644 --- a/src/lib/types.ts +++ b/src/lib/types.ts @@ -649,7 +649,9 @@ export type FilterInputState = boolean | Lang | null export type FilterOption = { title: string + showFilterOption: boolean items: Array<{ + filterKey: string inputState: FilterInputState input: ( filterIndex: number, @@ -662,7 +664,6 @@ export type FilterOption = { ) => void ) => ReactElement // description: string - // filterKey: string | undefined // showOptions: boolean | undefined // options: // | Array<{ From a753cd623d6aa1565860e0336a81a71fec8075a5 Mon Sep 17 00:00:00 2001 From: Corwin Smith Date: Mon, 19 Aug 2024 08:30:58 -0600 Subject: [PATCH 013/143] setup selecting multiple presets --- src/components/ProductTable/PresetFilters.tsx | 22 ++++++------------- src/components/ProductTable/index.tsx | 18 ++++++++++----- 2 files changed, 20 insertions(+), 20 deletions(-) diff --git a/src/components/ProductTable/PresetFilters.tsx b/src/components/ProductTable/PresetFilters.tsx index 64e5961bf9b..d01c1dd3a63 100644 --- a/src/components/ProductTable/PresetFilters.tsx +++ b/src/components/ProductTable/PresetFilters.tsx @@ -2,30 +2,22 @@ import type { ProductTablePresetFilters, TPresetFilters } from "@/lib/types" export interface PresetFiltersProps { presets: TPresetFilters[] - activePresetIndex: number - setActivePresetIndex: (index: number) => void + activePresets: number[] + handleSelectPreset: (index: number) => void } const PresetFilters = ({ presets, - activePresetIndex, - setActivePresetIndex, + activePresets, + handleSelectPreset, }: PresetFiltersProps) => { - const handleSelectPreset = (idx: number) => { - if (idx === activePresetIndex) { - setActivePresetIndex(NaN) - } else { - setActivePresetIndex(idx) - } - } - return (
{presets.map((preset, idx) => { return (
{ handleSelectPreset(idx) }} @@ -41,12 +33,12 @@ const PresetFilters = ({ id={`radio-${idx}`} aria-label={`${preset.title} filter`} className="hidden" - checked={activePresetIndex === idx} + checked={activePresets.includes(idx)} onChange={() => handleSelectPreset(idx)} />