@xyo-network/react-connected-accounts 2.66.3 → 2.66.5

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

@@ -1,30 +1,54 @@
 import { Table, TableBody, TableCell, TableHead, TableProps, TableRow } from '@mui/material'
 import { EIP6963Connector } from '@xylabs/react-crypto'
+import { useState } from 'react'
 
-import { WalletsTableHeadCells } from '../lib'
+import { ConnectWalletDialog, RevokeWalletConnectionDialog } from '../dialogs'
+import { ActiveProvider, WalletsTableHeadCells } from '../lib'
 import { WalletConnectionsTableRow } from './ConnectedWalletsTableRow'
+import { useActiveProviderDialogState } from './hooks'
 
 export interface ConnectedWalletsTableProps extends TableProps {
+  ignoreConnectDialog?: boolean
+  onIgnoreConnectDialog?: (checked: boolean) => void
   wallets?: EIP6963Connector[]
 }
 
-export const ConnectedWalletsTable: React.FC<ConnectedWalletsTableProps> = ({ wallets, ...props }) => {
+export const ConnectedWalletsTable: React.FC<ConnectedWalletsTableProps> = ({ ignoreConnectDialog, onIgnoreConnectDialog, wallets, ...props }) => {
+  const [activeProvider, setActiveProvider] = useState<ActiveProvider>()
+  const [showConnect, onSetActiveProviderConnect, onConnectClose] = useActiveProviderDialogState(setActiveProvider)
+  const [showRevoke, onSetActiveProviderRevoke, onRevokeClose] = useActiveProviderDialogState(setActiveProvider)
+
   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>
+    <>
+      <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
+              ignoreConnectDialog={ignoreConnectDialog}
+              key={wallet.providerInfo?.rdns}
+              onConnectClick={onSetActiveProviderConnect}
+              onRevoke={onSetActiveProviderRevoke}
+              wallet={wallet}
+            />
           ))}
-        </TableRow>
-      </TableHead>
-      <TableBody>
-        {(wallets ?? []).map((wallet) => (
-          <WalletConnectionsTableRow wallet={wallet} key={wallet.providerInfo?.rdns} />
-        ))}
-      </TableBody>
-    </Table>
+        </TableBody>
+      </Table>
+      <RevokeWalletConnectionDialog open={showRevoke} onClose={onRevokeClose} activeProvider={activeProvider} />
+      <ConnectWalletDialog
+        activeProvider={activeProvider}
+        onClose={onConnectClose}
+        open={showConnect}
+        onIgnoreConnectDialog={onIgnoreConnectDialog}
+      />
+    </>
   )
 }

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

@@ -1,95 +1,69 @@
-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'
+import { TableRow, TableRowProps } from '@mui/material'
+import { EthWalletConnectorBase, useEthWallet } from '@xylabs/react-crypto'
+import { useCallback, useMemo } from 'react'
 
-export interface WalletConnectionsTableRowInnerProps extends TableRowProps {
-  additionalAccounts?: string[]
-  chainName?: string
-  currentAccount?: string[]
-  icon?: string
-  name?: string
+import { ActiveProvider } from '../lib'
+import { ConnectedWalletTableCells } from './cells'
+
+export interface WalletConnectionsTableRowProps extends TableRowProps {
+  ignoreConnectDialog?: boolean
+  onConnectClick?: (activeProvider: ActiveProvider) => void
+  onRevoke?: (activeProvider: ActiveProvider) => void
+  wallet: EthWalletConnectorBase
 }
 
-export const WalletConnectionsTableRowInner: React.FC<WalletConnectionsTableRowInnerProps> = ({
-  additionalAccounts,
-  currentAccount,
-  chainName,
-  icon,
-  name,
+export const WalletConnectionsTableRow: React.FC<WalletConnectionsTableRowProps> = ({
+  ignoreConnectDialog,
+  onConnectClick,
+  onRevoke,
+  wallet,
   ...props
 }) => {
-  const theme = useTheme()
+  const { currentAccount: currentAccountFromWallet, additionalAccounts, chainName, connectWallet, providerInfo } = useEthWallet(wallet)
 
+  const currentAccount = currentAccountFromWallet?.toString() ? [currentAccountFromWallet.toString()] : []
   const totalAccounts = (additionalAccounts?.length ?? 0) + (currentAccount?.length ?? 0)
-  const connected = currentAccount?.length ?? 0 > 0
+  const connected = !!(currentAccount?.length ?? 0 > 0)
+  const { icon, name, rdns } = useMemo(() => providerInfo ?? { icon: undefined, name: undefined, rdns: undefined }, [providerInfo])
 
-  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])
+  const activeProvider = useMemo<ActiveProvider>(
+    () => ({
+      connectWallet,
+      icon,
+      providerName: name,
+    }),
+    [connectWallet, icon, name],
+  )
 
-  return <TableRow {...props}>{Object.values(Cells).map((cell) => cell)}</TableRow>
-}
+  const onRevokeLocal = useCallback(() => {
+    onRevoke?.(activeProvider)
+  }, [activeProvider, onRevoke])
+
+  const onConnectLocal = useCallback(async () => {
+    if (ignoreConnectDialog) {
+      await connectWallet?.()
+    } else {
+      onConnectClick?.(activeProvider)
+    }
+  }, [activeProvider, connectWallet, ignoreConnectDialog, onConnectClick])
 
-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}
-    />
+    <TableRow {...props}>
+      {Object.values(ConnectedWalletTableCells).map((Cell, index) => (
+        <Cell
+          key={index}
+          additionalAccounts={additionalAccounts}
+          chainName={chainName}
+          connected={connected}
+          currentAccount={currentAccount}
+          icon={icon}
+          onConnect={onConnectLocal}
+          onRevoke={onRevokeLocal}
+          totalAccounts={totalAccounts}
+          walletName={name}
+          walletRdns={rdns}
+        />
+      ))}
+    </TableRow>
   )
 }

package/src/components/wallet/table/cells/Accounts.tsx

@@ -0,0 +1,23 @@
+import { TableCell, Tooltip, Typography } from '@mui/material'
+
+import { ConnectedWalletTableCellProps } from './lib'
+
+export const ConnectedWalletsAccountsTableCell: React.FC<ConnectedWalletTableCellProps> = ({
+  additionalAccounts,
+  currentAccount,
+  totalAccounts,
+  tableCellProps,
+}) => {
+  return (
+    <TableCell {...tableCellProps}>
+      <Tooltip
+        sx={{ cursor: totalAccounts > 0 ? 'pointer' : 'auto' }}
+        title={[...(currentAccount ?? []), ...(additionalAccounts ?? [])].map((address, index) => (
+          <p key={index}>{address}</p>
+        ))}
+      >
+        <Typography>{totalAccounts}</Typography>
+      </Tooltip>
+    </TableCell>
+  )
+}

package/src/components/wallet/table/cells/Actions.tsx

@@ -0,0 +1,29 @@
+import { Check, InfoOutlined } from '@mui/icons-material'
+import { Button, IconButton, TableCell, Typography } from '@mui/material'
+import { FlexRow } from '@xylabs/react-flexbox'
+
+import { ConnectedWalletTableCellProps } from './lib'
+
+export const ConnectedWalletsActionsTableCell: React.FC<ConnectedWalletTableCellProps> = ({ connected, onConnect, onRevoke, tableCellProps }) => {
+  return (
+    <TableCell {...tableCellProps}>
+      <FlexRow gap={2} justifyContent="start">
+        {connected ? (
+          <Typography sx={{ display: 'inline-flex', gap: 0.5 }}>
+            <Check />
+            Connected
+          </Typography>
+        ) : (
+          <Button variant={'contained'} onClick={onConnect}>
+            Connect
+          </Button>
+        )}
+        {connected ? (
+          <IconButton onClick={onRevoke}>
+            <InfoOutlined />
+          </IconButton>
+        ) : null}
+      </FlexRow>
+    </TableCell>
+  )
+}

package/src/components/wallet/table/cells/Cells.tsx

@@ -0,0 +1,16 @@
+import { ComponentType } from 'react'
+
+import { ConnectedWalletsAccountsTableCell } from './Accounts'
+import { ConnectedWalletsActionsTableCell } from './Actions'
+import { ConnectedWalletsChainNameTableCell } from './ChainName'
+import { ConnectedWalletTableCellProps } from './lib'
+import { ConnectedWalletState } from './State'
+import { ConnectedWalletsWalletTableCell } from './Wallet'
+
+export const ConnectedWalletTableCells: ComponentType<ConnectedWalletTableCellProps>[] = [
+  ConnectedWalletsWalletTableCell,
+  ConnectedWalletsChainNameTableCell,
+  ConnectedWalletsAccountsTableCell,
+  ConnectedWalletsActionsTableCell,
+  ConnectedWalletState,
+]

package/src/components/wallet/table/cells/ChainName.tsx

@@ -0,0 +1,7 @@
+import { TableCell } from '@mui/material'
+
+import { ConnectedWalletTableCellProps } from './lib'
+
+export const ConnectedWalletsChainNameTableCell: React.FC<ConnectedWalletTableCellProps> = ({ chainName, tableCellProps }) => {
+  return <TableCell {...tableCellProps}>{chainName}</TableCell>
+}

package/src/components/wallet/table/cells/State.tsx

@@ -0,0 +1,23 @@
+import { Switch, TableCell } from '@mui/material'
+import { ChangeEvent, useMemo } from 'react'
+
+import { useEnabledWallets } from '../../../../hooks'
+import { ConnectedWalletTableCellProps } from './lib'
+
+export const ConnectedWalletState: React.FC<ConnectedWalletTableCellProps> = ({ connected, walletRdns, tableCellProps }) => {
+  const { disableWallet, enableWallet, wallets } = useEnabledWallets()
+
+  const enabled = useMemo(() => (walletRdns ? wallets[walletRdns].enabled : false), [wallets, walletRdns])
+
+  const handleClick = (event: ChangeEvent<HTMLInputElement>) => {
+    const checked = event.target?.checked
+    if (walletRdns) {
+      checked ? enableWallet?.(walletRdns) : disableWallet?.(walletRdns)
+    }
+  }
+  return (
+    <TableCell {...tableCellProps}>
+      <Switch disabled={!connected} checked={connected && enabled} onChange={handleClick} />
+    </TableCell>
+  )
+}

package/src/components/wallet/table/cells/Wallet.tsx

@@ -0,0 +1,18 @@
+import { TableCell, useTheme } from '@mui/material'
+import { ConstrainedImage } from '@xylabs/react-crypto'
+import { FlexRow } from '@xylabs/react-flexbox'
+
+import { ConnectedWalletTableCellProps } from './lib'
+
+export const ConnectedWalletsWalletTableCell: React.FC<ConnectedWalletTableCellProps> = ({ icon, walletName, tableCellProps }) => {
+  const theme = useTheme()
+
+  return (
+    <TableCell {...tableCellProps}>
+      <FlexRow gap={2} justifyContent="start">
+        <ConstrainedImage constrainedValue={theme.spacing(4)} src={icon} />
+        {walletName}
+      </FlexRow>
+    </TableCell>
+  )
+}

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

@@ -0,0 +1,6 @@
+export * from './Accounts'
+export * from './Actions'
+export * from './Cells'
+export * from './ChainName'
+export * from './State'
+export * from './Wallet'

package/src/components/wallet/table/cells/lib/ConnectedWalletTableCellProps.tsx

@@ -0,0 +1,17 @@
+import { TableCellProps } from '@mui/material'
+
+export interface ConnectedWalletTableCellProps {
+  additionalAccounts?: string[]
+  chainName?: string
+  connected?: boolean
+  currentAccount?: string[]
+  icon?: string
+  onConnect?: () => Promise<void>
+  onRevoke?: () => void
+  // Using a separate prop instead of extending the interface so we can safely pass all props to
+  // the individual components and let them pick off the ones they want.
+  tableCellProps?: TableCellProps
+  totalAccounts: number
+  walletName?: string
+  walletRdns?: string
+}

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

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

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

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

package/src/components/wallet/table/hooks/useActiveProviderDialogState.tsx

@@ -0,0 +1,20 @@
+import { Dispatch, SetStateAction, useState } from 'react'
+
+import { ActiveProvider } from '../../lib'
+
+export const useActiveProviderDialogState = (
+  setActiveProvider: Dispatch<SetStateAction<ActiveProvider | undefined>>,
+): [boolean, (activeProvider: ActiveProvider) => void, () => void] => {
+  const [show, setShow] = useState(false)
+  const onSetActiveProvider = (activeProvider: ActiveProvider) => {
+    setShow(true)
+    setActiveProvider(activeProvider)
+  }
+
+  const onClose = () => {
+    setShow(false)
+    setActiveProvider({})
+  }
+
+  return [show, onSetActiveProvider, onClose]
+}

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

@@ -1,2 +1,4 @@
+export * from './cells'
 export * from './ConnectedWalletsTable'
 export * from './ConnectedWalletsTableRow'
+export * from './hooks'

package/src/hooks/index.ts

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

package/src/hooks/useEnabledWallets.tsx

@@ -0,0 +1,45 @@
+import { useWalletDiscovery } from '@xylabs/react-crypto'
+import { useMemo, useSyncExternalStore } from 'react'
+
+import { EnabledEthWalletConnections, EnabledEthWalletsState, EnabledWalletsSavedState } from '../classes'
+
+let enabledEthWallets: EnabledEthWalletConnections | undefined
+
+/**
+ * Takes the discovered wallets and tracks their enabled state globally
+ */
+export const useEnabledWalletsInner = (enabledWalletsRdns?: EnabledWalletsSavedState) => {
+  const discoveredWallets = useWalletDiscovery()
+
+  // when we discover new wallets, build their enabled state
+  const wallets = useMemo(() => {
+    if (enabledEthWallets === undefined) enabledEthWallets = new EnabledEthWalletConnections()
+    enabledEthWallets.resetWallets(discoveredWallets)
+    Object.entries(enabledWalletsRdns ?? {}).forEach(([rdns, enabled]) => enabledEthWallets?.toggleEnabledWallet(rdns, enabled))
+    return enabledEthWallets
+  }, [discoveredWallets, enabledWalletsRdns])
+
+  return useSyncExternalStore(wallets.subscribe.bind(wallets), () => wallets.wallets)
+}
+
+/**
+ * Expose an interface for enabling and disabling wallets
+ */
+export const useEnabledWallets = (enabledWalletsRdns?: EnabledWalletsSavedState) => {
+  const wallets = useEnabledWalletsInner(enabledWalletsRdns)
+  const enabledWallets = useMemo(
+    () =>
+      Object.entries(wallets).reduce((acc, [walletName, wallet]) => {
+        if (wallet.enabled) acc[walletName] = wallet
+        return acc
+      }, {} as EnabledEthWalletsState),
+    [wallets],
+  )
+
+  return {
+    disableWallet: enabledEthWallets?.disableWallet.bind(enabledEthWallets),
+    enableWallet: enabledEthWallets?.enableWallet.bind(enabledEthWallets),
+    enabledWallets,
+    wallets,
+  }
+}

package/src/img/index.ts

@@ -0,0 +1,4 @@
+import xyoColorLogo from './xyo-color-logo.svg'
+import xyoColorLogoText from './xyo-color-logo-text-only.svg'
+
+export { xyoColorLogo, xyoColorLogoText }

package/src/img/xyo-color-logo-text-only.svg

@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="250 0 451 238"><defs><style>.cls-1{fill:#8d8fc6;}.cls-2{fill:#579fd6;}.cls-3{fill:#f27046;}.cls-4{fill:#eb407a;}</style></defs><path class="cls-1" d="M570,55.35a61.13,61.13,0,1,0,61.11,61.1A61.21,61.21,0,0,0,570,55.35Zm-266.4.1-8.2,8.14,53,52.91-53,52.91,8.2,8.2,52.91-53,44.77,44.77,8.14,8.2,114-114-8.14-8.14-52.91,52.91-53-52.91-8.14,8.14-44.77,44.77ZM570,66.84a49.61,49.61,0,1,1-49.61,49.61A49.54,49.54,0,0,1,570,66.84ZM409.45,71.73l44.77,44.77-44.77,44.77L364.68,116.5Z"/></svg>

package/src/img/xyo-color-logo.svg

@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 238"><defs><style>.cls-1{fill:#8d8fc6;}.cls-2{fill:#579fd6;}.cls-3{fill:#f27046;}.cls-4{fill:#eb407a;}</style></defs><path class="cls-1" d="M74.5,28.33,21.29,120.5,74.5,212.67H180.94l1.76-3,51.46-89.13L180.94,28.33ZM84.65,40.54h78.83L111.65,56.93a15.85,15.85,0,0,1,2,5l59.66-18.81L185.22,101a20.12,20.12,0,0,1,5.36-.78l-10-47.91,37.87,65.53h-7.62a24.21,24.21,0,0,1,.15,2.68,23.29,23.29,0,0,1-.15,2.68h7.62l-39.1,67.75,10.92-50.13A20.57,20.57,0,0,1,185,140l-12.88,59-58.37-19.53a17.61,17.61,0,0,1-1.7,5l47.5,15.92H84.65l4-6.85A20.17,20.17,0,0,1,83.93,191L80,197.78,42.67,133.13l37,32.66a20.52,20.52,0,0,1,3.6-4L36.69,120.66,85,77.79a17.45,17.45,0,0,1-3.19-4.32l-39.46,35L80,43.22l5.56,9.69A17.51,17.51,0,0,1,90.12,50Zm28.24,31.17a16.15,16.15,0,0,1-2.68,4.64l62,35.81a19.74,19.74,0,0,1,2.83-4.54Zm-20,10.51v75.33a18,18,0,0,1,2.47-.16,17.18,17.18,0,0,1,2.89.21v-75a11.21,11.21,0,0,1-1.29,0,17.57,17.57,0,0,1-4.07-.47Zm79.34,46.63-62.08,35.81a18.45,18.45,0,0,1,2.68,4.68l62.23-36a19.68,19.68,0,0,1-2.83-4.53Z"/><path class="cls-2" d="M97,48.58a17.06,17.06,0,1,0,17,17,17.08,17.08,0,0,0-17-17Zm0,5.36a11.7,11.7,0,1,1-11.7,11.69A11.65,11.65,0,0,1,97,53.94Z"/><path class="cls-3" d="M95.37,157.39a18.73,18.73,0,1,0,18.7,18.7,18.74,18.74,0,0,0-18.7-18.7Zm0,5.31A13.4,13.4,0,1,1,82,176.09a13.37,13.37,0,0,1,13.4-13.39Z"/><path class="cls-4" d="M190.73,100.2A20.3,20.3,0,1,0,211,120.5a20.34,20.34,0,0,0-20.3-20.3Zm0,5.36a14.94,14.94,0,1,1-14.94,14.94,14.88,14.88,0,0,1,14.94-14.94Z"/></svg>

package/src/index.ts

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

package/src/types/images.d.ts

@@ -0,0 +1,5 @@
+declare module '*.png'
+declare module '*.jpg'
+declare module '*.svg'
+declare module '*.gif'
+declare module '*.webp'