From bbea8d95bbbf50ac000805804b86862f8d6f5aec Mon Sep 17 00:00:00 2001 From: PJColombo Date: Sun, 10 Nov 2024 14:42:51 +0100 Subject: [PATCH 1/9] feat(web): add support for dropdown to hold multiple values by option --- apps/web/src/components/Dropdown/Option.tsx | 10 ++++++---- apps/web/src/components/Dropdown/index.tsx | 10 ++++++---- 2 files changed, 12 insertions(+), 8 deletions(-) diff --git a/apps/web/src/components/Dropdown/Option.tsx b/apps/web/src/components/Dropdown/Option.tsx index 97442f11c..ba40b1e70 100644 --- a/apps/web/src/components/Dropdown/Option.tsx +++ b/apps/web/src/components/Dropdown/Option.tsx @@ -7,19 +7,21 @@ interface OptionProps { option: OptionType; } -export const Option: React.FC = function (props) { - const { prefix, label, value } = props.option; +export const Option: React.FC = function ({ option }) { + const { prefix, label, value } = option; + const formattedValue = Array.isArray(value) ? value.join(", ") : value; + return ( {({ selected }) => (
{prefix && prefix} - {label ? label : value} + {label ? label : formattedValue}
{selected && ( diff --git a/apps/web/src/components/Dropdown/index.tsx b/apps/web/src/components/Dropdown/index.tsx index 3c255d092..d0febbaa2 100644 --- a/apps/web/src/components/Dropdown/index.tsx +++ b/apps/web/src/components/Dropdown/index.tsx @@ -13,7 +13,7 @@ import useOverflow from "~/hooks/useOverflow"; import { Option } from "./Option"; export interface Option { - value: string | number; + value: string | number | string[] | number[]; label?: ReactNode; prefix?: ReactNode; selectedLabel?: ReactNode; @@ -69,10 +69,12 @@ export const Dropdown: React.FC = function ({ {hasSelectedValue ? ( Array.isArray(selected) ? (
- {selected.map((s) => { + {selected.map(({ selectedLabel, label, value }) => { return ( - - {s.selectedLabel ? s.selectedLabel : s.label} + + {selectedLabel ? selectedLabel : label} ); })} From 4015b0737502711e3b0229cfd474d8a78b9cb3f3 Mon Sep 17 00:00:00 2001 From: PJColombo Date: Sun, 10 Nov 2024 14:49:39 +0100 Subject: [PATCH 2/9] fix(web): display rollups with more than one address properly in the rollup filter --- .../src/components/Filters/RollupFilter.tsx | 10 ++-- apps/web/src/components/Filters/index.tsx | 2 +- packages/rollups/src/index.ts | 4 +- packages/rollups/test/rollups.test.ts | 50 +++++++++++++------ 4 files changed, 43 insertions(+), 23 deletions(-) diff --git a/apps/web/src/components/Filters/RollupFilter.tsx b/apps/web/src/components/Filters/RollupFilter.tsx index 532d9b56d..b8a37cfb2 100644 --- a/apps/web/src/components/Filters/RollupFilter.tsx +++ b/apps/web/src/components/Filters/RollupFilter.tsx @@ -26,14 +26,14 @@ export const ROLLUP_OPTIONS: Option[] = [ selectedLabel: None, label: "None", }, - ...rollups.map(([rollupAddress, rollupName]) => { + ...rollups.map(([name, addresses]) => { return { - value: rollupAddress, + value: addresses, selectedLabel: ( - + ), - prefix: , - label: capitalize(rollupName), + prefix: , + label: capitalize(name), }; }), ]; diff --git a/apps/web/src/components/Filters/index.tsx b/apps/web/src/components/Filters/index.tsx index a56f00455..7b98f82b0 100644 --- a/apps/web/src/components/Filters/index.tsx +++ b/apps/web/src/components/Filters/index.tsx @@ -94,7 +94,7 @@ export const Filters: FC = function () { query.rollup = rollups[0]?.value; } else { query.from = rollups - .map((r) => r.value) + .flatMap((r) => r.value) .join(FROM_ADDRESSES_FORMAT_SEPARATOR); } } diff --git a/packages/rollups/src/index.ts b/packages/rollups/src/index.ts index a06207aba..dcbe2a0dc 100644 --- a/packages/rollups/src/index.ts +++ b/packages/rollups/src/index.ts @@ -77,8 +77,8 @@ export const ROLLUP_TO_ADDRESSES_MAPPINGS = new Map( ) ); -export function getChainRollups(chainId: number): [string, Rollup][] { - const addressToRollupMapping = ADDRESS_TO_ROLLUP_MAPPINGS.get(chainId); +export function getChainRollups(chainId: number): [Rollup, string[]][] { + const addressToRollupMapping = ROLLUP_TO_ADDRESSES_MAPPINGS.get(chainId); if (!addressToRollupMapping) { return []; diff --git a/packages/rollups/test/rollups.test.ts b/packages/rollups/test/rollups.test.ts index 6433f808e..d855eac9a 100644 --- a/packages/rollups/test/rollups.test.ts +++ b/packages/rollups/test/rollups.test.ts @@ -54,21 +54,41 @@ describe("Rollups", () => { it("should get all chain's rollups correctly", () => { const chainId = 11155111; const expectedRollups = [ - ["0xb2248390842d3c4acf1d8a893954afc0eac586e5", Rollup.ARBITRUM], - ["0x1fb1494f5135bb01a698fb3e863dd12f876bb085", Rollup.ARBITRUM], - ["0x07f0e1ec1ce152b075fda4a827a9f17851086b25", Rollup.ARBITRUM], - ["0xfc56e7272eebbba5bc6c544e159483c4a38f8ba3", Rollup.BASE], - ["0x6cdebe940bc0f26850285caca097c11c33103e47", Rollup.BASE], - ["0xf15dc770221b99c98d4aaed568f2ab04b9d16e42", Rollup.KROMA], - ["0x47c63d1e391fcb3dcdc40c4d7fa58adb172f8c38", Rollup.LINEA], - ["0x88584cf948cd51267f220edd9e21e67ccf3fcfa8", Rollup.LINEA], - ["0x8f23bb38f531600e5d8fddaaec41f13fab46e98c", Rollup.OPTIMISM], - ["0xdf50ccaa4467b61b51d8ed86320d8ca67a56265e", Rollup.OPTIMISM], - ["0xe14b3f075ad9377689daf659e04a2a99a4acede4", Rollup.OPTIMISM], - ["0x2d567ece699eabe5afcd141edb7a4f2d0d6ce8a0", Rollup.SCROLL], - ["0x5b98b836969a60fec50fa925905dd1d382a7db43", Rollup.STARKNET], - ["0x4e6bd53883107b063c502ddd49f9600dc51b3ddc", Rollup.MODE], - ["0x3cd868e221a3be64b161d596a7482257a99d857f", Rollup.ZORA], + [ + Rollup.ARBITRUM, + [ + "0xb2248390842d3c4acf1d8a893954afc0eac586e5", + "0x1fb1494f5135bb01a698fb3e863dd12f876bb085", + "0x07f0e1ec1ce152b075fda4a827a9f17851086b25", + ], + ], + [ + Rollup.BASE, + [ + "0xfc56e7272eebbba5bc6c544e159483c4a38f8ba3", + "0x6cdebe940bc0f26850285caca097c11c33103e47", + ], + ], + [Rollup.KROMA, ["0xf15dc770221b99c98d4aaed568f2ab04b9d16e42"]], + [ + Rollup.LINEA, + [ + "0x47c63d1e391fcb3dcdc40c4d7fa58adb172f8c38", + "0x88584cf948cd51267f220edd9e21e67ccf3fcfa8", + ], + ], + [ + Rollup.OPTIMISM, + [ + "0x8f23bb38f531600e5d8fddaaec41f13fab46e98c", + "0xdf50ccaa4467b61b51d8ed86320d8ca67a56265e", + "0xe14b3f075ad9377689daf659e04a2a99a4acede4", + ], + ], + [Rollup.SCROLL, ["0x2d567ece699eabe5afcd141edb7a4f2d0d6ce8a0"]], + [Rollup.STARKNET, ["0x5b98b836969a60fec50fa925905dd1d382a7db43"]], + [Rollup.MODE, ["0x4e6bd53883107b063c502ddd49f9600dc51b3ddc"]], + [Rollup.ZORA, ["0x3cd868e221a3be64b161d596a7482257a99d857f"]], ]; expect(getChainRollups(chainId)).toEqual(expectedRollups); From b32bed68a430e860ebc5b1d43c9cbcf572c70f3f Mon Sep 17 00:00:00 2001 From: PJColombo Date: Sun, 10 Nov 2024 15:06:18 +0100 Subject: [PATCH 3/9] fix(web): simplify dropdown options by including prefix within label props --- apps/web/src/components/Dropdown/Option.tsx | 9 +++------ apps/web/src/components/Dropdown/index.tsx | 1 - apps/web/src/components/Filters/RollupFilter.tsx | 10 +++++++--- 3 files changed, 10 insertions(+), 10 deletions(-) diff --git a/apps/web/src/components/Dropdown/Option.tsx b/apps/web/src/components/Dropdown/Option.tsx index ba40b1e70..64d5b4a24 100644 --- a/apps/web/src/components/Dropdown/Option.tsx +++ b/apps/web/src/components/Dropdown/Option.tsx @@ -8,7 +8,7 @@ interface OptionProps { } export const Option: React.FC = function ({ option }) { - const { prefix, label, value } = option; + const { label, value } = option; const formattedValue = Array.isArray(value) ? value.join(", ") : value; return ( @@ -18,11 +18,8 @@ export const Option: React.FC = function ({ option }) { > {({ selected }) => (
-
- {prefix && prefix} - - {label ? label : formattedValue} - +
+ {label ? label : formattedValue}
{selected && ( None, label: "None", }, - ...rollups.map(([name, addresses]) => { + ...rollups.map