Example of native wallet-adapter support for Particle social logins

App.tsx

import React, { FC, ReactNode, useMemo } from 'react';
import {
  ConnectionProvider,
  WalletProvider,
} from '@solana/wallet-adapter-react';
import { WalletModalProvider, WalletMultiButton } from '@solana/wallet-adapter-react-ui';
import { ParticleAdapter } from '@solana/wallet-adapter-wallets';

import '@solana/wallet-adapter-react-ui/styles.css';
import './App.css';

const App: FC = () => (
  <Context>
    <Content />
  </Context>
);

export default App;

const Context: FC<{ children: ReactNode }> = ({ children }) => {
  const endpoint = useMemo(() => process.env.REACT_APP_RPC_URL!, []);
  const wallets = useMemo(() => [new ParticleAdapter()], []);

  return (
    <ConnectionProvider endpoint={endpoint}>
      <WalletProvider wallets={wallets} autoConnect>
        <WalletModalProvider>{children}</WalletModalProvider>
      </WalletProvider>
    </ConnectionProvider>
  );
};

const Content: FC = () => {
  return (
    <div className="App">
      <div className="button-container">
        <WalletMultiButton />
      </div>
    </div>
  );
};