feat: add gateway api client config

examples/simple-dapp/package.json

@@ -10,6 +10,7 @@
     "deploy": "sst deploy"
   },
   "dependencies": {
+    "@radixdlt/babylon-gateway-api-sdk": "^1.4.1",
     "@radixdlt/radix-dapp-toolkit": "*"
   },
   "devDependencies": {

examples/simple-dapp/src/main.ts

@@ -1,3 +1,4 @@
+import { GatewayApiClient } from '@radixdlt/babylon-gateway-api-sdk'
 import './style.css'
 import {
   RadixDappToolkit,
@@ -28,6 +29,8 @@ content.innerHTML = `
   <pre id="walletResponse"></pre>
   <pre id="requests"></pre>
   <pre id="state"></pre>
+  <pre id="gatewayConfig"></pre>
+  <pre id="gatewayStatus"></pre>
   <pre id="device"></pre>
   <pre id="logs"></pre>
 `
@@ -39,6 +42,8 @@ const walletResponse = document.getElementById('walletResponse')!
 const device = document.getElementById('device')!
 const logs = document.getElementById('logs')!
 const state = document.getElementById('state')!
+const gatewayConfig = document.getElementById('gatewayConfig')!
+const gatewayStatus = document.getElementById('gatewayStatus')!
 
 const logger = Logger()
 
@@ -56,7 +61,7 @@ const requestItemClient = RequestItemClient({
 })
 
 const dAppToolkit = RadixDappToolkit({
-  dAppDefinitionAddress,
+  applicationDappDefinitionAddress: dAppDefinitionAddress,
   networkId,
   enableMobile: true,
   providers: {
@@ -69,6 +74,10 @@ const dAppToolkit = RadixDappToolkit({
   logger,
 })
 
+const gatewayApi = GatewayApiClient.initialize(
+  dAppToolkit.gatewayApi.clientConfig,
+)
+
 dAppToolkit.walletApi.provideChallengeGenerator(async () =>
   [...window.crypto.getRandomValues(new Uint8Array(32))]
     .map((x) => x.toString(16).padStart(2, '0'))
@@ -77,6 +86,10 @@ dAppToolkit.walletApi.provideChallengeGenerator(async () =>
 
 dAppToolkit.walletApi.setRequestData(DataRequestBuilder.persona().withProof())
 
+gatewayConfig.innerHTML = `
+[Gateway]
+${JSON.stringify(dAppToolkit.gatewayApi.clientConfig, null, 2)}`
+
 resetButton.onclick = () => {
   sessionStore.clear()
   requestsStore.clear()
@@ -96,9 +109,13 @@ setInterval(() => {
   sessionStore.getItemList().map((value: any) => {
     sessions.innerHTML = JSON.stringify({ sessions: value }, null, 2)
   })
-  // storageClient.getPartition('identities')
+  gatewayApi.status
+    .getCurrent()
+    .then(
+      (status) => (gatewayStatus.innerHTML = JSON.stringify(status, null, 2)),
+    ) // storageClient.getPartition('identities')
   // .getState((state) => {
-  //   keyPairs.innerHTML = JSON.stringify(state, null, 2)
+  // keyPairs.innerHTML = JSON.stringify(state, null, 2)
   //   debugger
   // })
   // .map((items) => {

examples/simple-dapp/src/style.css

@@ -98,7 +98,6 @@ header {
 }
 
 pre {
-  width: 300px;
   text-align: left;
   overflow: auto;
 }

packages/dapp-toolkit/src/_types.ts

@@ -205,3 +205,10 @@ export type TransportProvider = {
   disconnect: () => void
   destroy: () => void
 }
+
+export type GatewayApiClientConfig = {
+  basePath: string
+  applicationName: string
+  applicationVersion: string
+  applicationDappDefinitionAddress: string
+}

packages/dapp-toolkit/src/gateway/gateway-api.ts

@@ -1,20 +1,16 @@
 import { EntityMetadataItem, TransactionStatus } from './types'
 import { fetchWrapper } from '../helpers'
 import { __VERSION__ } from '../version'
+import { GatewayApiClientConfig } from '../_types'
 
 export type GatewayApiClient = ReturnType<typeof GatewayApiClient>
 
 export const GatewayApiClient = ({
   basePath,
-  dAppDefinitionAddress,
   applicationName,
   applicationVersion,
-}: {
-  basePath: string
-  dAppDefinitionAddress?: string
-  applicationVersion?: string
-  applicationName?: string
-}) => {
+  applicationDappDefinitionAddress,
+}: GatewayApiClientConfig) => {
   const fetchWithHeaders = <T>(url: string, body: any) =>
     fetchWrapper<T>(
       fetch(`${basePath}${url}`, {
@@ -24,9 +20,9 @@ export const GatewayApiClient = ({
           'Content-Type': 'application/json',
           'RDX-Client-Name': '@radixdlt/radix-dapp-toolkit',
           'RDX-Client-Version': __VERSION__,
-          'RDX-App-Name': applicationName ?? 'Unknown',
-          'RDX-App-Version': applicationVersion ?? 'Unknown',
-          'RDX-App-Dapp-Definition': dAppDefinitionAddress ?? 'Unknown',
+          'RDX-App-Name': applicationName,
+          'RDX-App-Version': applicationVersion,
+          'RDX-App-Dapp-Definition': applicationDappDefinitionAddress,
         } as Record<string, string>,
       }),
     ).map((response) => response.data)

packages/dapp-toolkit/src/helpers/generate-gateway-api-config.ts

@@ -0,0 +1,20 @@
+import { RadixNetworkConfigById } from '../gateway'
+
+export const generateGatewayApiClientConfig = ({
+  networkId,
+  dAppDefinitionAddress,
+  gatewayBaseUrl,
+  applicationName,
+  applicationVersion,
+}: {
+  networkId: number
+  dAppDefinitionAddress: string
+  gatewayBaseUrl?: string
+  applicationName?: string
+  applicationVersion?: string
+}) => ({
+  basePath: gatewayBaseUrl ?? RadixNetworkConfigById[networkId].gatewayUrl,
+  applicationName: applicationName ?? 'Unknown',
+  applicationVersion: applicationVersion ?? 'Unknown',
+  applicationDappDefinitionAddress: dAppDefinitionAddress,
+})

packages/dapp-toolkit/src/radix-dapp-toolkit.ts

@@ -1,6 +1,7 @@
 import { ConnectButtonClient } from './connect-button/connect-button-client'
 import {
   ButtonApi,
+  GatewayApiClientConfig,
   RadixDappToolkitOptions,
   SendTransactionInput,
   WalletApi,
@@ -10,11 +11,14 @@ import { GatewayClient } from './gateway/gateway'
 import { GatewayApiClient } from './gateway/gateway-api'
 import { WalletRequestClient } from './wallet-request'
 import { StateClient, WalletData } from './state'
-import { RadixNetworkConfigById } from './gateway/types'
+import { generateGatewayApiClientConfig } from './helpers/generate-gateway-api-config'
 
 export type RadixDappToolkit = {
   walletApi: WalletApi
   buttonApi: ButtonApi
+  gatewayApi: {
+    clientConfig: GatewayApiClientConfig
+  }
   disconnect: () => void
   destroy: () => void
 }
@@ -49,17 +53,19 @@ export const RadixDappToolkit = (
       },
     })
 
+  const gatewayApiClientConfig = generateGatewayApiClientConfig({
+    networkId,
+    dAppDefinitionAddress,
+    gatewayBaseUrl,
+    applicationName,
+    applicationVersion,
+  })
+
   const gatewayClient =
     providers?.gatewayClient ??
     GatewayClient({
       logger,
-      gatewayApi: GatewayApiClient({
-        basePath:
-          gatewayBaseUrl ?? RadixNetworkConfigById[networkId].gatewayUrl,
-        dAppDefinitionAddress,
-        applicationName,
-        applicationVersion,
-      }),
+      gatewayApi: GatewayApiClient(gatewayApiClientConfig),
     })
 
   const walletRequestClient =
@@ -123,6 +129,9 @@ export const RadixDappToolkit = (
       setMode: connectButtonClient.setMode,
       status$: connectButtonClient.status$,
     },
+    gatewayApi: {
+      clientConfig: gatewayApiClientConfig,
+    },
     disconnect: () => {
       walletRequestClient.disconnect()
       connectButtonClient.disconnect()