Merge pull request #2308 from gnosis/release/1.10

[RELEASE ⛰️ ] v1.10.0-RC.1

src/components/claim/ClaimModal.tsx

@@ -11,8 +11,8 @@ import tokenLogo from '../../assets/images/token-logo.png'
 import { useActiveWeb3React } from '../../hooks/web3'
 import { useModalOpen, useToggleSelfClaimModal } from '../../state/application/hooks'
 import { ApplicationModal } from '../../state/application/reducer'
-import { useClaimCallback, useUserClaimData, useUserUnclaimedAmount } from 'state/claim/hooks'
-import { useUserHasSubmittedClaim } from 'state/transactions/hooks'
+import { useClaimCallback, useUserClaimData, useUserUnclaimedAmount } from '../../state/claim/hooks'
+import { useUserHasSubmittedClaim } from '../../state/transactions/hooks'
 import { CloseIcon, CustomLightSpinner, ExternalLink, TYPE, UniTokenAnimated } from '../../theme'
 import { ExplorerDataType, getExplorerLink } from '../../utils/getExplorerLink'
 import { ButtonPrimary } from '../Button'
@@ -51,25 +51,23 @@ export default function ClaimModal() {
   const isOpen = useModalOpen(ApplicationModal.SELF_CLAIM)
   const toggleClaimModal = useToggleSelfClaimModal()
 
-  const { chainId } = useActiveWeb3React()
+  const { account, chainId } = useActiveWeb3React()
 
-  const account = '0x0010B775429d6C92333E363CBd6BF28dDF1A87E6'
   // used for UI loading states
   const [attempting, setAttempting] = useState<boolean>(false)
 
   // get user claim data
   const userClaimData = useUserClaimData(account)
 
   // monitor the status of the claim from contracts and txns
-  const { claimCallback } = useClaimCallback(account) // TODO: remove me, hard coded only for testing
+  const { claimCallback } = useClaimCallback(account)
   const unclaimedAmount: CurrencyAmount<Token> | undefined = useUserUnclaimedAmount(account)
   const { claimSubmitted, claimTxn } = useUserHasSubmittedClaim(account ?? undefined)
   const claimConfirmed = Boolean(claimTxn?.receipt)
 
   function onClaim() {
-    console.log(`Trying to claim!!!`, unclaimedAmount?.toString(), claimConfirmed)
     setAttempting(true)
-    claimCallback([{ index: 3 }])
+    claimCallback()
       // reset modal and log error
       .catch((error) => {
         setAttempting(false)

src/custom/components/CowClaimButton/index.tsx

@@ -1,8 +1,11 @@
 import { Trans } from '@lingui/macro'
-import { Dots } from 'components/swap/styleds'
 import styled, { css } from 'styled-components/macro'
 import CowProtocolLogo from 'components/CowProtocolLogo'
-import { useUserHasSubmittedClaim } from 'state/transactions/hooks'
+import { useTokenBalance } from 'state/wallet/hooks'
+import { V_COW } from 'constants/tokens'
+import { ChainId } from 'state/lists/actions/actionsMod'
+import { formatMax, formatSmartLocaleAware } from 'utils/format'
+import { AMOUNT_PRECISION } from 'constants/index'
 
 export const Wrapper = styled.div<{ isClaimPage?: boolean | null }>`
   ${({ theme }) => theme.card.boxShadow};
@@ -75,26 +78,23 @@ export const Wrapper = styled.div<{ isClaimPage?: boolean | null }>`
 interface CowClaimButtonProps {
   isClaimPage?: boolean | null | undefined
   account?: string | null | undefined
+  chainId: ChainId | undefined
   handleOnClickClaim?: () => void
 }
 
-export default function CowClaimButton({ isClaimPage, account, handleOnClickClaim }: CowClaimButtonProps) {
-  const { claimTxn } = useUserHasSubmittedClaim(account ?? undefined)
+export default function CowClaimButton({ isClaimPage, account, chainId, handleOnClickClaim }: CowClaimButtonProps) {
+  const vCowToken = chainId ? V_COW[chainId] : undefined
+  const vCowBalance = useTokenBalance(account || undefined, vCowToken)
+
+  const formattedVCowBalance = formatSmartLocaleAware(vCowBalance, AMOUNT_PRECISION)
+  const formattedMaxVCowBalance = formatMax(vCowBalance, vCowToken?.decimals)
 
   return (
     <Wrapper isClaimPage={isClaimPage} onClick={handleOnClickClaim}>
-      {claimTxn && !claimTxn?.receipt ? (
-        <Dots>
-          <Trans>Claiming vCOW...</Trans>
-        </Dots>
-      ) : (
-        <>
-          <CowProtocolLogo />
-          <b>
-            <Trans>vCOW</Trans>
-          </b>
-        </>
-      )}
+      <CowProtocolLogo />
+      <b title={formattedMaxVCowBalance && `${formattedMaxVCowBalance} vCOW`}>
+        <Trans>{formattedVCowBalance} vCOW</Trans>
+      </b>
     </Wrapper>
   )
 }

src/custom/components/CowProtocolLogo/index.tsx

@@ -3,7 +3,7 @@ import CowProtocolIcon from 'assets/cow-swap/cowprotocol.svg'
 
 export const Icon = styled.span<Props>`
   --defaultSize: 24px;
-  --smallSize: ${({ size }) => (size ? `calc(${size}px / 2)` : 'calc(var(--defaultSize) / 2)')};
+  --smallSize: ${({ size }) => (size ? `calc(${size}px / 1.5)` : 'calc(var(--defaultSize) / 1.5)')};
   ${({ theme }) => theme.cowToken.background};
   ${({ theme }) => theme.cowToken.boxShadow};
   height: ${({ size }) => (size ? `${size}px` : 'var(--defaultSize)')};

src/custom/components/EnhancedTransactionLink/index.tsx

@@ -1,5 +1,3 @@
-import { ExplorerDataType } from 'utils/getExplorerLink'
-
 import { ExplorerLink } from 'components/ExplorerLink'
 import { GnosisSafeLink } from 'components/AccountDetails/Transaction/StatusDetails'
 
@@ -27,6 +25,6 @@ export function EnhancedTransactionLink(props: Props) {
 
     return <GnosisSafeLink chainId={chainId} safeTransaction={safeTx} gnosisSafeThreshold={gnosisSafeInfo.threshold} />
   } else {
-    return <ExplorerLink id={tx.hash} type={ExplorerDataType.TRANSACTION} />
+    return <ExplorerLink id={tx.hash} type="transaction" />
   }
 }

src/custom/components/FaqDrawer/index.tsx

@@ -0,0 +1,94 @@
+import styled from 'styled-components/macro'
+
+const Wrapper = styled.div`
+  display: flex;
+  flex-flow: column wrap;
+  width: 100%;
+  gap: 0;
+  margin: 0 0 24px;
+`
+
+const Item = styled.div`
+  width: 100%;
+  display: block;
+  position: relative;
+  padding: 4px 60px 12px 12px;
+
+  > div {
+    font-size: 16px;
+    padding: 0;
+    margin: 0;
+    height: 0;
+    overflow: hidden;
+    position: relative;
+    opacity: 0;
+    transition: 0.4s ease-in-out;
+  }
+
+  > input {
+    display: none;
+    appearance: none;
+  }
+
+  > input:checked ~ div {
+    height: auto;
+    opacity: 0.7;
+    margin: 0 0 12px;
+  }
+
+  > input:checked ~ label {
+    padding: 0 0 12px;
+  }
+
+  > input:checked ~ label > span {
+    transform: rotate(45deg);
+  }
+
+  > label {
+    cursor: pointer;
+    display: block;
+    width: 100%;
+    padding: 0;
+    font-weight: 500;
+    font-size: 21px;
+  }
+
+  > label > span {
+    display: block;
+    position: absolute;
+    right: 0;
+    font-size: 34px;
+    top: -2px;
+    line-height: 1;
+    opacity: 0.5;
+    transition: transform 0.4s ease-in-out, opacity 0.4s ease-in-out;
+  }
+
+  > label:hover > span {
+    opacity: 1;
+  }
+`
+
+type FaqDrawerProps = {
+  items: {
+    title: string
+    content: string
+  }[]
+}
+
+export function FaqDrawer({ items }: FaqDrawerProps) {
+  return (
+    <Wrapper>
+      {items?.length > 0 &&
+        items.map(({ title, content }, index) => (
+          <Item key={index}>
+            <input id={`q${index}`} type="checkbox" />
+            <label htmlFor={`q${index}`}>
+              {title} <span>+</span>
+            </label>
+            <div>{content}</div>
+          </Item>
+        ))}
+    </Wrapper>
+  )
+}

src/custom/components/Header/NetworkSelector/NetworkSelectorMod.tsx

@@ -6,19 +6,12 @@ import // ARBITRUM_HELP_CENTER_LINK,
 // SupportedL2ChainId,
 // SupportedChainId
 '@src/constants/chains'
-import { supportedChainId } from 'utils/supportedChainId'
-import { SupportedChainId, CHAIN_INFO, ALL_SUPPORTED_CHAIN_IDS } from 'constants/chains'
-import { useOnClickOutside } from 'hooks/useOnClickOutside'
-import { useActiveWeb3React } from 'hooks/web3'
-import { useCallback, useRef, useEffect, useState, useMemo } from 'react'
+import { CHAIN_INFO, ALL_SUPPORTED_CHAIN_IDS } from 'constants/chains'
 import { /* ArrowDownCircle, */ ChevronDown } from 'react-feather'
-import { useModalOpen, useToggleModal, useWalletModalToggle } from 'state/application/hooks'
-import { ApplicationModal } from 'state/application/reducer'
-import { useAppSelector } from 'state/hooks'
 import styled from 'styled-components/macro'
 import { /* ExternalLink, */ MEDIA_WIDTHS } from 'theme'
-import { switchToNetwork } from 'utils/switchToNetwork'
-import { UnsupportedChainIdError, useWeb3React } from '@web3-react/core'
+import useChangeNetworks from 'hooks/useChangeNetworks'
+import { useActiveWeb3React } from 'hooks/web3'
 
 // const ActiveRowLinkList = styled.div`
 //   display: flex;
@@ -174,63 +167,17 @@ const StyledChevronDown = styled(ChevronDown)`
 // }
 
 export default function NetworkSelector() {
-  const { chainId: preChainId, library, account } = useActiveWeb3React()
-  const { error } = useWeb3React() // MOD: check unsupported network
-  const node = useRef<HTMLDivElement>()
-  const open = useModalOpen(ApplicationModal.NETWORK_SELECTOR)
-  const toggle = useToggleModal(ApplicationModal.NETWORK_SELECTOR)
-  const toggleWalletModal = useWalletModalToggle() // MOD
-  useOnClickOutside(node, open ? toggle : undefined)
-  const implements3085 = useAppSelector((state) => state.application.implements3085)
-
-  // MOD: checks if a requested network switch was sent
-  // used for when user disconnected and selects a network internally
-  // if 3085 supported, will connect wallet and change network
-  const [queuedNetworkSwitch, setQueuedNetworkSwitch] = useState<null | number>(null)
-
-  // MOD: get supported chain and check unsupported
-  const [chainId, isUnsupportedChain] = useMemo(() => {
-    const chainId = supportedChainId(preChainId)
-
-    return [chainId, error instanceof UnsupportedChainIdError] // Mod - return if chainId is unsupported
-  }, [preChainId, error])
-
-  const info = chainId ? CHAIN_INFO[chainId] : undefined
-
-  // const isOnL2 = chainId ? L2_CHAIN_IDS.includes(chainId) : false
-  // const showSelector = Boolean(!account || implements3085 || isOnL2)
-  const showSelector = Boolean(!account || implements3085)
-  const mainnetInfo = CHAIN_INFO[SupportedChainId.MAINNET]
-
-  const conditionalToggle = useCallback(() => {
-    if (showSelector) {
-      toggle()
-    }
-  }, [showSelector, toggle])
-
-  const networkCallback = useCallback(
-    (supportedChainId) => {
-      if (!account) {
-        toggleWalletModal()
-        return setQueuedNetworkSwitch(supportedChainId)
-      } else if (implements3085 && library && supportedChainId) {
-        switchToNetwork({ library, chainId: supportedChainId })
-        return open && toggle()
-      }
-
-      return
-    },
-    [account, implements3085, library, open, toggle, toggleWalletModal]
-  )
-
-  // MOD: used with mod hook - used to connect disconnected wallet to selected network
-  // if wallet supports 3085
-  useEffect(() => {
-    if (queuedNetworkSwitch && account && chainId && implements3085) {
-      networkCallback(queuedNetworkSwitch)
-      setQueuedNetworkSwitch(null)
-    }
-  }, [networkCallback, queuedNetworkSwitch, chainId, account, implements3085])
+  const { account, chainId, library } = useActiveWeb3React()
+  const {
+    callback: networkCallback,
+    conditionalToggle,
+    chainInfo: info,
+    mainnetInfo,
+    isUnsupportedChain,
+    showSelector,
+    nodeRef: node,
+    isModalOpen: open,
+  } = useChangeNetworks({ account, chainId, library })
 
   if (!chainId || !info || !library || isUnsupportedChain) {
     return null

src/custom/components/Header/index.tsx

@@ -261,7 +261,12 @@ export default function Header() {
           <HeaderElement>
             {IS_CLAIMING_ENABLED && (
               <VCowWrapper>
-                <CowClaimButton isClaimPage={isClaimPage} account={account} handleOnClickClaim={handleOnClickClaim} />
+                <CowClaimButton
+                  isClaimPage={isClaimPage}
+                  account={account}
+                  chainId={chainId}
+                  handleOnClickClaim={handleOnClickClaim}
+                />
               </VCowWrapper>
             )}
 

src/custom/components/Menu/index.tsx

@@ -291,7 +291,12 @@ export function Menu({ darkMode, toggleDarkMode, isClaimPage }: MenuProps) {
   return (
     <StyledMenu isClaimPage={isClaimPage}>
       <MenuFlyout>
-        <CowClaimButton isClaimPage={isClaimPage} handleOnClickClaim={handleOnClickClaim} />
+        <CowClaimButton
+          isClaimPage={isClaimPage}
+          handleOnClickClaim={handleOnClickClaim}
+          account={account}
+          chainId={chainId}
+        />
 
         <ResponsiveInternalMenuItem to="/" onClick={close}>
           <Repeat size={14} /> Swap

src/custom/components/NotificationBanner/index.tsx

@@ -11,6 +11,7 @@ type Level = 'info' | 'warning' | 'error'
 
 export interface BannerProps {
   children: React.ReactNode
+  className?: string
   level: Level
   isVisible: boolean
   id?: string