@lifi/widget 3.6.1 → 3.7.0-beta.0

package/hooks/useAccount.ts

@@ -1,109 +0,0 @@
-import { ChainId, ChainType } from '@lifi/sdk';
-import type { WalletAdapter } from '@solana/wallet-adapter-base';
-import { useWallet } from '@solana/wallet-adapter-react';
-import { useMemo } from 'react';
-import type { Chain } from 'viem';
-import type { Connector } from 'wagmi';
-import { useAccount as useWagmiAccount } from 'wagmi';
-
-export interface AccountBase {
-  address?: string;
-  addresses?: readonly string[];
-  chain?: Chain;
-  chainId?: number;
-  chainType?: ChainType;
-  isConnected: boolean;
-  isConnecting: boolean;
-  isDisconnected: boolean;
-  isReconnecting: boolean;
-  status: 'connected' | 'reconnecting' | 'connecting' | 'disconnected';
-}
-
-export interface EVMAccount extends AccountBase {
-  chainType: ChainType.EVM;
-  connector?: Connector;
-}
-
-export interface SVMAccount extends AccountBase {
-  chainType: ChainType.SVM;
-  connector?: WalletAdapter;
-}
-
-export interface DefaultAccount extends AccountBase {
-  connector?: never;
-}
-
-export type Account = EVMAccount | SVMAccount | DefaultAccount;
-
-export interface AccountResult {
-  account: Account;
-  /**
-   * Connected accounts
-   */
-  accounts: Account[];
-}
-
-interface UseAccountArgs {
-  chainType?: ChainType;
-}
-
-const defaultAccount: AccountBase = {
-  isConnected: false,
-  isConnecting: false,
-  isReconnecting: false,
-  isDisconnected: true,
-  status: 'disconnected',
-};
-
-/**
- *
- * @param args When we provide args we want to return either account with corresponding chainType or default disconnected one
- * @returns - Account result
- */
-export const useAccount = (args?: UseAccountArgs): AccountResult => {
-  const account = useWagmiAccount();
-  const { wallet } = useWallet();
-
-  // We create a simple variable from the args object
-  // to avoid re-render useMemo on every object reference change.
-  const hasChainTypeArgs = Boolean(args);
-
-  return useMemo(() => {
-    const svm: Account = wallet?.adapter.publicKey
-      ? {
-          address: wallet?.adapter.publicKey.toString(),
-          chainId: ChainId.SOL,
-          chainType: ChainType.SVM,
-          connector: wallet?.adapter,
-          isConnected: Boolean(wallet?.adapter.publicKey),
-          isConnecting: false,
-          isReconnecting: false,
-          isDisconnected: !wallet,
-          status: 'connected',
-        }
-      : {
-          chainType: ChainType.SVM,
-          isConnected: false,
-          isConnecting: false,
-          isReconnecting: false,
-          isDisconnected: true,
-          status: 'disconnected',
-        };
-    const evm: Account = { ...account, chainType: ChainType.EVM };
-    const accounts = [evm, svm];
-    const connectedAccounts = [evm, svm].filter(
-      (account) => account.isConnected && account.address,
-    );
-    return {
-      account:
-        accounts.find(
-          (account) =>
-            (!hasChainTypeArgs || account.chainType === args?.chainType) &&
-            account.isConnected &&
-            account.address,
-        ) ?? defaultAccount,
-      // We need to return only connected account list
-      accounts: connectedAccounts,
-    };
-  }, [account, args?.chainType, hasChainTypeArgs, wallet]);
-};

package/hooks/useWallets.ts

@@ -1,147 +0,0 @@
-import { ChainType } from '@lifi/sdk';
-import type { CreateConnectorFnExtended } from '@lifi/wallet-management';
-import {
-  createCoinbaseConnector,
-  createMetaMaskConnector,
-  createWalletConnectConnector,
-  getWalletPriority,
-  isWalletInstalled,
-} from '@lifi/wallet-management';
-import type { Theme } from '@mui/material';
-import { useMediaQuery } from '@mui/material';
-import { WalletReadyState } from '@solana/wallet-adapter-base';
-import type { Wallet } from '@solana/wallet-adapter-react';
-import { useWallet } from '@solana/wallet-adapter-react';
-import { useMemo } from 'react';
-import type { Connector } from 'wagmi';
-import { useConnect, useAccount as useWagmiAccount } from 'wagmi';
-import { defaultCoinbaseConfig } from '../config/coinbase.js';
-import { defaultMetaMaskConfig } from '../config/metaMask.js';
-import { defaultWalletConnectConfig } from '../config/walletConnect.js';
-import type { WidgetChains, WidgetWalletConfig } from '../types/widget.js';
-import { isItemAllowed } from '../utils/item.js';
-
-export const useWallets = (
-  walletConfig?: WidgetWalletConfig,
-  chains?: WidgetChains,
-) => {
-  const account = useWagmiAccount();
-  const { connectors } = useConnect();
-  const { wallets: solanaWallets } = useWallet();
-
-  const isDesktopView = useMediaQuery((theme: Theme) =>
-    theme.breakpoints.up('sm'),
-  );
-
-  const wallets = useMemo(() => {
-    const evmConnectors: (CreateConnectorFnExtended | Connector)[] =
-      Array.from(connectors);
-    if (
-      !connectors.some((connector) =>
-        connector.id.toLowerCase().includes('walletconnect'),
-      )
-    ) {
-      evmConnectors.unshift(
-        createWalletConnectConnector(
-          walletConfig?.walletConnect ?? defaultWalletConnectConfig,
-        ),
-      );
-    }
-    if (
-      !connectors.some((connector) =>
-        connector.id.toLowerCase().includes('coinbase'),
-      ) &&
-      !isWalletInstalled('coinbase')
-    ) {
-      evmConnectors.unshift(
-        createCoinbaseConnector(
-          walletConfig?.coinbase ?? defaultCoinbaseConfig,
-        ),
-      );
-    }
-    if (
-      !connectors.some((connector) =>
-        connector.id.toLowerCase().includes('metamask'),
-      ) &&
-      !isWalletInstalled('metaMask')
-    ) {
-      evmConnectors.unshift(
-        createMetaMaskConnector(
-          walletConfig?.metaMask ?? defaultMetaMaskConfig,
-        ),
-      );
-    }
-    const evmInstalled = isItemAllowed(ChainType.EVM, chains?.types)
-      ? evmConnectors.filter(
-          (connector) =>
-            isWalletInstalled(connector.id!) &&
-            // We should not show already connected connectors
-            account.connector?.id !== connector.id,
-        )
-      : [];
-    const evmNotDetected = isItemAllowed(ChainType.EVM, chains?.types)
-      ? evmConnectors.filter((connector) => !isWalletInstalled(connector.id!))
-      : [];
-    const svmInstalled = isItemAllowed(ChainType.SVM, chains?.types)
-      ? solanaWallets?.filter(
-          (connector) =>
-            connector.adapter.readyState === WalletReadyState.Installed &&
-            // We should not show already connected connectors
-            !connector.adapter.connected,
-        )
-      : [];
-    const svmNotDetected = isItemAllowed(ChainType.SVM, chains?.types)
-      ? solanaWallets?.filter(
-          (connector) =>
-            connector.adapter.readyState !== WalletReadyState.Installed,
-        )
-      : [];
-
-    const installedWallets = [...evmInstalled, ...svmInstalled].sort(
-      walletComparator,
-    );
-
-    if (isDesktopView) {
-      const notDetectedWallets = [...evmNotDetected, ...svmNotDetected].sort(
-        walletComparator,
-      );
-      installedWallets.push(...notDetectedWallets);
-    }
-
-    return installedWallets;
-  }, [
-    account.connector?.id,
-    chains?.types,
-    connectors,
-    isDesktopView,
-    solanaWallets,
-    walletConfig?.coinbase,
-    walletConfig?.metaMask,
-    walletConfig?.walletConnect,
-  ]);
-
-  return wallets;
-};
-
-export const walletComparator = (
-  a: CreateConnectorFnExtended | Connector | Wallet,
-  b: CreateConnectorFnExtended | Connector | Wallet,
-) => {
-  let aId = (a as Connector).id || (a as Wallet).adapter?.name;
-  let bId = (b as Connector).id || (b as Wallet).adapter?.name;
-
-  const priorityA = getWalletPriority(aId);
-  const priorityB = getWalletPriority(bId);
-
-  if (priorityA !== priorityB) {
-    return priorityA - priorityB;
-  }
-
-  if (aId < bId) {
-    return -1;
-  }
-  if (aId > bId) {
-    return 1;
-  }
-  return 0;
-};

package/pages/SelectWalletPage/EVMListItemButton.tsx

@@ -1,74 +0,0 @@
-import { ChainType } from '@lifi/sdk';
-import type { CreateConnectorFnExtended } from '@lifi/wallet-management';
-import {
-  getConnectorIcon,
-  isWalletInstalledAsync,
-} from '@lifi/wallet-management';
-import { Avatar, ListItemAvatar } from '@mui/material';
-import type { Connector } from 'wagmi';
-import { useConnect, useDisconnect } from 'wagmi';
-import { ListItemButton } from '../../components/ListItemButton.js';
-import { ListItemText } from '../../components/ListItemText.js';
-import { useNavigateBack } from '../../hooks/useNavigateBack.js';
-import { useWidgetEvents } from '../../hooks/useWidgetEvents.js';
-import { WidgetEvent } from '../../types/events.js';
-
-interface EVMListItemButtonProps {
-  connectedConnector?: Connector;
-  connector: CreateConnectorFnExtended | Connector;
-  onNotInstalled(connector: Connector): void;
-}
-
-export const EVMListItemButton = ({
-  connectedConnector,
-  connector,
-  onNotInstalled,
-}: EVMListItemButtonProps) => {
-  const { navigateBack } = useNavigateBack();
-  const emitter = useWidgetEvents();
-  const { connectAsync } = useConnect();
-  const { disconnectAsync } = useDisconnect();
-
-  const handleEVMConnect = async () => {
-    const identityCheckPassed = await isWalletInstalledAsync(
-      (connector as Connector).id,
-    );
-    if (!identityCheckPassed) {
-      onNotInstalled(connector as Connector);
-      return;
-    }
-    if (connectedConnector) {
-      await disconnectAsync({ connector: connectedConnector });
-    }
-    await connectAsync(
-      { connector },
-      {
-        onSuccess(data) {
-          emitter.emit(WidgetEvent.WalletConnected, {
-            address: data.accounts[0],
-            chainId: data.chainId,
-            chainType: ChainType.EVM,
-          });
-        },
-      },
-    );
-    navigateBack();
-  };
-
-  const connectorName: string =
-    (connector as CreateConnectorFnExtended).displayName || connector.name;
-
-  return (
-    <ListItemButton key={connector.id} onClick={handleEVMConnect}>
-      <ListItemAvatar>
-        <Avatar
-          src={getConnectorIcon(connector as Connector)}
-          alt={connectorName}
-        >
-          {connectorName?.[0]}
-        </Avatar>
-      </ListItemAvatar>
-      <ListItemText primary={connectorName} />
-    </ListItemButton>
-  );
-};

package/pages/SelectWalletPage/SVMListItemButton.tsx

@@ -1,47 +0,0 @@
-import { ChainId, ChainType } from '@lifi/sdk';
-import { Avatar, ListItemAvatar } from '@mui/material';
-import type { Wallet } from '@solana/wallet-adapter-react';
-import { useWallet } from '@solana/wallet-adapter-react';
-import { ListItemButton } from '../../components/ListItemButton.js';
-import { ListItemText } from '../../components/ListItemText.js';
-import { useNavigateBack } from '../../hooks/useNavigateBack.js';
-import { useWidgetEvents } from '../../hooks/useWidgetEvents.js';
-import { WidgetEvent } from '../../types/events.js';
-
-interface SVMListItemButtonProps {
-  wallet: Wallet;
-}
-
-export const SVMListItemButton = ({ wallet }: SVMListItemButtonProps) => {
-  const { navigateBack } = useNavigateBack();
-  const emitter = useWidgetEvents();
-  const { select, disconnect, connected } = useWallet();
-
-  const connect = async () => {
-    if (connected) {
-      await disconnect();
-    }
-    select(wallet.adapter.name);
-    // We use autoConnect on wallet selection
-    // await solanaConnect();
-    wallet.adapter.once('connect', (publicKey) => {
-      emitter.emit(WidgetEvent.WalletConnected, {
-        address: publicKey?.toString(),
-        chainId: ChainId.SOL,
-        chainType: ChainType.SVM,
-      });
-    });
-    navigateBack();
-  };
-
-  return (
-    <ListItemButton key={wallet.adapter.name} onClick={connect}>
-      <ListItemAvatar>
-        <Avatar src={wallet.adapter.icon} alt={wallet.adapter.name}>
-          {wallet.adapter.name[0]}
-        </Avatar>
-      </ListItemAvatar>
-      <ListItemText primary={`${wallet.adapter.name} (Solana)`} />
-    </ListItemButton>
-  );
-};

package/pages/SelectWalletPage/SelectWalletPage.tsx

@@ -1,90 +0,0 @@
-import {
-  Button,
-  DialogActions,
-  DialogContent,
-  DialogContentText,
-  List,
-} from '@mui/material';
-import type { Wallet } from '@solana/wallet-adapter-react';
-import { useCallback, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import type { Connector } from 'wagmi';
-import { useAccount as useWagmiAccount } from 'wagmi';
-import { Dialog } from '../../components/Dialog.js';
-import { PageContainer } from '../../components/PageContainer.js';
-import { useHeader } from '../../hooks/useHeader.js';
-import { useWallets } from '../../hooks/useWallets.js';
-import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js';
-import { EVMListItemButton } from './EVMListItemButton.js';
-import { SVMListItemButton } from './SVMListItemButton.js';
-
-export const SelectWalletPage = () => {
-  const { t } = useTranslation();
-  const { chains, walletConfig } = useWidgetConfig();
-  const account = useWagmiAccount();
-  const [walletIdentity, setWalletIdentity] = useState<{
-    show: boolean;
-    connector?: Connector;
-  }>({ show: false });
-
-  useHeader(t(`header.selectWallet`));
-
-  const closeDialog = () => {
-    setWalletIdentity((state) => ({
-      ...state,
-      show: false,
-    }));
-  };
-
-  const handleNotInstalled = useCallback(async (connector: Connector) => {
-    setWalletIdentity({
-      show: true,
-      connector,
-    });
-  }, []);
-
-  const wallets = useWallets(walletConfig, chains);
-
-  return (
-    <PageContainer disableGutters>
-      <List
-        sx={{
-          paddingTop: 0,
-          paddingLeft: 1.5,
-          paddingRight: 1.5,
-          paddingBottom: 1.5,
-        }}
-      >
-        {wallets?.map((connector) =>
-          (connector as Connector).id ? (
-            <EVMListItemButton
-              key={(connector as Connector).id}
-              connector={connector as Connector}
-              connectedConnector={account.connector}
-              onNotInstalled={handleNotInstalled}
-            />
-          ) : (
-            <SVMListItemButton
-              key={(connector as Wallet).adapter.name}
-              wallet={connector as Wallet}
-            />
-          ),
-        )}
-      </List>
-      <Dialog open={walletIdentity.show} onClose={closeDialog}>
-        <DialogContent>
-          <DialogContentText>
-            {t('wallet.extensionNotFound', {
-              name: walletIdentity.connector?.name,
-            })}
-          </DialogContentText>
-        </DialogContent>
-        <DialogActions>
-          <Button variant="contained" onClick={closeDialog} autoFocus>
-            {t('button.ok')}
-          </Button>
-        </DialogActions>
-      </Dialog>
-    </PageContainer>
-  );
-};

package/utils/svm.ts

@@ -1,10 +0,0 @@
-import { PublicKey } from '@solana/web3.js';
-
-export const isSVMAddress = (address: string) => {
-  try {
-    new PublicKey(address);
-    return true;
-  } catch {
-    return false;
-  }
-};