Merge pull request #2289 from gnosis/release/1.10

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

.prettierrc

@@ -2,4 +2,4 @@
   "semi": false,
   "singleQuote": true,
   "printWidth": 120
-}
+}

package.json

@@ -155,7 +155,8 @@
     "workbox-routing": "^6.1.0"
   },
   "resolutions": {
-    "@walletconnect/ethereum-provider": "1.6.4"
+    "@walletconnect/ethereum-provider": "1.6.4",
+    "react-error-overlay": "6.0.9"
   },
   "scripts": {
     "start:default": "craco start",

src/components/Confetti/index.tsx

@@ -10,7 +10,7 @@ export default function Confetti({ start, variant }: { start: boolean; variant?:
 
   return start && width && height ? (
     <ReactConfetti
-      style={{ zIndex: 1401 }}
+      style={{ zIndex: 1401, maxWidth: '100%' }} // mod fix for horizontal slider
       numberOfPieces={400}
       recycle={false}
       run={true}

src/components/Menu/index.tsx

@@ -68,7 +68,7 @@ const StyledMenuButton = styled.button`
   }
 `
 
-const UNIbutton = styled(ButtonPrimary)`
+export const UNIbutton = styled(ButtonPrimary)`
   background-color: ${({ theme }) => theme.bg3};
   background: radial-gradient(174.47% 188.91% at 1.84% 0%, #ff007a 0%, #2172e5 100%), #edeef2;
   border: none;

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,23 +51,25 @@ export default function ClaimModal() {
   const isOpen = useModalOpen(ApplicationModal.SELF_CLAIM)
   const toggleClaimModal = useToggleSelfClaimModal()
 
-  const { account, chainId } = useActiveWeb3React()
+  const { 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)
+  const { claimCallback } = useClaimCallback(account) // TODO: remove me, hard coded only for testing
   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()
+    claimCallback([{ index: 3 }])
       // reset modal and log error
       .catch((error) => {
         setAttempting(false)

src/components/swap/styleds.tsx

@@ -1,7 +1,7 @@
 import { loadingOpacityMixin } from 'components/Loader/styled'
 import { TooltipContainer } from 'components/Tooltip'
 import { transparentize } from 'polished'
-import { ReactNode } from 'react'
+import { MouseEventHandler, ReactNode } from 'react'
 import { AlertTriangle } from 'react-feather'
 import { Text } from 'rebass'
 import styled, { css } from 'styled-components/macro'
@@ -89,9 +89,10 @@ export const Dots = styled.span`
   }
 `
 
-const SwapCallbackErrorInner = styled.div`
+const SwapCallbackErrorInner = styled.div<{ $css?: string }>`
   background-color: ${({ theme }) => transparentize(0.9, theme.red1)};
   border-radius: 1rem;
+  position: relative;
   display: flex;
   align-items: center;
   font-size: 0.825rem;
@@ -105,6 +106,8 @@ const SwapCallbackErrorInner = styled.div`
     margin: 0;
     font-weight: 500;
   }
+
+  ${({ $css }) => $css}
 `
 
 const SwapCallbackErrorInnerAlertTriangle = styled.div`
@@ -118,9 +121,26 @@ const SwapCallbackErrorInnerAlertTriangle = styled.div`
   height: 48px;
 `
 
-export function SwapCallbackError({ error }: { error: ReactNode }) {
+const Closer = styled.div`
+  position: absolute;
+  right: 0;
+  top: 0;
+  padding: 7px 10px;
+  font-weight: bold;
+  cursor: pointer;
+`
+
+export type ErrorMessageProps = {
+  error?: ReactNode
+  handleClose?: MouseEventHandler<HTMLDivElement>
+  showClose?: boolean
+  $css?: string
+}
+
+export function SwapCallbackError({ error, handleClose, showClose, ...styleProps }: ErrorMessageProps) {
   return (
-    <SwapCallbackErrorInner>
+    <SwapCallbackErrorInner {...styleProps}>
+      {showClose && <Closer onClick={handleClose}>X</Closer>}
       <SwapCallbackErrorInnerAlertTriangle>
         <AlertTriangle size={24} />
       </SwapCallbackErrorInnerAlertTriangle>