Makka/base poc (#2378)

* UI polish * initial cross chain scaffolding * cleanup and updates * add hacky any to web3State to temporarily fix build * fix formatting of abi * add function to calculate retirement cost, additional cleanup * fix maxAmountIn decimals * disable submit when insufficient balance * fix tx hash link * use polygon address and not base address * move base logo to base components * remove export from lib * add 1% slippage to cost * fix prettier formatting * Update polygon target contract * add transaction modal and handle errors * fix supportedChains as base * fix supportedChains as base * reset form state after successful transaction * handle quantity error, fix insufficient balance check * run prettier and fix build --------- Co-authored-by: Atmosfearful <[email protected]> Co-authored-by: Cujowolf <[email protected]>
KlimaDAO · Jul 23, 2024 · 4abbbe1 · 4abbbe1
1 parent 5a62ed2
commit 4abbbe1
Show file tree

Hide file tree

Showing 24 changed files with 3,765 additions and 260 deletions.
diff --git a/base/components/Buttons/styles.ts b/base/components/Buttons/styles.ts
@@ -1,5 +1,5 @@
 import { css } from "@emotion/css";
-import { button } from "../../styles/typography";
+import { button } from "@klimadao/lib/theme/typography";
 
 const buttonBase = css`
   ${button};

diff --git a/base/components/Connect/index.tsx b/base/components/Connect/index.tsx
@@ -1,10 +1,13 @@
 import { cx } from "@emotion/css";
 import { ConnectButton } from "@rainbow-me/rainbowkit";
+import { FC } from "react";
 import { ButtonPrimary } from "../Buttons/ButtonPrimary";
 import * as styles from "./styles";
 
 /* example from https://www.rainbowkit.com/docs/custom-connect-button */
-export const Connect = () => (
+export const Connect: FC<{
+  className?: string;
+}> = ({ className }) => (
   <ConnectButton.Custom>
     {({
       account,
@@ -17,6 +20,7 @@ export const Connect = () => (
     }) => {
       // Note: If your app doesn't use authentication, you
       // can remove all 'authenticationStatus' checks
+      const buttonClassName = cx(styles.connectButton, className);
       const ready = mounted && authenticationStatus !== "loading";
       const connected =
         ready &&
@@ -35,7 +39,7 @@ export const Connect = () => (
                 <ButtonPrimary
                   label="Login / Connect"
                   onClick={openConnectModal}
-                  className={styles.connectButton}
+                  className={buttonClassName}
                 />
               );
             }
@@ -44,7 +48,7 @@ export const Connect = () => (
                 <ButtonPrimary
                   label="Wrong network"
                   onClick={openChainModal}
-                  className={styles.connectButton}
+                  className={buttonClassName}
                 />
               );
             }
@@ -71,7 +75,7 @@ export const Connect = () => (
                 <ButtonPrimary
                   label={account.displayName}
                   onClick={openAccountModal}
-                  className={styles.connectButton}
+                  className={buttonClassName}
                 />
               </div>
             );

diff --git a/base/components/DropdownWithModal/index.tsx b/base/components/DropdownWithModal/index.tsx
@@ -1,9 +1,9 @@
 import { cx } from "@emotion/css";
+import { Text } from "@klimadao/lib/components";
 import KeyboardArrowDown from "@mui/icons-material/KeyboardArrowDown";
 import Image, { StaticImageData } from "next/image";
 import { FC, ReactNode } from "react";
 import { Modal } from "../Modal";
-import { Text } from "../Text";
 import * as styles from "./styles";
 
 interface Item {

diff --git a/base/components/Logos/BaseLogo.tsx b/base/components/Logos/BaseLogo.tsx
@@ -0,0 +1,18 @@
+export const BaseLogo = (props: { className?: string }) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="146"
+    height="146"
+    fill="none"
+    viewBox="0 0 146 146"
+    aria-hidden
+    role="presentation"
+    className={props.className}
+  >
+    <circle cx="73" cy="73" r="73" fill="#0052FF" />
+    <path
+      fill="#fff"
+      d="M73.323 123.729c28.294 0 51.23-22.897 51.23-51.141 0-28.245-22.936-51.142-51.23-51.142-26.843 0-48.865 20.61-51.052 46.843h67.715v8.597H22.27c2.187 26.233 24.209 46.843 51.052 46.843z"
+    />
+  </svg>
+);
diff --git a/base/components/Modal/index.tsx b/base/components/Modal/index.tsx
@@ -1,7 +1,7 @@
 import { cx } from "@emotion/css";
+import { Text } from "@klimadao/lib/components";
 import Close from "@mui/icons-material/Close";
 import { FC, ReactNode } from "react";
-import { Text } from "../Text";
 import * as styles from "./styles";
 
 interface Props {

diff --git a/base/components/Text/index.tsx b/base/components/Text/index.tsx
diff --git a/base/components/Text/styles.ts b/base/components/Text/styles.ts
diff --git a/base/components/TransactionModal/HighlightValue.tsx b/base/components/TransactionModal/HighlightValue.tsx
@@ -0,0 +1,60 @@
+import { cx } from "@emotion/css";
+import { Anchor, Text } from "@klimadao/lib/components";
+import Image, { StaticImageData } from "next/image";
+import { FC, ReactNode } from "react";
+import * as styles from "./styles";
+
+interface HighlightValueProps {
+  label: ReactNode;
+  value: string;
+  icon?: StaticImageData;
+  iconName?: string;
+  warn?: boolean;
+  /** If you want to wrap the value in a hyperlink, e.g. to polygonscan*/
+  valueHref?: string;
+}
+
+export const HighlightValue: FC<HighlightValueProps> = (props) => {
+  return (
+    <div className={styles.valueContainer}>
+      <div className="label">{props.label}</div>
+      <div className={styles.value}>
+        {props.icon && (
+          <Image
+            className="icon"
+            src={props.icon}
+            width={48}
+            height={48}
+            alt={props.iconName || ""}
+          />
+        )}
+        {props.valueHref ? (
+          <Anchor
+            href={props.valueHref}
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            <Text
+              t="body3"
+              className={cx("value", {
+                warn: !!props.warn,
+              })}
+              style={{ textDecoration: "underline" }}
+            >
+              {props.value}
+            </Text>
+          </Anchor>
+        ) : (
+          <Text
+            t="body3"
+            className={cx("value", {
+              warn: !!props.warn,
+            })}
+          >
+            {props.value}
+          </Text>
+        )}
+      </div>
+    </div>
+  );
+};
diff --git a/base/components/TransactionModal/index.tsx b/base/components/TransactionModal/index.tsx
@@ -0,0 +1,124 @@
+import { cx } from "@emotion/css";
+import { ButtonPrimary, Spinner, Text } from "@klimadao/lib/components";
+import { urls } from "@klimadao/lib/constants";
+import { concatAddress } from "@klimadao/lib/utils";
+import CheckIcon from "@mui/icons-material/Check";
+import SendRounded from "@mui/icons-material/SendRounded";
+import { Modal } from "components/Modal";
+import { StatusMessage, TxnStatus } from "components/pages/Home";
+import { StaticImageData } from "next/image";
+import Link from "next/link";
+import { FC, ReactNode } from "react";
+import { HighlightValue } from "./HighlightValue";
+import * as styles from "./styles";
+
+interface Props {
+  title: ReactNode;
+  value: string;
+  tokenName: string;
+  status: StatusMessage;
+  tokenIcon: StaticImageData;
+  spenderAddress: string;
+  onSubmit: () => void;
+  onCloseModal: () => void;
+}
+
+const getStatusMessage = (statusType: TxnStatus, message?: string) => {
+  if (statusType === "error" && message) {
+    if (message === "userRejected") {
+      return "❌ You chose to reject the transaction";
+    }
+    return "❌ Error: something went wrong...";
+  } else if (statusType === "networkConfirmation") {
+    return "Transaction initiated. Waiting for network confirmation.";
+  } else if (statusType === "done") {
+    return (
+      <>
+        Transaction complete. Track progress on{" "}
+        <Link href={message!} passHref target="_blank">
+          Axelarscan
+        </Link>
+      </>
+    );
+  }
+  return null;
+};
+
+export const TransactionModal: FC<Props> = (props) => {
+  const statusType = props.status?.statusType;
+
+  const success = statusType === "done";
+  const isPending = statusType === "networkConfirmation";
+
+  const showCloseButton = !isPending && success;
+  const showSubmitButton = !isPending && !success;
+
+  const onModalClose = !isPending ? props.onCloseModal : undefined;
+
+  return (
+    <Modal title={props.title} onToggleModal={onModalClose}>
+      <div className={styles.container}>
+        <div
+          className={cx(styles.contentContainer, {
+            success,
+          })}
+        >
+          <Text t="body4">
+            Please submit the transaction. Note: This can take between 5-20
+            minutes to complete on Axelar.
+          </Text>
+          <HighlightValue
+            label={
+              <Text t="caption" color="lighter">
+                Contract address
+              </Text>
+            }
+            value={concatAddress(props.spenderAddress)}
+            valueHref={urls.basescan + `/address/${props.spenderAddress}`}
+          />
+          <HighlightValue
+            label={
+              <Text t="caption" color="lighter">
+                Confirm amount
+              </Text>
+            }
+            value={props.value || "0"}
+            icon={props.tokenIcon}
+            iconName={props.tokenName}
+          />
+        </div>
+        {!!props.status && (
+          <div className={styles.statusMessage}>
+            {success && <CheckIcon />}
+            <Text t="caption" color="lighter" align="center">
+              {getStatusMessage(props.status.statusType, props.status.message)}
+            </Text>
+          </div>
+        )}
+        <div className={styles.buttonRow}>
+          {isPending && (
+            <div className={styles.buttonRow_spinner}>
+              <Spinner />
+            </div>
+          )}
+          {showSubmitButton && (
+            <ButtonPrimary
+              icon={<SendRounded />}
+              label="Submit"
+              onClick={() => props.onSubmit()}
+              className={styles.submitButton}
+            />
+          )}
+          {showCloseButton && (
+            <ButtonPrimary
+              variant="gray"
+              label="Close"
+              onClick={() => props.onCloseModal()}
+              className={styles.submitButton}
+            />
+          )}
+        </div>
+      </div>
+    </Modal>
+  );
+};