Wallet List Views Tutorial

import { DynamicContextProvider, FilterChain } from '@dynamic-labs/sdk-react-core'
import {
  BitcoinIcon,
  EthereumIcon,
  FlowIcon,
  SolanaIcon,
} from '@dynamic-labs/iconic';

const App = () => {
  return (
    <DynamicContextProvider
      settings={{
        environmentId: 'env-id',
        // Additional settings...

        overrides: {
          views: [
            {
              type: 'wallet-list',
              tabs: {
                items: [
                  {
                    label: { text: 'All chains' },
                  },
                  {
                    label: { icon: <EthereumIcon /> },
                    walletsFilter: FilterChain('EVM'),
                    recommendedWallets: [
                      {
                        walletKey: 'phantomevm',
                      },
                    ],
                  },
                  {
                    label: { icon: <SolanaIcon /> },
                    walletsFilter: FilterChain('SOL'),
                  },
                  {
                    label: { icon: <BitcoinIcon /> },
                    walletsFilter: FilterChain('BTC'),
                  },
                  {
                    label: { icon: <FlowIcon /> },
                    walletsFilter: FilterChain('FLOW'),
                  },
                ]
              }
            }
          ]
        }
      }}
    >

    </DynamicContextProvider>
  )
}

import React from 'react';
import { useDynamicContext } from '@dynamic-labs/sdk-react-core';

/**
 * Component for a button that opens the Ethereum tab by default.
 */
const ConnectWithEthereum: React.FC = () => {
  const { setShowAuthFlow, setDefaultTabIndex } = useDynamicContext();

  /**
   * Handles the button click event by setting the default tab to Ethereum and showing the authentication flow.
   */
  const onClickHandler = (): void => {
    setDefaultTabIndex(1); // Set the default tab index to 1, which corresponds to the Ethereum tab
    setShowAuthFlow(true);
  };

  return (
    <button onClick={onClickHandler}>
      Connect with Ethereum wallet
    </button>
  );
};

export default ConnectWithEthereum;