Merge pull request #275 from LinkdropHQ/dev

RELEASE 2.2.22

CHANGELOG.md

@@ -1,5 +1,8 @@
 # Linkdrop Claim app
 
+## 2.2.22
+- added fix for network switch
+
 ## 2.2.21
 - added update for dispenser (no address and connect needed)
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "app-claim",
-  "version": "2.2.21",
+  "version": "2.2.22",
   "private": true,
   "dependencies": {
     "@auth0/auth0-react": "^2.1.1",

src/components/pages/claim-page/change-network/index.tsx

@@ -46,7 +46,9 @@ const ChangeNetwork: FC<ReduxType> = ({
     <Subtitle>To claim {type === 'ERC20' ? 'tokens' : 'an NFT'} you need to switch your wallet to {networkName} network</Subtitle>
     <ScreenButton onClick={async () => {
       if (chainId) {
-        switchNetwork(userProvider, chainId, campaignId as string, () => {})
+        switchNetwork(userProvider, chainId, campaignId as string, () => {
+          window.location.reload()
+        })
       } else {
         alert('No chain provided')
       }

src/components/pages/common/qr-campaign-not-eligible/index.tsx

@@ -10,7 +10,7 @@ import ErrorImg from 'images/error-black.png'
 import { IAppDispatch, RootState } from 'data/store'
 import { connect } from 'react-redux'
 import * as dropAsyncActions from 'data/store/reducers/drop/async-actions'
-import { useAccount, useConnect, useDisconnect } from 'wagmi'
+import { useDisconnect } from 'wagmi'
 
 const mapStateToProps = ({
   user: {

src/components/pages/multi-qr/index.tsx

@@ -4,14 +4,14 @@ import * as dropAsyncActions from 'data/store/reducers/drop/async-actions'
 import { connect } from 'react-redux'
 import {
   Container,
-  IconContainer,
-  LoadingTitle
+  LinkdropLogo
 } from './styled-components'
 import { useParams, useHistory } from 'react-router-dom'
 import Page from '../page'
 import { QRIncorrectParameter } from 'components/pages/common'
-import Icons from 'icons'
 import { alertError } from 'helpers'
+import LinkdropLogoImage from 'images/linkdrop.png'
+import { Loader } from 'components/common'
 
 const mapStateToProps = ({
   user: { initialized },
@@ -63,10 +63,8 @@ const MultiQR: FC<ReduxType> = ({ computeScanAddress, initialized, error }) => {
 
   return <Page>
     <Container>
-      <IconContainer>
-        <Icons.LinkdropIcon />
-      </IconContainer>
-      <LoadingTitle>Linkdrop</LoadingTitle>
+      <LinkdropLogo src={LinkdropLogoImage} />
+      <Loader />
     </Container>
   </Page>
 }

src/components/pages/multi-qr/styled-components.tsx

@@ -8,17 +8,13 @@ export const Container = styled.div`
   max-width: 343px;
   margin: 0 auto;
   justify-content: center;
+  height: 100%;
 `
 
-export const IconContainer = styled.div`
-  margin-bottom: 35px;
-  margin-top: 50px;
-`
-
-export const LoadingTitle = styled.h3`
-  font-size: 24px;
-  line-height: 32px;
-  color: ${props => props.theme.primaryTextColor};
-  margin: 0 0 12px;
-  text-align: center;
+export const LinkdropLogo = styled.img`
+  position: absolute;
+  top: 24px;
+  left: 50%;
+  transform: translateX(-50%);
+  max-width: 107px;
 `

src/components/pages/scan/index.tsx

@@ -8,12 +8,14 @@ import {
   Image,
   Title,
   Subtitle,
-  IconContainer,
-  LoadingTitle,
+  LinkdropLogo
 } from './styled-components'
 import { useParams, useHistory } from 'react-router-dom'
 import Page from '../page'
 import { TDropError, TDropType, TMultiscanStep } from 'types'
+import LinkdropLogoImage from 'images/linkdrop.png'
+import RedirectImg from 'images/redirect-image.png'
+
 import {
   QRNotMapped,
   QRNotFound,
@@ -30,6 +32,7 @@ import * as dropActions from 'data/store/reducers/drop/actions'
 import { DropActions } from 'data/store/reducers/drop/types'
 import { Dispatch } from 'redux'
 import WhitelistDispenser from './components/whitelist'
+import { Loader, Link } from 'components/common'
 
 const mapStateToProps = ({
   user: { initialized, address },
@@ -41,7 +44,8 @@ const mapStateToProps = ({
     type,
     amount,
     whitelistOn,
-    whitelistType
+    whitelistType,
+    multiscanLinkDecrypted
   },
   token: {
     image,
@@ -54,7 +58,9 @@ const mapStateToProps = ({
   amount,
   decimals,
   initialized,
-  error, loading,
+  error,
+  loading,
+  multiscanLinkDecrypted,
   multiscanStep,
   wallet,
   image,
@@ -165,7 +171,8 @@ const Scan: FC<ReduxType> = ({
   getLink,
   error,
   multiscanStep,
-  getMultiQRCampaignData
+  getMultiQRCampaignData,
+  multiscanLinkDecrypted
 }) => {
   const {
     multiscanQRId,
@@ -180,7 +187,6 @@ const Scan: FC<ReduxType> = ({
   const history = useHistory()
 
   useEffect(() => {    
-
     // get campaign data
     getMultiQRCampaignData(
       multiscanQRId,
@@ -194,7 +200,6 @@ const Scan: FC<ReduxType> = ({
   }, [])
 
   useEffect(() => {
-
     // get link
     if (multiscanStep === 'initial') {
       getLink(
@@ -213,16 +218,25 @@ const Scan: FC<ReduxType> = ({
     return <ErrorScreen error={error} />
   }
 
+  if (multiscanStep === 'link_received') {
+    return <Page>
+      <Container>
+        <Image src={RedirectImg} />
+        <Subtitle>
+        You are about to claim tokens with Linkdrop. If you are not automatically redirected, please go <Link href={multiscanLinkDecrypted as string}>here</Link>
+        </Subtitle>
+      </Container>
+    </Page>
+  }
+
   if (
     multiscanStep === 'initial' ||
     multiscanStep === 'not_initialized'
   ) {
     return <Page>
       <Container>
-        <IconContainer>
-          <Icons.LinkdropIcon />
-        </IconContainer>
-        <LoadingTitle>Linkdrop</LoadingTitle>
+        <LinkdropLogo src={LinkdropLogoImage} />
+        <Loader />
       </Container>
     </Page>
   }

src/components/pages/scan/styled-components.tsx

@@ -9,14 +9,9 @@ export const Container = styled.div`
   margin: 0 auto;
   justify-content: center;
   text-align: center;
+  height: 100%;
 `
 
-export const TokenImageContainer = styled(TokenImage)`
-  margin: 0 auto 25px;
-  background: ${props => props.theme.widgetColor};
-`
-
-
 export const Image = styled.img`
   max-width: 240px;
   margin-bottom: 24px;
@@ -31,9 +26,10 @@ export const Title = styled.h2`
 `
 
 export const Subtitle = styled.h3`
-  color: ${props => props.theme.additionalTextColor};
-  font-size: 14px;
+  color: ${props => props.theme.primaryTextColor};
+  font-size: 16px;
   margin: 0 0 40px;
+  font-weight: 400;
 `
 
 export const ButtonStyled = styled(Button)`
@@ -60,4 +56,13 @@ export const LoadingText = styled.p`
   color: ${props => props.theme.additionalTextColor};
   margin: 0;
   text-align: center;
-`
+`
+
+
+export const LinkdropLogo = styled.img`
+  position: absolute;
+  top: 24px;
+  left: 50%;
+  transform: translateX(-50%);
+  max-width: 107px;
+`

src/data/store/reducers/drop/async-actions/get-link-by-multi-qr.tsx

@@ -36,6 +36,7 @@ export default function getLinkByMultiQR(
         const decryptKey = ethers.utils.id(multiscanQREncCode)
         const linkDecrypted = wccrypto.decrypt({ encoded: encrypted_claim_link, symKey: decryptKey.replace('0x', '') })
         dispatch(actionsDrop.setMultiscanLinkDecrypted(linkDecrypted))
+        dispatch(actionsDrop.setMultiscanStep('link_received'))
         if (linkDecrypted.includes(window.location.host)) {
           return linkRedirectCallback && linkRedirectCallback(linkDecrypted.split('/#')[1])
         } else {

src/types/multiscan-step.tsx

@@ -6,6 +6,9 @@ type TMultiscanStep =
                   // LINK WITH NO ADDRESS FETCH
                  'initial' |
 
+
+                 'link_received' |
+
                   // DATA FETCHED AND WHITELIST ENABLED
                  'whitelist' |
                  'wallets_list' |