From 734788f3b879512b08065d09bf0d19a3b03dfa7f Mon Sep 17 00:00:00 2001 From: Ilja Date: Mon, 14 Aug 2023 18:42:59 +0300 Subject: [PATCH] save progress --- packages/core/index.ts | 5 +- .../core/src/controllers/ApiController.ts | 50 ++++++++++++++++--- .../core/src/controllers/RouterController.ts | 4 +- packages/core/src/utils/TypeUtils.ts | 11 ++-- .../controllers/ExplorerApiController.test.ts | 17 ------- packages/scaffold/src/client.ts | 6 +-- .../partials/w3m-all-wallets-list/index.ts | 42 ++++++++-------- .../partials/w3m-all-wallets-search/index.ts | 20 ++++---- .../w3m-connecting-wc-desktop/index.ts | 20 ++++---- .../w3m-connecting-wc-injected/index.ts | 14 +++--- .../w3m-connecting-wc-mobile/index.ts | 23 ++++----- .../w3m-connecting-wc-qrcode/index.ts | 10 ++-- .../w3m-connecting-wc-unsupported/index.ts | 20 ++++---- .../partials/w3m-connecting-wc-web/index.ts | 20 ++++---- .../scaffold/src/partials/w3m-header/index.ts | 4 +- .../src/views/w3m-connecting-wc-view/index.ts | 16 +++--- 16 files changed, 148 insertions(+), 134 deletions(-) delete mode 100644 packages/core/tests/controllers/ExplorerApiController.test.ts diff --git a/packages/core/index.ts b/packages/core/index.ts index f5b1eec230..0dd73779e5 100644 --- a/packages/core/index.ts +++ b/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' diff --git a/packages/core/src/controllers/ApiController.ts b/packages/core/src/controllers/ApiController.ts index ce63c1fbde..9232a72d84 100644 --- a/packages/core/src/controllers/ApiController.ts +++ b/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 } @@ -30,7 +34,7 @@ const state = proxy({ 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) { + const exclude = state.recommended.map(({ id }) => id) + const { data, count } = await api.post({ + 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) { + state.search = [] + const { data } = await api.post({ + 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 } } diff --git a/packages/core/src/controllers/RouterController.ts b/packages/core/src/controllers/RouterController.ts index 23a226f278..b586f13558 100644 --- a/packages/core/src/controllers/RouterController.ts +++ b/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 } } diff --git a/packages/core/src/utils/TypeUtils.ts b/packages/core/src/utils/TypeUtils.ts index bd9b72b7b4..c7162005a9 100644 --- a/packages/core/src/utils/TypeUtils.ts +++ b/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 } diff --git a/packages/core/tests/controllers/ExplorerApiController.test.ts b/packages/core/tests/controllers/ExplorerApiController.test.ts deleted file mode 100644 index 9db5d08dab..0000000000 --- a/packages/core/tests/controllers/ExplorerApiController.test.ts +++ /dev/null @@ -1,17 +0,0 @@ -import { describe, expect, it } from 'vitest' -import { ExplorerApiController } from '../../index.js' - -// -- Tests -------------------------------------------------------------------- -describe('ExplorerApiController', () => { - it('should have valid default state', () => { - expect(ExplorerApiController.state).toEqual({ - projectId: '', - page: 1, - total: 0, - listings: [], - recommended: [], - search: [], - images: {} - }) - }) -}) diff --git a/packages/scaffold/src/client.ts b/packages/scaffold/src/client.ts index 9ba985b89a..7e6b122591 100644 --- a/packages/scaffold/src/client.ts +++ b/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) } diff --git a/packages/scaffold/src/partials/w3m-all-wallets-list/index.ts b/packages/scaffold/src/partials/w3m-all-wallets-list/index.ts index 848a5b937f..0487470bda 100644 --- a/packages/scaffold/src/partials/w3m-all-wallets-list/index.ts +++ b/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` this.onConnectListing(listing)} + name=${wallet.name} + @click=${() => this.onConnectListing(wallet)} > ` ) } 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`` } @@ -105,9 +105,9 @@ 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 }) } } }) @@ -115,8 +115,8 @@ export class W3mAllWalletsList extends LitElement { } } - private onConnectListing(listing: ExplorerListing) { - RouterController.push('ConnectingWalletConnect', { listing }) + private onConnectListing(wallet: ApiWallet) { + RouterController.push('ConnectingWalletConnect', { wallet }) } } diff --git a/packages/scaffold/src/partials/w3m-all-wallets-search/index.ts b/packages/scaffold/src/partials/w3m-all-wallets-search/index.ts index d64ca39185..e98b3070e2 100644 --- a/packages/scaffold/src/partials/w3m-all-wallets-search/index.ts +++ b/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,12 +62,12 @@ export class W3mAllWalletsSearch extends LitElement { columnGap="xs" > ${search.map( - listing => html` + wallet => html` this.onConnectListing(listing)} + name=${wallet.name} + @click=${() => this.onConnectListing(wallet)} > ` )} @@ -75,8 +75,8 @@ export class W3mAllWalletsSearch extends LitElement { ` } - private onConnectListing(listing: ExplorerListing) { - RouterController.push('ConnectingWalletConnect', { listing }) + private onConnectListing(wallet: ApiWallet) { + RouterController.push('ConnectingWalletConnect', { wallet }) } } diff --git a/packages/scaffold/src/partials/w3m-connecting-wc-desktop/index.ts b/packages/scaffold/src/partials/w3m-connecting-wc-desktop/index.ts index 4a8915c6e3..7868e5fafc 100644 --- a/packages/scaffold/src/partials/w3m-connecting-wc-desktop/index.ts +++ b/packages/scaffold/src/partials/w3m-connecting-wc-desktop/index.ts @@ -1,7 +1,7 @@ import { + ApiController, ConnectionController, CoreHelperUtil, - ExplorerApiController, RouterController, SnackController } from '@web3modal/core' @@ -12,9 +12,9 @@ import { ifDefined } from 'lit/directives/if-defined.js' @customElement('w3m-connecting-wc-desktop') export class W3mConnectingWcDesktop extends LitElement { // -- Members ------------------------------------------- // - private readonly listing = RouterController.state.data?.listing + private readonly wallet = RouterController.state.data?.wallet - private readonly images = ExplorerApiController.state.images + private readonly images = ApiController.state.images private unsubscribe: (() => void)[] = [] @@ -41,16 +41,16 @@ export class W3mConnectingWcDesktop extends LitElement { // -- Render -------------------------------------------- // public override render() { - if (!this.listing) { - throw new Error('w3m-connecting-wc-desktop: No listing provided') + if (!this.wallet) { + throw new Error('w3m-connecting-wc-desktop: No wallet provided') } this.isReady() return html` diff --git a/packages/scaffold/src/partials/w3m-connecting-wc-mobile/index.ts b/packages/scaffold/src/partials/w3m-connecting-wc-mobile/index.ts index e473eac92a..ea127d6bbe 100644 --- a/packages/scaffold/src/partials/w3m-connecting-wc-mobile/index.ts +++ b/packages/scaffold/src/partials/w3m-connecting-wc-mobile/index.ts @@ -1,7 +1,7 @@ import { + ApiController, ConnectionController, CoreHelperUtil, - ExplorerApiController, RouterController, SnackController } from '@web3modal/core' @@ -12,9 +12,9 @@ import { ifDefined } from 'lit/directives/if-defined.js' @customElement('w3m-connecting-wc-mobile') export class W3mConnectingWcMobile extends LitElement { // -- Members ------------------------------------------- // - private readonly listing = RouterController.state.data?.listing + private readonly wallet = RouterController.state.data?.wallet - private readonly images = ExplorerApiController.state.images + private readonly images = ApiController.state.images private unsubscribe: (() => void)[] = [] @@ -38,16 +38,16 @@ export class W3mConnectingWcMobile extends LitElement { // -- Render -------------------------------------------- // public override render() { - if (!this.listing) { - throw new Error('w3m-connecting-wc-mobile: No listing provided') + if (!this.wallet) { + throw new Error('w3m-connecting-wc-mobile: No wallet provided') } this.isReady() return html` = undefined - private readonly listing = RouterController.state.data?.listing + private readonly wallet = RouterController.state.data?.wallet - private readonly images = ExplorerApiController.state.images + private readonly images = ApiController.state.images // -- State & Properties -------------------------------- // @state() private uri = ConnectionController.state.wcUri @@ -70,8 +70,8 @@ export class W3mConnectingWcQrcode extends LitElement { return null } const size = this.getBoundingClientRect().width - 40 - const imageSrc = this.listing ? this.images[this.listing.image_id] : undefined - const alt = this.listing ? this.listing.name : undefined + const imageSrc = this.wallet ? this.images[this.wallet.image_id] : undefined + const alt = this.wallet ? this.wallet.name : undefined return html` Not Detected - Download and install ${this.listing.name} to continue + Download and install ${this.wallet.name} to continue @@ -45,11 +45,11 @@ export class W3mConnectingWcUnsupported extends LitElement { // -- Private ------------------------------------------- // private onDownload() { - if (!this.listing) { - throw new Error('w3m-connecting-wc-unsupported:onDownload No listing provided') + if (!this.wallet) { + throw new Error('w3m-connecting-wc-unsupported:onDownload No wallet provided') } - CoreHelperUtil.openHref(this.listing.homepage, '_blank') + CoreHelperUtil.openHref(this.wallet.homepage, '_blank') } } diff --git a/packages/scaffold/src/partials/w3m-connecting-wc-web/index.ts b/packages/scaffold/src/partials/w3m-connecting-wc-web/index.ts index 11c6e004a3..1ba92388d8 100644 --- a/packages/scaffold/src/partials/w3m-connecting-wc-web/index.ts +++ b/packages/scaffold/src/partials/w3m-connecting-wc-web/index.ts @@ -1,7 +1,7 @@ import { + ApiController, ConnectionController, CoreHelperUtil, - ExplorerApiController, RouterController, SnackController } from '@web3modal/core' @@ -12,9 +12,9 @@ import { ifDefined } from 'lit/directives/if-defined.js' @customElement('w3m-connecting-wc-web') export class W3mConnectingWcWeb extends LitElement { // -- Members ------------------------------------------- // - private readonly listing = RouterController.state.data?.listing + private readonly wallet = RouterController.state.data?.wallet - private readonly images = ExplorerApiController.state.images + private readonly images = ApiController.state.images private unsubscribe: (() => void)[] = [] @@ -41,16 +41,16 @@ export class W3mConnectingWcWeb extends LitElement { // -- Render -------------------------------------------- // public override render() { - if (!this.listing) { - throw new Error('w3m-connecting-wc-web: No listing provided') + if (!this.wallet) { + throw new Error('w3m-connecting-wc-web: No wallet provided') } this.isReady() return html` ` } @@ -74,8 +74,8 @@ export class W3mConnectingWcView extends LitElement { } private determinePlatforms() { - if (!this.listing) { - throw new Error('w3m-connecting-wc-view:determinePlatforms No listing') + if (!this.wallet) { + throw new Error('w3m-connecting-wc-view:determinePlatforms No wallet') } if (this.platform) { @@ -83,15 +83,15 @@ export class W3mConnectingWcView extends LitElement { } const { connectors } = ConnectorController.state - const { mobile, desktop, injected } = this.listing + const { mobile_link, desktop_link, webapp_link, injected } = this.wallet const injectedIds = injected?.map(({ injected_id }) => injected_id) ?? [] const isInjected = injectedIds.length - const isMobileWc = mobile?.native || mobile?.universal - const isWebWc = desktop?.universal + const isMobileWc = mobile_link + const isWebWc = webapp_link const isInjectedConnector = connectors.find(c => c.type === 'INJECTED') const isInjectedInstalled = ConnectionController.checkInjectedInstalled(injectedIds) const isInjectedWc = isInjected && isInjectedInstalled && isInjectedConnector - const isDesktopWc = desktop?.native && !CoreHelperUtil.isMobile() + const isDesktopWc = desktop_link && !CoreHelperUtil.isMobile() // Populate all preferences if (isInjectedWc) {