@xyo-network/dapp-template 3.2.0

package/src/UiParams.ts

@@ -0,0 +1,11 @@
+import type { UnregisteredReactDapp } from '@xyo-network/os-react-model'
+
+import { CustomDappParams } from './Params.js'
+import { CustomDapp } from './window/index.ts'
+
+export const CustomDappUiParams: UnregisteredReactDapp['params'] = {
+  ...CustomDappParams,
+  modes: { window: { component: CustomDapp } },
+}
+
+export { CustomDappUiParams as default }

package/src/XyOsHost.tsx

@@ -0,0 +1,61 @@
+import { Typography } from '@mui/material'
+import { FlexCol } from '@xylabs/react-flexbox'
+import { usePromise } from '@xylabs/react-promise'
+import { HDWallet, type WalletInstance } from '@xyo-network/account'
+import { Kernel } from '@xyo-network/kernel'
+import type { KernelExternal } from '@xyo-network/kernel-model'
+import { ModuleFactoryLocator } from '@xyo-network/module-factory-locator'
+import { XyOsUiContextProvider } from '@xyo-network/os-react-runtime'
+import { EventBus, XyOs } from '@xyo-network/os-runtime'
+import type React from 'react'
+import { useMemo } from 'react'
+
+export interface XyOsHostProps {
+  children?: React.ReactNode
+  eventBus?: EventBus
+  kernel?: KernelExternal
+  locator?: ModuleFactoryLocator
+  wallet?: WalletInstance
+}
+
+export const XyOsHost: React.FC<XyOsHostProps> = ({
+  children, eventBus, kernel, locator, wallet,
+}) => {
+  const [walletToUse] = usePromise(async () => wallet ?? await HDWallet.random(), [wallet])
+  const eventBusToUse: EventBus = useMemo(() => eventBus ?? new EventBus(), [kernel])
+  const kernelToUse: KernelExternal = useMemo(() => kernel ?? new Kernel(), [kernel])
+  const locatorToUse = useMemo(() => locator ?? new ModuleFactoryLocator(), [locator])
+
+  const [os, error] = usePromise(async () => {
+    if (walletToUse && kernelToUse && eventBusToUse && locatorToUse) {
+      const os = new XyOs({
+        kernel: kernelToUse, eventBus: new EventBus(), locator: locatorToUse,
+      })
+      await os.boot(walletToUse, locatorToUse)
+      return os
+    }
+  }, [kernelToUse, walletToUse, locator, eventBusToUse, locatorToUse])
+
+  return os
+    ? <XyOsUiContextProvider value={os}>{children}</XyOsUiContextProvider>
+    : (
+        <FlexCol>
+          <Typography>
+            wallet:
+            {walletToUse ? 'ready' : 'loading'}
+          </Typography>
+          <Typography>
+            kernel:
+            {kernelToUse ? 'ready' : 'loading'}
+          </Typography>
+          <Typography>
+            os:
+            {os ? 'ready' : 'loading'}
+          </Typography>
+          <Typography>
+            os-error:
+            {error?.message}
+          </Typography>
+        </FlexCol>
+      )
+}

package/src/components/Dapp.tsx

@@ -0,0 +1,10 @@
+import { FlexRow } from '@xylabs/react-flexbox'
+import type { PathToComponent } from '@xyo-network/os-react-runtime'
+import React from 'react'
+
+export const CustomDappPathToComponent: PathToComponent[] = [
+  {
+    component: <FlexRow />,
+    path: 'home',
+  },
+]

package/src/components/index.ts

@@ -0,0 +1 @@
+export * from './Dapp.tsx'

package/src/dapp.manifest.json

@@ -0,0 +1,30 @@
+{
+  "$schema": "https://raw.githubusercontent.com/XYOracleNetwork/sdk-xyo-client-js/main/packages/manifest/src/compilations/dapp-package-manifest-schema.json",
+  "nodes": [
+    {
+      "config": {
+        "accountPath": "0'",
+        "name": "Node",
+        "schema": "network.xyo.node.config"
+      },
+      "modules": {
+        "private": [],
+        "public": [
+          {
+            "config": {
+              "accountPath": "1'",
+              "name": "DappArchivist",
+              "dbName": "DappArchivist",
+              "storeName": "payloads",
+              "schema": "network.xyo.archivist.config",
+              "labels": {
+                "network.xyo.archivist.persistence.scope": "device"
+              }
+            }
+          }
+        ]
+      }
+    }
+  ],
+  "schema": "network.xyo.manifest.package.dapp"
+}

package/src/dapp.stories.tsx

@@ -0,0 +1,75 @@
+import type { Meta, StoryFn } from '@storybook/react'
+import { DappRegisteredSchema, DappRegisteredState } from '@xyo-network/os-model'
+import type { RegisteredReactDapp } from '@xyo-network/os-react-model'
+import React from 'react'
+import {
+  BrowserRouter, Route, Routes,
+} from 'react-router-dom'
+
+import type { DappHostProps } from './DappHost.tsx'
+import { DappHost } from './DappHost.tsx'
+import { CustomDappConfig } from './Payloads.ts'
+import { CustomDappUiParams } from './ReactDapp.ts'
+
+const StorybookEntry = {
+  argTypes: {},
+  component: DappHost,
+  parameters: { docs: { page: null } },
+  title: 'dapps/accounts',
+} as Meta<typeof DappHost>
+
+const DappRoutes: React.FC<DappHostProps> = args => (
+  <Routes>
+    <Route
+      path="/"
+      element={(
+        <DappHost {...args} />
+      )}
+    />
+    <Route
+      path="/:dappName"
+      element={(
+        <DappHost {...args} />
+      )}
+    />
+    <Route
+      path="/:dappName/:path/*"
+      element={(
+        <DappHost {...args} />
+      )}
+    />
+    <Route
+      path="*"
+      element={(
+        <DappHost {...args} />
+      )}
+    />
+  </Routes>
+)
+
+const Template: StoryFn<typeof DappHost> = (args: DappHostProps) => {
+  return (
+    <BrowserRouter>
+      <DappRoutes {...args} />
+    </BrowserRouter>
+  )
+}
+
+const dapp: RegisteredReactDapp = {
+  config: {
+    ...CustomDappConfig,
+    state: DappRegisteredState.Registered,
+    schema: DappRegisteredSchema,
+    walletId: 'Accounts',
+  },
+  accessors: [],
+  params: CustomDappUiParams,
+  widgetConfigs: [],
+}
+
+const Default = Template.bind({})
+Default.args = { dapp }
+
+export { Default }
+
+export default StorybookEntry

package/src/icon/Icon.tsx

@@ -0,0 +1,45 @@
+/* eslint-disable @stylistic/max-len */
+export const CustomDappIconSvg = `
+<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40">
+    <path
+      fill="transparent"
+      d="M6.44,27.12c-.78,0-1.44.28-2,.83-.55.55-.83,1.21-.83,1.99s.28,1.44.83,2c.55.55,1.21.83,1.99.83s1.44-.28,2-.83c.55-.55.83-1.21.83-1.99s-.28-1.44-.83-2c-.55-.55-1.21-.83-1.99-.83Z"
+    />
+    <path
+      fill="transparent"
+      d="M18.01,27.91c-.55.55-.83,1.22-.83,1.99s.28,1.44.83,2c.55.55,1.21.83,1.99.83s1.44-.28,2-.83c.55-.55.83-1.21.83-1.99s-.28-1.44-.83-2c-.55-.55-1.21-.83-1.99-.83s-1.44.28-2,.83Z"
+    />
+    <path
+      fill="transparent"
+      d="M33.56,27.12c-.78,0-1.44.28-2,.83-.55.55-.83,1.21-.83,1.99s.28,1.44.83,2c.55.55,1.21.83,1.99.83s1.44-.28,2-.83c.55-.55.83-1.21.83-1.99s-.28-1.44-.83-2c-.55-.55-1.21-.83-1.99-.83Z"
+    />
+    <path
+      fill="currentColor"
+      d="M36.55,26.94c-.82-.82-1.82-1.23-3-1.23-.32,0-.63.04-.93.11-.3.07-.59.17-.87.31l-5.87-8.09c-.18.03-.36.05-.56.05h-1.13l6.42,8.83c-.39.4-.7.85-.93,1.36-.23.51-.35,1.06-.35,1.66,0,1.18.41,2.17,1.23,3s1.82,1.23,3,1.23,2.17-.41,3-1.23,1.23-1.82,1.23-3-.41-2.17-1.23-3ZM35.55,31.93c-.55.55-1.22.83-2,.83s-1.44-.28-1.99-.83c-.55-.55-.83-1.22-.83-2s.28-1.44.83-1.99c.55-.55,1.22-.83,2-.83s1.44.28,1.99.83c.55.55.83,1.22.83,2s-.28,1.44-.83,1.99Z"
+    />
+    <path
+      fill="currentColor"
+      d="M19.29,25.73c-1,.16-1.84.64-2.52,1.42-.67.79-1.01,1.7-1.01,2.75,0,1.18.41,2.17,1.23,3,.82.82,1.82,1.23,3,1.23s2.17-.41,3-1.23c.82-.82,1.23-1.82,1.23-3,0-1.05-.34-1.97-1.01-2.74-.67-.78-1.51-1.25-2.52-1.43v-7.65h-1.41v7.65ZM22,27.91c.55.55.83,1.22.83,2s-.28,1.44-.83,1.99c-.55.55-1.22.83-2,.83s-1.44-.28-1.99-.83c-.55-.55-.83-1.22-.83-2s.28-1.44.83-1.99c.55-.55,1.22-.83,2-.83s1.44.28,1.99.83Z"
+    />
+    <path
+      fill="currentColor"
+      d="M14.1,18l-5.89,8.08c-.28-.13-.56-.22-.86-.28-.29-.06-.6-.09-.91-.09-1.18,0-2.17.41-3,1.23-.82.82-1.23,1.82-1.23,3s.41,2.17,1.23,3,1.82,1.23,3,1.23,2.17-.41,3-1.23,1.23-1.82,1.23-3c0-.6-.12-1.15-.36-1.66s-.56-.96-.95-1.36l6.45-8.83h-1c-.25,0-.48-.03-.7-.08ZM8.44,31.93c-.55.55-1.22.83-2,.83s-1.44-.28-1.99-.83c-.55-.55-.83-1.22-.83-2s.28-1.44.83-1.99c.55-.55,1.22-.83,2-.83s1.44.28,1.99.83c.55.55.83,1.22.83,2s-.28,1.44-.83,1.99Z"
+    />
+    <path
+      fill="transparent"
+      d="M20,12.91c1.26,0,2.46.19,3.61.56,1.15.37,2.23.88,3.23,1.54V4.86c0-.44-.15-.82-.46-1.12s-.68-.46-1.12-.46h-10.52c-.44,0-.82.15-1.12.46s-.46.68-.46,1.12v10.15c1-.66,2.08-1.17,3.23-1.54s2.36-.56,3.61-.56ZM17.7,5.83c.63-.63,1.4-.95,2.3-.95s1.66.32,2.3.95.95,1.4.95,2.3-.32,1.66-.95,2.3-1.4.95-2.3.95-1.66-.32-2.3-.95-.95-1.4-.95-2.3.32-1.66.95-2.3Z"
+    />
+    <path
+      fill="transparent"
+      d="M20,10.32c.6,0,1.12-.21,1.55-.64.43-.43.65-.94.65-1.55s-.22-1.12-.65-1.55c-.43-.43-.95-.65-1.55-.65s-1.12.22-1.55.65-.64.95-.64,1.55.21,1.12.64,1.55.94.64,1.55.64Z"
+    />
+    <path
+      fill="currentColor"
+      d="M20,11.37c.9,0,1.66-.32,2.3-.95s.95-1.4.95-2.3-.32-1.66-.95-2.3-1.4-.95-2.3-.95-1.66.32-2.3.95-.95,1.4-.95,2.3.32,1.66.95,2.3,1.4.95,2.3.95ZM18.45,6.58c.43-.43.95-.65,1.55-.65s1.12.22,1.55.65c.43.43.65.95.65,1.55s-.22,1.12-.65,1.55c-.43.43-.95.64-1.55.64s-1.12-.21-1.55-.64-.64-.95-.64-1.55.21-1.12.64-1.55Z"
+    />
+    <path
+      fill="currentColor"
+      d="M27.21,2.9c-.5-.5-1.15-.75-1.95-.75h-10.52c-.8,0-1.45.25-1.95.75-.5.5-.75,1.15-.75,1.95v10.52c0,.8.25,1.45.75,1.95.35.35.77.56,1.25.67.22.05.45.08.7.08h10.52c.2,0,.38-.02.56-.05.55-.09,1.01-.33,1.39-.71.5-.5.75-1.15.75-1.95V4.86c0-.8-.25-1.45-.75-1.95ZM25.93,16.74c-.26.14-.55.22-.86.22h-10.15s-.08-.01-.12-.01c-.25-.02-.5-.08-.74-.2-.28-.14-.45-.35-.5-.63.99-.7,2.03-1.22,3.12-1.57s2.19-.52,3.31-.52,2.27.18,3.4.55c1.13.36,2.18.88,3.16,1.54-.15.27-.36.48-.63.63ZM26.84,15.01c-1-.66-2.08-1.17-3.23-1.54-1.15-.37-2.36-.56-3.61-.56s-2.46.19-3.61.56-2.23.88-3.23,1.54V4.86c0-.44.15-.82.46-1.12s.68-.46,1.12-.46h10.52c.44,0,.82.15,1.12.46s.46.68.46,1.12v10.15Z"
+    />
+  </svg>
+  `

package/src/icon/index.ts

@@ -0,0 +1,2 @@
+export * from './Icon.tsx'
+export { CustomDappIconSvg as default } from './Icon.tsx'

package/src/index.ts

@@ -0,0 +1,4 @@
+export { default as accountsDappManifest } from './dapp.manifest.json'
+export * from './Params.ts'
+export * from './Payloads.ts'
+export * from './UiParams.ts'

package/src/window/Dapp.tsx

@@ -0,0 +1,19 @@
+import { DappPathSwitcher, useAddDappMenuItems } from '@xyo-network/os-react-runtime'
+import { ErrorRender } from '@xyo-network/react-error'
+import React from 'react'
+
+import { CustomDappPathToComponent } from '../components/index.ts'
+import { CustomDappMenuPayloads } from '../Payloads.js'
+
+export const CustomDapp = () => {
+  const {
+    menuConfig, path, error,
+  } = useAddDappMenuItems(CustomDappMenuPayloads)
+
+  return (
+    <>
+      <ErrorRender error={error} scope="CustomDapp" />
+      <DappPathSwitcher activePath={path?.path ?? menuConfig?.defaultPath} pathToComponent={CustomDappPathToComponent} />
+    </>
+  )
+}

package/src/window/index.ts

@@ -0,0 +1 @@
+export * from './Dapp.tsx'

package/typedoc.json

@@ -0,0 +1,5 @@
+{
+  "$schema": "https://typedoc.org/schema.json",
+  "entryPoints": ["./src/index.ts"],
+  "tsconfig": "./tsconfig.typedoc.json"
+}

package/xy.config.ts

@@ -0,0 +1,10 @@
+import type { XyTsupConfig } from '@xylabs/ts-scripts-yarn3'
+const config: XyTsupConfig = {
+  compile: {
+    browser: {},
+    node: { src: { entry: ['./src/index.ts'] } },
+    neutral: { src: { entry: ['./src/index.ts'] } },
+  },
+}
+
+export default config