Merge pull request #360 from LinkdropHQ/dev

RELEASE 2.2.27

CHANGELOG.md

@@ -2,6 +2,8 @@
 
 ## 2.2.27
 - new linkdrop-batch-sdk package
+- new logic for wallet connection
+- UI updates for header
 
 ## 2.2.26
 - added query params to url (autoclaim and dest)

package.json

@@ -42,7 +42,7 @@
     "immer": "^9.0.6",
     "is-android": "^1.0.1",
     "is-ios": "^2.1.0",
-    "linkdrop-batch-sdk": "^2.1.9",
+    "linkdrop-batch-sdk": "^2.1.10",
     "linkdrop-ui": "^0.0.44",
     "minimatch": "^3.0.5",
     "node-forge": "^1.3.0",

src/components/pages/claim-page/claiming-process/index.tsx

@@ -1,16 +1,39 @@
 import { FC, useEffect } from 'react'
-import { ScreenSubtitle, ScreenTitle, Container, ButtonComponent, IconContainer } from './styled-components'
+import {
+  TitleComponent,
+  ScreenButton,
+  Container,
+  Subtitle,
+  TokenImageContainer
+} from './styled-components'
 import { RootState, IAppDispatch } from 'data/store'
 import { connect } from 'react-redux'
 import { defineExplorerURL } from 'helpers'
 import * as dropAsyncActions from 'data/store/reducers/drop/async-actions'
-import { Loader } from 'components/common'
+import { ERC20TokenPreview, PoweredByFooter } from 'components/pages/common'
+import { Link } from 'components/common'
 
 const mapStateToProps = ({
-  drop: { hash, chainId }
+  drop: {
+    hash,
+    chainId,
+    type,
+    amount
+  },
+  token: {
+    name,
+    image,
+    decimals,
+
+  }
 }: RootState) => ({
   hash,
-  chainId
+  chainId,
+  name,
+  image,
+  decimals,
+  type,
+  amount
 })
 
 const mapDispatcherToProps = (dispatch: IAppDispatch) => {
@@ -23,25 +46,48 @@ const mapDispatcherToProps = (dispatch: IAppDispatch) => {
 
 type ReduxType = ReturnType<typeof mapStateToProps> & ReturnType<typeof mapDispatcherToProps>
 
-const ClaimingProcess: FC<ReduxType> = ({ hash, chainId, checkTransactionStatus }) => {
+const ClaimingProcess: FC<ReduxType> = ({
+  hash,
+  chainId,
+  checkTransactionStatus,
+  name,
+  image,
+  amount,
+  decimals,
+  type
+}) => {
   useEffect(() => {
     if (!hash) { return }
     checkTransactionStatus()
   }, [])
 
-  const explorerUrl = chainId && hash ? <ButtonComponent
-    href={`${defineExplorerURL(chainId)}/tx/${hash}`}
-    title='View in explorer'
-    target='_blank'
+  const explorerUrl = `${defineExplorerURL(chainId as number)}/tx/${hash}`
+
+  const explorerButton = hash ? <ScreenButton
+    onClick={() => window.open(explorerUrl , '_blank')}
+    loading
+    disabled
+    title='Claiming'
     appearance='default'
   /> : null
-  return <Container>
-    <IconContainer>
-      <Loader />
-    </IconContainer>
-    <ScreenTitle>Processing Transaction</ScreenTitle>
-    <ScreenSubtitle>This may take a few minutes. You can return to the app later to check on the status</ScreenSubtitle>
-    {explorerUrl} 
+
+  const tokenImage = type === 'ERC20' ?
+    <ERC20TokenPreview
+      name={name}
+      image={image as string}
+      amount={amount as string}
+      decimals={decimals}
+      status='initial'
+    /> : <TokenImageContainer src={image as string} alt={name} />
+
+  return <Container> 
+    {tokenImage}
+    {type !== 'ERC20' && <TitleComponent>{name}</TitleComponent>}
+    <Subtitle>
+      Transaction is in process. View on <Link href={explorerUrl} target="_blank">Explorer</Link>
+    </Subtitle>
+    {explorerButton}
+    <PoweredByFooter />
   </Container>
 }
 

src/components/pages/claim-page/claiming-process/styled-components.tsx

@@ -1,28 +1,34 @@
 import styled from 'styled-components'
-import { Title, Text, Button } from 'components/common'
+import { Button, Text, TokenImage, Title } from 'components/common'
 
-export const Container = styled.div`
-  width: 100%;
-  display: flex;
-  align-items: center;
-  flex-direction: column;
-  text-align: center;
+export const TitleComponent = styled(Title)`
+  margin: 0 0 16px;
+  font-weight: 600;
 `
 
-export const ScreenTitle = styled(Title)`
-  margin-bottom: 30px;
-  font-weight: 600;
+export const Subtitle = styled.h3`
+  font-size: 16px;
+  color: ${props => props.theme.primaryTextColor};
+  font-weight: 400;
+  margin: 0 0 36px;
 `
 
-export const ScreenSubtitle = styled(Text)`
-  margin-bottom: 36px;
-  color: ${props => props.theme.additionalTextColor};
+export const Container = styled.div`
+  text-align: center;
+  max-width: 343px;
 `
 
-export const ButtonComponent = styled(Button)`
+export const ScreenButton = styled(Button)`
+  max-width: 100%;
   width: 100%;
+  margin-bottom: 16px;
 `
 
-export const IconContainer = styled.div`
-  margin-bottom: 35px;
-`
+export const TokenImageContainer = styled(TokenImage)`
+  margin: 0 auto 25px;
+  background: ${props => props.theme.widgetColor};
+`
+
+export const UserAddress = styled.span`
+  color: ${props => props.theme.linkColor};
+`

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

@@ -44,8 +44,18 @@ import { UserActions } from 'data/store/reducers/user/types'
 import { useHistory } from 'react-router-dom'
 
 const mapStateToProps = ({
-  user: { address, provider, chainId, initialized },
-  drop: { step, claimCode, wallet, type }
+  user: {
+    address,
+    provider,
+    chainId,
+    initialized
+  },
+  drop: {
+    step,
+    claimCode,
+    wallet,
+    type
+  }
 }: RootState) => ({
   address,
   step,
@@ -95,7 +105,8 @@ const mapDispatcherToProps = (dispatch: Dispatch<DropActions> & Dispatch<TokenAc
       ),
       claimERC20: (address: string) => dispatch(
         dropAsyncActions.claimERC20(address, true)
-      )
+      ),
+      logout: () => dispatch(userAsyncActions.logout())
   }
 }
 
@@ -193,7 +204,9 @@ const defineHeader = (
   action: (prevStep: TDropStep) => void
 ) => {
   const backAction = defineBackAction(step, wallet, action)
-  return <PageHeader backAction={backAction}/>
+  return <PageHeader
+    backAction={backAction}
+  />
 }
 
 const ClaimPage: FC<ReduxType> = ({
@@ -207,7 +220,8 @@ const ClaimPage: FC<ReduxType> = ({
   type,
   claimERC1155,
   claimERC20,
-  claimERC721
+  claimERC721,
+  logout
 }) => {
   const setAddressCallback = (address: string) => {
     if (type === 'ERC1155') {
@@ -255,8 +269,12 @@ const ClaimPage: FC<ReduxType> = ({
   }, [address, chainId, connector, claimCode, signer])
 
   return <Page>
+    {defineHeader(
+      step,
+      wallet,
+      setStep
+    )}
     <Container>
-      {defineHeader(step, wallet, setStep)}
       {screen}
     </Container> 
   </Page>

src/components/pages/claim-page/initial-screen/index.tsx

@@ -24,12 +24,7 @@ import {
 import { plausibleApi } from 'data/api'
 import { ERC20TokenPreview, PoweredByFooter } from 'components/pages/common'
 import { connect } from 'react-redux'
-import { switchNetwork } from 'data/store/reducers/user/async-actions'
-import { UserActions } from 'data/store/reducers/user/types'
 import * as userAsyncActions from 'data/store/reducers/user/async-actions'
-
-
-const { REACT_APP_CLIENT} = process.env
 const config = defineApplicationConfig()
 
 const mapStateToProps = ({
@@ -107,14 +102,6 @@ const mapDispatcherToProps = (dispatch: Dispatch<DropActions> & Dispatch<TokenAc
 
 type ReduxType = ReturnType<typeof mapStateToProps> & ReturnType<typeof mapDispatcherToProps> 
 
-const defineTokenId = (type: TDropType | null, tokenId?: string | null) => {
-  if (type === 'ERC20' || !tokenId) { return '' }
-  if (tokenId.length > 5) {
-    return ` #${shortenString(tokenId, 3)}`
-  }
-  return ` #${tokenId}`
-}
-
 const InitialScreen: FC<ReduxType> = ({
   name,
   type,
@@ -190,7 +177,7 @@ const InitialScreen: FC<ReduxType> = ({
 
   useEffect(() => {
     if (autoclaim) {
-      claim()
+      claimLink()
     }
   }, [])
 
@@ -234,7 +221,6 @@ const InitialScreen: FC<ReduxType> = ({
     </TextComponent>
   </> : <>
     {image && <TokenImageContainer src={image} alt={name} />}
-    {(REACT_APP_CLIENT as string) !== 'wedding' && <Subtitle>{defineTokenId(type, tokenId)}</Subtitle>}
     <TitleComponent>{tokenTitle}</TitleComponent>
     <TextComponent>
       Here is a preview of the NFT you’re about to receive to: {addressPreview}

src/components/pages/claim-page/initial-screen/styled-components.tsx

@@ -1,10 +1,6 @@
 import styled from 'styled-components'
 import { Button, Text, TokenImage, Title } from 'components/common'
 
-type TScreenButton = {
-  onClick: () => void
-}
-
 export const TitleComponent = styled(Title)`
   margin: 0 0 12px;
   font-weight: 600;
@@ -22,14 +18,15 @@ export const Container = styled.div`
   max-width: 343px;
 `
 
-export const ScreenButton = styled(Button)<TScreenButton>`
+export const ScreenButton = styled(Button)`
   max-width: 100%;
   width: 100%;
   margin-bottom: 16px;
 `
 
 export const TextComponent = styled(Text)`
   text-align: center;
+  color: ${props => props.theme.primaryTextColor};
   margin-bottom: 32px;
 `