@xyo-network/os-react-runtime 2.3.0

package/src/dapps/shared/accounts/icon/Icon.tsx

@@ -0,0 +1,49 @@
+/* eslint-disable @stylistic/max-len */
+import { createSvgIcon } from '@mui/material'
+import React from 'react'
+
+export const AccountsIcon = createSvgIcon(
+  <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>,
+  'AccountsIcon',
+)

package/src/dapps/shared/accounts/icon/custom-accounts-icon.svg

@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40"><defs><style>.cls-1{fill:none;}.cls-1,.cls-2{stroke-width:0px;}.cls-2{fill:#000;}</style></defs><path class="cls-1" 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 class="cls-1" 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 class="cls-1" 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 class="cls-2" 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 class="cls-2" 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 class="cls-2" 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 class="cls-1" 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 class="cls-1" 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 class="cls-2" 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 class="cls-2" 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/dapps/shared/accounts/icon/index.ts

@@ -0,0 +1 @@
+export * from './Icon.js'

package/src/dapps/shared/accounts/index.ts

@@ -0,0 +1,2 @@
+export * from './components/index.ts'
+export * from './models/index.ts'

package/src/dapps/shared/accounts/models/CreditCardInput.ts

@@ -0,0 +1,20 @@
+import type { Payload } from '@xyo-network/payload-model'
+import { isPayloadOfSchemaTypeWithMeta } from '@xyo-network/payload-model'
+
+export const CreditCardInputSchema = 'network.xyo.credit.card.input' as const
+export type CreditCardInputSchema = typeof CreditCardInputSchema
+
+export type CreditCardInputFields = {
+  cardNumber: string
+  cvc: string
+  emailAddress: string
+  expiration: string
+  firstName: string
+  lastName: string
+  timestamp: number
+  zip: string
+}
+
+export type CreditCardInput = Payload<CreditCardInputFields, CreditCardInputSchema>
+
+export const isCreditCardInput = isPayloadOfSchemaTypeWithMeta<CreditCardInput>(CreditCardInputSchema)

package/src/dapps/shared/accounts/models/index.ts

@@ -0,0 +1 @@
+export * from './CreditCardInput.js'

package/src/dapps/shared/index.ts

@@ -0,0 +1,3 @@
+export * from './accounts/index.ts'
+export * from './name-service/index.ts'
+export * from './table/index.ts'

package/src/dapps/shared/name-service/DomainIcon.tsx

@@ -0,0 +1,13 @@
+/* eslint-disable @stylistic/max-len */
+import { createSvgIcon } from '@mui/material'
+import React from 'react'
+
+export const XnsDomainIcon = createSvgIcon(
+  <svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400">
+    <path
+      fill="currentColor"
+      d="M384.67,118.15c-10.22-25.59-24.44-47.14-42.66-64.65-18.21-17.5-39.36-30.79-63.45-39.86C254.48,4.58,228.67.04,201.11.04c-33.77,0-63.36,5.25-88.78,15.73-25.41,10.49-46.56,24.71-63.45,42.66-16.89,17.95-29.42,38.43-37.6,61.45C3.11,142.91-.62,166.94.08,192c.89,34.48,8.09,60.92,21.6,79.32,13.51,18.4,34.48,27.59,62.92,27.59,8.72,0,17.01-1.23,24.93-3.53v4.75c0,2.43,1.96,4.39,4.39,4.39h37.48c2.43,0,4.39-1.96,4.39-4.39v-115.59l76.94,117.99c.81,1.24,2.19,1.99,3.68,1.99h37.47c2.43,0,4.39-1.96,4.39-4.39V104.6c0-2.43-1.96-4.39-4.39-4.39h-37.47c-2.43,0-4.39,1.96-4.39,4.39v115.59l-76.94-117.99c-.81-1.24-2.19-1.99-3.68-1.99h-37.48c-2.43,0-4.39,1.96-4.39,4.39v135.87c-.62,1.06-1.28,2.06-2,2.99-5.33,6.93-13.24,10.39-23.73,10.39-9.24,0-16.4-2.62-21.46-7.86-5.06-5.24-8.62-12.4-10.66-21.46-2.04-9.06-3.24-19.46-3.6-31.19-.54-27.55,3.55-50.75,12.26-69.59,8.71-18.83,20.49-34.08,35.32-45.72,14.85-11.64,31.15-20.09,48.93-25.33,17.77-5.24,35.46-7.86,53.06-7.86,24.89,0,47.01,3.96,66.38,11.86,19.37,7.91,35.68,19.02,48.92,33.33,13.25,14.31,23.2,31.19,29.86,50.65,6.67,19.46,9.83,40.84,9.47,64.12-.7,23.11-4.89,43.9-12.53,62.39-7.64,18.49-18.31,34.31-32,47.46-13.69,13.15-29.86,23.19-48.52,30.13-18.66,6.93-39.1,10.4-61.32,10.4-12.44,0-24.83-1.38-37.19-4.13-8.79-1.96-17.06-4.49-24.81-7.57-5.09-2.02-10.82.46-12.7,5.61l-8.56,23.42c-1.79,4.91.65,10.33,5.49,12.31,11.06,4.53,22.55,8.02,34.45,10.49,15.02,3.11,30.26,4.66,45.73,4.66,28.97,0,55.63-4.8,79.98-14.4,24.36-9.59,45.51-23.15,63.46-40.66,17.95-17.5,31.81-38.08,41.59-61.72,9.77-23.64,14.66-49.32,14.66-77.05,0-33.06-5.11-62.39-15.33-87.98Z"
+    />
+  </svg>,
+  'XNSDomain',
+)

package/src/dapps/shared/name-service/index.ts

@@ -0,0 +1 @@
+export * from './DomainIcon.js'

package/src/dapps/shared/table/NextIteratorFlexbox.tsx

@@ -0,0 +1,32 @@
+import { ArrowCircleLeftOutlined, ArrowCircleRightOutlined } from '@mui/icons-material'
+import { IconButton, LinearProgress } from '@mui/material'
+import type { FlexBoxProps } from '@xylabs/react-flexbox'
+import { FlexRow } from '@xylabs/react-flexbox'
+import type { PayloadDivinerQueryPayload } from '@xyo-network/diviner-payload-model'
+import React from 'react'
+
+export interface NextIteratorFlexboxProps extends FlexBoxProps {
+  loading?: boolean
+  next: (order: PayloadDivinerQueryPayload['order']) => Promise<void>
+}
+
+export const NextIteratorFlexbox: React.FC<NextIteratorFlexboxProps> = ({
+  next: changePage, loading, ...props
+}) => {
+  return (
+    <FlexRow justifyContent="space-between" gap={2} {...props}>
+      <LinearProgress sx={{
+        display: 'flex', flexGrow: 1, visibility: loading ? 'visible' : 'hidden',
+      }}
+      />
+      <FlexRow>
+        <IconButton onClick={() => { changePage('asc').catch(console.error) }}>
+          <ArrowCircleLeftOutlined />
+        </IconButton>
+        <IconButton onClick={() => { changePage('desc').catch(console.error) }}>
+          <ArrowCircleRightOutlined />
+        </IconButton>
+      </FlexRow>
+    </FlexRow>
+  )
+}

package/src/dapps/shared/table/head/Payload.ts

@@ -0,0 +1,11 @@
+import type { Payload } from '@xyo-network/payload-model'
+import { isPayloadOfSchemaType } from '@xyo-network/payload-model'
+import type { TableHeadCell as TableHeadCellFields } from '@xyo-network/react-table'
+
+import { TableHeadCellSchema } from './Schema.js'
+
+export type TableHeadCell = Payload<TableHeadCellFields & {
+  tooltip?: string
+}, TableHeadCellSchema>
+
+export const isTableHeadCell = isPayloadOfSchemaType<TableHeadCell>(TableHeadCellSchema)

package/src/dapps/shared/table/head/Schema.ts

@@ -0,0 +1,2 @@
+export const TableHeadCellSchema = 'network.xyo.table.cell.head' as const
+export type TableHeadCellSchema = typeof TableHeadCellSchema

package/src/dapps/shared/table/head/components/Head.tsx

@@ -0,0 +1,47 @@
+import { InfoOutlined } from '@mui/icons-material'
+import type { TableHeadProps } from '@mui/material'
+import {
+  TableCell, TableHead, Tooltip,
+} from '@mui/material'
+import React from 'react'
+
+import { useVisibleColumns } from '../hooks/index.ts'
+import type { TableHeadCell } from '../Payload.js'
+import { StyledTableRowHeader } from './StyledTableRowHeader.js'
+
+interface TableHeadExProps extends TableHeadProps {
+  payloads: TableHeadCell[]
+}
+
+export const TableHeadEx: React.FC<TableHeadExProps> = ({ payloads, ...props }) => {
+  const [VisibleTableCells] = useVisibleColumns(payloads)
+
+  return (
+    <TableHead {...props}>
+      <StyledTableRowHeader>
+        {VisibleTableCells.map(headCell => (
+          <TableCell
+            key={headCell.id}
+            align={headCell.align ?? 'left'}
+            padding={headCell.disablePadding ? 'none' : 'normal'}
+            width={headCell.width ?? 'auto'}
+          >
+            {headCell.tooltip
+              ? (
+                  <span style={{
+                    alignItems: 'center', display: 'inline-flex', gap: '4px',
+                  }}
+                  >
+                    {headCell.label}
+                    <Tooltip title={headCell.tooltip}>
+                      <InfoOutlined sx={{ fontSize: '16px' }} />
+                    </Tooltip>
+                  </span>
+                )
+              : headCell.label}
+          </TableCell>
+        ))}
+      </StyledTableRowHeader>
+    </TableHead>
+  )
+}

package/src/dapps/shared/table/head/components/StyledTableRowHeader.tsx

@@ -0,0 +1,6 @@
+import { styled, TableRow } from '@mui/material'
+
+export const StyledTableRowHeader = styled(
+  TableRow,
+  { name: 'StyledTableRowHeader' },
+)(({ theme }) => ({ '& .MuiTableCell-root': { backgroundColor: theme.palette.background.paper } }))

package/src/dapps/shared/table/head/components/index.ts

@@ -0,0 +1 @@
+export * from './Head.js'

package/src/dapps/shared/table/head/hooks/index.ts

@@ -0,0 +1 @@
+export * from './useVisibleColumns.js'

package/src/dapps/shared/table/head/hooks/useVisibleColumns.tsx

@@ -0,0 +1,15 @@
+import type { Theme } from '@mui/material'
+import { useMediaQuery } from '@mui/material'
+import { useMemo } from 'react'
+
+import type { TableHeadCell } from '../Payload.js'
+
+export const useVisibleColumns = (tableHeadCells: TableHeadCell[]): [TableHeadCell[], boolean] => {
+  const isMedium = useMediaQuery((theme: Theme) => theme.breakpoints.down('lg'))
+
+  const VisibleTableCells = useMemo(() => {
+    return isMedium ? tableHeadCells.filter(cell => cell.showOnMobile) : tableHeadCells
+  }, [isMedium, tableHeadCells])
+
+  return [VisibleTableCells, isMedium]
+}

package/src/dapps/shared/table/head/index.ts

@@ -0,0 +1,4 @@
+export * from './components/index.ts'
+export * from './hooks/index.ts'
+export * from './Payload.js'
+export * from './Schema.js'

package/src/dapps/shared/table/index.ts

@@ -0,0 +1,2 @@
+export * from './head/index.ts'
+export * from './NextIteratorFlexbox.js'

package/src/dapps/shared/utils/countries.ts

@@ -0,0 +1,54 @@
+/**
+ * Note: Currently none of this code is used.  Leaving it here for future use when we want to validate against country and region data.
+ */
+import type { CountryData } from 'country-region-data'
+import { allCountries } from 'country-region-data'
+
+export const countryOptions = allCountries.map(country => ({ name: country[0], value: country[1] }))
+
+export const countriesByCodeFn = () => {
+  const allCountriesAcc: Record<string, CountryData> = {}
+  for (const country of allCountries) {
+    const [, countrySlug] = country
+    allCountriesAcc[countrySlug] = country
+  }
+  return allCountriesAcc
+}
+const countriesByCodeMemo = countriesByCodeFn()
+export const countriesByCode = countriesByCodeMemo
+
+export const countryRegionsByCodeFn = () => {
+  const allCountriesAcc: Record<string, {
+    name: string
+    value: string
+  }[]> = {}
+  for (const country of allCountries) {
+    const [, countrySlug, regions] = country
+    allCountriesAcc[countrySlug] = regions.map(region => ({ name: region[0], value: region[1] }))
+  }
+  return allCountriesAcc
+}
+const countryRegionsByCodeMemo = countryRegionsByCodeFn()
+export const countryRegionsByCode = countryRegionsByCodeMemo
+
+export function getDefaultCountry() {
+  try {
+    const language = navigator.languages[0]
+    const country = language.split('-')[1]
+    if (countriesByCode[country]) return country
+  } catch {
+    //
+  }
+  return 'US'
+}
+
+export function isNumericPostalCode(country: string) {
+  switch (country) {
+    case 'US': {
+      return true
+    }
+    default: {
+      return false
+    }
+  }
+}

package/src/helpers/BridgeActivityHelper.ts

@@ -0,0 +1,39 @@
+import { assertEx } from '@xylabs/assert'
+import type { Address, Hash } from '@xylabs/hex'
+import type { BaseParams, EmptyObject } from '@xylabs/object'
+import type { ArchivistInstance, NextOptions } from '@xyo-network/archivist-model'
+import type { DivinerInstance } from '@xyo-network/diviner-model'
+import { GenericPayloadDivinerConfigSchema } from '@xyo-network/diviner-payload-generic'
+import type { PayloadDivinerQueryPayload } from '@xyo-network/diviner-payload-model'
+import { PayloadDivinerQuerySchema } from '@xyo-network/diviner-payload-model'
+import { BaseEmitter } from '@xyo-network/module-abstract'
+
+export interface BridgeActivityHelperParams extends BaseParams {
+  archivist: WeakRef<ArchivistInstance>
+  diviner: WeakRef<DivinerInstance>
+}
+
+export class BridgeActivityHelper<TParams extends BridgeActivityHelperParams | void = void> extends BaseEmitter<
+  TParams extends BridgeActivityHelperParams ? TParams : BridgeActivityHelperParams
+> {
+  get archivist() {
+    return assertEx(this.params.archivist.deref(), () => 'Archivist is missing')
+  }
+
+  get diviner() {
+    const result = assertEx(this.params.diviner.deref(), () => 'Diviner is missing')
+    assertEx(result.config.schema === GenericPayloadDivinerConfigSchema, () => 'Diviner is not a generic payload diviner')
+    return result
+  }
+
+  next(options?: NextOptions<Hash>) {
+    return this.archivist.next(options)
+  }
+
+  nextByAddress(address: Address, options?: Pick<PayloadDivinerQueryPayload<EmptyObject, Hash>, 'offset' | 'order'>) {
+    const query: PayloadDivinerQueryPayload<EmptyObject, Hash> = {
+      address, ...options, schema: PayloadDivinerQuerySchema,
+    }
+    return this.diviner.divine([query])
+  }
+}

package/src/helpers/BrowserLocator.ts

@@ -0,0 +1,18 @@
+import { IndexedDbArchivist } from '@xyo-network/archivist-indexeddb'
+import { IndexedDbBoundWitnessDiviner } from '@xyo-network/diviner-boundwitness-indexeddb'
+import { GenericPayloadDiviner } from '@xyo-network/diviner-payload-generic'
+import { IndexedDbPayloadDiviner } from '@xyo-network/diviner-payload-indexeddb'
+import { ModuleFactoryLocator } from '@xyo-network/module-factory-locator'
+
+export const GenericPayloadDivinerTags = { 'network.xyo.generic.payload.diviner': 'GenericPayloadDiviner' }
+
+export const BrowserLocator = new ModuleFactoryLocator()
+BrowserLocator.register(GenericPayloadDiviner, GenericPayloadDivinerTags)
+BrowserLocator.register(IndexedDbArchivist, { 'network.xyo.archivist.persistence.scope': 'device' }, 'network.xyo.archivist.config')
+BrowserLocator.register(IndexedDbPayloadDiviner, { 'network.xyo.archivist.persistence.scope': 'device' }, 'network.xyo.diviner.payload.config')
+BrowserLocator.register(
+  IndexedDbBoundWitnessDiviner,
+  { 'network.xyo.archivist.persistence.scope': 'device' },
+  'network.xyo.diviner.boundwitness.config',
+)
+BrowserLocator.freeze()

package/src/helpers/NodePalettes.ts

@@ -0,0 +1,84 @@
+import type { PaletteList } from '@xyo-network/os-model'
+
+import {
+  candyAppleDark,
+  candyAppleLight,
+  candyDark,
+  candyLight,
+  mossDark,
+  mossLight,
+  oceanDark,
+  oceanLight,
+  peachYogurtDark,
+  peachYogurtLight,
+  sherbetDark,
+  sherbetLight,
+  springDark,
+  springLight,
+  sunsetDark,
+  sunsetLight,
+  xyoDark,
+  xyoLight,
+} from '../img/index.ts'
+
+export const OsPalettes: PaletteList = {
+  candy: {
+    darkModeWallpaper: candyDark,
+    lightModeWallpaper: candyLight,
+    nameCode: 'candy',
+    readableName: 'Candy',
+  },
+  candyApple: {
+    darkModeWallpaper: candyAppleDark,
+    lightModeWallpaper: candyAppleLight,
+    nameCode: 'candyApple',
+    readableName: 'Candy Apple',
+  },
+  moss: {
+    darkModeWallpaper: mossDark,
+    lightModeWallpaper: mossLight,
+    nameCode: 'moss',
+    readableName: 'Moss',
+  },
+  ocean: {
+    darkModeWallpaper: oceanDark,
+    lightModeWallpaper: oceanLight,
+    nameCode: 'ocean',
+    readableName: 'Ocean',
+  },
+  peachYogurt: {
+    darkModeWallpaper: peachYogurtDark,
+    lightModeWallpaper: peachYogurtLight,
+    nameCode: 'peachYogurt',
+    readableName: 'Peach Yogurt',
+  },
+  sherbet: {
+    darkModeWallpaper: sherbetDark,
+    lightModeWallpaper: sherbetLight,
+    nameCode: 'sherbet',
+    readableName: 'Sherbet',
+  },
+  spring: {
+    darkModeWallpaper: springDark,
+    lightModeWallpaper: springLight,
+    nameCode: 'spring',
+    readableName: 'Spring',
+  },
+  sunset: {
+    darkModeWallpaper: sunsetDark,
+    lightModeWallpaper: sunsetLight,
+    nameCode: 'sunset',
+    readableName: 'Sunset',
+  },
+  xyo: {
+    darkModeWallpaper: xyoDark,
+    lightModeWallpaper: xyoLight,
+    nameCode: 'xyo',
+    readableName: 'XYO',
+  },
+}
+
+export const getNodePaletteByNameCode = (nameCode?: string) => {
+  const castNameCode = nameCode as keyof typeof OsPalettes
+  return OsPalettes[castNameCode]
+}

package/src/helpers/index.ts

@@ -0,0 +1,6 @@
+export * from './BridgeActivityHelper.js'
+export * from './BrowserLocator.js'
+export * from './monitor/index.ts'
+export * from './NodePalettes.js'
+export * from './widget/index.ts'
+export * from './widgets/index.ts'

package/src/helpers/monitor/XyOsBrowserMonitor.ts

@@ -0,0 +1,14 @@
+import type { Connection } from '@xyo-network/os-runtime'
+import { XyOsMonitor } from '@xyo-network/os-runtime'
+
+export class XyOsBrowserMonitor extends XyOsMonitor {
+  protected connection(): Connection | undefined {
+    try {
+      if (window !== undefined) {
+        return 'connection' in window.navigator ? (window.navigator.connection as Connection) : undefined
+      }
+    } catch {
+      return
+    }
+  }
+}

package/src/helpers/monitor/index.ts

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

package/src/helpers/widget/Caller.tsx

@@ -0,0 +1,121 @@
+import { assertEx } from '@xylabs/assert'
+import type { Hash } from '@xylabs/hex'
+import { cloneDeep } from '@xylabs/lodash'
+import { fulfilled, rejected } from '@xylabs/promise'
+import type {
+  DappWidgetConfig, WidgetTray, WidgetTrayLayout, XyOsContext,
+} from '@xyo-network/os-model'
+import { WidgetTraySchema } from '@xyo-network/os-model'
+import type { RegisteredReactDappSet } from '@xyo-network/os-react-model'
+import { OsCallerBase } from '@xyo-network/os-runtime'
+import type { Payload } from '@xyo-network/payload-model'
+import type { FC, JSX } from 'react'
+import React from 'react'
+
+type WidgetResults = [(JSX.Element | undefined)[] | undefined, (Error | undefined)[]] | undefined
+
+export class WidgetCaller extends OsCallerBase {
+  constructor(
+    context: XyOsContext,
+    private _registeredDappSets?: RegisteredReactDappSet[],
+    private _widgetTrayLayout?: WidgetTrayLayout,
+  ) {
+    super(context)
+  }
+
+  get dappsAsObject() {
+    const acc = {} as Record<string, RegisteredReactDappSet>
+    for (const dapp of this.registeredDappSets) {
+      acc[dapp.dapp.config.name] = dapp
+    }
+    return acc
+  }
+
+  get registeredDappSets() {
+    return assertEx(this._registeredDappSets, () => 'Registered Dapp Sets not available')
+  }
+
+  get widgetTrayLayout() {
+    return assertEx(this._widgetTrayLayout, () => 'Widget Tray Layout not available')
+  }
+
+  async buildWidgetComponents() {
+    const widgetTray = this.widgetTrayFromLayout(this.widgetTrayLayout)
+
+    const results = await Promise.allSettled(
+      widgetTray.widgetConfigs.map(async (config) => {
+        // Find the widget component in the registered Dapps
+        const Param: FC<{
+          payload?: Payload
+        }> | undefined = this.dappsAsObject[config.dappId].dapp.params.modes[config.mode ?? config.dappId]?.component
+
+        // Try to find the config payload
+        let payload: Payload | undefined
+        if (config.configHash) {
+          const archivist = await this.getDappsArchivist()
+          const foundConfig = assertEx((await archivist.get([config.configHash]))?.[0], () => `Config - ${config.configHash} not found`)
+          payload = foundConfig
+        }
+
+        // Return the widget component
+        return Param ? <Param payload={payload} /> : undefined
+      }),
+    )
+
+    const successfulResults = results.filter(fulfilled).map(result => result.value)
+    const failedResults = results.filter(rejected).map(result => new Error(result.reason))
+
+    return [successfulResults, failedResults] as WidgetResults
+  }
+
+  // build a new widget config from the base provided by the dapp
+  // and pass the config hash from the widgetLayout to the new widgetConfig
+  private buildWidgetConfig(widgetConfigToBuild: DappWidgetConfig, configHash?: Hash): DappWidgetConfig {
+    const clonedWidgetConfig = this.cloneWidgetConfig(widgetConfigToBuild)
+    return {
+      ...clonedWidgetConfig,
+      configHash,
+    }
+  }
+
+  private cloneWidgetConfig(widgetConfig: DappWidgetConfig) {
+    return cloneDeep(widgetConfig)
+  }
+
+  private widgetTrayFromLayout(widgetLayout: WidgetTrayLayout): WidgetTray {
+    const targetWidgetConfigs: DappWidgetConfig[] = []
+
+    const { layout, label: trayLabel } = widgetLayout
+    for (const dappWidgetLayout of layout) {
+      const {
+        dappId, mode, configHash,
+      } = dappWidgetLayout
+
+      // find the dapp set for the dappWidgetLayout
+      const dappSet = this.registeredDappSets.find(dappSet => dappSet.dapp.config.name === dappId)
+      if (!dappSet) {
+        console.error('unable to find registered dapp set for', dappId)
+        continue
+      }
+
+      // find the widgetConfig for the dapp based on a match of mode or dappId in the dapp's widgetConfig
+      const widgetConfigToBuild = dappSet.dapp.widgetConfigs.find(config => (config.mode ? config.mode === mode : mode === config.dappId))
+      if (!widgetConfigToBuild) {
+        console.error('unable to find widget config for', mode)
+        continue
+      }
+
+      const config = this.buildWidgetConfig(widgetConfigToBuild, configHash)
+
+      // add the foundWidgetConfig to the targetWidgetConfigs
+      targetWidgetConfigs.push(config)
+    }
+
+    return {
+      label: trayLabel ?? 'Widget Tray',
+      position: 'bottom',
+      schema: WidgetTraySchema,
+      widgetConfigs: targetWidgetConfigs,
+    }
+  }
+}

package/src/helpers/widget/index.ts

@@ -0,0 +1 @@
+export * from './Caller.js'

package/src/helpers/widgets/UpperWidgetTrayLayout.ts

@@ -0,0 +1,20 @@
+import type { WidgetTrayLayout } from '@xyo-network/os-model'
+import { WidgetTrayLayoutSchema } from '@xyo-network/os-model'
+
+/**
+ * NOTE: Hardcoded widget tray layout and hashes are of the widget config payloads located within the dapp's payloads
+ */
+
+export const UpperWidgetTrayLayout: WidgetTrayLayout = {
+  label: 'Lower Widget Tray Layout',
+  layout: [
+    { dappId: 'TimeClock', mode: 'FlatClock' },
+    {
+      configHash: 'bb0ea5701c20e86d77b1a369f77d17658df62572d54f1f1aafdf15e3c29e3b3b', dappId: 'Markets', mode: 'PriceWidget',
+    },
+    {
+      configHash: 'ea8afca9d4a9b0843035e3722d9f6400058a1eab71996b8e4e20e2449662e2bf', dappId: 'Markets', mode: 'PriceWidget',
+    },
+  ],
+  schema: WidgetTrayLayoutSchema,
+}

package/src/helpers/widgets/index.ts

@@ -0,0 +1 @@
+export * from './UpperWidgetTrayLayout.js'