@xyo-network/dapp-template 4.2.0 → 4.2.1

package/dist/neutral/DappHost.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DappHost.d.ts","sourceRoot":"","sources":["../../src/DappHost.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,6BAA6B,CAAA;AAetE,OAAO,KAEN,MAAM,OAAO,CAAA;AAMd,MAAM,WAAW,aAAa;IAC5B,IAAI,EAAE,mBAAmB,CAAA;CAC1B;AA8GD,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAM5C,CAAA"}
+{"version":3,"file":"DappHost.d.ts","sourceRoot":"","sources":["../../src/DappHost.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,6BAA6B,CAAA;AAEtE,OAAO,KAAkB,MAAM,OAAO,CAAA;AAKtC,MAAM,WAAW,aAAa;IAC5B,IAAI,EAAE,mBAAmB,CAAA;CAC1B;AAED,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAc5C,CAAA"}

package/dist/neutral/helpers/index.d.ts

@@ -0,0 +1,2 @@
+export * from './registration/index.ts';
+//# sourceMappingURL=index.d.ts.map

package/dist/neutral/helpers/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/helpers/index.ts"],"names":[],"mappings":"AAAA,cAAc,yBAAyB,CAAA"}

package/dist/neutral/helpers/registration/DappInitializer.d.ts

@@ -0,0 +1,18 @@
+import type { WindowDappNodeSet, XyOsContext } from '@xyo-network/os-model';
+import type { RegisteredReactDapp } from '@xyo-network/os-react-model';
+export interface DappInitializerConfig {
+    allowedNames: string[];
+    dapp: RegisteredReactDapp;
+    xnsNetwork: string | undefined;
+    xnsNodeUrl: string | undefined;
+    xyOs: XyOsContext;
+}
+export declare class DappInitializer {
+    private _config;
+    constructor(config: DappInitializerConfig);
+    get config(): DappInitializerConfig;
+    install(): Promise<WindowDappNodeSet>;
+    private initializeDappContext;
+    private installDappWallet;
+}
+//# sourceMappingURL=DappInitializer.d.ts.map

package/dist/neutral/helpers/registration/DappInitializer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DappInitializer.d.ts","sourceRoot":"","sources":["../../../../src/helpers/registration/DappInitializer.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAA;AAC3E,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,6BAA6B,CAAA;AAGtE,MAAM,WAAW,qBAAqB;IACpC,YAAY,EAAE,MAAM,EAAE,CAAA;IACtB,IAAI,EAAE,mBAAmB,CAAA;IACzB,UAAU,EAAE,MAAM,GAAG,SAAS,CAAA;IAC9B,UAAU,EAAE,MAAM,GAAG,SAAS,CAAA;IAC9B,IAAI,EAAE,WAAW,CAAA;CAClB;AAED,qBAAa,eAAe;IAC1B,OAAO,CAAC,OAAO,CAAuB;gBAE1B,MAAM,EAAE,qBAAqB;IAIzC,IAAI,MAAM,0BAET;IAEK,OAAO,IAAI,OAAO,CAAC,iBAAiB,CAAC;YAM7B,qBAAqB;YAQrB,iBAAiB;CAchC"}

package/dist/neutral/helpers/registration/index.d.ts

@@ -0,0 +1,3 @@
+export * from './DappInitializer.ts';
+export * from './useInstallDapp.tsx';
+//# sourceMappingURL=index.d.ts.map

package/dist/neutral/helpers/registration/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/helpers/registration/index.ts"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAA;AACpC,cAAc,sBAAsB,CAAA"}

package/dist/neutral/helpers/registration/useInstallDapp.d.ts

@@ -0,0 +1,8 @@
+import type { RegisteredReactDapp } from '@xyo-network/os-react-model';
+export declare const useInitializeDapp: (dapp: RegisteredReactDapp) => {
+    context: import("@xyo-network/os-model").XyOsContext | null | undefined;
+    dappMenu: import("@xyo-network/os-react-runtime").DappMenuProperties;
+    dappWallet: import("@xyo-network/wallet-model").WalletInstance | undefined;
+    errors: (Error | undefined)[];
+};
+//# sourceMappingURL=useInstallDapp.d.ts.map

package/dist/neutral/helpers/registration/useInstallDapp.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useInstallDapp.d.ts","sourceRoot":"","sources":["../../../../src/helpers/registration/useInstallDapp.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,6BAA6B,CAAA;AAOtE,eAAO,MAAM,iBAAiB,SAAU,mBAAmB;;;;;CA8B1D,CAAA"}

package/dist/node/DappHost.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DappHost.d.ts","sourceRoot":"","sources":["../../src/DappHost.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,6BAA6B,CAAA;AAetE,OAAO,KAEN,MAAM,OAAO,CAAA;AAMd,MAAM,WAAW,aAAa;IAC5B,IAAI,EAAE,mBAAmB,CAAA;CAC1B;AA8GD,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAM5C,CAAA"}
+{"version":3,"file":"DappHost.d.ts","sourceRoot":"","sources":["../../src/DappHost.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,6BAA6B,CAAA;AAEtE,OAAO,KAAkB,MAAM,OAAO,CAAA;AAKtC,MAAM,WAAW,aAAa;IAC5B,IAAI,EAAE,mBAAmB,CAAA;CAC1B;AAED,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAc5C,CAAA"}

package/dist/node/helpers/index.d.ts

@@ -0,0 +1,2 @@
+export * from './registration/index.ts';
+//# sourceMappingURL=index.d.ts.map

package/dist/node/helpers/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/helpers/index.ts"],"names":[],"mappings":"AAAA,cAAc,yBAAyB,CAAA"}

package/dist/node/helpers/registration/DappInitializer.d.ts

@@ -0,0 +1,18 @@
+import type { WindowDappNodeSet, XyOsContext } from '@xyo-network/os-model';
+import type { RegisteredReactDapp } from '@xyo-network/os-react-model';
+export interface DappInitializerConfig {
+    allowedNames: string[];
+    dapp: RegisteredReactDapp;
+    xnsNetwork: string | undefined;
+    xnsNodeUrl: string | undefined;
+    xyOs: XyOsContext;
+}
+export declare class DappInitializer {
+    private _config;
+    constructor(config: DappInitializerConfig);
+    get config(): DappInitializerConfig;
+    install(): Promise<WindowDappNodeSet>;
+    private initializeDappContext;
+    private installDappWallet;
+}
+//# sourceMappingURL=DappInitializer.d.ts.map

package/dist/node/helpers/registration/DappInitializer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DappInitializer.d.ts","sourceRoot":"","sources":["../../../../src/helpers/registration/DappInitializer.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAA;AAC3E,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,6BAA6B,CAAA;AAGtE,MAAM,WAAW,qBAAqB;IACpC,YAAY,EAAE,MAAM,EAAE,CAAA;IACtB,IAAI,EAAE,mBAAmB,CAAA;IACzB,UAAU,EAAE,MAAM,GAAG,SAAS,CAAA;IAC9B,UAAU,EAAE,MAAM,GAAG,SAAS,CAAA;IAC9B,IAAI,EAAE,WAAW,CAAA;CAClB;AAED,qBAAa,eAAe;IAC1B,OAAO,CAAC,OAAO,CAAuB;gBAE1B,MAAM,EAAE,qBAAqB;IAIzC,IAAI,MAAM,0BAET;IAEK,OAAO,IAAI,OAAO,CAAC,iBAAiB,CAAC;YAM7B,qBAAqB;YAQrB,iBAAiB;CAchC"}

package/dist/node/helpers/registration/index.d.ts

@@ -0,0 +1,3 @@
+export * from './DappInitializer.ts';
+export * from './useInstallDapp.tsx';
+//# sourceMappingURL=index.d.ts.map

package/dist/node/helpers/registration/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/helpers/registration/index.ts"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAA;AACpC,cAAc,sBAAsB,CAAA"}

package/dist/node/helpers/registration/useInstallDapp.d.ts

@@ -0,0 +1,8 @@
+import type { RegisteredReactDapp } from '@xyo-network/os-react-model';
+export declare const useInitializeDapp: (dapp: RegisteredReactDapp) => {
+    context: import("@xyo-network/os-model").XyOsContext | null | undefined;
+    dappMenu: import("@xyo-network/os-react-runtime").DappMenuProperties;
+    dappWallet: import("@xyo-network/wallet-model").WalletInstance | undefined;
+    errors: (Error | undefined)[];
+};
+//# sourceMappingURL=useInstallDapp.d.ts.map

package/dist/node/helpers/registration/useInstallDapp.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useInstallDapp.d.ts","sourceRoot":"","sources":["../../../../src/helpers/registration/useInstallDapp.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,6BAA6B,CAAA;AAOtE,eAAO,MAAM,iBAAiB,SAAU,mBAAmB;;;;;CA8B1D,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xyo-network/dapp-template",
-  "version": "4.2.0",
+  "version": "4.2.1",
   "description": "Primary SDK for using XYO Protocol 2.0",
   "homepage": "https://xyo.network",
   "bugs": {
@@ -42,14 +42,14 @@
     "@xylabs/react-promise": "^5.3.14",
     "@xyo-network/account": "^3.6.6",
     "@xyo-network/archivist-indexeddb": "^3.6.6",
-    "@xyo-network/kernel": "^4.2.0",
-    "@xyo-network/kernel-model": "^4.2.0",
+    "@xyo-network/kernel": "^4.2.1",
+    "@xyo-network/kernel-model": "^4.2.1",
     "@xyo-network/module-factory-locator": "^3.6.6",
     "@xyo-network/object": "^3.6.6",
-    "@xyo-network/os-model": "^4.2.0",
-    "@xyo-network/os-react-model": "^4.2.0",
-    "@xyo-network/os-react-runtime": "^4.2.0",
-    "@xyo-network/os-runtime": "^4.2.0",
+    "@xyo-network/os-model": "^4.2.1",
+    "@xyo-network/os-react-model": "^4.2.1",
+    "@xyo-network/os-react-runtime": "^4.2.1",
+    "@xyo-network/os-runtime": "^4.2.1",
     "@xyo-network/payload-model": "^3.6.6",
     "@xyo-network/react-node": "^4.3.1",
     "@xyo-network/react-sdk": "^4.3.1",

package/src/DappHost.tsx

@@ -1,145 +1,27 @@
-import { Typography } from '@mui/material'
-import { FlexCol, FlexRow } from '@xylabs/react-flexbox'
-import { usePromise } from '@xylabs/react-promise'
+import { FlexCol } from '@xylabs/react-flexbox'
 import type { RegisteredReactDapp } from '@xyo-network/os-react-model'
-import {
-  DappAccessFlexbox,
-  DappBar,
-  DappBottomNavigation,
-  DappChrome,
-  DappMenuDrawer,
-  useDappContextCreator,
-  useDappMenu,
-  useManageDappPathFromRoute, useXyOsUiContext,
-  XyOsUiContextProvider,
-} from '@xyo-network/os-react-runtime'
-import { DappSeedPhraseRepository, NameTransforms } from '@xyo-network/os-runtime'
-import { NodeProvider } from '@xyo-network/react-node'
-import { ErrorRender, WalletProvider } from '@xyo-network/react-sdk'
-import React, {
-  useMemo, useState, version,
-} from 'react'
+import { DappRendered } from '@xyo-network/os-react-runtime'
+import React, { useMemo } from 'react'
 
+import { useInitializeDapp } from './helpers/index.ts'
 import { XyOsHost } from './XyOsHost.tsx'
 
-const allowedNames = ['Accounts']
-
 export interface DappHostProps {
   dapp: RegisteredReactDapp
 }
 
-const DappPageHost: React.FC<DappHostProps> = ({ dapp }) => {
-  const xyOs = useXyOsUiContext()
-  const [walletId, setWalletId] = useState<string>()
-  const [dappWithWalletId, setDappWithWalletId] = useState<RegisteredReactDapp>(dapp)
-
-  // stub the walletId for the dapp
-  usePromise(async () => {
-    if (xyOs) {
-      const dappSeedPhraseRepository = new DappSeedPhraseRepository(xyOs, allowedNames)
-      const walletId = await dappSeedPhraseRepository.findOrCreate(allowedNames[0])
-      setWalletId(walletId)
-      setDappWithWalletId(dapp => ({
-        ...dapp,
-        config: {
-          ...dapp.config,
-          walletId,
-        },
-      }))
-    }
-  }, [xyOs])
-
-  const name = dapp?.config.name
-  const scrollable = true
-
-  // Create the dapp context
-  const {
-    dappWallet, context, nodeCreateError,
-  } = useDappContextCreator('', '', dappWithWalletId, allowedNames, !!walletId)
-
-  // support for routing
-  useManageDappPathFromRoute(context, dapp.config.name)
-
-  // Get the dapp component
-  const TypedDappComponent = useMemo(() => dapp?.params.modes?.window?.component as React.FC<{
-    name?: string
-  }>, [])
-
-  // Get the menu items
+export const DappHost: React.FC<DappHostProps> = ({ dapp }) => {
   const {
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    activePath, error: menuError, menuConfig, menuItemsVisible, onPathChange,
-  } = useDappMenu(context, name)
+    context, dappMenu, dappWallet, errors,
+  } = useInitializeDapp(dapp)
 
-  return (
-    <FlexCol>
-      <FlexRow>
-        <Typography>
-          xyOs Booted:&nbsp;
-          {xyOs ? 'true' : 'false'}
-        </Typography>
-      </FlexRow>
-      <DappChrome
-        appBar={(
-          <>
-            {/* Keep DappBar outside of the Dapp's Node Provider so it can still see the intentArchivist for close and minimize */}
-            <DappBar context={context} name={name} version={version} title={activePath ? new NameTransforms(activePath).deSlug() : ''} />
-          </>
-        )}
-        height="100dvh"
-        width="100dvw"
-        largeScreenMenu={(
-          <DappMenuDrawer
-            context={context}
-            name={name}
-            version={version}
-            activePath={activePath}
-            onPathChange={onPathChange}
-            menuConfig={menuConfig}
-            menuItems={menuItemsVisible}
-          />
-        )}
-        smallScreenMenu={(
-          <DappBottomNavigation
-            activePath={activePath}
-            onPathChange={onPathChange}
-            menuConfig={menuConfig}
-            menuItems={menuItemsVisible}
-            sx={{ display: menuConfig ? 'flex' : 'none' }}
-          />
-        )}
-      >
-        <ErrorRender error={nodeCreateError} scope="Accounts Stories" />
-        <WalletProvider rootWallet={dappWallet}>
-          <XyOsUiContextProvider value={context === null ? undefined : context}>
-            {/* Prevent dapps from reaching out to the os node */}
-            <NodeProvider node={context?.root}>
-              <FlexCol
-                alignItems="stretch"
-                justifyContent="stretch"
-                position="absolute"
-                top={0}
-                bottom={0}
-                left={0}
-                right={0}
-                sx={{ overflowY: scrollable ? 'auto' : 'hidden' }}
-              >
-                <TypedDappComponent name="Accounts" />
-              </FlexCol>
-              <DappAccessFlexbox context={context} />
+  const dappState = useMemo(() => ({ active: true }), [])
 
-            </NodeProvider>
-          </XyOsUiContextProvider>
-        </WalletProvider>
-      </DappChrome>
-    </FlexCol>
-  )
-}
-
-export const DappHost: React.FC<DappHostProps> = ({ dapp }) => {
   return (
     <XyOsHost>
-      <DappPageHost dapp={dapp} />
+      <FlexCol>
+        <DappRendered context={context} dapp={dapp} dappMenuProperties={dappMenu} dappState={dappState} dappWallet={dappWallet} errors={errors} />
+      </FlexCol>
     </XyOsHost>
   )
 }

package/src/dapp.stories.tsx

@@ -15,7 +15,7 @@ const StorybookEntry = {
   argTypes: {},
   component: DappHost,
   parameters: { docs: { page: null } },
-  title: 'dapps/accounts',
+  title: 'dapps/customDapp',
 } as Meta<typeof DappHost>
 
 const DappRoutes: React.FC<DappHostProps> = args => (

package/src/helpers/index.ts

@@ -0,0 +1 @@
+export * from './registration/index.ts'

package/src/helpers/registration/DappInitializer.ts

@@ -0,0 +1,53 @@
+import { assertEx } from '@xylabs/assert'
+import type { WindowDappNodeSet, XyOsContext } from '@xyo-network/os-model'
+import type { RegisteredReactDapp } from '@xyo-network/os-react-model'
+import { DappSeedPhraseRepository, RunningDappCache } from '@xyo-network/os-runtime'
+
+export interface DappInitializerConfig {
+  allowedNames: string[]
+  dapp: RegisteredReactDapp
+  xnsNetwork: string | undefined
+  xnsNodeUrl: string | undefined
+  xyOs: XyOsContext
+}
+
+export class DappInitializer {
+  private _config: DappInitializerConfig
+
+  constructor(config: DappInitializerConfig) {
+    this._config = config
+  }
+
+  get config() {
+    return assertEx(this._config, () => new Error('Options not set'))
+  }
+
+  async install(): Promise<WindowDappNodeSet> {
+    const dappWithWalletId = await this.installDappWallet()
+
+    return await this.initializeDappContext(dappWithWalletId)
+  }
+
+  private async initializeDappContext(dappWithWalletId: RegisteredReactDapp): Promise<WindowDappNodeSet> {
+    const {
+      allowedNames, xnsNetwork, xnsNodeUrl, xyOs,
+    } = this.config
+
+    return await RunningDappCache.findOrCreate(dappWithWalletId, xyOs, allowedNames ?? [], xnsNodeUrl, xnsNetwork)
+  }
+
+  private async installDappWallet(): Promise<RegisteredReactDapp> {
+    const { xyOs, dapp } = this.config
+    const dappSeedPhraseRepository = new DappSeedPhraseRepository(xyOs, [dapp.config.name])
+    const walletId = await dappSeedPhraseRepository.findOrCreate(dapp.config.name)
+
+    // Update the dapp with the walletId
+    return {
+      ...dapp,
+      config: {
+        ...dapp.config,
+        walletId,
+      },
+    }
+  }
+}

package/src/helpers/registration/index.ts

@@ -0,0 +1,2 @@
+export * from './DappInitializer.ts'
+export * from './useInstallDapp.tsx'

package/src/helpers/registration/useInstallDapp.tsx

@@ -0,0 +1,39 @@
+import { usePromise } from '@xylabs/react-promise'
+import type { RegisteredReactDapp } from '@xyo-network/os-react-model'
+import {
+  useDappMenu, useManageDappInjectableParamsFromRoute, useManageDappPathFromRoute, useXyOsUiContext,
+} from '@xyo-network/os-react-runtime'
+
+import { DappInitializer } from './DappInitializer.ts'
+
+export const useInitializeDapp = (dapp: RegisteredReactDapp) => {
+  const xyOs = useXyOsUiContext()
+
+  const [installedDapp, nodeCreateError] = usePromise(async () => {
+    if (xyOs && dapp) {
+      const installer = new DappInitializer({
+        allowedNames: [dapp.config.name],
+        dapp,
+        xnsNetwork: undefined,
+        xnsNodeUrl: undefined,
+        xyOs,
+      })
+      return await installer.install()
+    }
+  }, [xyOs, dapp])
+
+  const { dappWallet, context } = installedDapp ?? {}
+
+  // support for routing
+  const routingError = useManageDappPathFromRoute(context, dapp.config.name)
+  const injectableErrors = useManageDappInjectableParamsFromRoute(context)
+
+  const dappMenu = useDappMenu(context, dapp.config.name)
+
+  return {
+    context,
+    dappMenu,
+    dappWallet,
+    errors: [routingError, nodeCreateError, ...injectableErrors].filter(Boolean),
+  }
+}