Merge pull request #12 from treejer/new-apollo-config

Upgrade Lens react hooks SDK to version 2

colors.ts

@@ -23,7 +23,7 @@ export type Colors = {
   [key in Color]: string;
 };
 
-export const colors: Colors = {
+const colors: Colors = {
   khakiDark: '#E5E7DB',
   tableBorder: '#BDBDBD',
   lightGreen: '#D3E4D0',
@@ -43,3 +43,5 @@ export const colors: Colors = {
   primaryBg: '#faf8f1',
   black: '#000000',
 };
+
+export default colors;

package.json

@@ -1,19 +1,23 @@
 {
   "name": "forest-feed",
-  "version": "0.1.4",
+  "version": "0.1.5",
   "private": true,
   "scripts": {
     "dev": "next dev",
     "build": "next build",
     "start": "next start",
-    "lint": "next lint"
+    "lint": "eslint . --ext .js,.ts,.tsx",
+    "lint:fix": "eslint . --fix --ext .js,.ts,.tsx",
+    "prettier": "prettier --check \"**/*.{js,ts,tsx,md}\"  --cache",
+    "prettier:fix": "prettier --write \"**/*.{js,ts,tsx,md}\"  --cache",
+    "typecheck": "tsc --pretty"
   },
   "dependencies": {
-    "@apollo/client": "3.7.17",
-    "@heroicons/react": "1.0.6",
+    "@heroicons/react": "2.0.18",
     "@hookform/resolvers": "3.1.1",
-    "@lens-protocol/react-web": "1.2.2",
-    "@lens-protocol/wagmi": "2.0.2",
+    "@lens-protocol/metadata": "^1.0.5",
+    "@lens-protocol/react-web": "2.0.0-alpha.19",
+    "@lens-protocol/wagmi": "3.0.0-alpha.16",
     "@rainbow-me/rainbowkit": "1.0.5",
     "@reduxjs/toolkit": "1.9.5",
     "@tanstack/react-query": "4.35.0",
@@ -26,13 +30,13 @@
     "@types/redux-persist": "4.3.1",
     "autoprefixer": "10.4.14",
     "axios": "1.4.0",
+    "clsx": "2.0.0",
     "eslint": "8.43.0",
-    "eslint-config-next": "14.0.0",
+    "eslint-config-next": "14.0.3",
     "framer-motion": "10.13.1",
-    "graphql": "16.7.1",
     "install": "0.13.0",
     "moment": "2.29.4",
-    "next": "14.0.0",
+    "next": "14.0.3",
     "next-international": "1.1.3",
     "next-redux-wrapper": "8.1.0",
     "nprogress": "0.2.0",
@@ -52,10 +56,11 @@
     "redux-persist-transform-filter": "0.0.22",
     "redux-saga": "1.2.3",
     "sass": "1.64.1",
-    "sharp": "0.32.6",
+    "sharp": "^0.32.6",
     "styled-components": "6.0.1",
     "sweetalert2": "11.7.27",
     "sweetalert2-react-content": "5.0.7",
+    "tailwind-merge": "2.0.0",
     "tailwindcss": "3.3.3",
     "typescript": "5.1.3",
     "viem": "1.2.11",

public/assets/images/index.ts

@@ -15,7 +15,7 @@ import OriginalLensLogo from './originalLensLogo.png';
 import PolygonMatic from './Polygon-MATIC.svg';
 import TreePng from './tree.png';
 import TreeSvg from './tree.svg';
-import Trees from './trees.svg';
+import Trees from './trees.png';
 import NotFoundSvg from './404.svg';
 
 export {

src/app/[locale]/kit/page.tsx

@@ -1,17 +1,49 @@
 'use client';
 
 import React, {useState} from 'react';
+import dynamic from 'next/dynamic';
+import {Hearts} from 'react-loader-spinner';
+
+import {ButtonVariant} from '@forest-feed/components/kit/Button';
 
-import {Button, ButtonVariant} from '@forest-feed/components/kit/Button';
-import {TextArea} from '@forest-feed/components/kit/TextArea';
-import {Uploader} from '@forest-feed/components/kit/Uploader';
-import {Spacer} from '@forest-feed/components/common/Spacer';
-import {ChangeLanguage} from '@forest-feed/components/kit/ChangeLanguage';
-import {AnimatedPage} from '@forest-feed/components/kit/Animated/AnimatedPage';
-import {Modal} from '@forest-feed/components/kit/Modal/Modal';
 import {showToast, ToastType} from '@forest-feed/utils/showToast';
 import {useI18n} from '@forest-feed/locales/client';
 
+const Button = dynamic(() => import('@forest-feed/components/kit/Button'), {
+  loading: () => <Hearts />,
+  ssr: false,
+});
+
+const TextArea = dynamic(() => import('@forest-feed/components/kit/TextArea'), {
+  loading: () => <Hearts />,
+  ssr: false,
+});
+
+const Uploader = dynamic(() => import('@forest-feed/components/kit/Uploader'), {
+  loading: () => <Hearts />,
+  ssr: false,
+});
+
+const Spacer = dynamic(() => import('@forest-feed/components/common/Spacer'), {
+  loading: () => <Hearts />,
+  ssr: false,
+});
+
+const ChangeLanguage = dynamic(() => import('@forest-feed/components/kit/ChangeLanguage'), {
+  loading: () => <Hearts />,
+  ssr: false,
+});
+
+const AnimatedPage = dynamic(() => import('@forest-feed/components/kit/Animated/AnimatedPage'), {
+  loading: () => <Hearts />,
+  ssr: false,
+});
+
+const Modal = dynamic(() => import('@forest-feed/components/kit/Modal/Modal'), {
+  loading: () => <Hearts />,
+  ssr: false,
+});
+
 function KitPage() {
   const [text, setText] = useState('');
   const [show, setShow] = useState(false);
@@ -20,35 +52,38 @@ function KitPage() {
   const t = useI18n();
 
   return (
-    <AnimatedPage>
-      <h1>{t('hello')}</h1>
-      <ChangeLanguage />
-      <Button text={t('learnMore')} />
-      <Button
-        variant={ButtonVariant.menu}
-        text={t('proceed')}
-        onClick={() => showToast({title: 'hello', message: 'learnMore', translate: true, type: ToastType.info})}
-      />
-      <Button variant={ButtonVariant.text} text={t('proceed')} />
-
-      <TextArea
-        value={text}
-        onChange={e => setText(e.target.value)}
-        placeholder={t('newCampaign.placeholder.writePost')}
-      />
-
-      <Uploader
-        preview
-        file={file}
-        onChange={e => setFile(e.target?.files?.[0] || null)}
-        onDrop={e => setFile(e.dataTransfer.files[0])}
-      />
-      <Button text={t('learnMore')} onClick={() => setShow(true)} />
-      <Spacer />
-      <Modal visible={show} onClose={() => setShow(false)}>
-        test
-      </Modal>
-    </AnimatedPage>
+    <>
+      Salam sobh bekheir
+      <AnimatedPage>
+        <h1>{t('hello')}</h1>
+        <ChangeLanguage />
+        <Button text={t('learnMore')} />
+        <Button
+          variant={ButtonVariant.menu}
+          text={t('proceed')}
+          onClick={() => showToast({title: 'hello', message: 'learnMore', translate: true, type: ToastType.info})}
+        />
+        <Button variant={ButtonVariant.text} text={t('proceed')} />
+
+        <TextArea
+          value={text}
+          onChange={e => setText(e.target.value)}
+          placeholder={t('newCampaign.placeholder.writePost')}
+        />
+
+        <Uploader
+          preview
+          file={file}
+          onChange={e => setFile(e.target?.files?.[0] || null)}
+          onDrop={e => setFile(e.dataTransfer.files[0])}
+        />
+        <Button text={t('learnMore')} onClick={() => setShow(true)} />
+        <Spacer />
+        <Modal visible={show} onClose={() => setShow(false)}>
+          test
+        </Modal>
+      </AnimatedPage>
+    </>
   );
 }
 

src/app/[locale]/layout.tsx

@@ -1,11 +1,13 @@
 import React from 'react';
 import {Inter} from 'next/font/google';
+import {Metadata} from 'next';
 
 import {Locale} from '@forest-feed/languages';
-import {AllTheProviders} from '@forest-feed/components/providers/AllTheProviders';
-import {Layout} from '@forest-feed/components/layout/Layout';
-import {HandleOnComplete} from '@forest-feed/lib/router-events';
+import AllTheProviders from '@forest-feed/components/providers/AllTheProviders';
+import Layout from '@forest-feed/components/layout/Layout';
+import HandleOnComplete from '@forest-feed/lib/router-events/wrapper';
 import {getScopedI18n} from '@forest-feed/locales/server';
+import cn from '@forest-feed/utils/tailwind';
 
 const inter = Inter({subsets: ['latin']});
 
@@ -14,7 +16,7 @@ export type RootLayoutProps = {
   children: React.ReactNode;
 };
 
-export async function generateMetadata() {
+export async function generateMetadata(): Promise<Metadata> {
   const t = await getScopedI18n('metadata');
 
   return {
@@ -30,7 +32,7 @@ export default async function LocaleLayout(props: RootLayoutProps) {
 
   return (
     <html lang={locale}>
-      <body className={`${inter.className} bg-primaryBg`} suppressHydrationWarning={true}>
+      <body className={cn(inter.className, 'bg-primaryBg')} suppressHydrationWarning={true}>
         <AllTheProviders locale={locale}>
           <Layout>{children}</Layout>
           <HandleOnComplete />

src/app/[locale]/my-campaigns/page.tsx

@@ -2,20 +2,30 @@
 
 import React, {useMemo} from 'react';
 
+import dynamic from 'next/dynamic';
 import Link from 'next/link';
 import moment from 'moment';
+import {Hearts} from 'react-loader-spinner';
 
-import {TableWrapper} from '@forest-feed/components/kit/Table/TableWrapper';
-import {RepostsBadge, RepostsStatus} from '@forest-feed/components/RepostsBadge/RepostsBadge';
+const AnimatedPage = dynamic(() => import('@forest-feed/components/kit/Animated/AnimatedPage'), {
+  loading: () => (
+    <div className={cn('flex w-full h-full justify-center items-center')}>
+      <Hearts />
+    </div>
+  ),
+  ssr: true,
+});
+import TableWrapper from '@forest-feed/components/kit/Table/TableWrapper';
+import RepostsBadge, {RepostsStatus} from '@forest-feed/components/RepostsBadge/RepostsBadge';
 import {Campaign, CampaignStatus} from '@forest-feed/types/campaigns';
-import {CampaignActivation} from '@forest-feed/components/CampaignActivation/CampaignActivation';
-import {useMediaQuery} from '@forest-feed/hooks/useMediaQuery';
-import {MyCampaignsRes} from '@forest-feed/webServices/campaign/myCampaigns';
-import {useQueryFetch} from '@forest-feed/hooks/useQueryFetch';
-import {useConfig} from '@forest-feed/redux/module/web3/web3.slice';
+import CampaignActivation from '@forest-feed/components/CampaignActivation/CampaignActivation';
+import useMediaQuery from '@forest-feed/hooks/useMediaQuery';
+import type {MyCampaignsRes} from '@forest-feed/webServices/campaign/myCampaigns';
+import useQueryFetch from '@forest-feed/hooks/useQueryFetch';
 import {useScopedI18n} from '@forest-feed/locales/client';
-import {AnimatedPage} from '@forest-feed/components/kit/Animated/AnimatedPage';
-import {AuthWrapper} from '@forest-feed/components/AuthWrapper/AuthWrapper';
+import AuthWrapper from '@forest-feed/components/AuthWrapper/AuthWrapper';
+import cn from '@forest-feed/utils/tailwind';
+import useConfig from '@forest-feed/hooks/useConfig';
 
 function MyCampaigns() {
   const {
@@ -61,7 +71,7 @@ function MyCampaigns() {
         accessor: 'publicationId',
         disableSortBy: true,
         Cell: ({value}) => (
-          <Link href={`${heyPublicationUrl}/${value}`} target="_blank" className="font-bold underline">
+          <Link href={`${heyPublicationUrl}/${value}`} target="_blank" className={cn('font-bold underline')}>
             {value}
           </Link>
         ),
@@ -107,8 +117,8 @@ function MyCampaigns() {
   );
 
   return (
-    <AnimatedPage className="h-full">
-      <AuthWrapper className="h-full">
+    <AnimatedPage className={cn('h-full')}>
+      <AuthWrapper className={cn('h-full')}>
         <TableWrapper<Campaign>
           initialState={{sortBy: [{id: 'createdAt', desc: true}]}}
           data={myCampaigns?.result.campaignList}