Mock data for graphql

next.config.js

@@ -10,4 +10,7 @@ module.exports = {
       },
     ]
   },
+  images: {
+    domains: ['cloudflare-ipfs.com']
+  }
 }

package.json

@@ -12,15 +12,19 @@
     "@emotion/react": "11",
     "@emotion/styled": "11",
     "@ethersproject/providers": "^5.6.8",
+    "@faker-js/faker": "^7.6.0",
     "@gammaswap/v1-core": "^0.1.12",
-    "@gammaswap/v1-periphery": "^0.1.9",
+    "@gammaswap/v1-periphery": "^0.1.10",
     "@graphprotocol/client-cli": "^2.2.12",
+    "@graphql-tools/mock": "^8.7.6",
+    "@graphql-tools/schema": "^9.0.4",
     "@headlessui/react": "^1.6.4",
     "@heroicons/react": "^1.0.6",
     "@uniswap/v2-core": "^1.0.1",
     "@uniswap/v2-periphery": "^1.1.0-beta.0",
     "@walletconnect/web3-provider": "^1.7.8",
     "axios": "^1.1.2",
+    "casual": "^1.6.2",
     "dotenv": "^16.0.1",
     "erc-20-abi": "^1.0.0",
     "ethers": "^5.6.8",

pages/pools/index.tsx

@@ -8,8 +8,9 @@ import { usePoolsHandler } from "../../src/hooks/usePoolsHandler"
 import { PoolsOverviewTable } from "../../src/components/Pools/PoolsOverviewTable"
 
 const Pools: NextPage = () => {
-  const { pools, latestPoolsData } = usePoolsHandler()
+  const { pools, latestPoolsData, mockData } = usePoolsHandler()
   const [selectedPoolData, setSelectedPoolData] = useState<PoolData>()
+  console.log(mockData)
 
   const style = {
     wrapper: "w-full h-full flex justify-center text-neutrals-100",
@@ -74,7 +75,7 @@ const Pools: NextPage = () => {
             ))}
           </div>
         </div>
-        <PoolsOverviewTable poolsData={latestPoolsData} />
+        <PoolsOverviewTable poolsData={latestPoolsData} mockData={mockData} />
       </div>
     </div>
   )

src/components/Pools/PoolTableRow.tsx

@@ -1,44 +1,83 @@
-import React from "react"
-import Image from "next/image"
-import { usePoolsData } from "../../context/PoolsDataContext"
+import React from 'react'
+import Image from 'next/image'
+import { usePoolsData } from '../../context/PoolsDataContext'
 
-export const PoolTableRow = () => {
+export const PoolTableRow = ({ poolData, mockData }: any) => {
   const { selectedPoolData } = usePoolsData()
-
+  console.log(mockData)
   const style = {
-    poolsOverviewTableRow: "pt-4 px-2 rounded-lg hover:bg-neutrals-300 hover:bg-opacity-30 cursor-pointer",
-    poolsOverviewTableContent: "flex space-x-32",
-    poolsOverviewTableRowPrimary: "flex space-x-6",
-    poolsOverviewTableRowItem: "",
-    poolsOverviewTableRowPool: "flex space-x-2",
-    poolsOverviewTableRowPoolIcons: "",
-    poolsOverviewTableRowPoolIcon: "",
-    poolsOverviewTableRowSecondary: "flex space-x-20 ml-auto",
-    poolsOverviewTableLine: "w-full h-[0.10rem] bg-neutrals-700 opacity-40 mt-4",
+    poolsOverviewTableRow: 'pt-4 px-2 rounded-lg hover:bg-neutrals-300 hover:bg-opacity-30 cursor-pointer',
+    poolsOverviewTableContent: 'flex space-x-32',
+    poolsOverviewTableRowPrimary: 'flex space-x-6',
+    poolsOverviewTableRowItem: '',
+    poolsOverviewTableRowPool: 'flex space-x-2',
+    poolsOverviewTableRowPoolIcons: '',
+    poolsOverviewTableRowPoolIcon: '',
+    poolsOverviewTableRowSecondary: 'flex space-x-20 ml-auto',
+    poolsOverviewTableLine: 'w-full h-[0.10rem] bg-neutrals-700 opacity-40 mt-4',
   }
 
   return (
-    <div className={style.poolsOverviewTableRow}>
-      <div className={style.poolsOverviewTableContent}>
-        <div className={style.poolsOverviewTableRowPrimary}>
-          <p className={style.poolsOverviewTableRowItem}>1</p>
-          <div className={style.poolsOverviewTableRowPool}>
-            <div className={style.poolsOverviewTableRowPoolIcons}>
-              <Image src={""} className={style.poolsOverviewTableRowPoolIcon} width={""} height={""} />
-              <Image src={""} className={style.poolsOverviewTableRowPoolIcon} width={""} height={""} />
+    <>
+      {poolData ? (
+        <div className={style.poolsOverviewTableRow}>
+          <div className={style.poolsOverviewTableContent}>
+            <div className={style.poolsOverviewTableRowPrimary}>
+              <p className={style.poolsOverviewTableRowItem}>1</p>
+              <div className={style.poolsOverviewTableRowPool}>
+                <div className={style.poolsOverviewTableRowPoolIcons}>
+                  <Image src={''} className={style.poolsOverviewTableRowPoolIcon} width={''} height={''} />
+                  <Image src={''} className={style.poolsOverviewTableRowPoolIcon} width={''} height={''} />
+                </div>
+                <p className={style.poolsOverviewTableRowItem}>USDC/ETH</p>
+              </div>
+            </div>
+
+            <div className={style.poolsOverviewTableRowSecondary}>
+              <p className={style.poolsOverviewTableRowItem}>1.34m</p>
+              <p className={style.poolsOverviewTableRowItem}>3.34%</p>
+              <p className={style.poolsOverviewTableRowItem}>432k</p>
+              <p className={style.poolsOverviewTableRowItem}>2.22%</p>
             </div>
-            <p className={style.poolsOverviewTableRowItem}>USDC/ETH</p>
           </div>
+          <div className={style.poolsOverviewTableLine}></div>
         </div>
-
-        <div className={style.poolsOverviewTableRowSecondary}>
-          <p className={style.poolsOverviewTableRowItem}>1.34m</p>
-          <p className={style.poolsOverviewTableRowItem}>3.34%</p>
-          <p className={style.poolsOverviewTableRowItem}>432k</p>
-          <p className={style.poolsOverviewTableRowItem}>2.22%</p>
+      ) : mockData ? (
+        <div className={style.poolsOverviewTableRow}>
+          <div className={style.poolsOverviewTableContent}>
+            <div className={style.poolsOverviewTableRowPrimary}>
+              <p className={style.poolsOverviewTableRowItem}>{mockData.id}</p>
+              <div className={style.poolsOverviewTableRowPool}>
+                <div className={style.poolsOverviewTableRowPoolIcons}>
+                  <Image
+                    src={mockData.tokenAvatar1}
+                    className={style.poolsOverviewTableRowPoolIcon}
+                    width={20}
+                    height={20}
+                  />
+                  <Image
+                    src={mockData.tokenAvatar2}
+                    className={style.poolsOverviewTableRowPoolIcon}
+                    width={20}
+                    height={20}
+                  />
+                </div>
+                <p className={style.poolsOverviewTableRowItem}>
+                  {mockData.token1}/{mockData.token2}
+                </p>
+              </div>
+            </div>
+
+            <div className={style.poolsOverviewTableRowSecondary}>
+              <p className={style.poolsOverviewTableRowItem}>{mockData.totalSupply}</p>
+              <p className={style.poolsOverviewTableRowItem}>{mockData.supplyAPY}</p>
+              <p className={style.poolsOverviewTableRowItem}>{mockData.totalBorrowed}</p>
+              <p className={style.poolsOverviewTableRowItem}>{mockData.borrowAPY}</p>
+            </div>
+          </div>
+          <div className={style.poolsOverviewTableLine}></div>
         </div>
-      </div>
-      <div className={style.poolsOverviewTableLine}></div>
-    </div>
+      ) : null}
+    </>
   )
 }

src/components/Pools/PoolsOverviewTable.tsx

@@ -1,46 +1,46 @@
-import { NextPage } from "next"
-import Link from "next/link"
-import { ArrowLeftIcon, ArrowRightIcon } from "@heroicons/react/outline"
-import { PoolTableRow } from "./PoolTableRow"
+import { NextPage } from 'next'
+import Link from 'next/link'
+import { ArrowLeftIcon, ArrowRightIcon } from '@heroicons/react/outline'
+import { PoolTableRow } from './PoolTableRow'
 import { Pool, PoolData } from '../../../.graphclient'
-import { BigNumber } from "ethers"
+import { BigNumber } from 'ethers'
 import { LinkWrapper } from '../../components/LinkWrapper'
 
 interface PoolsOverviewTableProps {
   poolsData: Array<PoolData>
+  mockData: Array<any>
 }
 
-export const PoolsOverviewTable = ({ poolsData }: PoolsOverviewTableProps) => {
+export const PoolsOverviewTable = ({ poolsData, mockData }: PoolsOverviewTableProps) => {
   const style = {
-    poolsOverviewContainer: "font-normal flex flex-col space-y-2",
-    poolsOverviewHeader: "text-neutrals-600 font-medium",
-    poolsOverviewTable: "flex flex-col bg-neutrals-800 pt-4 px-3 rounded-lg drop-shadow-md",
-    poolsOverviewTableHeader: "",
-    poolsOverviewTableHeaderContent: "flex",
-    poolsOverviewTableHeaderPrimary: "flex space-x-6",
-    poolsOverviewTableHeaderItem: "text-neutrals-300",
-    poolsOverviewTableHeaderSecondary: "flex space-x-6 ml-auto",
-    poolsOverviewTableLine: "w-full h-[0.10rem] bg-neutrals-700 opacity-40 mt-2",
-    poolsOverviewPagination: "py-4 flex justify-center items-center space-x-5 text-neutrals-400",
-    poolsOverviewPaginationPreviousArrow: "",
-    arrow: "w-4 h-4",
-    poolsOverviewPaginationPage: "text-neutrals-100 text-sm",
-    poolsOverviewPaginationNextArrow: "",
+    poolsOverviewContainer: 'font-normal flex flex-col space-y-2',
+    poolsOverviewHeader: 'text-neutrals-600 font-medium',
+    poolsOverviewTable: 'flex flex-col bg-neutrals-800 pt-4 px-3 rounded-lg drop-shadow-md',
+    poolsOverviewTableHeader: '',
+    poolsOverviewTableHeaderContent: 'flex',
+    poolsOverviewTableHeaderPrimary: 'flex space-x-6',
+    poolsOverviewTableHeaderItem: 'text-neutrals-300',
+    poolsOverviewTableHeaderSecondary: 'flex space-x-6 ml-auto',
+    poolsOverviewTableLine: 'w-full h-[0.10rem] bg-neutrals-700 opacity-40 mt-2',
+    poolsOverviewPagination: 'py-4 flex justify-center items-center space-x-5 text-neutrals-400',
+    poolsOverviewPaginationPreviousArrow: '',
+    arrow: 'w-4 h-4',
+    poolsOverviewPaginationPage: 'text-neutrals-100 text-sm',
+    poolsOverviewPaginationNextArrow: '',
   }
 
   return (
     <div className={style.poolsOverviewContainer}>
       <h1 className={style.poolsOverviewHeader}>Top Pools</h1>
       <div className={style.poolsOverviewTable}>
-
         {/* Table Header */}
         <div className={style.poolsOverviewTableHeader}>
           <div className={style.poolsOverviewTableHeaderContent}>
             <div className={style.poolsOverviewTableHeaderPrimary}>
               <p className={style.poolsOverviewTableHeaderItem}>#</p>
               <p className={style.poolsOverviewTableHeaderItem}>Pool</p>
             </div>
-            
+
             <div className={style.poolsOverviewTableHeaderSecondary}>
               <p className={style.poolsOverviewTableHeaderItem}>Total Supply</p>
               <p className={style.poolsOverviewTableHeaderItem}>Supply APY</p>
@@ -52,33 +52,37 @@ export const PoolsOverviewTable = ({ poolsData }: PoolsOverviewTableProps) => {
         </div>
 
         {/* Table Row */}
-        {poolsData.map((poolData, idx) => {
-          return (
-            <LinkWrapper
-              key={idx}
-              pathName={`/pools/[poolAddress]`}
-              poolData={poolData}
-            >
-              <PoolTableRow />
-            </LinkWrapper>
-          )
-        })}
-
+        {poolsData.length > 0
+          ? poolsData.map((poolData, idx) => {
+              return (
+                <LinkWrapper key={idx} pathName={`/pools/[poolAddress]`} poolData={poolData}>
+                  <PoolTableRow poolData={poolData} mockData={null} />
+                </LinkWrapper>
+              )
+            })
+          : mockData
+          ? mockData.map((mock, idx) => {
+              return (
+                <LinkWrapper key={idx} pathName={`/pools/[poolAddress]`} poolData={mock}>
+                  <PoolTableRow mockData={mock} poolData={null} />
+                </LinkWrapper>
+              )
+            })
+          : null}
+
         {/* TODO: Pagination Section */}
         <div className={style.poolsOverviewPagination}>
-
           <div className={style.poolsOverviewPaginationPreviousArrow}>
             <ArrowLeftIcon className={style.arrow} />
           </div>
-          
+
           <div className={style.poolsOverviewPaginationPage}>Page 1 of 5</div>
-          
+
           <div className={style.poolsOverviewPaginationNextArrow}>
             <ArrowRightIcon className={style.arrow} />
           </div>
-
         </div>
       </div>
     </div>
   )
-}
+}

src/hooks/useCreatePoolHandler.tsx

@@ -4,7 +4,7 @@ import { WalletContext } from '../../src/context/WalletContext'
 import GammaPoolFactory from '@gammaswap/v1-core/artifacts/contracts/GammaPoolFactory.sol/GammaPoolFactory.json'
 import { calcPoolKey } from '../../src/utils/getSmartContract'
 import Protocols, { Protocol } from '../components/Protocols'
-import {notifySuccess, notifyError} from '../../src/hooks/useNotification'
+import { notifySuccess, notifyError } from '../../src/hooks/useNotification'
 
 export const useCreatePoolHandler = () => {
   const [gammaPoolFactory, setGammaPoolFactory] = useState<Contract | null>(null)
@@ -38,7 +38,7 @@ export const useCreatePoolHandler = () => {
   const createPool = async () => {
     try {
       if (!accountInfo || !gammaPoolFactory) {
-        notifyError("Please connect your wallet.")
+        notifyError('Please connect your wallet.')
         return
       }
 
@@ -64,7 +64,7 @@ export const useCreatePoolHandler = () => {
       notifySuccess(msg)
       resetParameters()
     } catch (e) {
-      let errorMsg = "Pool not created: "
+      let errorMsg = 'Pool not created: '
       if (typeof e === 'string') {
         notifyError(errorMsg + e)
       } else if (e instanceof Error) {
@@ -88,6 +88,6 @@ export const useCreatePoolHandler = () => {
     cfmmAddr,
     setCfmmAddr,
     protocol,
-    setProtocol
+    setProtocol,
   }
 }