feat: expose dApp definition state response

README.md

@@ -27,16 +27,16 @@
   - [Transaction requests](#transaction-requests)
     - [Build transaction manifest](#build-transaction-manifest)
     - [sendTransaction](#sendtransaction)
+  - [State Entity Details - dApp account](#state-entity-details---dapp-account)
 - [ROLA (Radix Off-Ledger Authentication)](#rola-radix-off-ledger-authentication)
 - [√ Connect Button](#-connect-button)
   - [Styling](#styling)
     - [Themes](#themes)
     - [Modes](#modes)
     - [CSS variables](#css-variables)
     - [Compact mode](#compact-mode)
-    - [Sandbox](#sandbox)
+    - [Storybook - Connect Button Playground](#storybook---connect-button-playground)
 - [Setting up your dApp Definition](#setting-up-your-dapp-definition)
-  - [Setting up a dApp Definition on the Radix Dashboard](#setting-up-a-dapp-definition-on-the-radix-dashboard)
 - [Data storage](#data-storage)
 - [Examples](#examples)
 - [License](#license)
@@ -471,6 +471,18 @@ const transactionIntentHash = result.value.transactionIntentHash
 
 </details>
 
+## State Entity Details - dApp account
+
+Right after RDT is instantiated it'll trigger Gateway request to find information about provided dApp definition account. Response of that request is available through `stateEntityDetails$` observable.
+
+<summary>stateEntityDetails$ usage example</summary>
+
+```typescript
+rdt.stateEntityDetails$.subscribe((details) => console.log(details))
+```
+
+</details>
+
 # ROLA (Radix Off-Ledger Authentication)
 
 ROLA is method of authenticating something claimed by the user connected to your dApp with the Radix Wallet. It uses the capabilities of the Radix Network to make this possible in a way that is decentralized and flexible for the user.
@@ -542,10 +554,10 @@ body {
 
 Setting `--radix-connect-button-width` below `138px` will enable compact mode.
 
-### Sandbox
+### Storybook - Connect Button Playground
 
 Play around with the different configurations on the
-[sandbox environment](https://connect-button-storybook.radixdlt.com/)
+[storybook environment](https://connect-button-storybook.radixdlt.com/)
 
 # Setting up your dApp Definition
 
@@ -561,19 +573,7 @@ Creating a dApp Definition for your dApp will provide the necessary information
 
 You can read more about dApp Definitions [here](https://docs.radixdlt.com/docs/metadata-for-verification).
 
-## Setting up a dApp Definition on the Radix Dashboard
-
-1. **Create a new account in the Radix Wallet.** This is the account which we will convert to a dApp Definition account.
-
-2. **Head to the Radix Dashboard’s Manage dApp Definitions page**. This page provides a simple interface to set the metadata on an account to make it a dApp Definition.
-
-3. **Connect your Radix Wallet to the Dashboard** and make sure you share the account that you just created to be a dApp Definition. Select that account on the Dashboard page.
-
-4. **Now check the box for “Set this account as a dApp Definition”, and fill in the name and description you want to use for your dApp.** Later you’ll also be able to specify an icon image, but that’s not ready just yet.
-
-5. **Click “Update”** and an approve transaction should appear in your Radix Wallet. Done!
-
-Provide account address as the the dApp Definition address that you just created, and it will be sent to the Radix Wallet whenever a user connects or receives a transaction from your dApp. The Wallet will then look up that dApp Definition address on the Radix Network, pull the latest metadata, and show it to the user. When a user logins to your dApp, an entry in the wallet’s preferences for your dApp will appear too. Try it out for yourself!
+You can read more about how to set proper metadata on dApp definition account [here](https://docs.radixdlt.com/docs/dapp-definition-setup).
 
 # Data storage
 

src/radix-dapp-toolkit.spec.ts

@@ -41,4 +41,19 @@ describe('RadixDappToolkit', () => {
       'Unnamed dApp'
     )
   })
+
+  it('should emit stateEntityDetails response', async () => {
+    const rdt = createRdt()
+    const spy = jest.fn()
+    rdt.stateEntityDetails$.subscribe(spy)
+
+    await delayAsync(0)
+
+    expect(spy).toHaveBeenCalledWith({
+      address: 'test',
+      metadata: {
+        items: [],
+      },
+    })
+  })
 })

src/radix-dapp-toolkit.ts

@@ -9,6 +9,7 @@ import { GatewayApiClient } from './gateway/gateway-api'
 import { GatewayClient, MetadataValue } from './gateway/gateway'
 import {
   BehaviorSubject,
+  Observable,
   Subscription,
   filter,
   merge,
@@ -23,7 +24,10 @@ import { LocalStorageClient } from './storage/local-storage-client'
 import { DataRequestClient } from './data-request/data-request'
 import { transformWalletDataToConnectButton } from './data-request/transformations/wallet-data-to-connect-button'
 import { DataRequestStateClient } from './data-request/data-request-state'
-import { RadixNetworkConfigById } from '@radixdlt/babylon-gateway-api-sdk'
+import {
+  RadixNetworkConfigById,
+  StateEntityDetailsVaultResponseItem,
+} from '@radixdlt/babylon-gateway-api-sdk'
 import {
   ButtonApi,
   GatewayApi,
@@ -38,6 +42,7 @@ import { mergeMap, withLatestFrom } from 'rxjs/operators'
 import { WalletData } from './state/types'
 
 export type RadixDappToolkit = {
+  stateEntityDetails$: Observable<StateEntityDetailsVaultResponseItem>
   walletApi: WalletApi
   gatewayApi: GatewayApi
   buttonApi: ButtonApi
@@ -67,6 +72,9 @@ export const RadixDappToolkit = (
   const dAppDefinitionAddressSubject = new BehaviorSubject<string>(
     dAppDefinitionAddress
   )
+  const stateEntityDetailsSubject = new BehaviorSubject<
+    StateEntityDetailsVaultResponseItem | undefined
+  >(undefined)
   const subscriptions = new Subscription()
 
   const connectButtonClient =
@@ -155,12 +163,12 @@ export const RadixDappToolkit = (
         switchMap((address) =>
           gatewayClient.gatewayApi
             .getEntityDetails(address)
-            .map(
-              (details) =>
-                MetadataValue(
-                  details?.metadata.items.find((item) => item.key === 'name')
-                ).stringified
-            )
+            .map((details) => {
+              stateEntityDetailsSubject.next(details)
+              return MetadataValue(
+                details?.metadata.items.find((item) => item.key === 'name')
+              ).stringified
+            })
             .map((dAppName) => {
               connectButtonClient.setDappName(dAppName ?? 'Unnamed dApp')
             })
@@ -357,6 +365,13 @@ export const RadixDappToolkit = (
   }
 
   return {
+    stateEntityDetails$: stateEntityDetailsSubject
+      .asObservable()
+      .pipe(
+        filter(
+          (details): details is StateEntityDetailsVaultResponseItem => !!details
+        )
+      ),
     walletApi,
     gatewayApi,
     buttonApi,

src/test-helpers/context.ts

@@ -95,7 +95,12 @@ export const createMockContext = (): MockContext => {
     connectButtonSubjects.onLinkClick.asObservable() as any
 
   gatewayApiClientMock.getEntityDetails.mockReturnValue(
-    okAsync(undefined) as any
+    okAsync({
+      address: 'test',
+      metadata: {
+        items: [],
+      },
+    }) as any
   )
 
   return {