Implement requested changes

brave · Apr 5, 2022 · 893db6d · 893db6d
1 parent 35d23f5
commit 893db6d
Show file tree

Hide file tree

Showing 19 changed files with 133 additions and 101 deletions.
diff --git a/components/brave_wallet/browser/brave_wallet_constants.cc b/components/brave_wallet/browser/brave_wallet_constants.cc
@@ -7,6 +7,6 @@
 
 namespace brave_wallet {
 
-const char kAssetRatioBaseURL[] = "https://ratios.rewards.brave.com/";
+const char kAssetRatioBaseURL[] = "https://ratios.rewards.brave.software/";
 
 }  // namespace brave_wallet
diff --git a/components/brave_wallet_ui/common/actions/wallet_actions.ts b/components/brave_wallet_ui/common/actions/wallet_actions.ts
@@ -121,5 +121,4 @@ export const setSelectedCoin = createAction<BraveWallet.CoinType>('setSelectedCo
 export const setDefaultNetworks = createAction<BraveWallet.NetworkInfo[]>('setDefaultNetworks')
 export const getCoinMarkets = createAction<GetCoinMarketPayload>('getCoinMarkets')
 export const setCoinMarkets = createAction<GetCoinMarketsResponse>('setCoinMarkets')
-export const updateIsLoadingCoinMarkets = createAction<boolean>('updateIsLoadingCoinMarkets')
 export const setSelectedNetworkFilter = createAction<BraveWallet.NetworkInfo>('setSelectedNetworkFilter')
diff --git a/components/brave_wallet_ui/common/constants/action_types.ts b/components/brave_wallet_ui/common/constants/action_types.ts
@@ -1,3 +1,4 @@
+
 // Copyright (c) 2022 The Brave Authors. All rights reserved.
 // This Source Code Form is subject to the terms of the Mozilla Public
 // License, v. 2.0. If a copy of the MPL was not distributed with this file,
@@ -103,7 +104,9 @@ export type SetTransactionProviderErrorType = {
 }
 
 export type GetCoinMarketPayload = {
+  // Currency of the asset stats
   vsAsset: string
+  // Number of items to fetch
   limit: number
 }
 

diff --git a/components/brave_wallet_ui/common/hooks/market-data-management.ts b/components/brave_wallet_ui/common/hooks/market-data-management.ts
@@ -2,6 +2,18 @@ import * as React from 'react'
 import Fuse from 'fuse.js'
 import { BraveWallet, MarketDataTableColumnTypes, SortOrder } from '../../constants/types'
 
+const searchOptions: Fuse.IFuseOptions<BraveWallet.CoinMarket> = {
+  shouldSort: true,
+  threshold: 0.1,
+  location: 0,
+  distance: 0,
+  minMatchCharLength: 1,
+  keys: [
+    { name: 'name', weight: 0.5 },
+    { name: 'symbol', weight: 0.5 }
+  ]
+}
+
 export const useMarketDataManagement = (marketData: BraveWallet.CoinMarket[], sortOrder: SortOrder, columnId: MarketDataTableColumnTypes) => {
   const sortCoinMarketData = React.useCallback(() => {
     const sortedMarketData = [...marketData]
@@ -20,22 +32,9 @@ export const useMarketDataManagement = (marketData: BraveWallet.CoinMarket[], so
       return searchList
     }
 
-    const options = {
-      shouldSort: true,
-      threshold: 0.1,
-      location: 0,
-      distance: 0,
-      minMatchCharLength: 1,
-      keys: [
-        { name: 'name', weight: 0.5 },
-        { name: 'symbol', weight: 0.5 }
-      ]
-    }
-
-    const fuse = new Fuse(searchList, options)
-    const results = fuse.search(searchTerm).map((result: Fuse.FuseResult<BraveWallet.CoinMarket>) => result.item)
-
-    return results
+    const fuse = new Fuse(searchList, searchOptions)
+    return fuse.search(searchTerm)
+      .map((result: Fuse.FuseResult<BraveWallet.CoinMarket>) => result.item)
   }, [marketData])
 
   return {

diff --git a/components/brave_wallet_ui/common/hooks/on-screen.ts b/components/brave_wallet_ui/common/hooks/on-screen.ts
@@ -0,0 +1,26 @@
+import * as React from 'react'
+
+export default function useOnScreen<T extends Element> (
+  ref: React.MutableRefObject<T>,
+  options: IntersectionObserverInit = { rootMargin: '0px' }
+): boolean {
+  const [isIntersecting, setIsIntersecting] = React.useState<boolean>(false)
+
+  React.useEffect(() => {
+    const observer = new IntersectionObserver(([entry]) => {
+      setIsIntersecting(entry.isIntersecting)
+    }, options)
+
+    if (ref.current) {
+      observer.observe(ref.current)
+    }
+
+    return () => {
+      if (ref.current) {
+        observer.unobserve(ref.current)
+      }
+    }
+  }, [ref])
+
+  return isIntersecting
+}
diff --git a/components/brave_wallet_ui/components/asset-name-and-icon/index.tsx b/components/brave_wallet_ui/components/asset-name-and-icon/index.tsx
@@ -8,7 +8,7 @@ export interface Props {
   assetLogo: string
 }
 
-const AssetNameAndIcon = (props: Props) => {
+export const AssetNameAndIcon = (props: Props) => {
   const { assetLogo, assetName, symbol } = props
 
   return (
@@ -21,5 +21,3 @@ const AssetNameAndIcon = (props: Props) => {
     </StyledWrapper>
   )
 }
-
-export default AssetNameAndIcon
diff --git a/components/brave_wallet_ui/components/asset-price-change/index.tsx b/components/brave_wallet_ui/components/asset-price-change/index.tsx
@@ -7,7 +7,7 @@ export interface Props {
   priceChangePercentage: string
 }
 
-const AssetPriceChange = (props: Props) => {
+export const AssetPriceChange = (props: Props) => {
   const { isDown, priceChangePercentage } = props
 
   return (
@@ -19,5 +19,3 @@ const AssetPriceChange = (props: Props) => {
     </StyledWrapper>
   )
 }
-
-export default AssetPriceChange
diff --git a/components/brave_wallet_ui/components/asset-wishlist-star/index.tsx b/components/brave_wallet_ui/components/asset-wishlist-star/index.tsx
@@ -7,7 +7,7 @@ export interface Props {
   onCheck?: (status: boolean) => void
 }
 
-const AssetWishlistStar = (props: Props) => {
+export const AssetWishlistStar = (props: Props) => {
   const { active, onCheck } = props
 
   const onClick = () => {
@@ -18,11 +18,9 @@ const AssetWishlistStar = (props: Props) => {
   return (
     <StyledWrapper>
       <Star
-      active={active}
-      onClick={onClick}
-    />
+        active={active}
+        onClick={onClick}
+      />
     </StyledWrapper>
   )
 }
-
-export default AssetWishlistStar
diff --git a/components/brave_wallet_ui/components/desktop/assets-filter-dropdown/index.tsx b/components/brave_wallet_ui/components/desktop/assets-filter-dropdown/index.tsx
@@ -2,7 +2,7 @@ import { AssetFilter } from '../../../constants/types'
 import * as React from 'react'
 
 import { StyledWrapper, Button, CaratDown, Dropdown } from './style'
-import AssetsFilterOption from '../assets-filter-option'
+import { AssetsFilterOption } from '../assets-filter-option'
 
 export interface Props {
   options: AssetFilter[]

diff --git a/components/brave_wallet_ui/components/desktop/assets-filter-option/index.tsx b/components/brave_wallet_ui/components/desktop/assets-filter-option/index.tsx
@@ -9,7 +9,7 @@ export interface Props {
   onSelect: (value: string) => void
 }
 
-const AssetsFilterOption = (props: Props) => {
+export const AssetsFilterOption = (props: Props) => {
   const { selected, label, value, onSelect } = props
 
   const onClick = () => {
@@ -25,5 +25,3 @@ const AssetsFilterOption = (props: Props) => {
     </Option>
   )
 }
-
-export default AssetsFilterOption
diff --git a/components/brave_wallet_ui/components/desktop/views/crypto/index.tsx b/components/brave_wallet_ui/components/desktop/views/crypto/index.tsx
@@ -20,7 +20,7 @@ import { PortfolioView, AccountsView } from '../'
 import {
   HardwareWalletConnectOpts
 } from '../../popup-modals/add-account-modal/hardware-wallet-connect/types'
-import MarketView from '../market'
+import { MarketView } from '../market'
 
 interface ParamsType {
   category?: TopTabNavTypes

diff --git a/components/brave_wallet_ui/components/desktop/views/index.ts b/components/brave_wallet_ui/components/desktop/views/index.ts
@@ -1,7 +1,7 @@
 import CryptoView from './crypto'
 import PortfolioView from './portfolio'
 import AccountsView from './accounts'
-import MarketView from './market'
+import { MarketView } from './market'
 
 export {
   CryptoView,

diff --git a/components/brave_wallet_ui/components/desktop/views/market/index.tsx b/components/brave_wallet_ui/components/desktop/views/market/index.tsx
@@ -13,8 +13,8 @@ import {
 import { useMarketDataManagement } from '../../../../common/hooks/market-data-management'
 import { marketDataTableHeaders } from '../../../../options/market-data-headers'
 import { AssetFilterOption, BraveWallet, MarketDataTableColumnTypes, SortOrder } from '../../../../constants/types'
-import MarketDataTable from '../../../../components/market-datatable'
-import { debounce } from '../../../../../common/debounce'
+import { MarketDataTable } from '../../../market-datatable'
+import { debounce } from '$web-common/debounce'
 
 export interface Props {
   isLoadingCoinMarketData: boolean
@@ -23,7 +23,11 @@ export interface Props {
   tradableAssets: BraveWallet.BlockchainToken[]
 }
 
-const MarketView = (props: Props) => {
+const defaultCurrency = 'usd'
+const assetsRequestLimit = 250
+const assetsPerPage = 10
+
+export const MarketView = (props: Props) => {
   const { isLoadingCoinMarketData, coinMarkets, tradableAssets, onFetchCoinMarkets } = props
   const [coinsMarketData, setCoinsMarketData] = React.useState<BraveWallet.CoinMarket[]>([])
   const [tableHeaders, setTableHeaders] = React.useState(marketDataTableHeaders)
@@ -34,9 +38,6 @@ const MarketView = (props: Props) => {
   const [currentPage, setCurrentPage] = React.useState<number>(1)
   const [searchTerm, setSearchTerm] = React.useState('')
   const [moreDataAvailable, setMoreDataAvailable] = React.useState<boolean>(false)
-  const defaultCurrency = 'usd'
-  const assetsRequestLimit = 250
-  const assetsPerPage = 20
 
   const search = (query: string) => {
     const filtered = filterCoinMarkets(coinMarkets, currentFilter)
@@ -69,8 +70,7 @@ const MarketView = (props: Props) => {
     if (filter === 'all') {
       return coins
     } else if (filter === 'tradable') {
-      const filtered = coins.filter(asset => tradableAssetsSymbols.includes(asset.symbol.toLowerCase()))
-      return filtered
+      return coins.filter(asset => tradableAssetsSymbols.includes(asset.symbol.toLowerCase()))
     }
 
     return []
@@ -85,7 +85,7 @@ const MarketView = (props: Props) => {
     setCurrentPage(nextPage)
   }
 
-  const onSort = (columnId: MarketDataTableColumnTypes, newSortOrder: SortOrder) => {
+  const onSort = React.useCallback((columnId: MarketDataTableColumnTypes, newSortOrder: SortOrder) => {
     const updatedTableHeaders = tableHeaders.map(header => {
       if (header.id === columnId) {
         return {
@@ -103,7 +103,7 @@ const MarketView = (props: Props) => {
     setTableHeaders(updatedTableHeaders)
     setSortByColumnId(columnId)
     setSortOrder(newSortOrder)
-  }
+  }, [])
 
   React.useEffect(() => {
     if (coinMarkets.length === 0) {
@@ -161,5 +161,3 @@ const MarketView = (props: Props) => {
     </StyledWrapper>
   )
 }
-
-export default MarketView
diff --git a/components/brave_wallet_ui/components/market-datatable/index.tsx b/components/brave_wallet_ui/components/market-datatable/index.tsx
@@ -1,5 +1,4 @@
 import * as React from 'react'
-import InfinitieScroll from 'react-infinite-scroll-component'
 import { getLocale } from '../../../common/locale'
 import { BraveWallet, MarketDataTableColumnTypes, SortOrder } from '../../constants/types'
 import Table, { Cell, Header, Row } from '../shared/datatable'
@@ -15,9 +14,9 @@ import {
   formatPricePercentageChange,
   formatPriceWithAbbreviation
 } from '../../utils/format-prices'
-import AssetNameAndIcon from '../asset-name-and-icon'
-import AssetPriceChange from '../asset-price-change'
-import { LoadIcon, LoadIconWrapper } from '../desktop/views/market/style'
+import { AssetNameAndIcon } from '../asset-name-and-icon'
+import { AssetPriceChange } from '../asset-price-change'
+import useOnScreen from '../../common/hooks/on-screen'
 import { CoinGeckoText } from '../desktop/views/portfolio/style'
 
 export interface MarketDataHeader extends Header {
@@ -33,8 +32,19 @@ export interface Props {
   onSort?: (column: MarketDataTableColumnTypes, newSortOrder: SortOrder) => void
 }
 
-const MarketDataTable = (props: Props) => {
+export const MarketDataTable = (props: Props) => {
   const { headers, coinMarketData, moreDataAvailable, showEmptyState, onFetchMoreMarketData, onSort } = props
+  const ref: any = React.useRef<HTMLDivElement>()
+  const onScreen = useOnScreen<HTMLDivElement>(ref, {
+    rootMargin: '0px',
+    threshold: 0
+  })
+
+  React.useEffect(() => {
+    if (onScreen && moreDataAvailable) {
+      onFetchMoreMarketData()
+    }
+  }, [onScreen, moreDataAvailable])
 
   const renderCells = (coinMarkDataItem: BraveWallet.CoinMarket) => {
     const {
@@ -50,7 +60,7 @@ const MarketDataTable = (props: Props) => {
     } = coinMarkDataItem
 
     const formattedPrice = formatFiatAmountWithCommasAndDecimals(currentPrice.toString(), 'USD')
-    const formattedPercentageChange = formatPricePercentageChange(priceChangePercentage24h, true)
+    const formattedPercentageChange = formatPricePercentageChange(priceChangePercentage24h, 2, true)
     const formattedMarketCap = formatPriceWithAbbreviation(marketCap.toString(), 'USD', 1)
     const formattedVolume = formatPriceWithAbbreviation(totalVolume.toString(), 'USD', 1)
     const isDown = priceChange24h < 0
@@ -89,7 +99,7 @@ const MarketDataTable = (props: Props) => {
       <TextWrapper alignment="right">{formattedVolume}</TextWrapper>
 
       // Line Chart Column
-      // Commented out because priceHisotry data is yet to be
+      // Commented out because priceHistory data is yet to be
       // available from the backend
       // <LineChartWrapper>
       //   <LineChart
@@ -129,36 +139,19 @@ const MarketDataTable = (props: Props) => {
 
   return (
     <StyledWrapper>
-        <InfinitieScroll
-          dataLength={coinMarketData.length}
-          next={onFetchMoreMarketData}
-          loader={
-            <LoadIconWrapper>
-              <LoadIcon />
-            </LoadIconWrapper>
-          }
-          hasMore={moreDataAvailable}
-          endMessage={
-            <CoinGeckoText>{getLocale('braveWalletPoweredByCoinGecko')}</CoinGeckoText>
-          }
-          style={{
-            overflow: 'inherit'
-          }}
+      <TableWrapper>
+        <Table
+          headers={headers}
+          rows={rows}
+          onSort={onSort}
+          stickyHeaders={true}
         >
-          <TableWrapper>
-            <Table
-              headers={headers}
-              rows={rows}
-              onSort={onSort}
-              stickyHeaders={true}
-            >
-              {/* Empty state message */}
-              {showEmptyState && getLocale('braveWalletMarketDataNoAssetsFound')}
-            </Table>
-          </TableWrapper>
-        </InfinitieScroll>
+          {/* Empty state message */}
+          {showEmptyState && getLocale('braveWalletMarketDataNoAssetsFound')}
+        </Table>
+      </TableWrapper>
+      {!moreDataAvailable && <CoinGeckoText>{getLocale('braveWalletPoweredByCoinGecko')}</CoinGeckoText>}
+      <div ref={ref}/>
     </StyledWrapper>
   )
 }
-
-export default MarketDataTable
diff --git a/components/brave_wallet_ui/components/shared/datatable/style.ts b/components/brave_wallet_ui/components/shared/datatable/style.ts
@@ -79,7 +79,6 @@ export const StyledTH = styled('th')<Partial<StyleProps>>`
 `
 
 export const StyledTR = styled('tr')<Partial<Row>>`
-
   ${p => p.customStyle
     ? css`
       ${p.customStyle}