@xyo-network/react-connected-accounts 7.5.8 → 7.5.12

package/src/components/wallet/dialogs/connect/Dialog.tsx

@@ -1,55 +0,0 @@
-import type { DialogProps } from '@mui/material'
-import {
-  Button, Dialog, DialogActions, DialogContent, DialogTitle,
-} from '@mui/material'
-import React from 'react'
-
-import type { ActiveProvider } from '../../lib/index.ts'
-import { CheckboxFormControl } from './CheckboxFormControl.tsx'
-import { LinkedProvidersFlexbox } from './LinkedProvidersFlexbox.tsx'
-import { WalletPermissionsFlexbox } from './Permissions.tsx'
-
-export interface ConnectWalletDialogProps extends DialogProps {
-  activeProvider?: ActiveProvider
-  onIgnoreConnectDialog?: (checked: boolean) => void
-}
-
-export const ConnectWalletDialog: React.FC<ConnectWalletDialogProps> = ({
-  activeProvider, onIgnoreConnectDialog, ...props
-}) => {
-  const { icon, providerName } = activeProvider ?? {}
-
-  const onConnect = async () => {
-    try {
-      await activeProvider?.connectWallet?.()
-      props.onClose?.({}, 'escapeKeyDown')
-    } catch (e) {
-      console.warn(`Error connecting to wallet: ${(e as Error).message}`)
-    }
-  }
-
-  return (
-    <Dialog
-      slotProps={{ paper: { sx: { display: 'flex', gap: 4 } } }}
-      {...props}
-    >
-      <DialogTitle sx={{ textAlign: 'center' }}>XYO Wants To Access The Blockchain on Your Behalf</DialogTitle>
-      <DialogContent sx={{
-        display: 'flex', flexDirection: 'column', gap: 4,
-      }}
-      >
-        <LinkedProvidersFlexbox icon={icon} providerName={providerName} />
-        <WalletPermissionsFlexbox />
-        <CheckboxFormControl onCheckChanged={onIgnoreConnectDialog} />
-      </DialogContent>
-      <DialogActions>
-        <Button variant="outlined" onClick={() => props.onClose?.({}, 'escapeKeyDown')}>
-          Close
-        </Button>
-        <Button variant="contained" onClick={onConnect}>
-          Connect
-        </Button>
-      </DialogActions>
-    </Dialog>
-  )
-}

package/src/components/wallet/dialogs/connect/LinkedProvidersFlexbox.tsx

@@ -1,36 +0,0 @@
-import { SyncAlt } from '@mui/icons-material'
-import { Typography } from '@mui/material'
-import { ConstrainedImage } from '@xylabs/react-crypto'
-import type { FlexBoxProps } from '@xylabs/react-flexbox'
-import { FlexCol, FlexRow } from '@xylabs/react-flexbox'
-import React from 'react'
-
-import { xyoColorLogo } from '../../../../img/index.ts'
-
-export interface LinkedProvidersFlexboxProps extends FlexBoxProps {
-  icon?: string
-  providerName?: string
-}
-
-export const LinkedProvidersFlexbox: React.FC<LinkedProvidersFlexboxProps> = ({
-  icon, providerName, ...props
-}) => {
-  return (
-    <FlexRow gap={4} justifyContent="space-evenly" {...props}>
-      <FlexCol gap={0.5}>
-        <img alt="XYO Logo" src={xyoColorLogo} style={{ height: '48px' }} />
-        <Typography variant="subtitle1">XYO App</Typography>
-      </FlexCol>
-      <SyncAlt fontSize="large" />
-      <FlexCol gap={0.5}>
-        <ConstrainedImage
-          constrainedValue="48px"
-          src={icon}
-          alt={providerName}
-          style={{ height: '48px', maxWidth: '48px' }}
-        />
-        <Typography variant="subtitle1">{providerName}</Typography>
-      </FlexCol>
-    </FlexRow>
-  )
-}

package/src/components/wallet/dialogs/connect/Permissions.tsx

@@ -1,33 +0,0 @@
-import { Link, Typography } from '@mui/material'
-import type { FlexBoxProps } from '@xylabs/react-flexbox'
-import { FlexCol } from '@xylabs/react-flexbox'
-import React from 'react'
-
-export interface WalletPermissionsFlexBoxProps extends FlexBoxProps {}
-
-export const WalletPermissionsFlexbox: React.FC<WalletPermissionsFlexBoxProps> = (props) => {
-  return (
-    <FlexCol gap={4} {...props}>
-      <Typography fontWeight="bold" sx={{ textAlign: 'center' }}>
-        This will allow XYO to:
-      </Typography>
-      <ul>
-        <li>View your wallet account(s) and address(es)</li>
-        <li>Read-only access to browse the public blockchain(s) you select</li>
-      </ul>
-      <Typography variant="subtitle1" sx={{ textAlign: 'center' }}>
-        You control what accounts to share and what blockchains to view. You can see or revoke access via your wallet&apos;s settings at anytime. View
-        more on XYO&apos;s sovereign data philosophy
-        {' '}
-        <Link
-          href="https://cointelegraph.com/innovation-circle/decentralization-and-sovereignty-debunking-our-approach-to-digital-sovereignty"
-          sx={{ fontWeight: 'bold' }}
-          target="_blank"
-        >
-          here
-        </Link>
-        .
-      </Typography>
-    </FlexCol>
-  )
-}

package/src/components/wallet/dialogs/connect/index.ts

@@ -1,2 +0,0 @@
-export * from './CheckboxFormControl.tsx'
-export * from './Dialog.tsx'

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

@@ -1,2 +0,0 @@
-export * from './connect/index.ts'
-export * from './revoke/index.ts'

package/src/components/wallet/dialogs/revoke/Dialog.tsx

@@ -1,44 +0,0 @@
-import type { DialogProps } from '@mui/material'
-import {
-  Button, Dialog, DialogActions, DialogContent, DialogTitle, Typography,
-} from '@mui/material'
-import { ConstrainedImage } from '@xylabs/react-crypto'
-import { FlexRow } from '@xylabs/react-flexbox'
-import React from 'react'
-
-import type { ActiveProvider } from '../../lib/index.ts'
-
-export interface RevokeWalletConnectionDialogProps extends DialogProps {
-  activeProvider?: ActiveProvider
-}
-
-export const RevokeWalletConnectionDialog: React.FC<RevokeWalletConnectionDialogProps> = ({ activeProvider, ...props }) => {
-  return (
-    <Dialog {...props}>
-      <FlexRow gap={2} justifyContent="start" pl={2}>
-        <ConstrainedImage src={activeProvider?.icon} constrainedValue="24px" />
-        <DialogTitle sx={{ pl: 0 }}>
-          Revoke
-          {activeProvider?.providerName}
-          {' '}
-          Access
-        </DialogTitle>
-      </FlexRow>
-      <DialogContent>
-        <Typography>
-          Revoking access to your wallet must be done from the wallet&apos;s browser extension. Wallets grant access to specific domains please
-          consult
-          {' '}
-          {activeProvider?.providerName}
-          &apos;s documentation on how to revoke access to this website:
-        </Typography>
-        <Typography>{globalThis.location.origin}</Typography>
-      </DialogContent>
-      <DialogActions>
-        <Button variant="contained" onClick={() => props.onClose?.({}, 'escapeKeyDown')}>
-          Close
-        </Button>
-      </DialogActions>
-    </Dialog>
-  )
-}

package/src/components/wallet/dialogs/revoke/index.ts

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

package/src/components/wallet/index.ts

@@ -1,3 +0,0 @@
-export * from './dialogs/index.ts'
-export * from './lib/index.ts'
-export * from './table/index.ts'

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

@@ -1,7 +0,0 @@
-import type { EthWallet } from '@xylabs/react-crypto'
-
-export interface ActiveProvider {
-  connectWallet?: EthWallet['connectWallet']
-  icon?: string
-  providerName?: string
-}

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

@@ -1,39 +0,0 @@
-import type { 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,
-  },
-  {
-    disablePadding: false,
-    id: 'enabled',
-    label: 'Enabled',
-    numeric: false,
-    showOnMobile: true,
-  },
-]

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

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

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

@@ -1,62 +0,0 @@
-import type { TableProps } from '@mui/material'
-import {
-  Table, TableBody, TableCell, TableHead, TableRow,
-} from '@mui/material'
-import type { EIP6963Connector } from '@xylabs/react-crypto'
-import React, { useState } from 'react'
-
-import { ConnectWalletDialog, RevokeWalletConnectionDialog } from '../dialogs/index.ts'
-import type { ActiveProvider } from '../lib/index.ts'
-import { WalletsTableHeadCells } from '../lib/index.ts'
-import { WalletConnectionsTableRow } from './ConnectedWalletsTableRow.tsx'
-import { useActiveProviderDialogState } from './hooks/index.ts'
-
-export interface ConnectedWalletsTableProps extends TableProps {
-  ignoreConnectDialog?: boolean
-  onIgnoreConnectDialog?: (checked: boolean) => void
-  wallets?: EIP6963Connector[]
-}
-
-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>
-            ))}
-          </TableRow>
-        </TableHead>
-        <TableBody>
-          {(wallets ?? []).map(wallet => (
-            <WalletConnectionsTableRow
-              ignoreConnectDialog={ignoreConnectDialog}
-              key={wallet.providerInfo?.rdns}
-              onConnectClick={onSetActiveProviderConnect}
-              onRevoke={onSetActiveProviderRevoke}
-              wallet={wallet}
-            />
-          ))}
-        </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,77 +0,0 @@
-import type { TableRowProps } from '@mui/material'
-import { TableRow } from '@mui/material'
-import type { EthWalletConnectorBase } from '@xylabs/react-crypto'
-import { useEthWallet } from '@xylabs/react-crypto'
-import React, { useCallback, useMemo } from 'react'
-
-import type { ActiveProvider } from '../lib/index.ts'
-import { ConnectedWalletTableCells } from './cells/index.ts'
-
-export interface WalletConnectionsTableRowProps extends TableRowProps {
-  ignoreConnectDialog?: boolean
-  onConnectClick?: (activeProvider: ActiveProvider) => void
-  onRevoke?: (activeProvider: ActiveProvider) => void
-  wallet: EthWalletConnectorBase
-}
-
-export const WalletConnectionsTableRow: React.FC<WalletConnectionsTableRowProps> = ({
-  ignoreConnectDialog,
-  onConnectClick,
-  onRevoke,
-  wallet,
-  ...props
-}) => {
-  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)
-  const {
-    icon, name, rdns,
-  } = useMemo(() => providerInfo ?? {
-    icon: undefined, name: undefined, rdns: undefined,
-  }, [providerInfo])
-
-  const activeProvider = useMemo<ActiveProvider>(
-    () => ({
-      connectWallet,
-      icon,
-      providerName: name,
-    }),
-    [connectWallet, icon, name],
-  )
-
-  const onRevokeLocal = useCallback(() => {
-    onRevoke?.(activeProvider)
-  }, [activeProvider, onRevoke])
-
-  const onConnectLocal = useCallback(async () => {
-    if (ignoreConnectDialog) {
-      await connectWallet?.()
-    } else {
-      onConnectClick?.(activeProvider)
-    }
-  }, [activeProvider, connectWallet, ignoreConnectDialog, onConnectClick])
-
-  return (
-    <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

@@ -1,26 +0,0 @@
-import {
-  TableCell, Tooltip, Typography,
-} from '@mui/material'
-import React from 'react'
-
-import type { ConnectedWalletTableCellProps } from './lib/index.ts'
-
-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

@@ -1,38 +0,0 @@
-import { Check, InfoOutlined } from '@mui/icons-material'
-import {
-  Button, IconButton, TableCell, Typography,
-} from '@mui/material'
-import { FlexRow } from '@xylabs/react-flexbox'
-import React from 'react'
-
-import type { ConnectedWalletTableCellProps } from './lib/index.ts'
-
-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

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

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

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

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

@@ -1,30 +0,0 @@
-import { Switch, TableCell } from '@mui/material'
-import { isDefined } from '@xylabs/sdk-js'
-import type { ChangeEvent } from 'react'
-import React, { useMemo } from 'react'
-
-import { useEnabledWallets } from '../../../../hooks/index.ts'
-import type { ConnectedWalletTableCellProps } from './lib/index.ts'
-
-export const ConnectedWalletState: React.FC<ConnectedWalletTableCellProps> = ({
-  connected, walletRdns, tableCellProps,
-}) => {
-  const {
-    disableWallet, enableWallet, wallets,
-  } = useEnabledWallets()
-
-  const enabled = useMemo(() => (isDefined(walletRdns) ? wallets[walletRdns]?.enabled : false), [wallets, walletRdns])
-
-  const handleClick = (event: ChangeEvent<HTMLInputElement>) => {
-    const checked = event.target?.checked
-    if (isDefined(walletRdns)) {
-      // eslint-disable-next-line @typescript-eslint/no-unused-expressions
-      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

@@ -1,21 +0,0 @@
-import { TableCell, useTheme } from '@mui/material'
-import { ConstrainedImage } from '@xylabs/react-crypto'
-import { FlexRow } from '@xylabs/react-flexbox'
-import React from 'react'
-
-import type { ConnectedWalletTableCellProps } from './lib/index.ts'
-
-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

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

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

@@ -1,17 +0,0 @@
-import type { 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

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

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

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

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

@@ -1,21 +0,0 @@
-import type { Dispatch, SetStateAction } from 'react'
-import { useState } from 'react'
-
-import type { ActiveProvider } from '../../lib/index.ts'
-
-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,4 +0,0 @@
-export * from './cells/index.ts'
-export * from './ConnectedWalletsTable.tsx'
-export * from './ConnectedWalletsTableRow.tsx'
-export * from './hooks/index.ts'

package/src/hooks/index.ts

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

package/src/hooks/useDetectWallets.tsx

@@ -1,29 +0,0 @@
-import type { DiscoveredWallets, EIP6963Connector } from '@xylabs/react-crypto'
-import { useWalletDiscovery } from '@xylabs/react-crypto'
-import { useMemo } from 'react'
-
-const sortWallets = (wallets: DiscoveredWallets) => {
-  const result: EIP6963Connector[] = []
-
-  for (const wallet of Object.values(wallets)) {
-    if (wallet) {
-      if (wallet.allowedAccounts.length > 0)
-        result.unshift(wallet)
-      else
-        result.push(wallet)
-    }
-  }
-  return result
-}
-
-export const useDetectedWallets = () => {
-  const wallets = useWalletDiscovery()
-  const sortedWallets = useMemo(() => sortWallets(wallets), [wallets])
-
-  const totalConnectedAccounts = useMemo(
-    () => Object.values(sortedWallets).reduce((acc, wallet) => acc + wallet.allowedAccounts.length, 0),
-    [sortedWallets],
-  )
-
-  return { sortedWallets, totalConnectedAccounts }
-}