feat(nfts): style refresh button

blockchain · May 4, 2022 · 93f59c3 · 93f59c3
1 parent 8d0329d
commit 93f59c3
Show file tree

Hide file tree

Showing 6 changed files with 102 additions and 59 deletions.
diff --git a/...ockchain-wallet-v4-frontend/src/scenes/Nfts/Address/AddressItems/AddressItems.results.tsx b/...ockchain-wallet-v4-frontend/src/scenes/Nfts/Address/AddressItems/AddressItems.results.tsx
@@ -34,6 +34,7 @@ const NftAddressResults: React.FC<Props> = ({
     : null
 
   const [result] = useOwnerQuery({
+    requestPolicy: 'network-only',
     variables: {
       filter: [
         {

diff --git a/packages/blockchain-wallet-v4-frontend/src/scenes/Nfts/Collection/Collection.tsx b/packages/blockchain-wallet-v4-frontend/src/scenes/Nfts/Collection/Collection.tsx
@@ -60,10 +60,11 @@ const NftsCollection: React.FC<Props> = ({ formActions, formValues, ...rest }) =
   const params = new URLSearchParams(window.location.hash.split('?')[1])
   const tab = params.get('tab') === 'EVENTS' ? 'EVENTS' : 'ITEMS'
 
-  const [activeTab, setActiveTab] = useState<'ITEMS' | 'EVENTS'>(tab)
   const [refreshTrigger, setRefreshTrigger] = useState<number>(0)
+  const [activeTab, setActiveTab] = useState<'ITEMS' | 'EVENTS'>(tab)
 
   const [collectionsQuery] = useCollectionsQuery({
+    requestPolicy: 'network-only',
     variables: { filter: [{ field: CollectionFilterFields.Slug, value: slug }] }
   })
 

diff --git a/...wallet-v4-frontend/src/scenes/Nfts/Collection/CollectionItems/CollectionItems.results.tsx b/...wallet-v4-frontend/src/scenes/Nfts/Collection/CollectionItems/CollectionItems.results.tsx
@@ -67,6 +67,7 @@ const CollectionItemsResults: React.FC<Props> = ({
   }
 
   const [result] = useAssetsQuery({
+    requestPolicy: 'network-only',
     variables: {
       filter,
       forSale: !!formValues?.forSale,

diff --git a/packages/blockchain-wallet-v4-frontend/src/scenes/Nfts/Events/Events.results.tsx b/packages/blockchain-wallet-v4-frontend/src/scenes/Nfts/Events/Events.results.tsx
@@ -22,6 +22,7 @@ const EventsResults: React.FC<Props> = ({
   setNextPageFetchError
 }) => {
   const [result] = useEventsQuery({
+    requestPolicy: 'network-only',
     variables: {
       filter: filters,
       limit: EVENT_PAGE_LIMIT,

diff --git a/packages/blockchain-wallet-v4-frontend/src/scenes/Nfts/Firehose/Firehose.results.tsx b/packages/blockchain-wallet-v4-frontend/src/scenes/Nfts/Firehose/Firehose.results.tsx
@@ -42,6 +42,7 @@ const NftFirehoseResults: React.FC<Props> = ({
   }
 
   const [result] = useAssetsQuery({
+    requestPolicy: 'network-only',
     variables: {
       filter,
       forSale: formValues?.forSale,

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
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useEffect, useState } from 'react'
 import { FormattedMessage } from 'react-intl'
 import { connect, ConnectedProps } from 'react-redux'
 import { colors, Icon } from '@blockchain-com/constellation'
@@ -8,6 +8,7 @@ import { Field } from 'redux-form'
 import styled from 'styled-components'
 
 import { Button, TabMenu, TabMenuItem, Text } from 'blockchain-info-components'
+import { Flex } from 'components/Flex'
 import SelectBox from 'components/Form/SelectBox'
 import { actions } from 'data'
 import { Analytics } from 'data/types'
@@ -42,12 +43,25 @@ const TraitGrid = styled.div<{ hasSomeFilters: boolean }>`
   gap: 6px;
   top: 0px;
   background: ${(props) => props.theme.white};
-  margin-top: -8px;
   padding-top: ${(props) => (props.hasSomeFilters ? '8px' : '0px')};
   padding-bottom: ${(props) => (props.hasSomeFilters ? '16px' : '0px')};
   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 TraitGridFilters: React.FC<Props> = ({
   activeTab,
   analyticsActions,
@@ -59,6 +73,7 @@ const TraitGridFilters: React.FC<Props> = ({
   showSortBy,
   tabs
 }) => {
+  const [isRefreshRotating, setIsRefreshRotating] = useState<boolean>(false)
   const route = window.location.hash.split('?')[0].substr(1)
   const minMaxFilters = getMinMaxFilters(formValues)
   const traitFilters = getTraitFilters(formValues)
@@ -70,65 +85,88 @@ const TraitGridFilters: React.FC<Props> = ({
       Object.keys(formValues).some((key) => Object.keys(formValues[key]).some(Boolean))) ||
     false
 
+  useEffect(() => {
+    if (isRefreshRotating) {
+      setTimeout(() => {
+        setIsRefreshRotating(false)
+      }, 500)
+    }
+  }, [isRefreshRotating])
+
   return (
     <>
-      <div style={{ alignItems: 'center', display: 'flex', justifyContent: 'space-between' }}>
-        {tabs.length ? (
-          <TabMenu style={{ marginBottom: '12px', width: 'fit-content' }}>
-            {tabs.map((tab) => (
-              <TabMenuItem
-                key={tab}
-                selected={activeTab === tab}
-                onClick={() => routerActions.push(`${route}?tab=${tab}`)}
-              >
-                {tab === 'ITEMS' ? (
-                  <FormattedMessage id='copy.items' defaultMessage='Items' />
-                ) : tab === 'EVENTS' ? (
-                  <FormattedMessage id='copy.events' defaultMessage='Events' />
-                ) : (
-                  <FormattedMessage id='copy.explore' defaultMessage='Explore' />
-                )}
-              </TabMenuItem>
-            ))}
-          </TabMenu>
-        ) : null}
-
-        <div>
-          <Button
-            onClick={() => setRefreshTrigger((r) => r + 1)}
-            data-e2e='nftRefresh'
-            nature='empty-blue'
-            size='small'
-          >
-            <Icon label='refresh' size='sm'>
-              <IconRefresh />
-            </Icon>
-          </Button>
-          {showSortBy ? (
-            <div style={{ height: '56px', width: '300px', zIndex: 20 }}>
-              <Field
-                name='sortBy'
-                component={SelectBox}
-                onChange={(e) => {
-                  if (e.includes('price')) {
-                    formActions.change('nftFilter', 'forSale', true)
-                  }
-                }}
-                // @ts-ignore
-                elements={[
-                  {
-                    group: '',
-                    items: [
-                      { text: 'Price: Low to High', value: `${AssetSortFields.Price}-ASC` },
-                      { text: 'Price: High to Low', value: `${AssetSortFields.Price}-DESC` },
-                      { text: 'Recently Listed', value: `${AssetSortFields.ListingDate}-DESC` }
-                    ]
-                  }
-                ]}
-              />
-            </div>
+      <div style={{ marginBottom: '8px', width: '100%' }}>
+        <Flex alignItems='center' justifyContent='space-between'>
+          {tabs.length ? (
+            <TabMenu style={{ width: 'fit-content' }}>
+              {tabs.map((tab) => (
+                <TabMenuItem
+                  key={tab}
+                  selected={activeTab === tab}
+                  onClick={() => routerActions.push(`${route}?tab=${tab}`)}
+                >
+                  {tab === 'ITEMS' ? (
+                    <FormattedMessage id='copy.items' defaultMessage='Items' />
+                  ) : tab === 'EVENTS' ? (
+                    <FormattedMessage id='copy.events' defaultMessage='Events' />
+                  ) : (
+                    <FormattedMessage id='copy.explore' defaultMessage='Explore' />
+                  )}
+                </TabMenuItem>
+              ))}
+            </TabMenu>
           ) : null}
-        </div>
+
+          <Flex alignItems='center' gap={16}>
+            <Button
+              height='100%'
+              onClick={() => {
+                if (!isRefreshRotating) setRefreshTrigger((r) => r + 1)
+                setIsRefreshRotating(true)
+              }}
+              data-e2e='nftRefresh'
+              nature='empty-blue'
+            >
+              <Flex gap={12} alignItems='center'>
+                <Flex flexDirection='column' alignItems='start' gap={4}>
+                  <Text size='12px' weight={600}>
+                    --- Items
+                  </Text>
+                  <Text size='10px' color='grey400' weight={500}>
+                    <FormattedMessage id='copy.refresh' defaultMessage='Refresh' />
+                  </Text>
+                </Flex>
+                <Icon label='refresh' color='blue600' size='sm'>
+                  <StyledIconRefresh className={`refresh ${isRefreshRotating ? 'active' : ''}`} />
+                </Icon>
+              </Flex>
+            </Button>
+            {showSortBy ? (
+              <div style={{ width: '300px', zIndex: 20 }}>
+                <Field
+                  name='sortBy'
+                  component={SelectBox}
+                  onChange={(e) => {
+                    if (e.includes('price')) {
+                      formActions.change('nftFilter', 'forSale', true)
+                    }
+                  }}
+                  // @ts-ignore
+                  elements={[
+                    {
+                      group: '',
+                      items: [
+                        { text: 'Price: Low to High', value: `${AssetSortFields.Price}-ASC` },
+                        { text: 'Price: High to Low', value: `${AssetSortFields.Price}-DESC` },
+                        { text: 'Recently Listed', value: `${AssetSortFields.ListingDate}-DESC` }
+                      ]
+                    }
+                  ]}
+                />
+              </div>
+            ) : null}
+          </Flex>
+        </Flex>
       </div>
       <TraitGrid hasSomeFilters={hasSomeFilters}>
         {collectionFilter ? (