Migrates to use-solana library

.prettierrc

@@ -0,0 +1 @@
+{}

package.json

@@ -3,30 +3,27 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@ant-design/icons": "^4.5.0",
-    "@craco/craco": "^5.7.0",
-    "@ledgerhq/hw-transport-webusb": "^5.41.0",
-    "@project-serum/serum": "^0.13.34",
-    "@project-serum/sol-wallet-adapter": "^0.2.0",
-    "@solana/spl-token": "0.1.3",
-    "@solana/spl-token-registry": "^0.2.64",
+    "@ant-design/icons": "^4.6.2",
+    "@craco/craco": "^6.1.2",
+    "@project-serum/serum": "^0.13.38",
+    "@saberhq/solana": "0.1.1-beta.4",
+    "@saberhq/use-solana": "^0.1.1-beta.4",
+    "@solana/spl-token": "0.1.5",
+    "@solana/spl-token-registry": "^0.2.135",
     "@solana/spl-token-swap": "0.1.0",
-    "@solana/web3.js": "^1.7.1",
-    "@testing-library/jest-dom": "^4.2.4",
-    "@testing-library/react": "^9.5.0",
-    "@types/react-router-dom": "^5.1.6",
-    "antd": "^4.6.6",
-    "bn.js": "^5.1.3",
+    "@solana/web3.js": "^1.18.0",
+    "@types/react-router-dom": "^5.1.7",
+    "antd": "^4.16.3",
+    "bn.js": "^5.2.0",
     "bs58": "^4.0.1",
-    "buffer-layout": "^1.2.0",
-    "craco-less": "^1.17.0",
+    "buffer-layout": "^1.2.1",
     "eventemitter3": "^4.0.7",
     "jazzicon": "^1.5.0",
-    "react": "^16.13.1",
-    "react-dom": "^16.13.1",
+    "react": "^17.0.2",
+    "react-device-detect": "^1.17.0",
+    "react-dom": "^17.0.2",
     "react-router-dom": "^5.2.0",
-    "react-scripts": "3.4.3",
-    "typescript": "^4.0.0"
+    "react-scripts": "^4.0.3"
   },
   "scripts": {
     "start": "craco start",
@@ -36,7 +33,7 @@
     "program:build": "cd program && cargo build-bpf",
     "program:test": "cd program && cargo test-bpf",
     "localnet:up": "solana-test-validator --bpf-program BpfProgram1111111111111111111111111111111111 program/target/deploy/bpf_program_template.so --reset",
-    "localnet:logs": "solana logs",
+    "localnet:logs": "solana logs -u localhost",
     "predeploy": "git pull --ff-only && yarn && yarn build",
     "deploy": "gh-pages -d build",
     "deploy:ar": "arweave deploy-dir build --key-file ",
@@ -63,16 +60,18 @@
   },
   "homepage": ".",
   "devDependencies": {
-    "@types/bn.js": "^4.11.6",
+    "@testing-library/jest-dom": "^5.14.1",
+    "@testing-library/react": "^11.2.7",
+    "@types/bn.js": "^5.1.0",
     "@types/bs58": "^4.0.1",
-    "@types/jest": "^24.9.1",
-    "@types/ledgerhq__hw-transport": "^4.21.3",
-    "@types/ledgerhq__hw-transport-webusb": "^4.70.1",
+    "@types/jest": "^26.0.23",
     "@types/node": "^12.12.62",
-    "@types/react": "^16.9.50",
-    "@types/react-dom": "^16.9.8",
+    "@types/react": "^17.0.11",
+    "@types/react-dom": "^17.0.7",
     "arweave-deploy": "^1.9.1",
-    "gh-pages": "^3.1.0",
-    "prettier": "^2.1.2"
+    "craco-less": "^1.17.1",
+    "gh-pages": "^3.2.1",
+    "prettier": "^2.3.1",
+    "typescript": "^4.3.2"
   }
 }

src/components/AppBar/index.tsx

@@ -1,11 +1,11 @@
 import React from "react";
 import { Button, Popover } from "antd";
-import { useWallet } from "../../contexts/wallet";
 import { CurrentUserBadge } from "../CurrentUserBadge";
 import { SettingOutlined } from "@ant-design/icons";
 import { Settings } from "../Settings";
 import { LABELS } from "../../constants";
 import { ConnectButton } from "../ConnectButton";
+import { useWallet } from "@saberhq/use-solana";
 
 export const AppBar = (props: { left?: JSX.Element; right?: JSX.Element }) => {
   const { connected } = useWallet();

src/components/ConnectButton/index.tsx

@@ -1,8 +1,9 @@
+import { useWallet } from "@saberhq/use-solana";
 import { Button, Dropdown, Menu } from "antd";
 import { ButtonProps } from "antd/lib/button";
 import React from "react";
 import { LABELS } from "../../constants";
-import { useWallet } from "../../contexts/wallet";
+import { useWalletSelector } from "../../contexts/wallet";
 
 export interface ConnectButtonProps
   extends ButtonProps,
@@ -11,7 +12,8 @@ export interface ConnectButtonProps
 }
 
 export const ConnectButton = (props: ConnectButtonProps) => {
-  const { connected, connect, select, provider } = useWallet();
+  const { connected, provider } = useWallet();
+  const { connect, select } = useWalletSelector();
   const { onClick, children, disabled, allowWalletChange, ...rest } = props;
 
   // only show if wallet selected or user connected

src/components/CurrentUserBadge/index.tsx

@@ -1,9 +1,9 @@
 import React from "react";
-import { useWallet } from "../../contexts/wallet";
 import { formatNumber, shortenAddress } from "../../utils/utils";
 import { Identicon } from "../Identicon";
 import { useNativeAccount } from "../../contexts/accounts";
 import { LAMPORTS_PER_SOL } from "@solana/web3.js";
+import { useWallet } from "@saberhq/use-solana";
 
 export const CurrentUserBadge = (props: {}) => {
   const { wallet } = useWallet();

src/components/ExplorerLink/index.tsx

@@ -26,10 +26,10 @@ export const ExplorerLink = (props: {
   return (
     <a
       href={`https://explorer.solana.com/${type}/${address}`}
-      // eslint-disable-next-line react/jsx-no-target-blank
       target="_blank"
       title={address}
       style={props.style}
+      rel="noreferrer"
     >
       {code ? (
         <Typography.Text style={props.style} code>

src/components/Settings/index.tsx

@@ -1,29 +1,29 @@
-import React from "react";
+import { useConnectionContext, useWallet, solana } from "@saberhq/use-solana";
 import { Button, Select } from "antd";
-import { ENDPOINTS, useConnectionConfig } from "../../contexts/connection";
-import { useWallet } from "../../contexts/wallet";
+
+const NETWORKS = Object.entries(solana.DEFAULT_NETWORK_CONFIG_MAP);
 
 export const Settings = () => {
-  const { connected, disconnect } = useWallet();
-  const { endpoint, setEndpoint } = useConnectionConfig();
+  const { connected, wallet } = useWallet();
+  const { network, setNetwork } = useConnectionContext();
 
   return (
     <>
       <div style={{ display: "grid" }}>
         Network:{" "}
         <Select
-          onSelect={setEndpoint}
-          value={endpoint}
+          onSelect={setNetwork}
+          value={network}
           style={{ marginBottom: 20 }}
         >
-          {ENDPOINTS.map(({ name, endpoint }) => (
-            <Select.Option value={endpoint} key={endpoint}>
-              {name}
+          {NETWORKS.map(([networkID, network]) => (
+            <Select.Option value={networkID} key={networkID}>
+              {network.name}
             </Select.Option>
           ))}
         </Select>
         {connected && (
-          <Button type="primary" onClick={disconnect}>
+          <Button type="primary" onClick={() => wallet?.disconnect()}>
             Disconnect
           </Button>
         )}

src/contexts/accounts.tsx

@@ -1,6 +1,4 @@
 import React, { useCallback, useContext, useEffect, useState } from "react";
-import { useConnection } from "./connection";
-import { useWallet } from "./wallet";
 import {
   AccountInfo,
   ConfirmedSignatureInfo,
@@ -14,6 +12,7 @@ import { chunks } from "./../utils/utils";
 import { EventEmitter } from "./../utils/eventEmitter";
 import { useUserAccounts } from "../hooks/useUserAccounts";
 import { WRAPPED_SOL_MINT, programIds } from "../utils/ids";
+import { useConnection, useWallet } from "@saberhq/use-solana";
 
 const AccountsContext = React.createContext<any>(null);
 
@@ -266,7 +265,8 @@ function wrapNativeAccount(
 
 const UseNativeAccount = () => {
   const connection = useConnection();
-  const { wallet, publicKey } = useWallet();
+  const { wallet } = useWallet();
+  const publicKey = wallet?.publicKey;
 
   const [nativeAccount, setNativeAccount] = useState<AccountInfo<Buffer>>();
 
@@ -332,7 +332,8 @@ const precacheUserTokenAccounts = async (
 
 export function AccountsProvider({ children = null as any }) {
   const connection = useConnection();
-  const { publicKey, wallet, connected } = useWallet();
+  const { wallet, connected } = useWallet();
+  const publicKey = wallet?.publicKey;
   const [tokenAccounts, setTokenAccounts] = useState<TokenAccount[]>([]);
   const [userAccounts, setUserAccounts] = useState<TokenAccount[]>([]);
   const { nativeAccount } = UseNativeAccount();
@@ -375,8 +376,9 @@ export function AccountsProvider({ children = null as any }) {
     };
   }, [connection]);
 
+  const walletConnected = wallet?.connected;
   useEffect(() => {
-    if (!connection || !publicKey) {
+    if (!connection || !publicKey || !walletConnected) {
       setTokenAccounts([]);
     } else {
       precacheUserTokenAccounts(connection, publicKey).then(() => {
@@ -390,7 +392,7 @@ export function AccountsProvider({ children = null as any }) {
         programIds().token,
         (info) => {
           // TODO: fix type in web3.js
-          const id = (info.accountId as unknown) as string;
+          const id = info.accountId as unknown as string;
           // TODO: do we need a better way to identify layout (maybe a enum identifing type?)
           if (info.accountInfo.data.length === AccountLayout.span) {
             const data = deserializeAccount(info.accountInfo.data);
@@ -408,7 +410,7 @@ export function AccountsProvider({ children = null as any }) {
         connection.removeProgramAccountChangeListener(tokenSubID);
       };
     }
-  }, [connection, connected, publicKey, selectUserAccounts]);
+  }, [connection, connected, publicKey, selectUserAccounts, walletConnected]);
 
   return (
     <AccountsContext.Provider