init

.env.example

@@ -0,0 +1 @@
+NEXT_PUBLIC_BANK_ADDRESS=

.eslintrc.json

@@ -0,0 +1,44 @@
+{
+    "env": {
+        "browser": true,
+        "es2021": true,
+        "node": true
+    },
+    "extends": [
+        "plugin:react/recommended",
+        "standard",
+        "eslint:recommended",
+        "plugin:@typescript-eslint/recommended"
+    ],
+    "parser": "@typescript-eslint/parser",
+    "parserOptions": {
+        "ecmaFeatures": {
+            "jsx": true
+        },
+        "ecmaVersion": "latest",
+        "sourceType": "module"
+    },
+    "plugins": [
+        "react",
+        "@typescript-eslint"
+    ],
+    "rules": {
+        "semi": "off",
+        "@typescript-eslint/semi": ["error", "never"],
+        "indent": "off",
+        "@typescript-eslint/indent": ["error", 2],
+        "quotes": "off",
+        "@typescript-eslint/quotes": ["error", "double"],
+        "react/react-in-jsx-scope": "off",
+        "@typescript-eslint/no-explicit-any": ["off"],
+        "import/order": [
+          "error",
+          {
+            "groups": ["builtin", "external", "parent", "sibling", "index"],
+            "alphabetize": {
+              "order": "asc"
+            }
+          }
+        ]
+    }
+}

.gitignore

@@ -0,0 +1,40 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# local env files
+.env*.local
+.env
+.env.development
+.env.production
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+
+.package-lock.json

.vercelignore

@@ -0,0 +1,4 @@
+hardhat/*
+!hardhat/typechain
+!hardhat/artifacts
+defi-bank-graph

.vscode/settings.json

@@ -0,0 +1,14 @@
+{
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": true,
+    "source.fixAll": true
+  },
+  "eslint.validate": [
+    "javascript",
+    "javascriptreact",
+    "typescript",
+    "typescriptreact",
+  ],
+  "editor.tabSize": 2,
+  "editor.detectIndentation": false
+}

README.md

@@ -0,0 +1,53 @@
+<h1 align="center">Welcome to DefiBank 👋</h1>
+<p>
+  <img alt="Version" src="https://img.shields.io/badge/version-0.1.0-blue.svg?cacheSeconds=2592000" />
+  <a href="https://twitter.com/albertocruzdev" target="_blank">
+    <img alt="Twitter: albertocruzdev" src="https://img.shields.io/twitter/follow/albertocruzdev.svg?style=social" />
+  </a>
+</p>
+
+> Defi Bank is a dapp created for ethereum 101 course of cadena.dev
+
+<a href="https://defibank.vercel.app/" target="_blank">
+    <img alt="DefiBank: Landing" src="public/assets/LandingPage.png" />
+</a>
+
+### ✨ [Demo](https://defibank.vercel.app/)
+
+## Install
+
+```sh
+npm install
+```
+
+## Usage
+
+```sh
+npm run dev
+```
+
+## Tech
+- NextJS
+- React
+- TypeScript
+- TailwindCSS
+- GraphQL
+- The Graph
+- Solidity
+- Hardhat
+
+## Author
+
+👤 **Alberto Cruz Luis**
+
+* Website: https://www.albertocruzluis.com/
+* Twitter: [@https:\/\/twitter.com\/albertocruzdev](https://twitter.com/https:\/\/twitter.com\/albertocruzdev)
+* Github: [@https:\/\/github.com\/AlbertoCruzLuis](https://github.com/https:\/\/github.com\/AlbertoCruzLuis)
+* LinkedIn: [@https:\/\/www.linkedin.com\/in\/albertocruzluis\/](https://linkedin.com/in/https:\/\/www.linkedin.com\/in\/albertocruzluis\/)
+
+## Show your support
+
+Give a ⭐️ if this project helped you!
+
+***
+_This README was generated with ❤️ by [readme-md-generator](https://github.com/kefranabg/readme-md-generator)_

animations/index.tsx

@@ -0,0 +1,3 @@
+import { sideAnimationRightVariants } from "animations/sideAnimationRight"
+
+export { sideAnimationRightVariants }

animations/sideAnimationRight/index.tsx

@@ -0,0 +1,13 @@
+export const sideAnimationRightVariants = {
+  hidden: {
+    x: "-100vw"
+  },
+  visible: {
+    x: "100vw",
+    transition: {
+      ease: "linear",
+      duration: 25,
+      repeat: Infinity
+    }
+  }
+}

components/Background/index.tsx

@@ -0,0 +1,13 @@
+import { FC, ReactNode } from "react"
+
+type BackgroundProps = {
+  children: ReactNode
+}
+
+export const Background: FC<BackgroundProps> = ({ children }) => {
+  return (
+    <div className="bg-neutral-900">
+      {children}
+    </div>
+  )
+}

components/ContractCard/index.tsx

@@ -0,0 +1,81 @@
+import { BANK_ADDRESS } from "config"
+import { forwardRef, useState } from "react"
+import CopyToClipboard from "react-copy-to-clipboard"
+import toast from "react-hot-toast"
+import { AiOutlineLoading3Quarters } from "react-icons/ai"
+import { FiMinusSquare, FiPlusSquare } from "react-icons/fi"
+import { UseMutationResult } from "react-query"
+
+interface IContractCardProps {
+  totalValueLocked: string | undefined,
+  totalBalance: string | undefined,
+  depositMutation: UseMutationResult<any, any, string, void>,
+  withdrawMutation: UseMutationResult<any, any, string, void>,
+  ref: any,
+}
+
+export const ContractCard = forwardRef<HTMLDivElement, IContractCardProps>(({ totalValueLocked, totalBalance, depositMutation, withdrawMutation }, ref) => {
+  const [depositAmount, setDepositAmount] = useState(0)
+  const [withdrawAmount, setWithdrawAmount] = useState(0)
+
+  const handleDeposit = (event: any) => {
+    setDepositAmount(event.target.value)
+  }
+
+  const handleWithdraw = (event: any) => {
+    setWithdrawAmount(event.target.value)
+  }
+
+  return (
+    <div ref={ref} className="flex flex-col max-w-md gap-6 p-5 mx-auto tracking-wide bg-black border rounded-md shadow-2xl xs:rotate-0 -rotate-2 border-neutral-600 font-audiowide">
+      <div className="flex flex-wrap justify-between">
+        <CopyToClipboard
+          text={BANK_ADDRESS || ""}
+          onCopy={() => toast.success("bank contract copied")}>
+          <button className="transition-all border-b border-transparent hover:border-white">
+            <span className="text-white ">CONTRACT</span>
+          </button>
+        </CopyToClipboard>
+        <span className="text-white ">TVL {totalValueLocked} ETH</span>
+      </div>
+      <div>
+        <label className="block mb-2 text-xs font-bold text-neutral-600">
+            Deposit Balance {totalBalance}
+        </label>
+        <div className="grid grid-cols-5 gap-4">
+          <input
+            className="col-span-2 px-4 py-3 text-white rounded outline-none appearance-none placeholder:text-white bg-neutral-600 focus:bg-neutral-500"
+            type="number"
+            placeholder="0.0"
+            onChange={handleDeposit} />
+          <button className="flex items-center justify-center col-span-3 gap-2 p-2 px-4 transition-all bg-green-500 rounded-md hover:scale-105"
+            onClick={() => depositMutation.mutate(depositAmount.toString())}>
+            <span className="font-semibold">Deposit ETH</span>
+            { depositMutation.isLoading && <AiOutlineLoading3Quarters className="animate-spin" size="1.2rem" /> }
+            { !depositMutation.isLoading && <FiPlusSquare size="1.2rem" /> }
+          </button>
+        </div>
+      </div>
+      <div>
+        <label className="block mb-2 text-xs font-bold text-neutral-600">
+          Withdraw Balance
+        </label>
+        <div className="grid grid-cols-5 gap-4">
+          <input
+            className="col-span-2 px-4 py-3 text-white rounded outline-none appearance-none placeholder:text-white bg-neutral-600 focus:bg-neutral-500"
+            type="number"
+            placeholder="0.0"
+            onChange={handleWithdraw} />
+          <button className="flex items-center justify-center col-span-3 gap-2 p-2 px-4 transition-all bg-green-500 rounded-md hover:scale-105"
+            onClick={() => withdrawMutation.mutate(withdrawAmount.toString())}>
+            <span className="font-semibold">Withdraw ETH</span>
+            { withdrawMutation.isLoading && <AiOutlineLoading3Quarters className="animate-spin" size="1.2rem" /> }
+            { !withdrawMutation.isLoading && <FiMinusSquare size="1.2rem" /> }
+          </button>
+        </div>
+      </div>
+    </div>
+  )
+})
+
+ContractCard.displayName = "ContractCard"

components/CustomLink/index.tsx

@@ -0,0 +1,27 @@
+import Link from "next/link"
+import { FC } from "react"
+
+interface ICustomLinkProps {
+  href: string,
+  className?: string,
+  rest?: any
+}
+
+export const CustomLink: FC<ICustomLinkProps> = ({ href, ...rest }) => {
+  const isInternalLink = href && href.startsWith("/")
+  const isAnchorLink = href && href.startsWith("#")
+
+  if (isInternalLink) {
+    return (
+      <Link href={href}>
+        <a className='text-gray-900' {...rest} />
+      </Link>
+    )
+  }
+
+  if (isAnchorLink) {
+    return <a className='text-gray-900' href={href} {...rest} />
+  }
+
+  return <a className='text-gray-900' target="_blank" rel="noopener noreferrer" href={href} {...rest} />
+}

components/Footer/index.tsx

@@ -0,0 +1,20 @@
+
+import { BsTwitter, BsGithub } from "react-icons/bs"
+import { CustomLink } from "../CustomLink"
+
+export const Footer = () => {
+  return (
+    <div className="flex flex-col gap-2 p-4">
+      <div className='flex items-center justify-center gap-6'>
+        <hr className='w-10 bg-white' />
+        <CustomLink href="https://twitter.com/intent/user?screen_name=albertocruzdev">
+          <BsTwitter color='white' />
+        </CustomLink>
+        <CustomLink href="https://github.com/AlbertoCruzLuis">
+          <BsGithub color='white' />
+        </CustomLink>
+        <hr className='w-10 bg-white' />
+      </div>
+    </div>
+  )
+}

components/Logo/index.tsx

@@ -0,0 +1,16 @@
+import { FC } from "react"
+
+type LogoProps = {
+  size?: string
+}
+
+export const Logo: FC<LogoProps> = ({ size = "text-lg" }) => {
+  return (
+    <div className={`flex items-center ${size} gap-1 font-audiowide tracking-wide`}>
+      <span className="font-semibold text-white ">DEFI</span>
+      <div className="pl-2 pr-4 bg-green-500 rounded-r-full">
+        <span className="font-semibold text-neutral-800">BANK</span>
+      </div>
+    </div>
+  )
+}

components/Navbar/NavItem/index.tsx

@@ -0,0 +1,39 @@
+import { CustomLink } from "components/CustomLink"
+import { useAuth } from "hooks/useAuth"
+import { FC } from "react"
+import toast from "react-hot-toast"
+
+type NavItemProps = {
+  name: string,
+  url: string,
+  isActive: boolean,
+  isPrivate: boolean,
+  activeStyle?: string,
+  disableStyle?: string
+}
+
+export const NavItem: FC<NavItemProps> = ({ name, url, isActive, isPrivate, activeStyle = "border-b-2", disableStyle = "" }) => {
+  const divStyle = isActive ? `${activeStyle} border-solid border-white` : `${disableStyle}`
+  const linkStyle = isActive ? "text-white" : "text-gray-400"
+
+  const { auth } = useAuth(isPrivate)
+
+  const handleAuth = () => {
+    toast.error("Log In with your metamask for access to this page")
+  }
+
+  return (
+    <div className={divStyle}>
+      { auth &&
+        <CustomLink href={url} className={linkStyle}>
+          <span>{name}</span>
+        </CustomLink>
+      }
+      { !auth &&
+        <button className={linkStyle} onClick={handleAuth} >
+          <span>{name}</span>
+        </button>
+      }
+    </div>
+  )
+}