Walletconnect v2 migration, geofencing, and style bugs

.github/workflows/main.yaml

@@ -1,5 +1,5 @@
 name: OUSD Governance
-on: 
+on:
   pull_request:
     types: [opened, reopened]
   push:
@@ -31,7 +31,7 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v2
         with:
-          node-version: "14"
+          node-version: "16"
           cache: "yarn"
           cache-dependency-path: |
             client/yarn.lock
@@ -63,7 +63,7 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v2
         with:
-          node-version: "14"
+          node-version: "16"
           cache: "yarn"
           cache-dependency-path: |
             yarn.lock
@@ -94,4 +94,4 @@ jobs:
         uses: foundry-rs/foundry-toolchain@v1
 
       - name: Run tests
-        run: forge test -vvv
+        run: forge test -vvv

client/components/Address.tsx

@@ -43,12 +43,9 @@ export const Address = ({
         href={`${explorerPrefix}address/${address}`}
         target="_blank"
         rel="noreferrer"
-        className="text-inherit inline-flex items-center"
+        className="text-inherit inline-flex items-center gradient-link"
       >
         <span className="mr-1">{addressDisplay}</span>
-        <span className="inline-block">
-          <Icon path={mdiOpenInNew} size={0.6} />
-        </span>
       </a>
     );
   } else {

client/components/GeoFenceCheck.tsx

@@ -0,0 +1,95 @@
+import { useState } from "react";
+import useLocalStorage from "utils/useLocalStorage";
+import classnames from "classnames";
+
+const GeoFenceCheck = () => {
+  const { data: hasConfirmedGeoLocation, onSetItem } = useLocalStorage(
+    "@originprotocol/governance-geo-check",
+    false
+  );
+
+  const [isChecked, setIsChecked] = useState(false);
+
+  const onAckGeoFence = () => {
+    onSetItem(true);
+  };
+
+  return (
+    <div
+      className={classnames("modal mt-0", {
+        "modal-open": !hasConfirmedGeoLocation,
+      })}
+    >
+      <div className="flex flex-col geofence-modal">
+        <header className="header">
+          <h1 className="title">Restricted Access</h1>
+        </header>
+        <div className="body">
+          <p className="info">
+            Origin DeFi Governance is not available to restricted jurisdictions.
+            Before proceeding, please carefully read the following:
+          </p>
+          <div className="accept-criteria">
+            <ul className="accept-criteria-list">
+              <li className="item">
+                You confirm that you are not a resident of, citizen of, located
+                in, incorporated in, or have a registered office in the United
+                States or any country or region currently currently subject to
+                sanctions by the United States.
+              </li>
+              <li className="item">
+                You affirm that you are not a subject of economic or trade
+                sanctions administered or enforced by any governmental authority
+                or otherwise designated on any list of prohibited or restricted
+                parties, including the list maintained by the Office of Foreign
+                Assets Control of the U.S. Department of the Treasury.
+              </li>
+              <li className="item">
+                You agree not to use any VPN or other privacy or anonymization
+                tools or techniques to attempt to circumvent these eligibility
+                restrictions.
+              </li>
+              <li className="item">
+                You are lawfully permitted to access this site. You understand
+                and accept the risks associated with using Origin DeFi
+                Governance.
+              </li>
+            </ul>
+          </div>
+          <div className="ack">
+            <label className="ack-label">
+              <div className="ack-container">
+                <input
+                  className="ack-checkbox"
+                  type="checkbox"
+                  checked={isChecked}
+                  onChange={(e) => {
+                    setIsChecked(e.target.checked);
+                  }}
+                />
+              </div>
+
+              <span className="ack-label-text">
+                I have read and agree to the above terms{" "}
+              </span>
+            </label>
+          </div>
+        </div>
+        <footer className="footer">
+          <a className="footer-action" href="https://ousd.com">
+            Exit
+          </a>
+          <button
+            className="footer-action"
+            onClick={onAckGeoFence}
+            disabled={!isChecked}
+          >
+            I agree
+          </button>
+        </footer>
+      </div>
+    </div>
+  );
+};
+
+export default GeoFenceCheck;

client/components/Header.tsx

@@ -53,8 +53,8 @@ const Header: FunctionComponent<HeaderProps> = ({ hideNav }) => {
                   {navItems.map(({ href, label, external }) => (
                     <li key={label}>
                       <Link
-                        className="group text-sm text-neutral hover:text-neutral-focus flex space-x-2"
-                        currentClassName="font-normal"
+                        className="group text-sm text-neutral hover:text-white flex space-x-2"
+                        currentClassName="!font-normal !text-white"
                         href={href}
                         type={external ? "external" : "internal"}
                         newWindow={external}
@@ -123,8 +123,8 @@ const Header: FunctionComponent<HeaderProps> = ({ hideNav }) => {
               {navItems.map(({ href, label, external }) => (
                 <li key={label}>
                   <Link
-                    className="px-6 py-3 hover:text-neutral-focus text-neutral border-l-4 border-accent-content flex space-x-2"
-                    currentClassName="font-normal border-primary"
+                    className="px-6 py-3 hover:text-white text-neutral border-l-4 border-accent-content flex space-x-2"
+                    currentClassName="!font-normal !border-primary !text-white"
                     href={href}
                     onClick={
                       !external ? () => setMenuIsOpen(false) : () => null

client/components/PageTitle.tsx

@@ -10,6 +10,8 @@ export const PageTitle: FunctionComponent<PageTitleProps> = ({
   noBottomMargin,
 }) => (
   <div className={noBottomMargin ? "" : "pb-5"}>
-    <h1 className="text-4xl text-white mt-6 font-bold">{children}</h1>
+    <h1 className="text-[40px] text-white mt-6 font-bold font-header">
+      {children}
+    </h1>
   </div>
 );

client/components/TokenAmount.tsx

@@ -1,7 +1,7 @@
-import { FunctionComponent, ReactNode } from "react";
+import { FunctionComponent } from "react";
 import { BigNumber } from "ethers";
 import numeral from "numeraljs";
-import { useStore } from "utils/store";
+import { useAccount } from "wagmi";
 
 interface TokenAmount {
   amount: BigNumber | string | number;
@@ -14,7 +14,7 @@ const TokenAmount: FunctionComponent<TokenAmount> = ({
   format,
   isWalletBalance,
 }) => {
-  const { web3Provider } = useStore();
+  const { isConnected } = useAccount();
 
   const formatMap = {
     abbreviatedCurrency: "0.00 a",
@@ -25,7 +25,7 @@ const TokenAmount: FunctionComponent<TokenAmount> = ({
 
   const usedFormat = formatMap[format] || formatMap["default"];
 
-  if (isWalletBalance && !web3Provider) {
+  if (isWalletBalance && !isConnected) {
     return <span className="uppercase">--.--</span>;
   }
 

client/components/TransactionListener.tsx

@@ -7,7 +7,7 @@ import { isMobile } from "react-device-detect";
 import { useRouter } from "next/router";
 
 export const TransactionListener = () => {
-  const { web3Provider, pendingTransactions } = useStore();
+  const { provider, pendingTransactions } = useStore();
   const router = useRouter();
   const prevPendingTransactions = usePrevious(pendingTransactions);
   const [isOnClaimPage, setIsOnClaimPage] = useState(false);
@@ -30,7 +30,7 @@ export const TransactionListener = () => {
 
     if (newTransactions.length > 0) {
       newTransactions.forEach((transaction) => {
-        web3Provider.once(transaction.hash, (minedTransaction) => {
+        provider.once(transaction.hash, (minedTransaction) => {
           if (
             transaction.onComplete &&
             typeof transaction.onComplete === "function"