Merge pull request #16329 from brave/feat-wallet-asset-discovery-loading-skeleton

feat(wallet): Add Asset Discovery Loading Skeleton

components/brave_wallet_ui/common/actions/wallet_actions.ts

@@ -71,6 +71,7 @@
   setAccountTransactions,
   setAllNetworks,
   setAllTokensList,
+  setAssetAutoDiscoveryCompleted,
   setCoinMarkets,
   setDefaultAccounts,
   setDefaultNetworks,

components/brave_wallet_ui/common/async/handlers.ts

@@ -268,6 +268,7 @@ handler.on(WalletActions.initialized.type, async (store: Store, payload: WalletI
     await store.dispatch(refreshBalances())
     await store.dispatch(refreshPrices())
     await store.dispatch(refreshTokenPriceHistory(state.selectedPortfolioTimeline))
+    await braveWalletService.discoverAssetsOnAllSupportedChains()
   }
 
   // This can be 0 when the wallet is locked

components/brave_wallet_ui/common/selectors/wallet-selectors.ts

@@ -25,6 +25,7 @@ export const isWalletCreated = ({ wallet }: State) => wallet.isWalletCreated
 export const isWalletLocked = ({ wallet }: State) => wallet.isWalletLocked
 export const passwordAttempts = ({ wallet }: State) => wallet.passwordAttempts
 export const selectedPortfolioTimeline = ({ wallet }: State) => wallet.selectedPortfolioTimeline
+export const assetAutoDiscoveryCompleted = ({ wallet }: State) => wallet.assetAutoDiscoveryCompleted
 
 // unsafe selectors (will cause re-render if not strictly equal "===") (objects and lists)
 export const accounts = ({ wallet }: State) => wallet.accounts

components/brave_wallet_ui/common/slices/wallet.slice.ts

@@ -124,7 +124,8 @@ const defaultState: WalletState = {
   solFeeEstimates: undefined,
   onRampCurrencies: [] as BraveWallet.OnRampCurrency[],
   selectedCurrency: undefined,
-  passwordAttempts: 0
+  passwordAttempts: 0,
+  assetAutoDiscoveryCompleted: false
 }
 
  // async actions
@@ -351,6 +352,10 @@ export const createWalletSlice = (initialState: WalletState = defaultState) => {
         state.fullTokenList = payload
       },
 
+      setAssetAutoDiscoveryCompleted (state: WalletState, { payload }: PayloadAction<BraveWallet.BlockchainToken[]>) {
+        state.assetAutoDiscoveryCompleted = true
+      },
+
       setCoinMarkets (state: WalletState, { payload }: PayloadAction<GetCoinMarketsResponse>) {
         state.coinMarketData = payload.success
           ? payload.values.map(coin => {

components/brave_wallet_ui/common/wallet_api_proxy.ts

@@ -122,7 +122,7 @@ export class WalletApiProxy {
         store.dispatch(WalletActions.getAllNetworks())
       },
       onDiscoverAssetsCompleted: function (discoveredAssets) {
-        // TODO: Handle this event.
+        store.dispatch(WalletActions.setAssetAutoDiscoveryCompleted(discoveredAssets))
       }
     })
     this.braveWalletService.addObserver(braveWalletServiceObserverReceiver.$.bindNewPipeAndPassRemote())

components/brave_wallet_ui/components/desktop/portfolio-asset-item/portfolio-asset-item-loading-skeleton.tsx

@@ -0,0 +1,39 @@
+// 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,
+// you can obtain one at https://mozilla.org/MPL/2.0/.
+
+import * as React from 'react'
+
+// Components
+import { LoadingSkeleton } from '../../shared'
+
+// Styled Components
+import { StyledWrapper, NameAndIcon, NameColumn, Spacer, BalanceColumn } from './style'
+import { IconsWrapper } from '../../shared/style'
+
+export const PortfolioAssetItemLoadingSkeleton = () => {
+  return (
+    <StyledWrapper disabled={true}>
+      <NameAndIcon>
+        <IconsWrapper>
+          <LoadingSkeleton
+            circle={true}
+            width={40}
+            height={40}
+          />
+        </IconsWrapper>
+        <NameColumn>
+          <LoadingSkeleton width={60} height={18} />
+          <Spacer />
+          <LoadingSkeleton width={120} height={18} />
+        </NameColumn>
+      </NameAndIcon>
+      <BalanceColumn>
+        <LoadingSkeleton width={60} height={18} />
+        <Spacer />
+        <LoadingSkeleton width={60} height={18} />
+      </BalanceColumn>
+    </StyledWrapper>
+  )
+}

components/brave_wallet_ui/components/desktop/views/accounts/account.tsx

@@ -6,15 +6,18 @@
 import * as React from 'react'
 import { Redirect, useParams, useLocation } from 'react-router'
 import {
-  useDispatch,
-  useSelector
+  useDispatch
 } from 'react-redux'
 import { create } from 'ethereum-blockies'
 
+// Selectors
+import { useSafeWalletSelector, useUnsafeWalletSelector } from '../../../../common/hooks/use-safe-selector'
+import { WalletSelectors } from '../../../../common/selectors'
+
+// Types
 import {
   BraveWallet,
   CoinTypesMap,
-  WalletState,
   WalletRoutes,
   AccountButtonOptionsObjectType
 } from '../../../../constants/types'
@@ -44,6 +47,7 @@ import { TransactionPlaceholderText, Spacer } from '../portfolio/style'
 // Components
 import { BackButton } from '../../../shared'
 import { PortfolioTransactionItem } from '../../portfolio-transaction-item/index'
+import { PortfolioAssetItemLoadingSkeleton } from '../../portfolio-asset-item/portfolio-asset-item-loading-skeleton'
 import { PortfolioAssetItem } from '../../portfolio-asset-item/index'
 import { CopyTooltip } from '../../../shared/copy-tooltip/copy-tooltip'
 import { AccountListItemOptionButton } from '../../account-list-item/account-list-item-option-button'
@@ -71,10 +75,15 @@ export const Account = ({
 
   // redux
   const dispatch = useDispatch()
-  const accounts = useSelector(({ wallet }: { wallet: WalletState }) => wallet.accounts)
-  const transactions = useSelector(({ wallet }: { wallet: WalletState }) => wallet.transactions)
-  const userVisibleTokensInfo = useSelector(({ wallet }: { wallet: WalletState }) => wallet.userVisibleTokensInfo)
-  const networkList = useSelector(({ wallet }: { wallet: WalletState }) => wallet.networkList)
+
+  // unsafe selectors
+  const networkList = useUnsafeWalletSelector(WalletSelectors.networkList)
+  const userVisibleTokensInfo = useUnsafeWalletSelector(WalletSelectors.userVisibleTokensInfo)
+  const accounts = useUnsafeWalletSelector(WalletSelectors.accounts)
+  const transactions = useUnsafeWalletSelector(WalletSelectors.transactions)
+
+  // safe selectors
+  const assetAutoDiscoveryCompleted = useSafeWalletSelector(WalletSelectors.assetAutoDiscoveryCompleted)
 
   // custom hooks
   const scrollIntoView = useScrollIntoView()
@@ -224,6 +233,10 @@ export const Account = ({
         />
       )}
 
+      {!assetAutoDiscoveryCompleted &&
+        <PortfolioAssetItemLoadingSkeleton />
+      }
+
       <Spacer />
 
       {nonFungibleTokens?.length !== 0 &&

components/brave_wallet_ui/components/desktop/views/portfolio/components/token-lists/token-list.tsx

@@ -5,14 +5,16 @@
 
 import * as React from 'react'
 import { useHistory } from 'react-router'
-import { useSelector } from 'react-redux'
+
+// Selectors
+import { useSafeWalletSelector, useUnsafeWalletSelector } from '../../../../../../common/hooks/use-safe-selector'
+import { WalletSelectors } from '../../../../../../common/selectors'
 
 // Types
 import {
   BraveWallet,
   UserAssetInfoType,
-  WalletRoutes,
-  WalletState
+  WalletRoutes
 } from '../../../../../../constants/types'
 import { RenderTokenFunc } from './virtualized-tokens-list'
 
@@ -26,6 +28,7 @@ import NetworkFilterSelector from '../../../../network-filter-selector/index'
 import { AccountFilterSelector } from '../../../../account-filter-selector/account-filter-selector'
 import { AssetFilterSelector } from '../../../../asset-filter-selector/asset-filter-selector'
 import { NFTGridView } from '../nft-grid-view/nft-grid-view'
+import { PortfolioAssetItemLoadingSkeleton } from '../../../../portfolio-asset-item/portfolio-asset-item-loading-skeleton'
 
 // Hooks
 import usePricing from '../../../../../../common/hooks/pricing'
@@ -66,9 +69,12 @@ export const TokenLists = ({
   // routing
   const history = useHistory()
 
-  // redux
-  const tokenSpotPrices = useSelector(({ wallet }: { wallet: WalletState }) => wallet.transactionSpotPrices)
-  const selectedAssetFilter = useSelector(({ wallet }: { wallet: WalletState }) => wallet.selectedAssetFilter)
+  // unsafe selectors
+  const tokenSpotPrices = useUnsafeWalletSelector(WalletSelectors.transactionSpotPrices)
+  const selectedAssetFilter = useUnsafeWalletSelector(WalletSelectors.selectedAssetFilter)
+
+  // safe selectors
+  const assetAutoDiscoveryCompleted = useSafeWalletSelector(WalletSelectors.assetAutoDiscoveryCompleted)
 
   // hooks
   const { computeFiatAmount } = usePricing(tokenSpotPrices)
@@ -156,6 +162,9 @@ export const TokenLists = ({
               {nonFungibleTokens.map((token, index) => renderToken({ index, item: token, viewMode: 'list' }))}
             </>
           }
+          {!assetAutoDiscoveryCompleted &&
+            <PortfolioAssetItemLoadingSkeleton />
+          }
         </>
       ) : (
         <NFTGridView
@@ -167,7 +176,8 @@ export const TokenLists = ({
     selectedAssetFilter.id,
     sortedFungibleTokensList,
     renderToken,
-    nonFungibleTokens
+    nonFungibleTokens,
+    assetAutoDiscoveryCompleted
   ])
 
   // effects

components/brave_wallet_ui/constants/types.ts

@@ -257,6 +257,7 @@ export interface WalletState {
   onRampCurrencies: BraveWallet.OnRampCurrency[]
   selectedCurrency: BraveWallet.OnRampCurrency | undefined
   passwordAttempts: number
+  assetAutoDiscoveryCompleted: boolean
 }
 
 export interface PanelState {

components/brave_wallet_ui/stories/mock-data/mock-wallet-state.ts

@@ -396,5 +396,6 @@ export const mockWalletState: WalletState = {
   selectedCurrency: mockCurrency,
   passwordAttempts: 0,
   isLoadingCoinMarketData: false,
-  coinMarketData: mockCoinMarketData
+  coinMarketData: mockCoinMarketData,
+  assetAutoDiscoveryCompleted: false
 }