feat(): remove additional deps

README.md

@@ -1,14 +1,12 @@
 # CRA Started with Smart Contract development.
 
-Includes a working demo of client and smart contract integrated together.
+Includes a working demo of client and smart contract integrated together. Clean with no additional dependencies other than developer tools.
 
 ## Client
 
 - Create React App
-- Styles - Tailwind + Chakra UI You can delete chakra or tailwind. Up to you
 - Web3 - Quiver (https://www.npmjs.com/package/@raidguild/quiver)
 - DX - Typescript, eslint, prettier
-- Utilities - Moment.js, react-hot-toast, lodash, date-fns, etc.
 
 ## Smart Contract
 
@@ -22,9 +20,11 @@ Includes a working demo of client and smart contract integrated together.
 
 1. Clone the repo
 2. In both sc and client folders install deps (yarn install)
-3. In the sc directory, look at the package.json and remove the network in the deploy and verify scripts to deploy on hardhart.
-4. Run a hardhat node (npx hardhat node)
-5. Deploy to hardhat
-6. In the client folder, start the application
-7. In the Home page /components/pages/Home enter the deployed contract address
-8. Now you should be able to connect and see the message in the UI.
+3. In the sc directory -
+   - Run a hardhat node `yarn hardhat`
+   - Deploy to hardhat network `yarn deploy`
+   - Copy the address from console.
+4. In the client folder
+   - Start application `yarn start`
+   - In the Home page /components/pages/Home enter the deployed contract address
+5. Now you should be able to connect and see the message in the UI.

client/craco.config.js

@@ -10,7 +10,7 @@ module.exports = {
   },
   style: {
     postcss: {
-      plugins: [require('tailwindcss'), require('autoprefixer')],
+      plugins: [],
     },
   },
 }

client/package.json

@@ -3,28 +3,14 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@chakra-ui/react": "^1.6.6",
-    "@emotion/react": "^11",
-    "@emotion/styled": "^11",
-    "@headlessui/react": "^1.4.0",
     "@raidguild/quiver": "^0.9.0",
     "@walletconnect/web3-provider": "^1.6.6",
-    "date-fns": "^2.23.0",
     "ethers": "^5.6.4",
-    "framer-motion": "^4",
-    "graphql": "^15.5.1",
-    "js-base64": "^3.7.2",
-    "lodash": "^4.17.21",
-    "moment": "^2.29.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "react-hook-form": "^7.12.2",
-    "react-hot-toast": "^2.1.1",
-    "react-icons": "^4.2.0",
     "react-router-dom": "^5.3.0",
     "react-scripts": "4.0.3",
-    "swr": "^0.5.6",
-    "uuid": "^8.3.2",
+    "swr": "^1.3.0",
     "walletlink": "^2.1.11",
     "web-vitals": "^1.0.1",
     "web3modal": "^1.9.6"
@@ -56,22 +42,17 @@
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.10",
     "@types/jest": "^26.0.15",
-    "@types/lodash": "^4.14.173",
     "@types/node": "^12.0.0",
     "@types/react": "^17.0.0",
     "@types/react-dom": "^17.0.0",
     "@types/react-router-dom": "^5.1.8",
-    "@types/uuid": "^8.3.1",
     "@typescript-eslint/eslint-plugin": "^4.31.2",
     "@typescript-eslint/parser": "^4.31.2",
-    "autoprefixer": "^9",
     "eslint": "^7.32.0",
     "eslint-config-universe": "^7.0.1",
     "husky": "^7.0.2",
-    "postcss": "^7",
     "prettier": "^2.4.1",
     "pretty-quick": "^3.1.1",
-    "tailwindcss": "npm:@tailwindcss/postcss7-compat",
     "ts-unused-exports": "^7.0.3",
     "typescript": "^4.1.2"
   },

client/src/App.tsx

@@ -1,10 +1,6 @@
-import { Link } from 'react-router-dom'
 import { SWRConfig } from 'swr'
 
-import './App.css'
 import Routes from './Routes'
-import { ConnectWallet } from './components'
-import { H1 } from './components/atoms'
 function App() {
   return (
     <SWRConfig
@@ -14,24 +10,7 @@ function App() {
         revalidateOnFocus: false,
       }}
     >
-      <div className="flex flex-col h-full bg-background-brand text-white">
-        <div className=" flex w-full z-10 fixed">
-          <div className="p-4 flex w-full justify-between">
-            <div>
-              <Link to="/">
-                <H1>Logo</H1>
-              </Link>
-            </div>
-            <div className="flex-1" />
-            <ConnectWallet />
-          </div>
-        </div>
-        <div className="min-h-screen flex-1 overflow-y-auto">
-          <div className="mt-20 flex flex-col xl:max-w-7xl lg:max-w-5xl md:max-w-4xl m-auto">
-            <Routes />
-          </div>
-        </div>
-      </div>
+      <Routes />
     </SWRConfig>
   )
 }

client/src/components/ConnectWallet.tsx

@@ -1,16 +1,14 @@
 import { useWallet } from '@raidguild/quiver'
 import { FC } from 'react'
-import { HiX } from 'react-icons/hi'
 
 import { formatAddress } from '../utils/methods'
-import { Button } from './atoms'
 export const ConnectWallet: FC = () => {
   const { connectWallet, isConnecting, isConnected, disconnect, address } =
     useWallet()
   return (
     <>
       {!isConnected && (
-        <Button
+        <button
           id="button"
           disabled={isConnecting}
           onClick={() => !isConnected && connectWallet()}
@@ -20,12 +18,12 @@ export const ConnectWallet: FC = () => {
             : isConnected
             ? 'Connected'
             : 'Connect'}
-        </Button>
+        </button>
       )}
       {isConnected && (
         <div className="flex items-center">
           <div>{formatAddress(address)}</div>
-          <HiX onClick={() => disconnect()} />
+          <button onClick={() => disconnect()}>Disconnect</button>
         </div>
       )}
     </>

client/src/components/index.ts

@@ -1,2 +1 @@
-export * from './Error'
 export * from './ConnectWallet'

client/src/components/pages/Home.tsx

@@ -2,17 +2,18 @@ import { useReadContract, useTypedContract } from '@raidguild/quiver'
 import { FC } from 'react'
 
 import { Inbox__factory } from '../../types/typechain'
-import { H1 } from '../atoms'
+import { ConnectWallet } from '../ConnectWallet'
 
 export const Home: FC = () => {
-  const { contract } = useTypedContract('', Inbox__factory)
+  const { contract } = useTypedContract(
+    '0x5FbDB2315678afecb367f032d93F642f64180aa3',
+    Inbox__factory
+  )
   const { response: message } = useReadContract(contract, 'message', [])
   return (
-    <div className="space-y-8 p-4">
-      <div className="space-y-4">
-        <H1>Home</H1>
-        {message}
-      </div>
-    </div>
+    <>
+      <ConnectWallet />
+      {message}
+    </>
   )
 }

client/src/index.css

@@ -1,7 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-/* HEADING */
-
-@import url('https://fonts.googleapis.com/css2?family=Mulish:wght@200;300;400;500;600;700;800;900');

client/src/index.tsx

@@ -1,16 +1,13 @@
-import { ChakraProvider } from '@chakra-ui/react'
 import { WalletProvider, NetworkConfig } from '@raidguild/quiver'
 import WalletConnectProvider from '@walletconnect/web3-provider'
 import React from 'react'
 import ReactDOM from 'react-dom'
 import './index.css'
-import toast, { Toaster } from 'react-hot-toast'
 import { HashRouter as Router } from 'react-router-dom'
 import { IProviderOptions } from 'web3modal'
 
 import App from './App'
 import reportWebVitals from './reportWebVitals'
-import { theme } from './utils/theme'
 
 const SUPPORTED_NETWORKS: NetworkConfig = {
   '0x1': {
@@ -74,12 +71,6 @@ const DEFAULT_CHAIN_ID = '0x539' // Used to switch to if the user is on an unsup
 
 ReactDOM.render(
   <React.StrictMode>
-    <Toaster
-      position="top-center"
-      toastOptions={{
-        duration: 3000,
-      }}
-    />
     <WalletProvider
       web3modalOptions={web3modalOptions}
       networks={SUPPORTED_NETWORKS}
@@ -88,16 +79,14 @@ ReactDOM.render(
       // Optional but useful to handle events.
       handleModalEvents={(eventName, error) => {
         if (error) {
-          toast.error(error.message)
+          console.error(error.message)
         }
 
         console.log(eventName)
       }}
     >
       <Router>
-        <ChakraProvider theme={theme}>
-          <App />
-        </ChakraProvider>
+        <App />
       </Router>
     </WalletProvider>
   </React.StrictMode>,

client/src/utils/methods.ts

@@ -1,6 +1,5 @@
 import { BigNumber } from '@ethersproject/bignumber'
 import { formatUnits } from '@ethersproject/units'
-import moment, { Moment } from 'moment'
 import {
   Children,
   ElementType,
@@ -9,16 +8,6 @@ import {
   ReactNode,
 } from 'react'
 
-export const momentUTC = moment.utc
-
-export const formatDate = (
-  date: string | Date | undefined | Moment
-): string => {
-  if (date === undefined) {
-    return ''
-  }
-  return momentUTC(date).format('DD-MMM-YYYY')
-}
 // Join classes
 export const classNames = (...classes: string[]): string => {
   return classes.filter(Boolean).join(' ')