@xyo-network/react-connected-accounts 2.66.3

package/package.json

@@ -0,0 +1,83 @@
+{
+  "name": "@xyo-network/react-connected-accounts",
+  "author": {
+    "email": "support@xyo.network",
+    "name": "XYO Development Team",
+    "url": "https://xyo.network"
+  },
+  "bugs": {
+    "email": "support@xyo.network",
+    "url": "https://github.com/XYOracleNetwork/sdk-xyo-react-js/issues"
+  },
+  "dependencies": {
+    "@xylabs/react-crypto": "^3.0.33",
+    "@xylabs/react-flexbox": "3.0.33",
+    "@xyo-network/react-table": "~2.66.3"
+  },
+  "devDependencies": {
+    "@storybook/react": "^7.6.3",
+    "@xylabs/ts-scripts-yarn3": "^3.2.10",
+    "@xylabs/tsconfig-react": "^3.2.10",
+    "typescript": "^5.3.2"
+  },
+  "peerDependencies": {
+    "@mui/icons-material": "^5",
+    "@mui/material": "^5",
+    "@mui/styles": "^5",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "description": "Common React library for all XYO projects that use React",
+  "docs": "dist/docs.json",
+  "exports": {
+    ".": {
+      "node": {
+        "import": {
+          "types": "./dist/node/index.d.mts",
+          "default": "./dist/node/index.js"
+        },
+        "require": {
+          "types": "./dist/node/index.d.cts",
+          "default": "./dist/node/index.cjs"
+        }
+      },
+      "browser": {
+        "import": {
+          "types": "./dist/browser/index.d.mts",
+          "default": "./dist/browser/index.js"
+        },
+        "require": {
+          "types": "./dist/browser/index.d.cts",
+          "default": "./dist/browser/index.cjs"
+        }
+      },
+      "default": "./dist/browser/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "main": "dist/browser/index.cjs",
+  "module": "dist/browser/index.js",
+  "homepage": "https://xyo.network",
+  "keywords": [
+    "xyo",
+    "utility",
+    "typescript",
+    "react"
+  ],
+  "license": "LGPL-3.0-only",
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/XYOracleNetwork/sdk-xyo-react-js.git"
+  },
+  "scripts": {
+    "lint-pkg": "npmPkgJsonLint .",
+    "license": "yarn license-checker --exclude \"MIT, ISC, Apache-2.0, BSD, BSD-2-Clause, CC-BY-4.0, Unlicense, CC-BY-3.0, CC0-1.0\""
+  },
+  "sideEffects": false,
+  "types": "dist/browser/index.d.ts",
+  "version": "2.66.3",
+  "type": "module"
+}

package/src/components/ConnectedAccountsFlexbox.stories.tsx

@@ -0,0 +1,26 @@
+/* eslint-disable import/no-internal-modules */
+import { Meta, StoryFn } from '@storybook/react'
+
+import { ConnectedAccountsFlexbox } from './ConnectedAccountsFlexbox'
+
+const StorybookEntry: Meta = {
+  argTypes: {},
+  component: ConnectedAccountsFlexbox,
+  parameters: {
+    docs: {
+      page: null,
+    },
+  },
+  title: 'connectedAccounts/Flexbox',
+}
+
+const Template: StoryFn<typeof ConnectedAccountsFlexbox> = (props) => {
+  return <ConnectedAccountsFlexbox {...props} />
+}
+
+const Default = Template.bind({})
+
+export { Default }
+
+// eslint-disable-next-line import/no-default-export
+export default StorybookEntry

package/src/components/ConnectedAccountsFlexbox.tsx

@@ -0,0 +1,27 @@
+import { Typography, useTheme } from '@mui/material'
+import { FlexBoxProps, FlexCol } from '@xylabs/react-flexbox'
+
+import { useDetectedWallets } from '../hooks'
+import { ConnectedWalletsTable } from './wallet'
+
+export const ConnectedAccountsFlexbox: React.FC<FlexBoxProps> = (props) => {
+  const theme = useTheme()
+
+  const { totalConnectedAccounts, sortedWallets } = useDetectedWallets()
+
+  return (
+    <FlexCol alignItems="stretch" justifyContent="start" gap={2} {...props}>
+      <FlexCol alignItems="start">
+        <Typography variant={'h2'} sx={{ mb: 0.5 }}>
+          Detected Web3 Wallets
+        </Typography>
+        {totalConnectedAccounts ? (
+          <Typography variant={'subtitle1'} color={theme.palette.secondary.main} sx={{ opacity: 0.5 }}>
+            Total Connected Accounts: {totalConnectedAccounts}
+          </Typography>
+        ) : null}
+      </FlexCol>
+      <ConnectedWalletsTable wallets={sortedWallets} />
+    </FlexCol>
+  )
+}

package/src/components/index.ts

@@ -0,0 +1,2 @@
+export * from './ConnectedAccountsFlexbox'
+export * from './wallet'

package/src/components/wallet/index.ts

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

package/src/components/wallet/lib/TableHeadData.ts

@@ -0,0 +1,32 @@
+import { TableHeadCell } from '@xyo-network/react-table'
+
+export const WalletsTableHeadCells: TableHeadCell[] = [
+  {
+    disablePadding: false,
+    id: 'wallet',
+    label: 'Wallet',
+    numeric: false,
+    showOnMobile: true,
+  },
+  {
+    disablePadding: false,
+    id: 'chain',
+    label: 'Chain',
+    numeric: false,
+    showOnMobile: true,
+  },
+  {
+    disablePadding: false,
+    id: 'accounts',
+    label: 'Accounts',
+    numeric: true,
+    showOnMobile: true,
+  },
+  {
+    disablePadding: false,
+    id: 'actions',
+    label: 'Actions',
+    numeric: false,
+    showOnMobile: true,
+  },
+]

package/src/components/wallet/lib/index.ts

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

package/src/components/wallet/table/ConnectedWalletsTable.tsx

@@ -0,0 +1,30 @@
+import { Table, TableBody, TableCell, TableHead, TableProps, TableRow } from '@mui/material'
+import { EIP6963Connector } from '@xylabs/react-crypto'
+
+import { WalletsTableHeadCells } from '../lib'
+import { WalletConnectionsTableRow } from './ConnectedWalletsTableRow'
+
+export interface ConnectedWalletsTableProps extends TableProps {
+  wallets?: EIP6963Connector[]
+}
+
+export const ConnectedWalletsTable: React.FC<ConnectedWalletsTableProps> = ({ wallets, ...props }) => {
+  return (
+    <Table {...props}>
+      <TableHead>
+        <TableRow>
+          {WalletsTableHeadCells.map(({ disablePadding, id, label, align, width }) => (
+            <TableCell align={align} key={id} padding={disablePadding ? 'none' : 'normal'} width={width ?? 'auto'}>
+              {label}
+            </TableCell>
+          ))}
+        </TableRow>
+      </TableHead>
+      <TableBody>
+        {(wallets ?? []).map((wallet) => (
+          <WalletConnectionsTableRow wallet={wallet} key={wallet.providerInfo?.rdns} />
+        ))}
+      </TableBody>
+    </Table>
+  )
+}

package/src/components/wallet/table/ConnectedWalletsTableRow.tsx

@@ -0,0 +1,95 @@
+import { Check } from '@mui/icons-material'
+import { Button, TableCell, TableRow, TableRowProps, Tooltip, Typography, useTheme } from '@mui/material'
+import { ConstrainedImage, EthWalletConnectorBase, useEthWallet } from '@xylabs/react-crypto'
+import { FlexRow } from '@xylabs/react-flexbox'
+import { ReactNode, useMemo } from 'react'
+
+export interface WalletConnectionsTableRowInnerProps extends TableRowProps {
+  additionalAccounts?: string[]
+  chainName?: string
+  currentAccount?: string[]
+  icon?: string
+  name?: string
+}
+
+export const WalletConnectionsTableRowInner: React.FC<WalletConnectionsTableRowInnerProps> = ({
+  additionalAccounts,
+  currentAccount,
+  chainName,
+  icon,
+  name,
+  ...props
+}) => {
+  const theme = useTheme()
+
+  const totalAccounts = (additionalAccounts?.length ?? 0) + (currentAccount?.length ?? 0)
+  const connected = currentAccount?.length ?? 0 > 0
+
+  const Cells = useMemo(() => {
+    const TableCells: Record<string, ReactNode> = {
+      wallet: (
+        <TableCell key={1}>
+          <FlexRow gap={2} justifyContent="start">
+            <ConstrainedImage constrainedValue={theme.spacing(4)} src={icon} />
+            {name}
+          </FlexRow>
+        </TableCell>
+      ),
+      // eslint-disable-next-line sort-keys-fix/sort-keys-fix
+      chain: <TableCell key={2}>{chainName}</TableCell>,
+      // eslint-disable-next-line sort-keys-fix/sort-keys-fix
+      accounts: (
+        <TableCell key={3}>
+          <Tooltip
+            sx={{ cursor: totalAccounts > 0 ? 'pointer' : 'auto' }}
+            title={[...(currentAccount ?? []), ...(additionalAccounts ?? [])].map((address, index) => (
+              <p key={index}>{address}</p>
+            ))}
+          >
+            <Typography>{totalAccounts}</Typography>
+          </Tooltip>
+        </TableCell>
+      ),
+      actions: (
+        <TableCell key={4}>
+          <FlexRow gap={2} justifyContent="start">
+            {connected ? (
+              <Typography sx={{ display: 'inline-flex', gap: 0.5 }}>
+                <Check />
+                Connected
+              </Typography>
+            ) : (
+              <Button variant={'contained'}>Connect</Button>
+            )}
+            {connected ? (
+              <Button variant={'outlined'} color={'error'}>
+                Revoke
+              </Button>
+            ) : null}
+          </FlexRow>
+        </TableCell>
+      ),
+    }
+    return TableCells
+  }, [additionalAccounts, chainName, connected, currentAccount, icon, name, theme, totalAccounts])
+
+  return <TableRow {...props}>{Object.values(Cells).map((cell) => cell)}</TableRow>
+}
+
+export interface WalletConnectionsTableRow extends TableRowProps {
+  wallet: EthWalletConnectorBase
+}
+export const WalletConnectionsTableRow: React.FC<WalletConnectionsTableRow> = ({ wallet, ...props }) => {
+  const { currentAccount, additionalAccounts, chainName, providerInfo, providerName } = useEthWallet(wallet)
+  const currentAccountString = currentAccount?.toString()
+  return (
+    <WalletConnectionsTableRowInner
+      additionalAccounts={additionalAccounts}
+      currentAccount={currentAccountString ? [currentAccountString] : []}
+      chainName={chainName}
+      icon={providerInfo?.icon}
+      name={providerName}
+      {...props}
+    />
+  )
+}

package/src/components/wallet/table/index.ts

@@ -0,0 +1,2 @@
+export * from './ConnectedWalletsTable'
+export * from './ConnectedWalletsTableRow'

package/src/hooks/index.ts

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

package/src/hooks/useDetectWallets.tsx

@@ -0,0 +1,40 @@
+import { AccountsChangedEventName, DiscoveredWallets, EIP6963Connector, useWalletDiscovery } from '@xylabs/react-crypto'
+import { useEffect, useMemo, useState } from 'react'
+
+const sortWallets = (wallets: DiscoveredWallets) =>
+  Object.values(wallets).reduce((acc, wallet) => {
+    wallet.allowedAccounts.length > 0 ? acc.unshift(wallet) : acc.push(wallet)
+    return acc
+  }, [] as EIP6963Connector[])
+
+export const useDetectedWallets = () => {
+  const wallets = useWalletDiscovery()
+  const [refresh, setRefresh] = useState(0)
+  const [sortedWallets, setSortedWallets] = useState<EIP6963Connector[]>([])
+
+  useEffect(() => {
+    setSortedWallets(sortWallets(wallets))
+  }, [wallets, refresh])
+
+  /**
+   * Rely on custom events from the wallet base class to know when accounts are changed.
+   * This approach prevents the need to loop through all wallets and set up individual listeners.
+   */
+  useEffect(() => {
+    const listener: (event: CustomEventInit) => void = () => {
+      setRefresh((refresh) => refresh + 1)
+    }
+    window.addEventListener(AccountsChangedEventName, listener)
+
+    return () => {
+      window.removeEventListener(AccountsChangedEventName, listener)
+    }
+  }, [wallets])
+
+  const totalConnectedAccounts = useMemo(
+    () => Object.values(sortedWallets).reduce((acc, wallet) => acc + wallet.allowedAccounts.length, 0),
+    [sortedWallets],
+  )
+
+  return { sortedWallets, totalConnectedAccounts }
+}

package/src/index.ts

@@ -0,0 +1,2 @@
+export * from './components'
+export * from './hooks'

package/typedoc.json

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