From daae6e075f7656f69e4be46165037528fd09c684 Mon Sep 17 00:00:00 2001 From: HadiKhai Date: Wed, 11 Dec 2024 10:55:52 +0200 Subject: [PATCH] fix: mobile buttons in console --- apps/console/src/app/page.tsx | 9 +- .../reusable/SectionSlider/index.tsx | 99 +++++++++----- .../customizer/ClaimSection/index.tsx | 123 +++++++++++------- .../sections/customizer/Customizer/index.tsx | 53 ++++---- .../customizer/PluginsSection/index.tsx | 2 +- .../sections/customizer/SignSection/index.tsx | 41 ++++-- nx.json | 4 +- 7 files changed, 214 insertions(+), 117 deletions(-) diff --git a/apps/console/src/app/page.tsx b/apps/console/src/app/page.tsx index 8740cdb9..c445f6c0 100644 --- a/apps/console/src/app/page.tsx +++ b/apps/console/src/app/page.tsx @@ -21,8 +21,8 @@ export default function Page() {
- Customise +
+ Customize
} side="left" @@ -40,10 +40,13 @@ export default function Page() { maxWidth: `${leftWidth}%`, }} > +

Live Demo

+

Profile Examples:

+ @@ -71,7 +74,7 @@ export default function Page() {
+
Code Output
} diff --git a/apps/console/src/components/reusable/SectionSlider/index.tsx b/apps/console/src/components/reusable/SectionSlider/index.tsx index 9c607fab..78726ad1 100644 --- a/apps/console/src/components/reusable/SectionSlider/index.tsx +++ b/apps/console/src/components/reusable/SectionSlider/index.tsx @@ -1,35 +1,74 @@ -import { Drawer, DrawerClose, DrawerContent, DrawerHeader, DrawerTitle, DrawerTrigger } from "../../ui/drawer"; +import { + Drawer, + DrawerClose, + DrawerContent, + DrawerHeader, + DrawerTitle, + DrawerTrigger, +} from '../../ui/drawer'; interface SectionSliderProps { - side: 'left' | 'right'; - children: React.ReactNode; - title: string; - trigger: React.ReactNode; + side: 'left' | 'right'; + children: React.ReactNode; + title: string; + trigger: React.ReactNode; } -export const SectionSlider = ({ side, children, title, trigger }: SectionSliderProps) => { - return ( - - - - {trigger} - - - - - - - - - - - - - - {title} - - {children} - - - ); +export const SectionSlider = ({ + side, + children, + title, + trigger, +}: SectionSliderProps) => { + return ( + + + {trigger} + + + + + + + + + + + + + + {title} + + {children} + + + ); }; diff --git a/apps/console/src/components/sections/customizer/ClaimSection/index.tsx b/apps/console/src/components/sections/customizer/ClaimSection/index.tsx index 341f6bdd..8a331966 100644 --- a/apps/console/src/components/sections/customizer/ClaimSection/index.tsx +++ b/apps/console/src/components/sections/customizer/ClaimSection/index.tsx @@ -108,7 +108,7 @@ export const ClaimSection = () => { }} >

- Claim A Subname + Let User Claim a Subname From

{ showFree />
-

My ENS

- setApiKey(e.target.value)} - placeholder="Justaname API Key" - rightIcon={ - - - - + My ENS ([subname].[yourens].eth) +

+
+ setApiKey(e.target.value)} + placeholder="Justaname API Key" + rightIcon={ + + + - - - + height="16" + > + + + + + - - - } - /> + + } + /> - {ensByApiKey - .filter((ens) => ens.chainId === chainId) - .map((ens) => ( - - ))} +

+ Go to the{' '} + + Dashboard + {' '} + to generate API keys +

+ {ensByApiKey + .filter((ens) => ens.chainId === chainId) + .map((ens, index) => ( + <> + {index === + ensByApiKey.filter((ens) => ens.chainId === chainId) + .length - + 1 && ( +
+ )} + + + ))} +
diff --git a/apps/console/src/components/sections/customizer/Customizer/index.tsx b/apps/console/src/components/sections/customizer/Customizer/index.tsx index 3242a89f..dc3a4288 100644 --- a/apps/console/src/components/sections/customizer/Customizer/index.tsx +++ b/apps/console/src/components/sections/customizer/Customizer/index.tsx @@ -29,13 +29,37 @@ export const Customizer = ({ mobile }: CustomizerProps) => { }, [logoUrlDebounced]); return ( -
+
- {!mobile && ( +

- Customize Interface + Select Network

- )} +
+

+ {chainId === 1 ? 'Mainnet' : 'Sepolia'} +

+ { + switchChainAsync({ + chainId: chainId === 1 ? 11155111 : 1, + }); + }} + /> +
+
+
+ + {/*{!mobile && (*/} +

+ Customize Widget +

+ {/*)}*/}
{ }} /> { changeTheme('primary', color); @@ -73,25 +97,6 @@ export const Customizer = ({ mobile }: CustomizerProps) => {
-
-

- Network -

-
-

- {chainId === 1 ? 'Mainnet' : 'Sepolia'} -

- { - switchChainAsync({ - chainId: chainId === 1 ? 11155111 : 1, - }); - }} - /> -
-
-
diff --git a/apps/console/src/components/sections/customizer/PluginsSection/index.tsx b/apps/console/src/components/sections/customizer/PluginsSection/index.tsx index 153a1397..82517d63 100644 --- a/apps/console/src/components/sections/customizer/PluginsSection/index.tsx +++ b/apps/console/src/components/sections/customizer/PluginsSection/index.tsx @@ -10,7 +10,7 @@ export const PluginsSection: FC = () => { return (

- Plugins + Add Your Favorite Plugins

diff --git a/apps/console/src/components/sections/customizer/SignSection/index.tsx b/apps/console/src/components/sections/customizer/SignSection/index.tsx index 8db6edb8..0d09eb40 100644 --- a/apps/console/src/components/sections/customizer/SignSection/index.tsx +++ b/apps/console/src/components/sections/customizer/SignSection/index.tsx @@ -35,7 +35,7 @@ export const SignSection = () => { }} >

- Sign In + Let Users Sign In Using

@@ -55,18 +55,39 @@ export const SignSection = () => { } }} rightIcon={ - + - - + + - + diff --git a/nx.json b/nx.json index d5582688..3d1999d3 100644 --- a/nx.json +++ b/nx.json @@ -168,7 +168,9 @@ "packages/@justverified/plugin", "packages/@justweb3/efp-plugin", "packages/@justweb3/poap-plugin", - "packages/@justweb3/talent-protocol-plugin" + "packages/@justweb3/talent-protocol-plugin", + "packages/@justweb3/xmtp-plugin", + "packages/siwens" ] }, "defaultBase": "main"