feat(nfts): query params wip

packages/blockchain-wallet-v4-frontend/src/data/components/nfts/sagaRegister.ts

@@ -25,6 +25,7 @@ export default ({ api }) => {
     yield takeLatest(actions.fetchOpenSeaOrders, nftsSagas.fetchOpenSeaOrders)
     yield takeLatest(actions.fetchOpenseaAsset, nftsSagas.fetchOpenseaAsset)
     yield takeLatest(actions.fetchOpenseaStatus, nftsSagas.fetchOpenseaStatus)
+    yield takeLatest(actions.handleRouterChange, nftsSagas.handleRouterChange)
     yield takeLatest(actions.nftOrderFlowClose, nftsSagas.nftOrderFlowClose)
     yield takeLatest(actions.nftOrderFlowOpen, nftsSagas.nftOrderFlowOpen)
     yield takeLatest(actions.nftSearch, nftsSagas.nftSearch)

packages/blockchain-wallet-v4-frontend/src/data/components/nfts/sagas.ts

@@ -34,6 +34,7 @@ import { promptForSecondPassword } from 'services/sagas'
 import * as S from './selectors'
 import { actions as A } from './slice'
 import { NftOrderStatusEnum, NftOrderStepEnum } from './types'
+import { nonTraitFilters } from './utils'
 
 export const logLocation = 'components/nfts/sagas'
 export const WALLET_SIGNER_ERR = 'Error getting eth wallet signer.'
@@ -619,6 +620,28 @@ export default ({ api }: { api: APIType }) => {
           yield put(actions.form.change('nftFilter', 'forSale', true))
         }
       }
+
+      // MODIFY URL
+      const url = new URL(window.location.href)
+      const [hash, query] = url.href.split('#')[1].split('?')
+      // @ts-ignore
+      const params = Object.fromEntries(new URLSearchParams(query))
+      if (action.meta.field === 'forSale') {
+        params.forSale = action.payload
+      }
+      if (!nonTraitFilters.includes(action.meta.field)) {
+        params.traits = params.traits
+          ? (params.traits += `&${action.meta.field}=${action.payload}`)
+          : `${action.meta.field}=${action.payload}`
+      }
+
+      const newHash = `${hash}?${Object.entries(params)
+        .map(([key, value]) => `${key}=${value}`)
+        .join('&')}`
+
+      url.hash = newHash
+
+      window.history.pushState(null, '', url.toString())
     }
   }
 
@@ -665,16 +688,16 @@ export default ({ api }: { api: APIType }) => {
   // watch router change so we know if we need to reset nft trait filter form
   const handleRouterChange = function* (action) {
     if (action.payload.location.pathname.includes('/nfts/')) {
-      const regex = /\/nfts\/[^/]*$/g
-      const activeSlug = S.getActiveSlug(yield select())
-      const match = action.payload?.location?.pathname?.match(regex)
-      if (match) {
-        const nextSlug = match[0].split('/nfts/')[1]
-        if (nextSlug !== activeSlug && activeSlug) {
-          yield put(actions.form.reset('nftFilter'))
-        }
+      const url = new URL(window.location.href)
+      const [hash, query] = url.href.split('#')[1].split('?')
+      // @ts-ignore
+      const params = Object.fromEntries(new URLSearchParams(query))
 
-        yield put(A.setActiveSlug({ slug: nextSlug }))
+      if (params.forSale !== undefined) {
+        yield put(actions.form.change('nftFilter', 'forSale', Boolean(params.forSale)))
+      }
+      if (params.traits !== undefined) {
+        debugger
       }
     }
   }

packages/blockchain-wallet-v4-frontend/src/data/components/nfts/slice.ts

@@ -277,6 +277,7 @@ const nftsSlice = createSlice({
     fetchOpenseaStatusSuccess: (state, action: PayloadAction<OpenSeaStatus>) => {
       state.openSeaStatus = Remote.Success(action.payload)
     },
+    handleRouterChange: (state, action: PayloadAction<{ location: { pathname: string } }>) => {},
     nftOrderFlowClose: (state) => {
       state.orderFlow.walletUserIsAssetOwnerHack = false
 

packages/blockchain-wallet-v4-frontend/src/data/components/nfts/utils.ts

@@ -18,6 +18,7 @@ import {
 } from '@core/network/api/nfts/types'
 import { INVERSE_BASIS_POINT, NULL_ADDRESS } from '@core/redux/payment/nfts/constants'
 
+export const nonTraitFilters = ['min', 'max', 'sortBy', 'forSale', 'event', 'collection']
 /**
  * Special fixes for making BigNumbers using web3 results
  * @param arg An arg or the result of a web3 call to turn into a BigNumber

packages/blockchain-wallet-v4-frontend/src/layouts/Nfts/Nfts.tsx

@@ -40,6 +40,7 @@ const mapStateToProps = (state) => ({
 const mapDispatchToProps = (dispatch) => ({
   coinsActions: bindActionCreators(actions.core.data.coins, dispatch),
   modalActions: bindActionCreators(actions.modals, dispatch),
+  nftsActions: bindActionCreators(actions.components.nfts, dispatch),
   routerActions: bindActionCreators(actions.router, dispatch)
 })
 

packages/blockchain-wallet-v4-frontend/src/layouts/Nfts/NftsTemplate.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useEffect } from 'react'
 import { colors } from '@blockchain-com/constellation'
 import styled from 'styled-components'
 
@@ -33,6 +33,11 @@ const Page = styled.div`
 `
 
 const NftsTemplate: React.FC<Props> = (props) => {
+  useEffect(() => {
+    console.log('here')
+    props.nftsActions.handleRouterChange({ location: { pathname: window.location.pathname } })
+  }, [window.location.hash, props.nftsActions])
+
   return (
     <ErrorBoundary>
       <Wrapper>

packages/blockchain-wallet-v4-frontend/src/scenes/Nfts/utils/NftUtils.ts

@@ -1,9 +1,8 @@
+import { nonTraitFilters } from 'data/components/nfts/utils'
 import { OwnerQuery } from 'generated/graphql.types'
 
 import { NftFilterFormValuesType } from '../NftFilter'
 
-const nonTraitFilters = ['min', 'max', 'sortBy', 'forSale', 'event', 'collection']
-
 export const getTraitFilters = (formValues: NftFilterFormValuesType) =>
   formValues ? Object.keys(formValues).filter((val) => nonTraitFilters.indexOf(val) === -1) : null
 

typings/window.d.ts

@@ -11,6 +11,9 @@ declare global {
       }
     }
     grecaptcha: any // google recaptcha sets this on window
+    history?: {
+      pushState: any
+    }
     nonce: string // build/server injected recaptcha key
     receiveMessageFromMobile: (any) => void // mobile <-> web messaging
     webkit: any // iOS <-> web messaging