Feat/refactor frontend components

README.md

@@ -92,7 +92,7 @@ yarn install
 
 Copy `client/sample.env` to `client/.env`.
 
-Setup postgresql locally and create a database and update the `DATABASE_URL` in your `client/.env`
+Setup [postgresql locally](https://www.prisma.io/dataguide/postgresql/setting-up-a-local-postgresql-database) and create a database and update the `DATABASE_URL` in your `client/.env`
 
 _A typical postgres example looks like `postgres://user:secret@localhost:5432/ousdgovernance`._
 

client/components/LeaderboardTable.tsx

@@ -1,5 +1,5 @@
 import { ethers } from "ethers";
-import { Address } from "components/Address";
+import { Address } from "@/components/utils/Address";
 
 export const LeaderboardTable = ({ voters }: { voters: Array }) => {
   if (voters.length < 1) {

client/components/Modal.tsx

@@ -1,6 +1,6 @@
 import { FunctionComponent, ReactNode, Dispatch, SetStateAction } from "react";
 import classNames from "classnames";
-import CrossIcon from "components/CrossIcon";
+import CrossIcon from "components/icons/CrossIcon";
 
 interface ModalProps {
   show: Boolean;

client/components/claim/EligibilityItem.tsx

@@ -1,7 +1,7 @@
 import { FunctionComponent } from "react";
 import { utils, BigNumber } from "ethers";
 import TokenIcon from "components/TokenIcon";
-import CheckIcon from "components/CheckIcon";
+import CheckIcon from "components/icons/CheckIcon";
 import ReactTooltip from "react-tooltip";
 import { formatCurrency } from "utils/math";
 

client/components/claim/education/Quiz.tsx

@@ -1,8 +1,8 @@
 import { FunctionComponent, useState, Dispatch, SetStateAction } from "react";
 import classNames from "classnames";
 import Button from "components/Button";
-import CheckIconWhite from "components/CheckIconWhite";
-import CrossIconWhite from "components/CrossIconWhite";
+import CheckIconWhite from "components/icons/CheckIconWhite";
+import CrossIconWhite from "components/icons/CrossIconWhite";
 import { shuffle } from "lodash";
 
 interface QuizQuestion {

client/components/holding/Page.tsx

@@ -6,7 +6,7 @@ import CardGroup from "../CardGroup";
 import Card from "../Card";
 import CardDescription from "../CardDescription";
 import CardStat from "../CardStat";
-import ExternalLinkIcon from "../ExternalLinkIcon";
+import ExternalLinkIcon from "../icons/ExternalLinkIcon";
 import { useStore } from "utils/store";
 
 const renderer: CountdownRendererFn = ({ days, hours, minutes, seconds }) => (

client/components/layout.tsx

@@ -1,7 +1,7 @@
 import { FunctionComponent, ReactNode } from "react";
 import Header from "components/Header";
 import Footer from "components/Footer";
-import AdminUtils from "components/AdminUtils";
+import AdminUtils from "components/utils/AdminUtils";
 
 interface LayoutProps {
   children: ReactNode;

client/components/proposal/ProposalParameters.tsx

@@ -1,6 +1,6 @@
 import { ethers } from "ethers";
 import { useEffect, useState } from "react";
-import { Address } from "components/Address";
+import { Address } from "components/utils/Address";
 import { StateTag } from "components/proposal/StateTag";
 import { useStore } from "utils/store";
 import { truncateBalance } from "utils/index";

client/components/proposal/ProposalTable.tsx

@@ -1,7 +1,7 @@
 import { useRouter } from "next/router";
 import { Loading } from "components/Loading";
 import { StateTag } from "components/proposal/StateTag";
-import { Address } from "components/Address";
+import { Address } from "components/utils/Address";
 import Link from "next/link";
 
 export const ProposalTable = ({ proposalData }) => {

client/components/TimeToDate.tsx → client/components/utils/TimeToDate.tsx

@@ -2,7 +2,7 @@ import { FunctionComponent, ReactNode } from "react";
 import dayjs from "dayjs";
 import relativeTime from "dayjs/plugin/relativeTime";
 import { useStore } from "utils/store";
-import { SECONDS_IN_A_MONTH } from "../constants/index";
+import { SECONDS_IN_A_MONTH } from "../../constants/index";
 
 dayjs.extend(relativeTime);
 

client/components/vote-escrow/AccountBalances.tsx

@@ -22,57 +22,52 @@ const AccountBalances: FunctionComponent<AccountBalancesProps> = () => {
       return total.add(lockup.amount);
     }, ethers.BigNumber.from("0"));
 
+  const cardContentData = [
+    {
+      label: "Balance",
+      amount: ogv,
+      description: "OGV",
+      icon: "/ogv.svg",
+    },
+    {
+      label: "Staked",
+      amount: totalOgvLockedUp,
+      description: "OGV",
+      icon: "/ogv.svg",
+    },
+    {
+      label: "Vote balance",
+      amount: veOgv,
+      description: "veOGV",
+      icon: "/veogv.svg",
+    },
+    {
+      label: "Accrued Rewards",
+      amount: accruedRewards,
+      description: "OGV",
+      icon: "/ogv.svg",
+    },
+  ];
+
   return (
     <>
       <CardGroup horizontal fourCol>
-        <Card dark tightPadding>
-          <div className="space-y-1">
-            <CardLabel>Balance</CardLabel>
-            <div className="flex space-x-1 items-center">
-              <TokenIcon src="/ogv.svg" alt="OGV" small />
-              <CardStat small>
-                <TokenAmount amount={ogv} />
-              </CardStat>
-            </div>
-            <CardDescription>OGV</CardDescription>
-          </div>
-        </Card>
-        <Card dark tightPadding>
-          <div className="space-y-1">
-            <CardLabel>Staked</CardLabel>
-            <div className="flex space-x-1 items-center">
-              <TokenIcon src="/ogv.svg" alt="OGV" small />
-              <CardStat small>
-                <TokenAmount amount={totalOgvLockedUp} />
-              </CardStat>
-            </div>
-            <CardDescription>OGV</CardDescription>
-          </div>
-        </Card>
-        <Card dark tightPadding>
-          <div className="space-y-1">
-            <CardLabel>Vote balance</CardLabel>
-            <div className="flex space-x-1 items-center">
-              <TokenIcon src="/veogv.svg" alt="veOGV" small />
-              <CardStat small>
-                <TokenAmount amount={veOgv} />
-              </CardStat>
-            </div>
-            <CardDescription>veOGV</CardDescription>
-          </div>
-        </Card>
-        <Card dark tightPadding>
-          <div className="space-y-1">
-            <CardLabel>Accrued Rewards</CardLabel>
-            <div className="flex space-x-1 items-center">
-              <TokenIcon src="/ogv.svg" alt="OGV" small />
-              <CardStat small>
-                <TokenAmount amount={accruedRewards} />
-              </CardStat>
-            </div>
-            <CardDescription>OGV</CardDescription>
-          </div>
-        </Card>
+        {cardContentData.map((data) => {
+          return (
+            <Card dark tightPadding key={data.label}>
+              <div className="space-y-1">
+                <CardLabel>{data.label}</CardLabel>
+                <div className="flex space-x-1 items-center">
+                  <TokenIcon src={data.icon} alt={data.description} small />
+                  <CardStat small>
+                    <TokenAmount amount={data.amount} />
+                  </CardStat>
+                </div>
+                <CardDescription>{data.description}</CardDescription>
+              </div>
+            </Card>
+          );
+        })}
       </CardGroup>
     </>
   );

client/components/vote-escrow/LockupTable.tsx

@@ -3,7 +3,7 @@ import moment from "moment";
 import Card from "components/Card";
 import TokenAmount from "components/TokenAmount";
 import { Loading } from "components/Loading";
-import TimeToDate from "components/TimeToDate";
+import TimeToDate from "components/utils/TimeToDate";
 
 interface LockupTableProps {
   lockup: Object;

client/components/vote-escrow/LockupsTable.tsx

@@ -3,7 +3,7 @@ import moment from "moment";
 import Card from "components/Card";
 import TokenAmount from "components/TokenAmount";
 import { Loading } from "components/Loading";
-import TimeToDate from "components/TimeToDate";
+import TimeToDate from "components/utils/TimeToDate";
 import Link from "components/Link";
 import Button from "components/Button";
 import { useStore } from "utils/store";
@@ -13,8 +13,8 @@ import useLockups from "utils/useLockups";
 import { toast } from "react-toastify";
 import Modal from "components/Modal";
 import { truncateEthAddress } from "utils";
-import EtherscanIcon from "components/EtherscanIcon";
-import ExternalLinkIcon from "../ExternalLinkIcon";
+import EtherscanIcon from "components/icons/EtherscanIcon";
+import ExternalLinkIcon from "../icons/ExternalLinkIcon";
 
 const LockupsTable: FunctionComponent = () => {
   const { lockups, pendingTransactions, contracts, blockTimestamp, chainId } =

client/pages/_app.tsx

@@ -3,7 +3,7 @@ import useTotalBalances from "utils/useTotalBalances";
 import useContracts from "utils/useContracts";
 import useLockups from "utils/useLockups";
 import useBlock from "utils/useBlock";
-import { TransactionListener } from "components/TransactionListener";
+import { TransactionListener } from "components/utils/TransactionListener";
 import "../styles/globals.css";
 import Layout from "../components/layout";
 import { claimOpenTimestampPassed } from "utils";

client/utils/useHistoricalLockupToasts.js

@@ -7,7 +7,7 @@ import { truncateEthAddress } from "utils";
 import { SECONDS_IN_A_MONTH } from "../constants/index";
 import TokenAmount from "components/TokenAmount";
 import Link from "components/Link";
-import ExternalLinkIcon from "components/ExternalLinkIcon";
+import ExternalLinkIcon from "components/icons/ExternalLinkIcon";
 
 const _LockupContent = ({ shortAddress, ogvLockedUp, months, txHash }) => {
   return (