feat(nfts): add refresh to asset page

blockchain · May 7, 2022 · 38a6480 · 38a6480
1 parent 63867cf
commit 38a6480
Show file tree

Hide file tree

Showing 4 changed files with 69 additions and 22 deletions.
diff --git a/packages/blockchain-wallet-v4-frontend/src/scenes/Nfts/Asset/Asset.tsx b/packages/blockchain-wallet-v4-frontend/src/scenes/Nfts/Asset/Asset.tsx
@@ -2,7 +2,7 @@ import React, { useEffect, useState } from 'react'
 import { FormattedMessage } from 'react-intl'
 import { connect, ConnectedProps } from 'react-redux'
 import { LinkContainer } from 'react-router-bootstrap'
-import { colors } from '@blockchain-com/constellation'
+import { colors, Icon } from '@blockchain-com/constellation'
 import BigNumber from 'bignumber.js'
 import { formatDistanceToNow, subDays } from 'date-fns'
 import { bindActionCreators } from 'redux'
@@ -45,6 +45,7 @@ import { media } from 'services/styles'
 
 import { NftPage } from '../components'
 import NftError from '../components/NftError'
+import NftRefreshIcon from '../components/NftRefreshIcon'
 import Events from '../Events'
 import Offers from '../Offers'
 import { EthText, Highest } from './components'
@@ -282,6 +283,7 @@ const NftAsset: React.FC<Props> = ({
   ...rest
 }) => {
   const { contract, id } = rest.computedMatch.params
+  const [isRefreshRotating, setIsRefreshRotating] = useState<boolean>(false)
   // @ts-ignore
   const [assetQuery] = useAssetQuery({
     variables: {
@@ -304,6 +306,14 @@ const NftAsset: React.FC<Props> = ({
     })
   }, [contract, id, nftsActions])
 
+  useEffect(() => {
+    if (isRefreshRotating) {
+      setTimeout(() => {
+        setIsRefreshRotating(false)
+      }, 500)
+    }
+  }, [isRefreshRotating])
+
   const currentAsset = assetQuery.data?.assets[0]
   const ownedBySelf = currentAsset?.owners
     ? currentAsset.owners.find((owner) => {
@@ -440,7 +450,7 @@ const NftAsset: React.FC<Props> = ({
                     weight={600}
                     style={{
                       alignItems: 'center',
-                      padding: '0em 0em 1em 0em'
+                      padding: '0em 0em 0.5em 0em'
                     }}
                   >
                     Collection
@@ -461,6 +471,26 @@ const NftAsset: React.FC<Props> = ({
                     </CollectionName>
                   </CustomLink>
                 </div>
+                <Button
+                  data-e2e='nftAssetRefresh'
+                  style={{
+                    borderRadius: '50%',
+                    height: '40px',
+                    maxWidth: '40px',
+                    minWidth: '40px',
+                    padding: '12px'
+                  }}
+                  nature='empty-blue'
+                  onClick={() => {
+                    nftsActions.fetchOpenSeaAsset({
+                      asset_contract_address: contract,
+                      token_id: id
+                    })
+                    setIsRefreshRotating(true)
+                  }}
+                >
+                  <NftRefreshIcon isActive={isRefreshRotating} size='lg' />
+                </Button>
               </div>
               <AssetName>
                 {currentAsset.name || `${currentAsset.collection?.name}${' #'}`}

diff --git a/packages/blockchain-wallet-v4-frontend/src/scenes/Nfts/components/NftRefreshIcon.tsx b/packages/blockchain-wallet-v4-frontend/src/scenes/Nfts/components/NftRefreshIcon.tsx
@@ -0,0 +1,33 @@
+import React from 'react'
+import { Icon } from '@blockchain-com/constellation'
+import { IconRefresh } from '@blockchain-com/icons'
+import styled from 'styled-components'
+
+export const StyledIconRefresh = styled(IconRefresh)`
+  @keyframes spin {
+    from {
+      transform: rotate(0deg);
+    }
+    to {
+      transform: rotate(360deg);
+    }
+  }
+  &.active {
+    animation: spin 0.5s linear 1;
+  }
+`
+
+const NftRefreshIcon = (props: Props) => {
+  return (
+    <Icon label='refresh' size={props.size} color='blue600'>
+      <StyledIconRefresh className={props.isActive ? 'active' : ''} />
+    </Icon>
+  )
+}
+
+type Props = {
+  isActive: boolean
+  size: 'sm' | 'md' | 'lg'
+}
+
+export default NftRefreshIcon
diff --git a/packages/blockchain-wallet-v4-frontend/src/scenes/Nfts/components/TraitGridFilters.tsx b/packages/blockchain-wallet-v4-frontend/src/scenes/Nfts/components/TraitGridFilters.tsx
@@ -2,7 +2,7 @@ import React, { useEffect, useState } from 'react'
 import { FormattedMessage } from 'react-intl'
 import { connect, ConnectedProps } from 'react-redux'
 import { colors, Icon } from '@blockchain-com/constellation'
-import { IconCloseCircle, IconFilter, IconRefresh } from '@blockchain-com/icons'
+import { IconCloseCircle, IconFilter } from '@blockchain-com/icons'
 import { bindActionCreators } from '@reduxjs/toolkit'
 import { Field } from 'redux-form'
 import styled from 'styled-components'
@@ -25,6 +25,7 @@ import {
 } from '../utils/NftUtils'
 import { opensea_event_types } from '.'
 import EventTypeName from './EventTypeName'
+import NftRefreshIcon from './NftRefreshIcon'
 
 const Wrapper = styled.div`
   position: sticky;
@@ -63,20 +64,6 @@ const TraitGrid = styled.div<{ hasSomeFilters: boolean }>`
   z-index: 10;
 `
 
-const StyledIconRefresh = styled(IconRefresh)`
-  @keyframes spin {
-    from {
-      transform: rotate(0deg);
-    }
-    to {
-      transform: rotate(360deg);
-    }
-  }
-  &.active {
-    animation: spin 0.5s linear 1;
-  }
-`
-
 const SortByWrapper = styled.div`
   width: 300px;
   z-index: 20;
@@ -206,11 +193,7 @@ const TraitGridFilters: React.FC<Props> = ({
                         </Text>
                       </Flex>
                     )}
-                    <Icon label='refresh' color='blue600' size='sm'>
-                      <StyledIconRefresh
-                        className={`refresh ${isRefreshRotating ? 'active' : ''}`}
-                      />
-                    </Icon>
+                    <NftRefreshIcon size='sm' isActive={isRefreshRotating} />
                   </Flex>
                 </Button>
               </Flex>

diff --git a/packages/blockchain-wallet-v4-frontend/src/scenes/Nfts/components/index.tsx b/packages/blockchain-wallet-v4-frontend/src/scenes/Nfts/components/index.tsx
@@ -1,3 +1,4 @@
+import { IconRefresh } from '@blockchain-com/icons'
 import styled from 'styled-components'
 
 import CoinDisplay from 'components/Display/CoinDisplay'