chore

etherspot · Oct 17, 2023 · 50727ce · 50727ce
1 parent 35c9cce
commit 50727ce
Show file tree

Hide file tree

Showing 6 changed files with 3,119 additions and 177 deletions.
diff --git a/app/components/views/Stake/index.tsx b/app/components/views/Stake/index.tsx
@@ -1,10 +1,10 @@
+import { Etherspot } from "@etherspot/react-transaction-buidler";
 import FiberNewRoundedIcon from "@mui/icons-material/FiberNewRounded";
 import InfoOutlined from "@mui/icons-material/InfoOutlined";
 import LibraryAddOutlined from "@mui/icons-material/LibraryAddOutlined";
 import { providers } from "ethers";
 import { useEffect, useState } from "react";
 import { useSelector } from "react-redux";
-import { Etherspot } from "@etherspot/react-transaction-buidler";
 import { AppNotificationStatus, setAppState, TxnStatus } from "state/app";
 
 import { changeStakeTransaction } from "actions/stake";
@@ -33,7 +33,11 @@ import {
   Text,
   TextInfoTooltip,
 } from "@klimadao/lib/components";
-import { concatAddress, trimWithPlaceholder, useWeb3 } from "@klimadao/lib/utils";
+import {
+  concatAddress,
+  trimWithPlaceholder,
+  useWeb3,
+} from "@klimadao/lib/utils";
 import { defineMessage, t, Trans } from "@lingui/macro";
 import { BalancesCard } from "components/BalancesCard";
 import { ImageCard } from "components/ImageCard";
@@ -65,93 +69,94 @@ const inputPlaceholderMessage = {
 const klimaTheme = {
   color: {
     background: {
-      main: 'transparent',
-      card: 'var(--surface-03)',
-      cardBorder: 'var(--surface-03)',
-      tokenBalanceContainer: '#21002e',
-      horizontalLine: 'linear-gradient(90deg, #23a9c9, #cd34a2)',
-      topMenu: '#fff',
-      topMenuWallet: 'rgba(255, 247, 242, 0.24)',
-      topMenuButton: '#fff',
-      selectInput: 'var(--surface-02)',
-      selectInputExpanded: 'var(--surface-02)',
-      selectInputScrollbar: 'var(--klima-green)',
-      selectInputScrollbarHover: 'var(--klima-green)',
-      selectInputScrollbarActive: 'var(--klima-green)',
-      selectInputImagePlaceholder: '#ffe6d9',
-      selectInputToggleButton: '#fff',
-      selectInputBorder: '#fff',
-      selectInputExpandedBorder: 'transparent',
-      textInputBorder: 'transparent',
-      textInput: 'var(--surface-02)',
-      switchInput: 'var(--surface-02)',
-      switchInputActiveTab: 'var(--klima-green)',
-      switchInputInactiveTab: 'transparent',
-      button: 'var(--klima-green)',
-      closeButton: '#fff',
-      pill: 'var(--surface-03)',
-      roundedImageFallback: '#ffe6d9',
-      listItemQuickButtonSecondary: '#443d66',
-      listItemQuickButtonPrimary: 'var(--klima-green)',
-      statusIconSuccess: '#1ba23d',
-      statusIconPending: '#ff6b35',
-      statusIconFailed: '#ff0000',
-      checkboxInputActive: 'var(--klima-green)',
-      checkboxInputInactive: '#7f7a99',
-      dropdownHoverColor: 'var(--surface-02)',
-      selectInputExpandedHover: 'var(--surface-03)',
-      toDropdownColor: 'var(--surface-02)',
-      secondary: '#9889e4',
-      selectInputRadioOn: '#ff7733',
-      selectInputRadioOff: 'var(--surface-02)',
-      walletButton: 'linear-gradient(to bottom, var(--klima-green), var(--klima-green))',
-      walletChainDropdown: 'var(--surface-03)',
-      walletChainButtonActive: 'var(--klima-green)',
-      deployButton: '#ff884d',
-      blockParagraphBorder: 'transparent',
-      settingMenuMain: 'linear-gradient(rgb(253, 146, 80), rgb(255, 85, 72))',
-      settingsModalBorder: 'transparent',
-      settingsModal: '#fff',
-      settingsIcon: '#fd9250',
-      loadingAnimationBackground: 'var(--surface-03)',
-      loadingAnimationForeground: 'var(--surface-02)',
-      walletDisplayTypeButtonActive: 'var(--klima-green)',
+      main: "transparent",
+      card: "var(--surface-03)",
+      cardBorder: "var(--surface-03)",
+      tokenBalanceContainer: "#21002e",
+      horizontalLine: "linear-gradient(90deg, #23a9c9, #cd34a2)",
+      topMenu: "#fff",
+      topMenuWallet: "rgba(255, 247, 242, 0.24)",
+      topMenuButton: "#fff",
+      selectInput: "var(--surface-02)",
+      selectInputExpanded: "var(--surface-02)",
+      selectInputScrollbar: "var(--klima-green)",
+      selectInputScrollbarHover: "var(--klima-green)",
+      selectInputScrollbarActive: "var(--klima-green)",
+      selectInputImagePlaceholder: "#ffe6d9",
+      selectInputToggleButton: "#fff",
+      selectInputBorder: "#fff",
+      selectInputExpandedBorder: "transparent",
+      textInputBorder: "transparent",
+      textInput: "var(--surface-02)",
+      switchInput: "var(--surface-02)",
+      switchInputActiveTab: "var(--klima-green)",
+      switchInputInactiveTab: "transparent",
+      button: "var(--klima-green)",
+      closeButton: "#fff",
+      pill: "var(--surface-03)",
+      roundedImageFallback: "#ffe6d9",
+      listItemQuickButtonSecondary: "#443d66",
+      listItemQuickButtonPrimary: "var(--klima-green)",
+      statusIconSuccess: "#1ba23d",
+      statusIconPending: "#ff6b35",
+      statusIconFailed: "#ff0000",
+      checkboxInputActive: "var(--klima-green)",
+      checkboxInputInactive: "#7f7a99",
+      dropdownHoverColor: "var(--surface-02)",
+      selectInputExpandedHover: "var(--surface-03)",
+      toDropdownColor: "var(--surface-02)",
+      secondary: "#9889e4",
+      selectInputRadioOn: "#ff7733",
+      selectInputRadioOff: "var(--surface-02)",
+      walletButton:
+        "linear-gradient(to bottom, var(--klima-green), var(--klima-green))",
+      walletChainDropdown: "var(--surface-03)",
+      walletChainButtonActive: "var(--klima-green)",
+      deployButton: "#ff884d",
+      blockParagraphBorder: "transparent",
+      settingMenuMain: "linear-gradient(rgb(253, 146, 80), rgb(255, 85, 72))",
+      settingsModalBorder: "transparent",
+      settingsModal: "#fff",
+      settingsIcon: "#fd9250",
+      loadingAnimationBackground: "var(--surface-03)",
+      loadingAnimationForeground: "var(--surface-02)",
+      walletDisplayTypeButtonActive: "var(--klima-green)",
     },
     text: {
-      main: '#fff',
-      topBar: '#fff',
-      topMenu: '#fff',
-      topMenuWallet: '#fff',
-      cardTitle: '#fff',
-      card: '#fff',
-      cardDisabled: '#ddd',
-      innerLabel: '#fff',
-      outerLabel: '#fff',
-      selectInput: '#fff',
-      selectInputOption: '#fff',
-      selectInputOptionSecondary: '#fff',
-      selectInputImagePlaceholder: '#fff',
-      textInput: '#fff',
-      textInputSecondary: 'var(--font-03)',
-      switchInputActiveTab: '#fff',
-      switchInputInactiveTab: '#fff',
-      button: '#fff',
-      buttonSecondary: '#ffeee6',
-      errorMessage: '#ff3c00',
-      searchInput: '#fff',
-      searchInputSecondary: '#fff',
-      pill: '#fff',
-      pillValue: '#fff',
-      roundedImageFallback: '#fff',
-      listItemQuickButtonSecondary: '#fff',
-      listItemQuickButtonPrimary: '#fff',
-      transactionStatusLink: 'var(--klima-green)',
-      pasteIcon: 'var(--klima-green)',
-      walletDropdownIcon: '#fff',
-      settingsModalSubHeader: '#fff',
-      settingsMenuItem: '#000',
-      settingsMenuItemHover: 'var(--klima-green)',
-      searchIcon: 'var(--klima-green)',
+      main: "#fff",
+      topBar: "#fff",
+      topMenu: "#fff",
+      topMenuWallet: "#fff",
+      cardTitle: "#fff",
+      card: "#fff",
+      cardDisabled: "#ddd",
+      innerLabel: "#fff",
+      outerLabel: "#fff",
+      selectInput: "#fff",
+      selectInputOption: "#fff",
+      selectInputOptionSecondary: "#fff",
+      selectInputImagePlaceholder: "#fff",
+      textInput: "#fff",
+      textInputSecondary: "var(--font-03)",
+      switchInputActiveTab: "#fff",
+      switchInputInactiveTab: "#fff",
+      button: "#fff",
+      buttonSecondary: "#ffeee6",
+      errorMessage: "#ff3c00",
+      searchInput: "#fff",
+      searchInputSecondary: "#fff",
+      pill: "#fff",
+      pillValue: "#fff",
+      roundedImageFallback: "#fff",
+      listItemQuickButtonSecondary: "#fff",
+      listItemQuickButtonPrimary: "#fff",
+      transactionStatusLink: "var(--klima-green)",
+      pasteIcon: "var(--klima-green)",
+      walletDropdownIcon: "#fff",
+      settingsModalSubHeader: "#fff",
+      settingsMenuItem: "#000",
+      settingsMenuItemHover: "var(--klima-green)",
+      searchIcon: "var(--klima-green)",
     },
   },
 };
@@ -414,8 +419,8 @@ export const Stake = (props: Props) => {
             <FiberNewRoundedIcon className="new-releases-icon" />
             <Trans id="stake.lifi">
               Cross-chain staking is now available through{" "}
-              <Anchor>LI.FI and Etherspot</Anchor>, with
-              support for multiple chains and tokens.
+              <Anchor>LI.FI and Etherspot</Anchor>, with support for multiple
+              chains and tokens.
             </Trans>
             <ButtonPrimary
               className={styles.etherspotSwitchButton}
@@ -457,7 +462,9 @@ export const Stake = (props: Props) => {
                       //
                     }
                   }}
-                  defaultTransactionBlocks={[{ type: "KLIMA_STAKE", closeable: false }]}
+                  defaultTransactionBlocks={[
+                    { type: "KLIMA_STAKE", closeable: false },
+                  ]}
                   hideTransactionBlockTitle
                   hideAddTransactionButton
                   hideAddButton
@@ -554,9 +561,9 @@ export const Stake = (props: Props) => {
                 <TextInfoTooltip
                   content={
                     <Trans id="stake.akr.tooltip" comment="Long sentence">
-                      Annualized KLIMA Rewards, including compounding, should the
-                      current reward rate remain unchanged for 12 months (reward
-                      rate may be subject to change).
+                      Annualized KLIMA Rewards, including compounding, should
+                      the current reward rate remain unchanged for 12 months
+                      (reward rate may be subject to change).
                     </Trans>
                   }
                 >

diff --git a/app/components/views/Stake/styles.ts b/app/components/views/Stake/styles.ts
@@ -65,12 +65,12 @@ export const stakeCard_ui = css`
 
 export const etherspotStakeCard_ui = css`
   justify-self: center;
-  
+
   button {
     display: inline-block;
     height: auto;
   }
-  
+
   svg {
     display: inline-block;
   }
@@ -264,4 +264,3 @@ export const toggle_form_type = css`
 export const etherspotSwitchButton = css`
   margin-top: 10px;
 `;
-
diff --git a/lib/components/Web3Context/index.tsx b/lib/components/Web3Context/index.tsx
@@ -30,7 +30,7 @@ export const Web3ContextProvider: FC<Props> = ({ appName, children }) => {
         renderModal,
         toggleModal,
         ignoreChainId,
-        setIgnoreChainId
+        setIgnoreChainId,
       }}
     >
       {children}

diff --git a/lib/utils/useProvider/index.tsx b/lib/utils/useProvider/index.tsx
@@ -6,10 +6,10 @@ import {
   TorusProvider,
   TypedProvider,
   WalletConnectProvider,
+  web3InitialState,
   Web3ModalState,
   Web3State,
   WrappedProvider,
-  web3InitialState,
 } from "../../components/Web3Context/types";
 import { urls } from "../../constants";
 
@@ -29,9 +29,11 @@ const getWeb3Provider = (p: any): TypedProvider => {
   return new providers.Web3Provider(p) as TypedProvider;
 };
 
-type UseProviderProps = {
-  ignoreChainId?: boolean;
-} | undefined;
+type UseProviderProps =
+  | {
+      ignoreChainId?: boolean;
+    }
+  | undefined;
 
 /** React Hook to create and manage the web3Modal lifecycle */
 export const useProvider = (props: UseProviderProps): Web3ModalState => {