feat: add new wallet selector

package.json

@@ -4,6 +4,8 @@
   "private": true,
   "dependencies": {
     "@craco/craco": "^5.7.0",
+    "@ledgerhq/hw-transport": "^5.45.0",
+    "@ledgerhq/hw-transport-webusb": "^5.45.0",
     "@project-serum/serum": "^0.13.11",
     "@project-serum/sol-wallet-adapter": "^0.1.1",
     "@solana/spl-token": "0.0.11",
@@ -62,6 +64,8 @@
   },
   "homepage": ".",
   "devDependencies": {
+    "@types/ledgerhq__hw-transport": "^4.21.3",
+    "@types/ledgerhq__hw-transport-webusb": "^4.70.1",
     "@types/bn.js": "^4.11.6",
     "@types/bs58": "^4.0.1",
     "@types/identicon.js": "^2.3.0",

src/components/appBar.tsx

@@ -1,11 +1,12 @@
 import React from "react";
-import { Button, Menu, Popover } from "antd";
+import { Button, Menu } from "antd";
 import { useWallet } from "../context/wallet";
 import { AccountInfo } from "./accountInfo";
+import { WalletConnect } from "./walletConnect";
 import { Link, useHistory, useLocation } from "react-router-dom";
 
 export const AppBar = (props: { left?: JSX.Element; right?: JSX.Element }) => {
-  const { connected, wallet } = useWallet();
+  const { connected } = useWallet();
   const location = useLocation();
   const history = useHistory();
 
@@ -65,7 +66,9 @@ export const AppBar = (props: { left?: JSX.Element; right?: JSX.Element }) => {
         {props.left}
       </div>
       <div className="App-Bar-right">
-        <AccountInfo />
+        <WalletConnect>
+          <AccountInfo />
+        </WalletConnect>
         {connected && (
           <Button
             type="text"
@@ -75,25 +78,6 @@ export const AppBar = (props: { left?: JSX.Element; right?: JSX.Element }) => {
             My Pools
           </Button>
         )}
-        <div>
-          {!connected && (
-            <Button
-              type="text"
-              size="large"
-              onClick={connected ? wallet.disconnect : wallet.connect}
-              style={{ color: "#2abdd2" }}
-            >
-              Connect
-            </Button>
-          )}
-          {connected && (
-            <Popover
-              placement="bottomRight"
-              title="Wallet public key"
-              trigger="click"
-            ></Popover>
-          )}
-        </div>
         {props.right}
       </div>
     </div>

src/components/settings.tsx

@@ -1,11 +1,9 @@
 import React from "react";
 import { Select } from "antd";
 import { ENDPOINTS, useConnectionConfig } from "../utils/connection";
-import { useWallet, WALLET_PROVIDERS } from "../context/wallet";
 import { Slippage } from "./slippage";
 
 export const Settings = () => {
-  const { providerUrl, setProvider } = useWallet();
   const { endpoint, setEndpoint } = useConnectionConfig();
 
   return (
@@ -31,16 +29,6 @@ export const Settings = () => {
           ))}
         </Select>
       </div>
-      <div style={{ display: "grid" }}>
-        Wallet:{" "}
-        <Select onSelect={setProvider} value={providerUrl}>
-          {WALLET_PROVIDERS.map(({ name, url }) => (
-            <Select.Option value={url} key={url}>
-              {name}
-            </Select.Option>
-          ))}
-        </Select>
-      </div>
     </>
   );
 };

src/components/walletConnect.tsx

@@ -0,0 +1,33 @@
+import React, { FunctionComponent } from 'react';
+import { Button, Dropdown, Menu } from 'antd';
+import { useWallet } from '../context/wallet';
+import { ExplorerLink } from './explorerLink';
+
+export const WalletConnect: FunctionComponent = ({ children }) => {
+  const { connected, wallet, select, connect, disconnect } = useWallet();
+  const publicKey = (connected && wallet?.publicKey?.toBase58()) || '';
+
+  const menu = (
+    <Menu style={{ textAlign: 'right' }}>
+      {connected && <ExplorerLink type="address" address={publicKey} style={{ padding: 12 }} />}
+      <Menu.Item key="3" onClick={select}>
+        Change Wallet
+      </Menu.Item>
+      {connected && <Menu.Item key="2" style={{ color: 'rgba(255, 0, 0, 0.7)' }} onClick={disconnect}>
+        Disconnect
+        </Menu.Item>}
+    </Menu>
+  );
+
+  if (connected) {
+    return <Dropdown overlay={menu} trigger={['hover']}>
+      <div style={{ cursor: 'pointer' }}>{children}</div>
+    </Dropdown>;
+  }
+
+  return (
+    <Dropdown.Button onClick={connected ? disconnect : connect} overlay={menu}>
+      {connected ? 'Disconnect' : 'Connect'}
+    </Dropdown.Button>
+  );
+}