Merge branch 'wallet-adapter' into latest

jeffwalsh · Aug 16, 2021 · 42b6b06 · 42b6b06
2 parents 52d38a5 + 129bc3f
commit 42b6b06
Show file tree

Hide file tree

Showing 79 changed files with 1,101 additions and 1,539 deletions.
diff --git a/js/package.json b/js/package.json
@@ -15,7 +15,7 @@
     "build": "lerna run build",
     "start": "cross-env CI=true lerna run start --scope @oyster/common --stream --parallel --scope web",
     "lint": "eslint 'packages/*/{src,test}/**/*.ts' && prettier -c 'packages/*/{src,test}/**/*.ts'",
-    "lint:fix": "eslint --fix 'packages/*/{src,test}/**/*.ts' && prettier --write 'packages/*/{src,test}/**/*.ts'",
+    "lint:fix": "eslint --fix 'packages/*/{src,test}/**/*.ts' && prettier --write 'packages/*/{src,test}/**/*.{ts,tsx}'",
     "deploy": "run-s deploy:docs build deploy:apps && gh-pages -d docs",
     "deploy:docs": "lerna run docs",
     "deploy:apps": "lerna run deploy:app",
@@ -45,16 +45,14 @@
   "dependencies": {
     "cross-env": "^7.0.3",
     "next": "^11.0.1",
-    "react": "17.0.2",
-    "react-dom": "17.0.2"
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2"
   },
   "devDependencies": {
     "@commitlint/cli": "^8.2.0",
     "@commitlint/config-conventional": "^8.2.0",
     "@types/animejs": "^3.1.3",
     "@types/jest": "^24.0.0",
-    "@types/react": "^16.9.50",
-    "@types/react-dom": "^16.9.8",
     "@typescript-eslint/eslint-plugin": "^4.6.0",
     "@typescript-eslint/parser": "^4.6.0",
     "eslint": "^6.6.0",
@@ -71,9 +69,5 @@
     "ts-jest": "^24.0.0",
     "ts-node": "^9.0.0",
     "typescript": "^4.1.3"
-  },
-  "resolutions": {
-    "react": "17.0.2",
-    "react-dom": "17.0.2"
   }
 }
diff --git a/js/packages/common/package.json b/js/packages/common/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@oyster/common",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "description": "Oyster common utilities",
   "main": "dist/lib/index.js",
   "types": "dist/lib/index.d.ts",
@@ -30,11 +30,11 @@
   },
   "dependencies": {
     "@project-serum/serum": "^0.13.52",
-    "@project-serum/sol-wallet-adapter": "^0.2.5",
     "@solana/spl-token": "0.1.6",
     "@solana/spl-token-registry": "0.2.202",
-    "@solana/wallet-base": "0.0.1",
-    "@solana/wallet-ledger": "0.0.1",
+    "@solana/wallet-adapter-base": "^0.4.1",
+    "@solana/wallet-adapter-react": "^0.7.0",
+    "@solana/wallet-adapter-wallets": "^0.6.0",
     "@solana/web3.js": "^1.21.0",
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.5.0",
@@ -76,9 +76,5 @@
   "peerDependencies": {
     "react": "*",
     "react-dom": "*"
-  },
-  "resolutions": {
-    "react": "17.0.2",
-    "react-dom": "17.0.2"
   }
 }
diff --git a/js/packages/common/src/components/AppBar/index.tsx b/js/packages/common/src/components/AppBar/index.tsx
@@ -5,7 +5,8 @@ import { SettingOutlined } from '@ant-design/icons';
 import { Settings } from '../Settings';
 import { LABELS } from '../../constants/labels';
 import { ConnectButton } from '..';
-import { useWallet } from '../../contexts/wallet';
+import { useWallet } from '@solana/wallet-adapter-react';
+
 export const AppBar = (props: {
   left?: JSX.Element;
   right?: JSX.Element;
@@ -23,8 +24,8 @@ export const AppBar = (props: {
         <ConnectButton
           type="text"
           size="large"
-          allowWalletChange={true}
           style={{ color: '#2abdd2' }}
+          allowWalletChange
         />
       )}
       <Popover

diff --git a/js/packages/common/src/components/ConnectButton/index.tsx b/js/packages/common/src/components/ConnectButton/index.tsx
@@ -1,42 +1,51 @@
-import { Button, Dropdown, Menu } from "antd";
-import { ButtonProps } from "antd/lib/button";
-import React from "react";
-import { useWallet } from './../../contexts/wallet';
+import { Button, Dropdown, Menu } from 'antd';
+import { ButtonProps } from 'antd/lib/button';
+import React, { useCallback } from 'react';
+import { useWallet } from '@solana/wallet-adapter-react';
+import { useWalletModal } from '../../contexts';
 
-export interface ConnectButtonProps extends ButtonProps, React.RefAttributes<HTMLElement> {
+export interface ConnectButtonProps
+  extends ButtonProps,
+    React.RefAttributes<HTMLElement> {
   allowWalletChange?: boolean;
 }
 
-export const ConnectButton = (
-  props: ConnectButtonProps
-) => {
-  const { connected, connect, select, provider } = useWallet();
+export const ConnectButton = (props: ConnectButtonProps) => {
   const { onClick, children, disabled, allowWalletChange, ...rest } = props;
 
-  // only show if wallet selected or user connected
+  const { wallet, connect, connected } = useWallet();
+  const { setVisible } = useWalletModal();
+  const open = useCallback(() => setVisible(true), [setVisible]);
 
-  const menu = (
-    <Menu>
-      <Menu.Item key="3" onClick={select}>Change Wallet</Menu.Item>
-    </Menu>
+  const handleClick = useCallback(
+    () => (wallet ? connect().catch(() => {}) : open()),
+    [wallet, connect, open],
   );
 
-  if(!provider || !allowWalletChange) {
-    return <Button
-      className="connector"
-      {...rest}
-      onClick={connected ? onClick : connect}
-      disabled={connected && disabled}
-    >
-      {connected ? children : 'Connect'}
-    </Button>;
+  // only show if wallet selected or user connected
+
+  if (!wallet || !allowWalletChange) {
+    return (
+      <Button
+        {...rest}
+        onClick={handleClick}
+        disabled={connected && disabled}
+      >
+        {connected ? props.children : 'Connect'}
+      </Button>
+    );
   }
 
   return (
     <Dropdown.Button
-        onClick={connected ? onClick : connect}
-        disabled={connected && disabled}
-        overlay={menu}>
+      onClick={handleClick}
+      disabled={connected && disabled}
+      overlay={
+        <Menu>
+          <Menu.Item onClick={open}>Change Wallet</Menu.Item>
+        </Menu>
+      }
+    >
       Connect
     </Dropdown.Button>
   );

diff --git a/js/packages/common/src/components/CurrentUserBadge/index.tsx b/js/packages/common/src/components/CurrentUserBadge/index.tsx
@@ -1,10 +1,8 @@
 import React from 'react';
-
-import { Identicon } from '../Identicon';
 import { LAMPORTS_PER_SOL } from '@solana/web3.js';
-import { useWallet } from '../../contexts/wallet';
+import { useWallet } from '@solana/wallet-adapter-react';
 import { useNativeAccount } from '../../contexts/accounts';
-import { formatNumber, shortenAddress } from '../../utils';
+import { formatNumber } from '../../utils';
 import { Popover } from 'antd';
 import { Settings } from '../Settings';
 
@@ -13,23 +11,23 @@ export const CurrentUserBadge = (props: {
   showAddress?: boolean;
   iconSize?: number;
 }) => {
-  const { wallet } = useWallet();
+  const { wallet, publicKey } = useWallet();
   const { account } = useNativeAccount();
 
-  if (!wallet || !wallet.publicKey) {
+  if (!wallet || !publicKey) {
     return null;
   }
 
   const iconStyle: React.CSSProperties = props.showAddress
     ? {
         marginLeft: '0.5rem',
         display: 'flex',
-        width: props.iconSize,
+        width: props.iconSize || 20,
         borderRadius: 50,
       }
     : {
         display: 'flex',
-        width: props.iconSize,
+        width: props.iconSize || 20,
         paddingLeft: 0,
         borderRadius: 50,
       };
@@ -43,20 +41,6 @@ export const CurrentUserBadge = (props: {
     ? baseWalletKey
     : { ...baseWalletKey, paddingLeft: 0 };
 
-  let name = props.showAddress ? shortenAddress(`${wallet.publicKey}`) : '';
-  const unknownWallet = wallet as any;
-  if (unknownWallet.name) {
-    name = unknownWallet.name;
-  }
-
-  let image = (
-    <Identicon address={wallet.publicKey?.toBase58()} style={iconStyle} />
-  );
-
-  if (unknownWallet.image) {
-    image = <img src={unknownWallet.image} style={iconStyle} />;
-  }
-
   return (
     <div className="wallet-wrapper">
       {props.showBalance && (
@@ -72,8 +56,8 @@ export const CurrentUserBadge = (props: {
         trigger="click"
       >
         <div className="wallet-key" style={walletKeyStyle}>
-          {name && <span style={{ marginRight: '0.5rem' }}>{name}</span>}
-          {image}
+          <span style={{ marginRight: '0.5rem' }}>{wallet.name}</span>
+          <img src={wallet.icon} style={iconStyle} />
         </div>
       </Popover>
     </div>

diff --git a/js/packages/common/src/components/EtherscanLink/index.tsx b/js/packages/common/src/components/EtherscanLink/index.tsx
@@ -3,7 +3,7 @@ import { Typography } from 'antd';
 import { shortenAddress } from '../../utils/utils';
 
 export const EtherscanLink = (props: {
-  address: string ;
+  address: string;
   type: string;
   code?: boolean;
   style?: React.CSSProperties;

diff --git a/js/packages/common/src/components/Icons/info.tsx b/js/packages/common/src/components/Icons/info.tsx
@@ -1,7 +1,7 @@
-import { Button, Popover } from "antd";
-import React from "react";
+import { Button, Popover } from 'antd';
+import React from 'react';
 
-import { InfoCircleOutlined } from "@ant-design/icons";
+import { InfoCircleOutlined } from '@ant-design/icons';
 
 export const Info = (props: {
   text: React.ReactElement;

diff --git a/js/packages/common/src/components/Input/numeric.tsx b/js/packages/common/src/components/Input/numeric.tsx
@@ -1,11 +1,11 @@
-import React from "react";
-import { Input } from "antd";
+import React from 'react';
+import { Input } from 'antd';
 
 export class NumericInput extends React.Component<any, any> {
   onChange = (e: any) => {
     const { value } = e.target;
     const reg = /^-?\d*(\.\d*)?$/;
-    if (reg.test(value) || value === "" || value === "-") {
+    if (reg.test(value) || value === '' || value === '-') {
       this.props.onChange(value);
     }
   };
@@ -17,14 +17,14 @@ export class NumericInput extends React.Component<any, any> {
     if (value === undefined || value === null) return;
     if (
       value.charAt &&
-      (value.charAt(value.length - 1) === "." || value === "-")
+      (value.charAt(value.length - 1) === '.' || value === '-')
     ) {
       valueTemp = value.slice(0, -1);
     }
-    if (value.startsWith && (value.startsWith(".") || value.startsWith("-."))) {
-      valueTemp = valueTemp.replace(".", "0.");
+    if (value.startsWith && (value.startsWith('.') || value.startsWith('-.'))) {
+      valueTemp = valueTemp.replace('.', '0.');
     }
-    if (valueTemp.replace) onChange?.(valueTemp.replace(/0*(\d+)/, "$1"));
+    if (valueTemp.replace) onChange?.(valueTemp.replace(/0*(\d+)/, '$1'));
     if (onBlur) {
       onBlur();
     }

diff --git a/js/packages/common/src/components/MetaplexOverlay/index.tsx b/js/packages/common/src/components/MetaplexOverlay/index.tsx
@@ -2,18 +2,21 @@ import React from 'react';
 import { Modal } from 'antd';
 
 export const MetaplexOverlay = (props: any) => {
+  const { children, ...rest } = props;
 
-  const { children, ...rest } = props
-
-  const content = <div style={{
-    display: "flex",
-    flexDirection: "column",
-    alignItems: "center",
-    pointerEvents: "auto",
-    justifyContent: "center"
-  }}>
-    {children}
-  </div>
+  const content = (
+    <div
+      style={{
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        pointerEvents: 'auto',
+        justifyContent: 'center',
+      }}
+    >
+      {children}
+    </div>
+  );
 
   return (
     <Modal

diff --git a/js/packages/common/src/components/Settings/index.tsx b/js/packages/common/src/components/Settings/index.tsx
@@ -1,17 +1,20 @@
-import React from 'react';
+import React, { useCallback } from 'react';
 import { Button, Select } from 'antd';
-import { useWallet } from '../../contexts/wallet';
+import { useWallet } from '@solana/wallet-adapter-react';
 import { ENDPOINTS, useConnectionConfig } from '../../contexts/connection';
-import { shortenAddress } from '../../utils';
+import { useWalletModal } from '../../contexts';
+import { notify, shortenAddress } from '../../utils';
 import { CopyOutlined } from '@ant-design/icons';
 
 export const Settings = ({
   additionalSettings,
 }: {
   additionalSettings?: JSX.Element;
 }) => {
-  const { connected, disconnect, select, wallet } = useWallet();
+  const { connected, disconnect, publicKey } = useWallet();
   const { endpoint, setEndpoint } = useConnectionConfig();
+  const { setVisible } = useWalletModal();
+  const open = useCallback(() => setVisible(true), [setVisible]);
 
   return (
     <>
@@ -31,26 +34,30 @@ export const Settings = ({
         {connected && (
           <>
             <span>Wallet:</span>
-            {wallet?.publicKey && (
+            {publicKey && (
               <Button
                 style={{ marginBottom: 5 }}
-                onClick={() =>
-                  navigator.clipboard.writeText(
-                    wallet.publicKey?.toBase58() || '',
-                  )
-                }
+                onClick={async () => {
+                  if (publicKey) {
+                    await navigator.clipboard.writeText(publicKey.toBase58());
+                    notify({
+                      message: 'Wallet update',
+                      description: 'Address copied to clipboard',
+                    });
+                  }
+                }}
               >
                 <CopyOutlined />
-                {shortenAddress(wallet?.publicKey.toBase58())}
+                {shortenAddress(publicKey.toBase58())}
               </Button>
             )}
 
-            <Button onClick={select} style={{ marginBottom: 5 }}>
+            <Button onClick={open} style={{ marginBottom: 5 }}>
               Change
             </Button>
             <Button
               type="primary"
-              onClick={disconnect}
+              onClick={() => disconnect().catch()}
               style={{ marginBottom: 5 }}
             >
               Disconnect