TalentLayer-Labs · marsian83 · Oct 21, 2023 · Oct 21, 2023 · Oct 21, 2023 · Oct 21, 2023
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -21,7 +21,7 @@
     "ipfs-http-client": "^59.0.0",
     "level-js": "^6.1.0",
     "mongoose": "^7.4.2",
-    "next": "^13.5.5",
+    "next": "^13.5.6",
     "next-pwa": "^5.6.0",
     "next-seo": "^6.0.0",
     "next-themes": "^0.2.1",
@@ -31,6 +31,7 @@
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.4.2",
     "react-toastify": "^9.1.1",
+    "ts-loader": "^9.5.0",
     "viem": "^1.10.9",
     "wagmi": "^1.4.1",
     "yup": "^0.32.11"
@@ -67,10 +68,10 @@
     "@tailwindcss/line-clamp": "^0.4.2",
     "@types/fs-extra": "^11.0.2",
     "@types/jest": "^29.5.4",
+    "@types/level-js": "^4.0.2",
     "@types/node": "^18.17.0",
     "@types/react": "^18.0.23",
     "@types/react-dom": "^18.0.7",
-    "@types/level-js": "^4.0.2",
     "@typescript-eslint/eslint-plugin": "^6.7.0",
     "@typescript-eslint/parser": "^6.7.0",
     "autoprefixer": "^10.4.12",
@@ -89,4 +90,4 @@
   "engines": {
     "node": ">=18.17"
   }
-}
+}
diff --git a/public/sw.js b/public/sw.js
diff --git a/public/workbox-588899ac.js → public/workbox-7c2a5a06.js b/public/workbox-588899ac.js → public/workbox-7c2a5a06.js
diff --git a/src/app/HtmlHead.tsx b/src/app/HtmlHead.tsx
@@ -0,0 +1,25 @@
+import React from 'react';
+import Head from 'next/head';
+
+export default function HtmlHead() {
+  return (
+    <Head>
+      <meta name='mobile-web-app-capable' content='yes' />
+      <meta name='msapplication-config' content='/images/browserconfig.xml' />
+      <meta name='msapplication-TileColor' content='#11112a' />
+      <meta name='msapplication-tap-highlight' content='no' />
+      <meta name='theme-color' content='#11112a' />
+
+      <link rel='apple-touch-icon' href='/images/touch-icon-iphone.png' />
+      <link rel='apple-touch-icon' sizes='152x152' href='/images/touch-icon-ipad.png' />
+      <link rel='apple-touch-icon' sizes='180x180' href='/images/touch-icon-iphone-retina.png' />
+      <link rel='apple-touch-icon' sizes='167x167' href='/images/touch-icon-ipad-retina.png' />
+
+      <link rel='icon' type='image/png' sizes='32x32' href='/favicon-32x32.png' />
+      <link rel='icon' type='image/png' sizes='16x16' href='/favicon-16x16.png' />
+      <link rel='manifest' href='/manifest.json' />
+      <link rel='mask-icon' href='/images/safari-pinned-tab.svg' color='#000000' />
+      <link rel='shortcut icon' href='/favicon.ico' />
+    </Head>
+  );
+}
diff --git a/src/pages/_app.tsx → src/app/Providers.tsx b/src/pages/_app.tsx → src/app/Providers.tsx
@@ -1,58 +1,52 @@
-import { EthereumClient, w3mConnectors, w3mProvider } from '@web3modal/ethereum';
-import { Web3Modal } from '@web3modal/react';
+'use client';
+
 import { DefaultSeo } from 'next-seo';
-import { ThemeProvider } from 'next-themes';
-import type { AppProps } from 'next/app';
-import { ToastContainer } from 'react-toastify';
-import 'react-toastify/dist/ReactToastify.css';
-import { Chain, WagmiConfig, configureChains, createConfig } from 'wagmi';
-import { polygonMumbai } from 'wagmi/chains';
-import SEO from '../../next-seo.config';
-import { iexec } from '../chains';
-import { TalentLayerProvider } from '../context/talentLayer';
+import { WagmiConfig, configureChains, createConfig, useAccount, useChainId, Chain } from 'wagmi';
+import { TalentLayerProvider } from '@talentlayer/react/dist';
+import { Web3MailProvider } from '../modules/Web3mail/context/web3mail';
 import { XmtpContextProvider } from '../modules/Messaging/context/XmtpContext';
 import { MessagingProvider } from '../modules/Messaging/context/messging';
-import { Web3MailProvider } from '../modules/Web3mail/context/web3mail';
-import '../styles/globals.css';
-import Layout from './Layout';
+import { ThemeProvider } from 'next-themes';
+// import Layout from './layout';
+import { Web3Modal } from '@web3modal/react';
+import { EthereumClient, w3mConnectors, w3mProvider } from '@web3modal/ethereum';
+import SEO from '../../next-seo.config';
+import { ToastContainer } from 'react-toastify';
+
+import React from 'react';
+import { iexec, polygonMumbai } from '../chains';
 import { NetworkEnum } from '../types';
 
+const projectId = `${process.env.NEXT_PUBLIC_WALLECT_CONNECT_PROJECT_ID}`;
+
 export const chains: Chain[] = [polygonMumbai, iexec];
 export const defaultChain: Chain | undefined = chains.find(
   chain => chain.id === parseInt(process.env.NEXT_PUBLIC_DEFAULT_CHAIN_ID as string),
 );
-const projectId = `${process.env.NEXT_PUBLIC_WALLECT_CONNECT_PROJECT_ID}`;
 
-// Wagmi Client
-const { publicClient } = configureChains(chains, [w3mProvider({ projectId })], {
-  pollingInterval: 10_000,
-});
+const { publicClient } = configureChains(chains, [w3mProvider({ projectId })]);
 const wagmiConfig = createConfig({
   autoConnect: true,
   connectors: w3mConnectors({ projectId, chains }),
   publicClient,
 });
 const ethereumClient = new EthereumClient(wagmiConfig, chains);
 
-function MyApp({ Component, pageProps }: AppProps) {
+export default function Providers(props: { children: JSX.Element }) {
   return (
     <>
       <DefaultSeo {...SEO} />
       <WagmiConfig config={wagmiConfig}>
-        <TalentLayerProvider>
-          <Web3MailProvider>
-            <XmtpContextProvider>
-              <MessagingProvider>
-                <ThemeProvider enableSystem={false}>
-                  <Layout>
-                    <Component {...pageProps} />
-                  </Layout>
-                </ThemeProvider>
-              </MessagingProvider>
-            </XmtpContextProvider>
-            <ToastContainer position='bottom-right' />
-          </Web3MailProvider>
-        </TalentLayerProvider>
+        <Web3MailProvider>
+          <XmtpContextProvider>
+            <MessagingProvider>
+              <ThemeProvider enableSystem={false}>
+                <TLWrapper>{props.children}</TLWrapper>
+              </ThemeProvider>
+            </MessagingProvider>
+          </XmtpContextProvider>
+          <ToastContainer position='bottom-right' />
+        </Web3MailProvider>
         <Web3Modal
           projectId={projectId}
           ethereumClient={ethereumClient}
@@ -64,4 +58,24 @@ function MyApp({ Component, pageProps }: AppProps) {
   );
 }
 
-export default MyApp;
+function TLWrapper(props: { children: JSX.Element }) {
+  const chainId = useChainId();
+  const account: any = useAccount();
+
+  return (
+    <TalentLayerProvider
+      config={{
+        account,
+        chainId,
+        ipfsConfig: {
+          clientId: process.env.NEXT_PUBLIC_INFURA_ID as string,
+          clientSecret: process.env.NEXT_PUBLIC_INFURA_SECRET as string,
+          baseUrl: process.env.NEXT_PUBLIC_IPFS_WRITE_URL as string,
+        },
+        platformId: parseInt(process.env.NEXT_PUBLIC_PLATFORM_ID as string),
+        signatureApiUrl: process.env.NEXT_PUBLIC_SIGNATURE_API_URL as string,
+      }}>
+      {props.children}
+    </TalentLayerProvider>
+  );
+}
diff --git a/src/pages/admin/dispute.tsx → src/app/admin/dispute/page.tsx b/src/pages/admin/dispute.tsx → src/app/admin/dispute/page.tsx
@@ -1,25 +1,24 @@
-import { useContext, useEffect, useState } from 'react';
+'use client';
+
+import { useEffect, useState } from 'react';
 import * as Yup from 'yup';
-import SingleValueForm from '../../components/Form/SingleValueForm';
-import Loading from '../../components/Loading';
-import Steps from '../../components/Steps';
-import UserNeedsMoreRights from '../../components/UserNeedsMoreRights';
-import TalentLayerContext from '../../context/talentLayer';
-import TalentLayerArbitrator from '../../contracts/ABI/TalentLayerArbitrator.json';
-import TalentLayerPlatformID from '../../contracts/ABI/TalentLayerPlatformID.json';
-import { useConfig } from '../../hooks/useConfig';
-import usePlatform from '../../hooks/usePlatform';
+import SingleValueForm from '../../../components/Form/SingleValueForm';
+import Loading from '../../../components/Loading';
+import Steps from '../../../components/Steps';
+import UserNeedsMoreRights from '../../../components/UserNeedsMoreRights';
+import TalentLayerArbitrator from '../../../contracts/ABI/TalentLayerArbitrator.json';
+import TalentLayerPlatformID from '../../../contracts/ABI/TalentLayerPlatformID.json';
+import { useConfig } from '../../../hooks/useConfig';
 import { formatEther } from 'viem';
-import { ZERO_ADDRESS } from '../../utils/constant';
-import useTalentLayerClient from '../../hooks/useTalentLayerClient';
+import { ZERO_ADDRESS } from '../../../utils/constant';
+import { usePlatform, useTalentLayer } from '@talentlayer/react/dist';
 
-function AdminDispute() {
-  const { user, loading } = useContext(TalentLayerContext);
+export default function AdminDispute() {
+  const { user, loading, client: talentLayerClient } = useTalentLayer();
   const config = useConfig();
-  const platform = usePlatform(process.env.NEXT_PUBLIC_PLATFORM_ID as string);
+  const [platform] = usePlatform(process.env.NEXT_PUBLIC_PLATFORM_ID as string);
   const [arbitratorPrice, setArbitratorPrice] = useState<number>(0);
   let availableArbitrators: { value: string; label: string }[] = [];
-  const talentLayerClient = useTalentLayerClient();
 
   const fetchArbitrationPrice = async () => {
     if (talentLayerClient) {
@@ -124,5 +123,3 @@ function AdminDispute() {
     </div>
   );
 }
-
-export default AdminDispute;
diff --git a/src/pages/admin/fees.tsx → src/app/admin/fees/page.tsx b/src/pages/admin/fees.tsx → src/app/admin/fees/page.tsx
@@ -1,23 +1,23 @@
-import { useContext } from 'react';
+'use client';
+
 import { formatEther } from 'viem';
 import * as Yup from 'yup';
-import SingleValueForm from '../../components/Form/SingleValueForm';
-import Loading from '../../components/Loading';
-import Steps from '../../components/Steps';
-import UserNeedsMoreRights from '../../components/UserNeedsMoreRights';
-import { FEE_RATE_DIVIDER } from '../../config';
-import TalentLayerContext from '../../context/talentLayer';
-import TalentLayerPlatformID from '../../contracts/ABI/TalentLayerPlatformID.json';
-import { useConfig } from '../../hooks/useConfig';
-import usePlatform from '../../hooks/usePlatform';
-import { chains } from '../_app';
+import SingleValueForm from '../../../components/Form/SingleValueForm';
+import Loading from '../../../components/Loading';
+import Steps from '../../../components/Steps';
+import UserNeedsMoreRights from '../../../components/UserNeedsMoreRights';
+import { FEE_RATE_DIVIDER } from '../../../config';
+import TalentLayerPlatformID from '../../../contracts/ABI/TalentLayerPlatformID.json';
+import { useConfig } from '../../../hooks/useConfig';
+import { chains } from '../../Providers';
 import { useChainId } from 'wagmi';
+import { usePlatform, useTalentLayer } from '@talentlayer/react/dist';
 
-function AdminFees() {
+export default function AdminFees() {
   const chainId = useChainId();
-  const { user, loading } = useContext(TalentLayerContext);
+  const { user, loading } = useTalentLayer();
   const config = useConfig();
-  const platform = usePlatform(process.env.NEXT_PUBLIC_PLATFORM_ID as string);
+  const [platform] = usePlatform(process.env.NEXT_PUBLIC_PLATFORM_ID as string);
   const currentChain = chains.find(chain => chain.id === chainId);
 
   if (loading) {
@@ -127,5 +127,3 @@ function AdminFees() {
     </div>
   );
 }
-
-export default AdminFees;
diff --git a/src/app/admin/layout.tsx b/src/app/admin/layout.tsx
@@ -0,0 +1,105 @@
+'use client';
+
+import { Dialog, Transition } from '@headlessui/react';
+import { XMarkIcon } from '@heroicons/react/24/outline';
+import Logo from '../../components/Layout/Logo';
+import MenuBottom from '../../components/Layout/MenuBottom';
+import SideMenu from '../../components/Layout/SideMenu';
+import NetworkSwitch from '../../components/NetworkSwitch';
+import UserAccount from '../../components/UserAccount';
+import React, { Fragment, ReactNode, useState } from 'react';
+
+export default function Layout(props: { children: ReactNode }) {
+  const [sidebarOpen, setSidebarOpen] = useState(false);
+
+  return (
+    <>
+      <div className={' dashboard pb-[110px]'}>
+        <Transition.Root show={sidebarOpen} as={Fragment}>
+          <Dialog as='div' className='relative z-40 md:hidden' onClose={setSidebarOpen}>
+            <Transition.Child
+              as={Fragment}
+              enter='transition-opacity ease-linear duration-300'
+              enterFrom='opacity-0'
+              enterTo='opacity-100'
+              leave='transition-opacity ease-linear duration-300'
+              leaveFrom='opacity-100'
+              leaveTo='opacity-0'>
+              <div className='fixed inset-0 bg-gray-600 bg-opacity-75' />
+            </Transition.Child>
+
+            <div className='fixed inset-0 z-40 flex'>
+              <Transition.Child
+                as={Fragment}
+                enter='transition ease-in-out duration-300 transform'
+                enterFrom='-translate-x-full'
+                enterTo='translate-x-0'
+                leave='transition ease-in-out duration-300 transform'
+                leaveFrom='translate-x-0'
+                leaveTo='-translate-x-full'>
+                <Dialog.Panel className='relative flex w-full max-w-xs flex-1 flex-col bg-midnight pt-5 pb-4'>
+                  <Transition.Child
+                    as={Fragment}
+                    enter='ease-in-out duration-300'
+                    enterFrom='opacity-0'
+                    enterTo='opacity-100'
+                    leave='ease-in-out duration-300'
+                    leaveFrom='opacity-100'
+                    leaveTo='opacity-0'>
+                    <div className='absolute top-0 right-0 -mr-12 pt-2'>
+                      <button
+                        type='button'
+                        className='ml-1 flex h-10 w-10 items-center justify-center rounded-full focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white'
+                        onClick={() => setSidebarOpen(false)}>
+                        <span className='sr-only'>Close sidebar</span>
+                        <XMarkIcon className='h-6 w-6 text-white' aria-hidden='true' />
+                      </button>
+                    </div>
+                  </Transition.Child>
+                  <div className='flex flex-shrink-0 items-center px-4'>
+                    <Logo />
+                  </div>
+                  <div className='mt-5 h-0 flex-1 overflow-y-auto'>
+                    <SideMenu />
+                  </div>
+                </Dialog.Panel>
+              </Transition.Child>
+              <div className='w-14 flex-shrink-0' aria-hidden='true'>
+                {/* Dummy element to force sidebar to shrink to fit close icon */}
+              </div>
+            </div>
+          </Dialog>
+        </Transition.Root>
+
+        <div className='hidden md:fixed md:inset-y-0 md:flex md:w-64 md:flex-col border-r border-gray-700'>
+          <div className='flex flex-grow flex-col overflow-y-auto bg-endnight pt-5'>
+            <div className='flex flex-shrink-0 items-center px-6'>
+              <Logo />
+            </div>
+            <div className='mt-8 flex flex-1 flex-col justify-between'>
+              <SideMenu />
+            </div>
+          </div>
+        </div>
+
+        <div className='flex flex-1 flex-col md:pl-64'>
+          <div className='top-0 z-10 flex h-16 flex-shrink-0 bg-midnight'>
+            <div className='flex flex-1 items-center pl-6'>
+              <div className='sm:hidden'>
+                <Logo />
+              </div>
+            </div>
+            <NetworkSwitch />
+            <UserAccount />
+          </div>
+
+          <main>
+            <div className={`p-6`}>{props.children}</div>
+          </main>
+        </div>
+      </div>
+
+      <MenuBottom />
+    </>
+  );
+}
diff --git a/src/app/admin/page.tsx b/src/app/admin/page.tsx
@@ -0,0 +1,7 @@
+import React from 'react'
+
+export default function page() {
+  return (
+    <div>adming true</div>
+  )
+}