Merge pull request #78 from JustaName-id/develop

Develop

apps/console/src/app/api/poap/route.ts

@@ -0,0 +1,39 @@
+import { NextRequest } from 'next/server';
+import axios from 'axios';
+
+interface QueryParams {
+  address: string;
+}
+
+export async function GET(req: NextRequest & { query: QueryParams }) {
+  const { searchParams } = req.nextUrl;
+  const address = searchParams.get('address');
+
+  if (!address) {
+    return new Response('Address is required', { status: 400 });
+  }
+
+  let poaps = [];
+
+  try {
+    const response = await axios.get(
+      `https://api.poap.tech/actions/scan/${address}`,
+      {
+        headers: {
+          Accept: 'application/json',
+          'x-api-key': process.env.POAP_API_KEY,
+        },
+      }
+    );
+    poaps = response.data;
+  } catch (error) {
+    console.error('Error fetching POAPs', error);
+    return new Response('Error fetching POAPs', { status: 500 });
+  }
+
+  return new Response(JSON.stringify(poaps), {
+    headers: {
+      'Content-Type': 'application/json',
+    },
+  });
+}

apps/console/src/app/api/tp/credentials/route.ts

@@ -0,0 +1,39 @@
+import { NextRequest } from 'next/server';
+import axios from 'axios';
+
+interface QueryParams {
+  address: string;
+}
+
+export async function GET(req: NextRequest & { query: QueryParams }) {
+  const { searchParams } = req.nextUrl;
+  const address = searchParams.get('address');
+
+  if (!address) {
+    return new Response('Address is required', { status: 400 });
+  }
+
+  let credentials;
+
+  try {
+    const response = await axios.get(
+      `https://api.talentprotocol.com/api/v2/passport_credentials?passport_id=${address}`,
+      {
+        headers: {
+          Accept: 'application/json',
+          'x-api-key': process.env.TALENT_PROTOCOL_API_KEY,
+        },
+      }
+    );
+    credentials = response.data;
+  } catch (error) {
+    console.error('Error fetching POAPs', error);
+    return new Response('Error fetching Credentials', { status: 500 });
+  }
+
+  return new Response(JSON.stringify(credentials), {
+    headers: {
+      'Content-Type': 'application/json',
+    },
+  });
+}

apps/console/src/app/api/tp/passport/route.ts

@@ -0,0 +1,39 @@
+import { NextRequest } from 'next/server';
+import axios from 'axios';
+
+interface QueryParams {
+  address: string;
+}
+
+export async function GET(req: NextRequest & { query: QueryParams }) {
+  const { searchParams } = req.nextUrl;
+  const address = searchParams.get('address');
+
+  if (!address) {
+    return new Response('Address is required', { status: 400 });
+  }
+
+  let passport;
+
+  try {
+    const response = await axios.get(
+      `https://api.talentprotocol.com/api/v2/passports/${address}`,
+      {
+        headers: {
+          Accept: 'application/json',
+          'x-api-key': process.env.TALENT_PROTOCOL_API_KEY,
+        },
+      }
+    );
+    passport = response.data;
+  } catch (error) {
+    console.error('Error fetching POAPs', error);
+    return new Response('Error fetching Passport', { status: 500 });
+  }
+
+  return new Response(JSON.stringify(passport), {
+    headers: {
+      'Content-Type': 'application/json',
+    },
+  });
+}

apps/console/src/app/global.css

@@ -79,3 +79,13 @@
     font-feature-settings: 'rlig' 1, 'calt' 1;
   }
 }
+
+*::-webkit-scrollbar {
+  display: none;
+}
+
+/* Hide scrollbar for IE, Edge and Firefox */
+* {
+  -ms-overflow-style: none;  /* IE and Edge */
+  scrollbar-width: none;  /* Firefox */
+}

apps/console/src/components/sections/code/CodeSection/index.tsx

@@ -12,18 +12,49 @@ export const CodeSection: React.FC<CodeSectionProps> = ({ mobile }) => {
   const { config } = useContext(JustWeb3Context);
   const { color } = useJustWeb3Theme();
   const { justVerified } = useConsole();
+  const justVerifiedEnabled = useMemo(
+    () => config.plugins?.find((p) => p.name === 'JustVerifiedPlugin'),
+    [config]
+  );
 
-  const code = useMemo(() => {
+  const efpPluginEnabled = useMemo(
+    () => config.plugins?.find((p) => p.name === 'EFPPlugin'),
+    [config]
+  );
+
+  const poapPluginEnabled = useMemo(
+    () => config.plugins?.find((p) => p.name === 'POAPPlugin'),
+    [config]
+  );
+
+  const talentProtocolPluginEnabled = useMemo(
+    () => config.plugins?.find((p) => p.name === 'TalentProtocolPlugin'),
+    [config]
+  );
+
+  const codeSnippet = useMemo(() => {
     const plugins = [];
 
-    if (config.plugins?.find((p) => p.name === 'JustVerifiedPlugin')) {
+    if (justVerifiedEnabled) {
       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');
+    if (efpPluginEnabled) {
+      plugins.push('%%EFPPlugin%%');
+    }
+
+    if (poapPluginEnabled) {
+      plugins.push("%%POAPPlugin({ apiKey: '<YOUR_POAP_API_KEY>' })%%");
+    }
+
+    if (talentProtocolPluginEnabled) {
+      plugins.push(
+        "%%TalentProtocolPlugin({ apiKey: '<YOUR_TALENT_PROTOCOL_API_KEY>' })%%"
+      );
     }
 
     return `
@@ -52,14 +83,20 @@ 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';"
-        : ''
-      }
+${
+  justVerifiedEnabled
+    ? "import { JustVerifiedPlugin } from '@justverified/plugin';"
+    : ''
+}
+${efpPluginEnabled ? "import { EFPPlugin } from '@justweb3/efp-plugin';" : ''}
+${
+  poapPluginEnabled ? "import { POAPPlugin } from '@justweb3/poap-plugin';" : ''
+}
+${
+  talentProtocolPluginEnabled
+    ? "import { TalentProtocolPlugin } from '@justweb3/talent-protocol-plugin';"
+    : ''
+}
 
 export const App: React.FC = () => {
     const { wallets } = getDefaultWallets();
@@ -79,26 +116,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();
   
@@ -118,18 +155,83 @@ export const App: React.FC = () => {
 };
 
 export default App;`.trim();
-  }, [color, config, justVerified]);
+  }, [
+    color,
+    config,
+    efpPluginEnabled,
+    justVerified,
+    justVerifiedEnabled,
+    poapPluginEnabled,
+    talentProtocolPluginEnabled,
+  ]);
+
+  const code = useMemo(() => {
+    const prefix = /"%%/g;
+    const suffix = /%%"/g;
+    return codeSnippet.replaceAll(prefix, '').replaceAll(suffix, '');
+  }, [codeSnippet]);
+
+  const dependencies = useMemo(() => {
+    return `yarn add ${justVerifiedEnabled ? '@justverified/plugin' : ''} ${
+      poapPluginEnabled ? '@justweb3/poap-plugin' : ''
+    } ${efpPluginEnabled ? '@justweb3/efp-plugin' : ''}
+     ${talentProtocolPluginEnabled ? '@justweb3/talent-protocol-plugin' : ''}
+     @justweb3/widget viem wagmi @rainbow-me/rainbowkit @tanstack/react-query ethers`;
+  }, [
+    efpPluginEnabled,
+    justVerifiedEnabled,
+    poapPluginEnabled,
+    talentProtocolPluginEnabled,
+  ]);
+
+  const handleDependenciesCopy = () => {
+    navigator.clipboard.writeText(dependencies);
+  };
 
   const handleCopy = () => {
     navigator.clipboard.writeText(code);
   };
 
   return (
-    <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>
-        )}
+    <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>}
+      </div>
+
+      <div className="flex flex-col justify-between">
+        <p className="text-sm font-medium leading-[140%]">Dependencies</p>
+
+        <div className="flex p-2 bg-gray-100 rounded-md pr-[46px] relative">
+          <div
+            className={
+              'w-full flex justify-between items-center  overflow-x-scroll'
+            }
+          >
+            <span className="text-xs text-gray-500 whitespace-nowrap">
+              {dependencies}
+            </span>
+          </div>
+
+          <button
+            onClick={handleDependenciesCopy}
+            className="text-sm font-medium leading-[140%] text-blue-500 hover:text-blue-700 top-0 bottom-0 right-2 absolute"
+          >
+            Copy
+          </button>
+        </div>
+      </div>
+
+      <div className={`flex justify-between items-center`}>
+        <p className="text-sm font-medium leading-[140%]">Snippet</p>
+
         <button
           onClick={handleCopy}
           className="text-sm font-medium leading-[140%] text-blue-500 hover:text-blue-700"

apps/console/src/components/sections/customizer/PluginsSection/EFP/index.tsx

@@ -29,8 +29,6 @@ export const EFP = () => {
   };
 
   return (
-    // <AccordionItem value="efp">
-    //   <AccordionTrigger>
     <div className="flex flex-row items-center justify-between w-full py-[16px] pl-[26px]">
       <p className="text-base text-black font-bold leading-[125%] my-[5px]">
         EFP
@@ -47,7 +45,5 @@ export const EFP = () => {
         }}
       />
     </div>
-    //   </AccordionTrigger>
-    // </AccordionItem>
   );
 };