Hadi/console fixes (#56)

* Develop (#48) * Console (#43) * fix: naming app name * fix: packages * fix(console): deployment * fix: trial * fix(console): trial * trial * trial * trial * trial * trial * trial * trial --------- Co-authored-by: anthony2399 <[email protected]> * fix: error from useEnsWalletClient * Develop (#44) * feat: remove mapps from justverified * fix yarn.lock * fix * feat: efp * feat: efp and storybook for react sdk * chore(release): publish - project: justweb3-efp-plugin 0.1.0 * chore(release): publish - project: justweb3-efp-plugin 0.1.1 * chore(release): publish - project: justweb3-efp-plugin 0.1.2 * chore(release): publish - project: justweb3-efp-plugin 0.1.3 * feat: console fixes * chore(release): publish - project: justweb3-efp-plugin 0.1.4 * feat: added docs and the sign in should only show ens set to default resolver or justaname resolver only * feat: add verbose to the test in ci * trial * trial * trial * trial * Trial (#42) * trial * trial * trial * trial * trial * fix: lint fix on react and package json of projects * fix: lint fix on react and package json of projects * Console (#43) * fix: naming app name * fix: packages * fix(console): deployment * fix: trial * fix(console): trial * trial * trial * trial * trial * trial * trial * trial --------- Co-authored-by: anthony2399 <[email protected]> * fix: error from useEnsWalletClient --------- Co-authored-by: anthony2399 <[email protected]> * release * chore(release): publish - project: @justaname.id/sdk 0.2.125 - project: @justaname.id/react 0.3.128 - project: @justaname.id/siwens 0.0.58 - project: @justweb3/ui 0.0.64 - project: @justweb3/widget 0.0.64 - project: @justverified/plugin 0.0.63 - project: @justweb3/efp-plugin 0.1.24 * release * chore(release): publish - project: @justaname.id/sdk 0.2.126 - project: @justaname.id/react 0.3.129 - project: @justaname.id/siwens 0.0.59 - project: @justweb3/ui 0.0.65 - project: @justweb3/widget 0.0.65 - project: @justverified/plugin 0.0.64 - project: @justweb3/efp-plugin 0.1.25 * chore(release): publish - project: @justaname.id/sdk 0.2.127 - project: @justaname.id/react 0.3.130 - project: @justaname.id/siwens 0.0.60 - project: @justweb3/ui 0.0.66 - project: @justweb3/widget 0.0.66 - project: @justverified/plugin 0.0.65 - project: @justweb3/efp-plugin 0.1.26 * chore(release): publish - project: @justaname.id/sdk 0.2.128 - project: @justaname.id/react 0.3.131 - project: @justaname.id/siwens 0.0.61 - project: @justweb3/ui 0.0.67 - project: @justweb3/widget 0.0.67 - project: @justverified/plugin 0.0.66 - project: @justweb3/efp-plugin 0.1.27 * fix: update rest call and ui fixes * fix: console * Develop (#47) * feat: remove mapps from justverified * fix yarn.lock * fix * feat: efp * feat: efp and storybook for react sdk * chore(release): publish - project: justweb3-efp-plugin 0.1.0 * chore(release): publish - project: justweb3-efp-plugin 0.1.1 * chore(release): publish - project: justweb3-efp-plugin 0.1.2 * chore(release): publish - project: justweb3-efp-plugin 0.1.3 * feat: console fixes * chore(release): publish - project: justweb3-efp-plugin 0.1.4 * feat: added docs and the sign in should only show ens set to default resolver or justaname resolver only * feat: add verbose to the test in ci * trial * trial * trial * trial * Trial (#42) * trial * trial * trial * trial * trial * fix: lint fix on react and package json of projects * fix: lint fix on react and package json of projects * Console (#43) * fix: naming app name * fix: packages * fix(console): deployment * fix: trial * fix(console): trial * trial * trial * trial * trial * trial * trial * trial --------- Co-authored-by: anthony2399 <[email protected]> * fix: error from useEnsWalletClient * fix: update rest call and ui fixes * fix: console --------- Co-authored-by: HadiKhai <[email protected]> Co-authored-by: JustHadi <[email protected]> * chore(release): publish - project: @justaname.id/sdk 0.2.129 - project: @justaname.id/react 0.3.132 - project: @justaname.id/siwens 0.0.62 - project: @justweb3/ui 0.0.68 - project: @justweb3/widget 0.0.68 - project: @justverified/plugin 0.0.67 - project: @justweb3/efp-plugin 0.1.28 * chore(release): publish - project: @justaname.id/sdk 0.2.130 - project: @justaname.id/react 0.3.133 - project: @justaname.id/siwens 0.0.63 - project: @justweb3/ui 0.0.69 - project: @justweb3/widget 0.0.69 - project: @justverified/plugin 0.0.68 - project: @justweb3/efp-plugin 0.1.29 * chore(release): publish - project: @justaname.id/sdk 0.2.131 - project: @justaname.id/react 0.3.134 - project: @justaname.id/siwens 0.0.64 - project: @justweb3/ui 0.0.70 - project: @justweb3/widget 0.0.70 - project: @justverified/plugin 0.0.69 - project: @justweb3/efp-plugin 0.1.30 * chore(release): publish - project: @justaname.id/sdk 0.2.132 - project: @justaname.id/react 0.3.135 - project: @justaname.id/siwens 0.0.65 - project: @justweb3/ui 0.0.71 - project: @justweb3/widget 0.0.71 - project: @justverified/plugin 0.0.70 - project: @justweb3/efp-plugin 0.1.31 * chore(release): publish - project: @justaname.id/sdk 0.2.133 - project: @justaname.id/react 0.3.136 - project: @justaname.id/siwens 0.0.66 - project: @justweb3/ui 0.0.72 - project: @justweb3/widget 0.0.72 - project: @justverified/plugin 0.0.71 - project: @justweb3/efp-plugin 0.1.32 --------- Co-authored-by: JustHadi <[email protected]> Co-authored-by: HadiKhai <[email protected]> Co-authored-by: HadiKhai <[email protected]> Co-authored-by: justaname-sdk-publisher[bot] <justaname-sdk-publisher[bot]@users.noreply.github.com> Co-authored-by: anthony23991 <[email protected]> * feat: dialog fixes and logo needs to be fixed * fixes * Anthony/console mobile (#53) * fixes * feat: console responsive * feat: query * feat: defaultOptions * fix: removed unused file * fix: scroll in mobile drawer --------- Co-authored-by: HadiKhai <[email protected]> --------- Co-authored-by: Anthony Khoury <[email protected]> Co-authored-by: HadiKhai <[email protected]> Co-authored-by: justaname-sdk-publisher[bot] <justaname-sdk-publisher[bot]@users.noreply.github.com> Co-authored-by: anthony23991 <[email protected]>
JustaName-id · Nov 13, 2024 · 6d8cf25 · 6d8cf25
1 parent c1ae37c
commit 6d8cf25
Show file tree

Hide file tree

Showing 54 changed files with 938 additions and 547 deletions.
diff --git a/apps/console/src/app/api/signin/route.ts b/apps/console/src/app/api/signin/route.ts
@@ -5,7 +5,6 @@ import { SignInResponse } from '@justaname.id/sdk';
 export const POST = async (req: NextRequest) => {
   const { message, signature } = await req.json();
 
-  console.log(message, signature);
   const session = await Session.fromRequest(req);
 
   let signInMessage: SignInResponse;

diff --git a/apps/console/src/app/page.tsx b/apps/console/src/app/page.tsx
@@ -5,30 +5,72 @@ import Split from '@uiw/react-split';
 import { CodeSection } from '../components/sections/code/CodeSection';
 import { Customizer } from '../components/sections/customizer/Customizer';
 import { ConsoleProvider } from '../providers/ConsoleProvider';
+import { SectionSlider } from '../components/reusable/SectionSlider';
 
 export default function Page() {
   return (
-    <div className="flex flex-row justify-between w-full h-full relative">
+    <div className="flex flex-row justify-between max-mobile:max-w-[100vw] max-mobile:overflow-x-hidden w-full h-full relative">
       <ConsoleProvider>
-        <Customizer />
+        <div className='hidden mobile:block'>
+          <Customizer />
+        </div>
+        <div className='mobile:hidden'>
+          <SectionSlider
+            trigger={
+              <div className='py-[7px] px-2.5 bg-[#3280F4] font-xs font-black text-white border border-black rounded-[8px_8px_0px_0px] rotate-90'>
+                Customise
+              </div>
+            }
+            side='left' title='Customizer'>
+            <Customizer mobile />
+          </SectionSlider>
+        </div>
 
-        <Split style={{ maxWidth: '100%', overflow: 'hidden', width: '100%' }}>
+        <div className='max-mobile:hidden flex flex-1'>
+          <Split style={{ maxWidth: '100%', overflow: 'hidden', width: '100%' }}>
+            <div
+              className={`flex-1 h-full gap-3 flex-col relative bg-[url('/bg/widget-bg.png')] bg-repeat-x bg-cover flex justify-center items-center`}
+            >
+              <JustWeb3Button>
+                <ConnectButton />
+              </JustWeb3Button>
+
+              <JustEnsCard addressOrEns={'justhadi.eth'} />
+              <JustEnsCard addressOrEns={'mely.eth'} />
+              <JustEnsCard addressOrEns={'nick.eth'} />
+              <JustEnsCard addressOrEns={'vitalik.eth'} />
+              <JustEnsCard addressOrEns={'brantly.eth'} />
+              <JustEnsCard addressOrEns={'dr3a.eth'} />
+            </div>
+            <CodeSection />
+          </Split>
+        </div>
+        <div className='mobile:hidden overflow-hidden w-full'>
+          <SectionSlider
+            trigger={
+              <div className='py-[7px] px-2.5 bg-[#FEA801] font-xs font-black text-white border border-black rounded-[8px_8px_0px_0px] translate-y-[10px] -rotate-90'>
+                Code Output
+              </div>
+            }
+            side='right' title='Code'>
+            <CodeSection mobile />
+          </SectionSlider>
           <div
-            className={`flex-1 h-full gap-3 flex-col relative bg-[url('/bg/widget-bg.png')] bg-repeat-x bg-cover flex justify-center items-center`}
+            className={`flex-1 h-full gap-3 w-full flex-col relative bg-[url('/bg/widget-bg.png')] bg-repeat-x bg-cover flex justify-center items-center`}
           >
-            <JustWeb3Button>
-              <ConnectButton />
-            </JustWeb3Button>
-
+            <div className='mb-10'>
+              <JustWeb3Button>
+                <ConnectButton />
+              </JustWeb3Button>
+            </div>
             <JustEnsCard addressOrEns={'justhadi.eth'} />
             <JustEnsCard addressOrEns={'mely.eth'} />
             <JustEnsCard addressOrEns={'nick.eth'} />
             <JustEnsCard addressOrEns={'vitalik.eth'} />
             <JustEnsCard addressOrEns={'brantly.eth'} />
             <JustEnsCard addressOrEns={'dr3a.eth'} />
           </div>
-          <CodeSection />
-        </Split>
+        </div>
       </ConsoleProvider>
     </div>
   );

diff --git a/apps/console/src/app/providers.tsx b/apps/console/src/app/providers.tsx
@@ -12,16 +12,18 @@ import {
   trustWallet,
 } from '@rainbow-me/rainbowkit/wallets';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-import React from 'react';
 import { WagmiProvider } from 'wagmi';
 import { mainnet, sepolia } from 'wagmi/chains';
 import { JustWeb3Provider, JustWeb3ProviderConfig } from '@justweb3/widget';
+import { useState } from 'react';
 
 interface ProviderProps {
   children: React.ReactNode;
 }
+
 export const Providers: React.FC<ProviderProps> = (props) => {
   const { wallets } = getDefaultWallets();
+  const [queryClient] = useState(() => new QueryClient());
 
   const config = getDefaultConfig({
     appName: 'JustaName Console',
@@ -59,7 +61,6 @@ export const Providers: React.FC<ProviderProps> = (props) => {
     dev: process.env.NEXT_PUBLIC_DEV === 'true',
   };
 
-  const queryClient = new QueryClient();
   return (
     <WagmiProvider config={config}>
       <QueryClientProvider client={queryClient}>

diff --git a/apps/console/src/components/reusable/SectionSlider/index.tsx b/apps/console/src/components/reusable/SectionSlider/index.tsx
@@ -0,0 +1,35 @@
+import { Drawer, DrawerClose, DrawerContent, DrawerHeader, DrawerTitle, DrawerTrigger } from "../../ui/drawer";
+
+interface SectionSliderProps {
+    side: 'left' | 'right';
+    children: React.ReactNode;
+    title: string;
+    trigger: React.ReactNode;
+}
+
+export const SectionSlider = ({ side, children, title, trigger }: SectionSliderProps) => {
+    return (
+
+        <Drawer direction={side} >
+            <DrawerTrigger className={`absolute z-[120] top-16 ${side === 'left' ? 'left-[-33px]' : 'right-[-42px]'}`}>
+                {trigger}
+            </DrawerTrigger>
+            <DrawerContent disableOverlay>
+                <DrawerHeader className="flex flex-row gap-[5px] items-center">
+                    <DrawerClose>
+                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
+                            <mask id="mask0_4168_2122" style={{ maskType: 'alpha' }} maskUnits="userSpaceOnUse" x="0" y="0" width="20" height="20">
+                                <rect width="20" height="20" transform="matrix(-1 0 0 1 20 0)" fill="#D9D9D9" />
+                            </mask>
+                            <g mask="url(#mask0_4168_2122)">
+                                <path d="M13.3125 18.3333L14.7917 16.8542L7.93752 10L14.7917 3.14584L13.3125 1.66667L4.97919 10L13.3125 18.3333Z" fill="#3280F4" />
+                            </g>
+                        </svg>
+                    </DrawerClose>
+                    <DrawerTitle>{title}</DrawerTitle>
+                </DrawerHeader>
+                {children}
+            </DrawerContent>
+        </Drawer>
+    );
+};
diff --git a/apps/console/src/components/sections/code/CodeSection/index.tsx b/apps/console/src/components/sections/code/CodeSection/index.tsx
@@ -4,7 +4,11 @@ import { useJustWeb3Theme } from '@justweb3/ui';
 import { useConsole } from '../../../../providers/ConsoleProvider';
 import { Highlight, themes } from 'prism-react-renderer';
 
-export const CodeSection: React.FC = () => {
+interface CodeSectionProps {
+  mobile?: boolean;
+}
+
+export const CodeSection: React.FC<CodeSectionProps> = ({ mobile }) => {
   const { config } = useContext(JustWeb3Context);
   const { color } = useJustWeb3Theme();
   const { justVerified } = useConsole();
@@ -48,16 +52,14 @@ import {
   JustWeb3Button
 } from '@justweb3/widget';
 import { ConnectButton } from '@rainbow-me/rainbowkit';
-${
-  config.plugins?.find((p) => p.name === 'JustVerifiedPlugin')
-    ? "import { JustVerifiedPlugin } from '@justverified/plugin';"
-    : ''
-}
-${
-  config.plugins?.find((p) => p.name === 'EFPPlugin')
-    ? "import { EFPPlugin } from '@justweb3/efp-plugin';"
-    : ''
-}
+${config.plugins?.find((p) => p.name === 'JustVerifiedPlugin')
+        ? "import { JustVerifiedPlugin } from '@justverified/plugin';"
+        : ''
+      }
+${config.plugins?.find((p) => p.name === 'EFPPlugin')
+        ? "import { EFPPlugin } from '@justweb3/efp-plugin';"
+        : ''
+      }
 
 export const App: React.FC = () => {
     const { wallets } = getDefaultWallets();
@@ -77,26 +79,26 @@ export const App: React.FC = () => {
     });
   
     const justweb3Config: JustWeb3ProviderConfig = ${JSON.stringify(
-      {
-        ...config,
-        networks: [
-          {
-            chainId: 1,
-            providerUrl: `<MAINNET_PROVIDER_URL>`,
-          },
-          {
-            chainId: 11155111,
-            providerUrl: `<SEPOLIA_PROVIDER_URL>`,
-          },
-        ],
-        dev: undefined,
-        disableOverlay: undefined,
-        plugins: plugins.length > 0 ? plugins : undefined,
-        color: color,
-      },
-      null,
-      2
-    )};
+        {
+          ...config,
+          networks: [
+            {
+              chainId: 1,
+              providerUrl: `<MAINNET_PROVIDER_URL>`,
+            },
+            {
+              chainId: 11155111,
+              providerUrl: `<SEPOLIA_PROVIDER_URL>`,
+            },
+          ],
+          dev: undefined,
+          disableOverlay: undefined,
+          plugins: plugins.length > 0 ? plugins : undefined,
+          color: color,
+        },
+        null,
+        2
+      )};
   
     const queryClient = new QueryClient();
   
@@ -123,9 +125,11 @@ export default App;`.trim();
   };
 
   return (
-    <div className="h-full w-[30%] min-w-[300px] border-l-[1px] pointer-events-auto flex flex-col max-h-[calc(100vh-60px)] overflow-y-auto py-5 px-2.5 gap-5 justify-between">
-      <div className="flex justify-between items-center">
-        <p className="text-sm font-medium leading-[140%]">Code</p>
+    <div className={`h-full mobile:w-[30%] min-w-[300px] border-l-[1px] pointer-events-auto flex flex-col max-h-[calc(100vh-60px)] overflow-y-auto ${mobile ? 'pb-5' : 'py-5'} px-2.5 gap-5 justify-between`}>
+      <div className={`flex justify-between items-center ${mobile ? 'absolute top-4 right-6 ' : ''}`}>
+        {!mobile && (
+          <p className="text-sm font-medium leading-[140%]">Code</p>
+        )}
         <button
           onClick={handleCopy}
           className="text-sm font-medium leading-[140%] text-blue-500 hover:text-blue-700"

diff --git a/apps/console/src/components/sections/customizer/Customizer/index.tsx b/apps/console/src/components/sections/customizer/Customizer/index.tsx
@@ -10,7 +10,11 @@ import { useSwitchChain } from 'wagmi';
 import { useMountedAccount } from '@justaname.id/react';
 import { PluginsSection } from '../PluginsSection';
 
-export const Customizer = () => {
+interface CustomizerProps {
+  mobile?: boolean;
+}
+
+export const Customizer = ({ mobile }: CustomizerProps) => {
   const { handleJustWeb3Config, config } = useContext(JustWeb3Context);
   const { changeTheme } = useJustWeb3Theme();
   const [logoUrl, setLogoUrl] = useState(config.logo ?? '');
@@ -25,11 +29,13 @@ export const Customizer = () => {
   }, [logoUrlDebounced]);
 
   return (
-    <div className="flex flex-col gap-[5px] min-w-[350px] w-[350px] border-r-[1px] pointer-events-auto py-5 px-2.5 max-h-[calc(100vh-60px)] overflow-y-scroll">
+    <div className={`flex flex-col gap-[5px] min-w-[350px] mobile:w-[350px] border-r-[1px] pointer-events-auto ${mobile ? 'pb-5' : 'py-5'} px-2.5 mobile:max-h-[calc(100vh-60px)] overflow-y-auto `}>
       <div className="flex flex-col gap-2.5">
-        <p className="text-base text-black font-bold leading-[125%] my-[5px]">
-          Customize Interface
-        </p>
+        {!mobile && (
+          <p className="text-base text-black font-bold leading-[125%] my-[5px]">
+            Customize Interface
+          </p>
+        )}
         <div className="flex flex-row justify-between gap-2.5">
           <ColorSelector
             colors={['#FFFFFF', '#000000']}