fix console errors

JustaName-id · Nov 5, 2024 · 8d8fc66 · 8d8fc66
1 parent f1d0f37
commit 8d8fc66
Show file tree

Hide file tree

Showing 4 changed files with 113 additions and 46 deletions.
diff --git a/apps/console/src/components/sections/code/CodeSection/index.tsx b/apps/console/src/components/sections/code/CodeSection/index.tsx
@@ -1,8 +1,8 @@
-import { a11yLight, CopyBlock } from 'react-code-blocks';
 import { JustWeb3Context } from '@justweb3/widget';
-import { useContext, useMemo } from 'react';
+import React, { useContext, useMemo } from 'react';
 import { useJustWeb3Theme } from '@justweb3/ui';
 import { useConsole } from '../../../../providers/ConsoleProvider';
+import { Highlight, themes } from 'prism-react-renderer';
 
 export const CodeSection: React.FC = () => {
   const { config } = useContext(JustWeb3Context);
@@ -14,16 +14,17 @@ export const CodeSection: React.FC = () => {
 
     if (config.plugins?.find((p) => p.name === 'JustVerifiedPlugin')) {
       plugins.push(
-        `JustVerifiedPlugin([${justVerified.map((v) => `'${v}'`).join(', ')}])`
+        `JustVerifiedPlugin([${justVerified.map((v) => `${v}`).join(', ')}])`
       );
     }
 
     if (config.plugins?.find((p) => p.name === 'EFPPlugin')) {
       plugins.push('EFPPlugin');
     }
 
-    return `import '@rainbow-me/rainbowkit/styles.css'
-import '@justweb3/widget/styles.css'
+    return `
+import '@rainbow-me/rainbowkit/styles.css';
+import '@justweb3/widget/styles.css';
 import React from 'react';
 import { 
   getDefaultConfig,
@@ -39,21 +40,14 @@ import {
   QueryClient, 
   QueryClientProvider 
 } from '@tanstack/react-query';
-import {
-  WagmiProvider
-} from 'wagmi';
-import { 
-  mainnet,
-  sepolia
-} from 'wagmi/chains';
+import { WagmiProvider } from 'wagmi';
+import { mainnet, sepolia } from 'wagmi/chains';
 import { 
   JustWeb3Provider, 
   JustWeb3ProviderConfig, 
   JustWeb3Button
 } from '@justweb3/widget';
-import {
-  ConnectButton 
-} from '@rainbow-me/rainbowkit';
+import { ConnectButton } from '@rainbow-me/rainbowkit';
 ${
   config.plugins?.find((p) => p.name === 'JustVerifiedPlugin')
     ? "import { JustVerifiedPlugin } from '@justverified/plugin';"
@@ -64,7 +58,7 @@ ${
     ? "import { EFPPlugin } from '@justweb3/efp-plugin';"
     : ''
 }
-        
+
 export const App: React.FC = () => {
     const { wallets } = getDefaultWallets();
     
@@ -85,6 +79,16 @@ 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,
@@ -111,25 +115,57 @@ export const App: React.FC = () => {
     );
 };
 
-export default App;
-      `;
+export default App;`.trim();
   }, [color, config, justVerified]);
 
+  const handleCopy = () => {
+    navigator.clipboard.writeText(code);
+  };
+
   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">
-      <p className="text-sm font-medium leading-[140%]">Code</p>
-      <CopyBlock
-        text={code
-          .replace(`"JustVerified`, `JustVerified`)
-          .replace('])"', '])')
-          .replace(`"EFPPlugin"`, `EFPPlugin`)}
-        language={'tsx'}
-        customStyle={{
-          fontSize: '12px',
-        }}
-        showLineNumbers={true}
-        theme={a11yLight}
-      />
+      <div className="flex justify-between items-center">
+        <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"
+        >
+          Copy
+        </button>
+      </div>
+      <Highlight code={code} language="tsx" theme={themes.vsLight}>
+        {({ className, style, tokens, getLineProps, getTokenProps }) => (
+          <pre
+            className={`${className} relative`}
+            style={{ ...style, fontSize: '12px' }}
+          >
+            {tokens.map((line, i) => (
+              <div
+                key={i}
+                {...getLineProps({ line })}
+                style={{ display: 'table-row' }}
+              >
+                <span
+                  style={{
+                    display: 'table-cell',
+                    textAlign: 'right',
+                    paddingRight: '1em',
+                    userSelect: 'none',
+                    opacity: 0.5,
+                  }}
+                >
+                  {i + 1}
+                </span>
+                <span style={{ display: 'table-cell' }}>
+                  {line.map((token, key) => (
+                    <span key={key} {...getTokenProps({ token })} />
+                  ))}
+                </span>
+              </div>
+            ))}
+          </pre>
+        )}
+      </Highlight>
     </div>
   );
 };
diff --git a/apps/console/src/components/sections/customizer/PluginsSection/Verified/index.tsx b/apps/console/src/components/sections/customizer/PluginsSection/Verified/index.tsx
@@ -80,25 +80,35 @@ export const Verified = () => {
   }, [justVerified]);
 
   return (
-    <AccordionItem value="justverified">
+    <AccordionItem
+      value="justverified"
+      style={{
+        position: 'relative',
+      }}
+    >
+      <Switch
+        checked={
+          !!config?.plugins?.find(
+            (plugin) => plugin.name === 'JustVerifiedPlugin'
+          )
+        }
+        onClick={(e) => {
+          e.stopPropagation();
+        }}
+        onCheckedChange={(checked) => {
+          handleJustVerifiedConfig(checked);
+        }}
+        style={{
+          position: 'absolute',
+          right: 0,
+          top: '24px',
+        }}
+      />
       <AccordionTrigger>
         <div className="flex flex-row items-center justify-between w-full py-[5px]">
           <p className="text-base text-black font-bold leading-[125%] my-[5px]">
             JustVerified
           </p>
-          <Switch
-            checked={
-              !!config?.plugins?.find(
-                (plugin) => plugin.name === 'JustVerifiedPlugin'
-              )
-            }
-            onClick={(e) => {
-              e.stopPropagation();
-            }}
-            onCheckedChange={(checked) => {
-              handleJustVerifiedConfig(checked);
-            }}
-          />
         </div>
       </AccordionTrigger>
       <AccordionContent>

diff --git a/package.json b/package.json
@@ -77,6 +77,7 @@
     "ora": "^8.0.1",
     "pino-pretty": "^11.0.0",
     "postcss-import": "^16.1.0",
+    "prism-react-renderer": "^2.4.0",
     "qs": "^6.12.0",
     "react": "18.3.1",
     "react-code-blocks": "^0.1.6",

diff --git a/yarn.lock b/yarn.lock
@@ -11633,6 +11633,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/prismjs@npm:^1.26.0":
+  version: 1.26.5
+  resolution: "@types/prismjs@npm:1.26.5"
+  checksum: 10c0/5619cb449e0d8df098c8759d6f47bf8fdd510abf5dbdfa999e55c6a2545efbd1e209cc85a33d8d9f4ff2898089a1a6d9a70737c9baffaae635c46852c40d384a
+  languageName: node
+  linkType: hard
+
 "@types/prop-types@npm:*":
   version: 15.7.13
   resolution: "@types/prop-types@npm:15.7.13"
@@ -16681,7 +16688,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"clsx@npm:2.1.1":
+"clsx@npm:2.1.1, clsx@npm:^2.0.0":
   version: 2.1.1
   resolution: "clsx@npm:2.1.1"
   checksum: 10c0/c4c8eb865f8c82baab07e71bfa8897c73454881c4f99d6bc81585aecd7c441746c1399d08363dc096c550cceaf97bd4ce1e8854e1771e9998d9f94c4fe075839
@@ -26283,6 +26290,7 @@ __metadata:
     postcss: "npm:8.4.38"
     postcss-import: "npm:^16.1.0"
     prettier: "npm:^2.6.2"
+    prism-react-renderer: "npm:^2.4.0"
     qs: "npm:^6.12.0"
     react: "npm:18.3.1"
     react-code-blocks: "npm:^0.1.6"
@@ -31878,6 +31886,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"prism-react-renderer@npm:^2.4.0":
+  version: 2.4.0
+  resolution: "prism-react-renderer@npm:2.4.0"
+  dependencies:
+    "@types/prismjs": "npm:^1.26.0"
+    clsx: "npm:^2.0.0"
+  peerDependencies:
+    react: ">=16.0.0"
+  checksum: 10c0/3d6969b057da0efe39e3e637bf93601cd5757de5919180e8df16daf1d1b8eedc39b70c7f6f28724fba0a01bc857c6b78312ab027f4e913159d1165c5aba235bb
+  languageName: node
+  linkType: hard
+
 "prismjs@npm:^1.27.0":
   version: 1.29.0
   resolution: "prismjs@npm:1.29.0"