save progress

packages/core/index.ts

@@ -29,9 +29,6 @@ export type { ConnectorControllerState } from './src/controllers/ConnectorContro
 export { SnackController } from './src/controllers/SnackController.js'
 export type { SnackControllerState } from './src/controllers/SnackController.js'
 
-export { ExplorerApiController } from './src/controllers/ExplorerApiController.js'
-export type { ExplorerApiControllerState } from './src/controllers/ExplorerApiController.js'
-
 export { ApiController } from './src/controllers/ApiController.js'
 export type { ApiControllerState } from './src/controllers/ApiController.js'
 
@@ -40,12 +37,12 @@ export { ConstantsUtil } from './src/utils/ConstantsUtil.js'
 export { CoreHelperUtil } from './src/utils/CoreHelperUtil.js'
 export { StorageUtil } from './src/utils/StorageUtil.js'
 export type {
+  ApiWallet,
   CaipAddress,
   CaipNetwork,
   CaipNetworkId,
   Connector,
   ConnectorType,
-  ExplorerListing,
   Platform,
   ProjectId
 } from './src/utils/TypeUtils.js'

packages/core/src/controllers/ApiController.ts

@@ -1,12 +1,16 @@
 import { subscribeKey as subKey } from 'valtio/utils'
 import { proxy } from 'valtio/vanilla'
 import { FetchUtil } from '../utils/FetchUtil.js'
-import type { ApiGetWalletsResponse, ApiListing, ProjectId } from '../utils/TypeUtils.js'
+import type {
+  ApiGetWalletsRequest,
+  ApiGetWalletsResponse,
+  ApiWallet,
+  ProjectId
+} from '../utils/TypeUtils.js'
 
 // -- Helpers ------------------------------------------- //
 const api = new FetchUtil({ baseUrl: 'https://api.web3modal.com' })
-
-// TOD const entries = 24
+const entries = 24
 const recommendedEntries = 4
 const sdkVersion = `js-3.0.0`
 const sdkType = 'w3m'
@@ -16,9 +20,9 @@ export interface ApiControllerState {
   projectId: ProjectId
   page: number
   count: number
-  recommended: ApiListing[]
-  listings: ApiListing[]
-  search: ApiListing[]
+  recommended: ApiWallet[]
+  wallets: ApiWallet[]
+  search: ApiWallet[]
   images: Record<string, string>
 }
 
@@ -30,7 +34,7 @@ const state = proxy<ApiControllerState>({
   page: 1,
   count: 0,
   recommended: [],
-  listings: [],
+  wallets: [],
   search: [],
   images: {}
 })
@@ -72,5 +76,37 @@ export const ApiController = {
     })
     await Promise.all(data.map(({ image_id }) => ApiController.fetchImageBlob(image_id)))
     state.recommended = data
+  },
+
+  async fetchWallets({ page }: Pick<ApiGetWalletsRequest, 'page'>) {
+    const exclude = state.recommended.map(({ id }) => id)
+    const { data, count } = await api.post<ApiGetWalletsResponse>({
+      path: '/getWallets',
+      headers: ApiController.getApiHeaders(),
+      body: {
+        page,
+        entries,
+        exclude
+      }
+    })
+    await Promise.all(data.map(({ image_id }) => ApiController.fetchImageBlob(image_id)))
+    state.wallets = [...state.wallets, ...data]
+    state.count = count
+    state.page = page
+  },
+
+  async searchWallet({ search }: Pick<ApiGetWalletsRequest, 'search'>) {
+    state.search = []
+    const { data } = await api.post<ApiGetWalletsResponse>({
+      path: '/getWallets',
+      headers: ApiController.getApiHeaders(),
+      body: {
+        page: 1,
+        entries: 100,
+        search
+      }
+    })
+    await Promise.all(data.map(({ image_id }) => ApiController.fetchImageBlob(image_id)))
+    state.search = data
   }
 }

packages/core/src/controllers/RouterController.ts

@@ -1,6 +1,6 @@
 import { subscribeKey as subKey } from 'valtio/utils'
 import { proxy } from 'valtio/vanilla'
-import type { CaipNetwork, Connector, ExplorerListing } from '../utils/TypeUtils.js'
+import type { ApiWallet, CaipNetwork, Connector } from '../utils/TypeUtils.js'
 
 // -- Types --------------------------------------------- //
 export interface RouterControllerState {
@@ -17,7 +17,7 @@ export interface RouterControllerState {
   history: RouterControllerState['view'][]
   data?: {
     connector?: Connector
-    listing?: ExplorerListing
+    wallet?: ApiWallet
     network?: CaipNetwork
   }
 }

packages/core/src/utils/TypeUtils.ts

@@ -81,7 +81,7 @@ export type CaipNamespaces = Record<
 >
 
 // --- new api types ----
-export interface ApiListing {
+export interface ApiWallet {
   id: string
   name: string
   homepage: string
@@ -101,11 +101,14 @@ export interface ApiListing {
 }
 
 export interface ApiGetWalletsRequest {
-  page?: number
-  entries?: number
+  page: number
+  entries: number
+  search?: string
+  include?: string[]
+  exclude?: string[]
 }
 
 export interface ApiGetWalletsResponse {
-  data: ApiListing[]
+  data: ApiWallet[]
   count: number
 }

packages/scaffold/src/client.ts

@@ -1,6 +1,6 @@
 import type {
+  ApiControllerState,
   ConnectionControllerClient,
-  ExplorerApiControllerState,
   ModalControllerArguments,
   NetworkControllerClient
 } from '@web3modal/core'
@@ -10,7 +10,6 @@ import {
   ConnectionController,
   ConnectorController,
   CoreHelperUtil,
-  ExplorerApiController,
   ModalController,
   NetworkController
 } from '@web3modal/core'
@@ -22,7 +21,7 @@ let isInitialized = false
 interface Options {
   networkControllerClient: NetworkControllerClient
   connectionControllerClient: ConnectionControllerClient
-  projectId: ExplorerApiControllerState['projectId']
+  projectId: ApiControllerState['projectId']
 }
 
 // -- Client --------------------------------------------------------------------
@@ -100,7 +99,6 @@ export class Web3ModalScaffold {
   private initControllers(options: Options) {
     NetworkController.setClient(options.networkControllerClient)
     ConnectionController.setClient(options.connectionControllerClient)
-    ExplorerApiController.setProjectId(options.projectId)
     ApiController.setProjectId(options.projectId)
   }
 

packages/scaffold/src/partials/w3m-all-wallets-list/index.ts

@@ -1,5 +1,5 @@
-import type { ExplorerListing } from '@web3modal/core'
-import { ExplorerApiController, RouterController } from '@web3modal/core'
+import type { ApiWallet } from '@web3modal/core'
+import { ApiController, RouterController } from '@web3modal/core'
 import { LitElement, html } from 'lit'
 import { customElement, state } from 'lit/decorators.js'
 import { ifDefined } from 'lit/directives/if-defined.js'
@@ -16,18 +16,18 @@ export class W3mAllWalletsList extends LitElement {
   private paginationObserver?: IntersectionObserver = undefined
 
   // -- State & Properties -------------------------------- //
-  @state() private initial = !ExplorerApiController.state.listings.length
+  @state() private initial = !ApiController.state.wallets.length
 
-  @state() private listings = ExplorerApiController.state.listings
+  @state() private wallets = ApiController.state.wallets
 
-  @state() private recommended = ExplorerApiController.state.recommended
+  @state() private recommended = ApiController.state.recommended
 
   public constructor() {
     super()
     this.unsubscribe.push(
       ...[
-        ExplorerApiController.subscribeKey('listings', val => (this.listings = val)),
-        ExplorerApiController.subscribeKey('recommended', val => (this.recommended = val))
+        ApiController.subscribeKey('wallets', val => (this.wallets = val)),
+        ApiController.subscribeKey('recommended', val => (this.recommended = val))
       ]
     )
   }
@@ -62,7 +62,7 @@ export class W3mAllWalletsList extends LitElement {
   private async initialFetch() {
     const gridEl = this.shadowRoot?.querySelector('wui-grid')
     if (this.initial && gridEl) {
-      await ExplorerApiController.fetchListings()
+      await ApiController.fetchWallets({ page: 1 })
       await animate(gridEl, { opacity: [1, 0] }, { duration: 0.2 }).finished
       this.initial = false
       animate(gridEl, { opacity: [0, 1] }, { duration: 0.2 })
@@ -76,24 +76,24 @@ export class W3mAllWalletsList extends LitElement {
   }
 
   private walletsTemplate() {
-    const { images } = ExplorerApiController.state
-    const wallets = [...this.recommended, ...this.listings]
+    const { images } = ApiController.state
+    const wallets = [...this.recommended, ...this.wallets]
 
     return wallets.map(
-      listing => html`
+      wallet => html`
         <wui-card-select
-          imageSrc=${ifDefined(images[listing.image_id])}
+          imageSrc=${ifDefined(images[wallet.image_id])}
           type="wallet"
-          name=${listing.name}
-          @click=${() => this.onConnectListing(listing)}
+          name=${wallet.name}
+          @click=${() => this.onConnectListing(wallet)}
         ></wui-card-select>
       `
     )
   }
 
   private paginationLoaderTemplate() {
-    const { listings, total } = ExplorerApiController.state
-    if (total === 0 || listings.length < total) {
+    const { wallets, count } = ApiController.state
+    if (count === 0 || wallets.length < count) {
       return html`<wui-loading-spinner color="blue-100"></wui-loading-spinner>`
     }
 
@@ -105,18 +105,18 @@ export class W3mAllWalletsList extends LitElement {
     if (loaderEl) {
       this.paginationObserver = new IntersectionObserver(([element]) => {
         if (element?.isIntersecting && !this.initial) {
-          const { page, total, listings } = ExplorerApiController.state
-          if (listings.length < total) {
-            ExplorerApiController.fetchListings({ page: page + 1 })
+          const { page, count, wallets } = ApiController.state
+          if (wallets.length < count) {
+            ApiController.fetchWallets({ page: page + 1 })
           }
         }
       })
       this.paginationObserver.observe(loaderEl)
     }
   }
 
-  private onConnectListing(listing: ExplorerListing) {
-    RouterController.push('ConnectingWalletConnect', { listing })
+  private onConnectListing(wallet: ApiWallet) {
+    RouterController.push('ConnectingWalletConnect', { wallet })
   }
 }
 

packages/scaffold/src/partials/w3m-all-wallets-search/index.ts

@@ -1,5 +1,5 @@
-import type { ExplorerListing } from '@web3modal/core'
-import { ExplorerApiController, RouterController } from '@web3modal/core'
+import type { ApiWallet } from '@web3modal/core'
+import { ApiController, RouterController } from '@web3modal/core'
 import { LitElement, html } from 'lit'
 import { customElement, property, state } from 'lit/decorators.js'
 import { ifDefined } from 'lit/directives/if-defined.js'
@@ -31,13 +31,13 @@ export class W3mAllWalletsSearch extends LitElement {
     if (this.query !== this.prevQuery) {
       this.prevQuery = this.query
       this.loading = true
-      await ExplorerApiController.searchListings({ search: this.query })
+      await ApiController.searchWallet({ search: this.query })
       this.loading = false
     }
   }
 
   private walletsTemplate() {
-    const { search, images } = ExplorerApiController.state
+    const { search, images } = ApiController.state
 
     if (!search.length) {
       return html`
@@ -62,21 +62,21 @@ export class W3mAllWalletsSearch extends LitElement {
         columnGap="xs"
       >
         ${search.map(
-          listing => html`
+          wallet => html`
             <wui-card-select
-              imageSrc=${ifDefined(images[listing.image_id])}
+              imageSrc=${ifDefined(images[wallet.image_id])}
               type="wallet"
-              name=${listing.name}
-              @click=${() => this.onConnectListing(listing)}
+              name=${wallet.name}
+              @click=${() => this.onConnectListing(wallet)}
             ></wui-card-select>
           `
         )}
       </wui-grid>
     `
   }
 
-  private onConnectListing(listing: ExplorerListing) {
-    RouterController.push('ConnectingWalletConnect', { listing })
+  private onConnectListing(wallet: ApiWallet) {
+    RouterController.push('ConnectingWalletConnect', { wallet })
   }
 }