Upgrade @solana/wallet-adapter-react for compatibility with Mobile Wallet Adapter and the Wallet Standard

craco.config.ts

@@ -0,0 +1,10 @@
+const config = {
+  babel: {
+    plugins: [
+      "@babel/plugin-proposal-nullish-coalescing-operator",
+      "@babel/plugin-proposal-optional-chaining",
+      "@babel/plugin-transform-shorthand-properties",
+    ],
+  },
+};
+export default config;

package.json

@@ -3,16 +3,21 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@material-ui/core": "^4.12.3",
-    "@material-ui/icons": "^4.11.2",
-    "@material-ui/lab": "^4.0.0-alpha.60",
+    "@craco/craco": "^6.4.5",
+    "@mui/icons-material": "^5.10.9",
+    "@mui/lab": "^5.0.0-alpha.104",
+    "@mui/material": "^5.10.10",
     "@project-serum/anchor": "^0.14.0",
     "@solana/spl-token": "^0.1.8",
-    "@solana/wallet-adapter-base": "^0.5.2",
-    "@solana/wallet-adapter-material-ui": "^0.11.0",
-    "@solana/wallet-adapter-react": "^0.11.0",
-    "@solana/wallet-adapter-wallets": "^0.9.0",
-    "@solana/web3.js": "^1.27.0",
+    "@solana/wallet-adapter-base": "^0.9.18",
+    "@solana/wallet-adapter-material-ui": "^0.16.17-rc.2",
+    "@solana/wallet-adapter-phantom": "^0.9.17",
+    "@solana/wallet-adapter-react": "^0.15.21-rc.3",
+    "@solana/wallet-adapter-slope": "^0.5.16",
+    "@solana/wallet-adapter-solflare": "^0.6.18",
+    "@solana/wallet-adapter-sollet": "^0.11.12",
+    "@solana/web3.js": "^1.58.0",
+    "@solana-mobile/wallet-adapter-mobile": "^0.9.7",
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.10",
@@ -29,10 +34,10 @@
     "web-vitals": "^1.0.1"
   },
   "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject"
+    "start": "craco start",
+    "build": "craco build",
+    "test": "craco test",
+    "eject": "craco eject"
   },
   "eslintConfig": {
     "extends": [
@@ -53,6 +58,11 @@
     ]
   },
   "devDependencies": {
+    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.18.6",
+    "@babel/plugin-proposal-optional-chaining": "^7.18.9",
+    "@babel/plugin-transform-shorthand-properties": "^7.18.6",
+    "@emotion/react": "^11.10.4",
+    "@emotion/styled": "^11.10.4",
     "@types/styled-components": "^5.1.14"
   }
 }

src/App.tsx

@@ -6,21 +6,18 @@ import Home from "./Home";
 import * as anchor from "@project-serum/anchor";
 import { clusterApiUrl } from "@solana/web3.js";
 import { WalletAdapterNetwork } from "@solana/wallet-adapter-base";
-import {
-  getPhantomWallet,
-  getSlopeWallet,
-  getSolflareWallet,
-  getSolletWallet,
-  getSolletExtensionWallet,
-} from "@solana/wallet-adapter-wallets";
 
 import {
   ConnectionProvider,
   WalletProvider,
 } from "@solana/wallet-adapter-react";
 
+import { createTheme, ThemeProvider } from "@mui/material";
 import { WalletDialogProvider } from "@solana/wallet-adapter-material-ui";
-import { createTheme, ThemeProvider } from "@material-ui/core";
+import { PhantomWalletAdapter } from "@solana/wallet-adapter-phantom";
+import { SlopeWalletAdapter } from "@solana/wallet-adapter-slope";
+import { SolflareWalletAdapter } from "@solana/wallet-adapter-solflare";
+import { SolletWalletAdapter, SolletExtensionWalletAdapter } from "@solana/wallet-adapter-sollet";
 
 const treasury = new anchor.web3.PublicKey(
   process.env.REACT_APP_TREASURY_ADDRESS!
@@ -44,42 +41,44 @@ const startDateSeed = parseInt(process.env.REACT_APP_CANDY_START_DATE!, 10);
 const txTimeout = 30000; // milliseconds (confirm this works for your project)
 
 const theme = createTheme({
-    palette: {
-        type: 'dark',
+  palette: {
+    mode: "dark",
+  },
+  components: {
+    MuiButtonBase: {
+      styleOverrides: {
+        root: { justifyContent: "flex-start" },
+      },
     },
-    overrides: {
-        MuiButtonBase: {
-            root: {
-                justifyContent: 'flex-start',
-            },
+    MuiButton: {
+      styleOverrides: {
+        root: {
+          textTransform: undefined,
+          padding: "12px 16px",
+        },
+        startIcon: {
+          marginRight: 8,
         },
-        MuiButton: {
-            root: {
-                textTransform: undefined,
-                padding: '12px 16px',
-            },
-            startIcon: {
-                marginRight: 8,
-            },
-            endIcon: {
-                marginLeft: 8,
-            },
+        endIcon: {
+          marginLeft: 8,
         },
+      },
     },
+  },
 });
 
 const App = () => {
   const endpoint = useMemo(() => clusterApiUrl(network), []);
 
   const wallets = useMemo(
     () => [
-        getPhantomWallet(),
-        getSlopeWallet(),
-        getSolflareWallet(),
-        getSolletWallet({ network }),
-        getSolletExtensionWallet({ network })
+      new PhantomWalletAdapter(),
+      new SlopeWalletAdapter(),
+      new SolflareWalletAdapter({network}),
+      new SolletWalletAdapter({network}),
+      new SolletExtensionWalletAdapter({network}),
     ],
-    []
+    [],
   );
 
   return (

src/Home.tsx

@@ -1,15 +1,16 @@
 import { useEffect, useState } from "react";
 import styled from "styled-components";
 import Countdown from "react-countdown";
-import { Button, CircularProgress, Snackbar } from "@material-ui/core";
-import Alert from "@material-ui/lab/Alert";
+import { Button, CircularProgress, Snackbar } from "@mui/material";
+import Alert from "@mui/lab/Alert";
 
 import * as anchor from "@project-serum/anchor";
 
 import { LAMPORTS_PER_SOL } from "@solana/web3.js";
 
-import { useAnchorWallet } from "@solana/wallet-adapter-react";
+import { useAnchorWallet, useWallet } from "@solana/wallet-adapter-react";
 import { WalletDialogButton } from "@solana/wallet-adapter-material-ui";
+import { SolanaMobileWalletAdapterWalletName } from "@solana-mobile/wallet-adapter-mobile";
 
 import {
   CandyMachine,
@@ -54,12 +55,14 @@ const Home = (props: HomeProps) => {
 
   const [startDate, setStartDate] = useState(new Date(props.startDate));
 
-  const wallet = useAnchorWallet();
+  const anchorWallet = useAnchorWallet();
+  const { connect, publicKey, wallet } = useWallet();
+
   const [candyMachine, setCandyMachine] = useState<CandyMachine>();
 
   const refreshCandyMachineState = () => {
     (async () => {
-      if (!wallet) return;
+      if (!anchorWallet) return;
 
       const {
         candyMachine,
@@ -68,7 +71,7 @@ const Home = (props: HomeProps) => {
         itemsRemaining,
         itemsRedeemed,
       } = await getCandyMachineState(
-        wallet as anchor.Wallet,
+        anchorWallet as anchor.Wallet,
         props.candyMachineId,
         props.connection
       );
@@ -86,11 +89,11 @@ const Home = (props: HomeProps) => {
   const onMint = async () => {
     try {
       setIsMinting(true);
-      if (wallet && candyMachine?.program) {
+      if (publicKey && candyMachine?.program) {
         const mintTxId = await mintOneToken(
           candyMachine,
           props.config,
-          wallet.publicKey,
+          publicKey,
           props.treasury
         );
 
@@ -141,8 +144,8 @@ const Home = (props: HomeProps) => {
         severity: "error",
       });
     } finally {
-      if (wallet) {
-        const balance = await props.connection.getBalance(wallet.publicKey);
+      if (publicKey) {
+        const balance = await props.connection.getBalance(publicKey);
         setBalance(balance / LAMPORTS_PER_SOL);
       }
       setIsMinting(false);
@@ -152,36 +155,45 @@ const Home = (props: HomeProps) => {
 
   useEffect(() => {
     (async () => {
-      if (wallet) {
-        const balance = await props.connection.getBalance(wallet.publicKey);
+      if (publicKey) {
+        const balance = await props.connection.getBalance(publicKey);
         setBalance(balance / LAMPORTS_PER_SOL);
       }
     })();
-  }, [wallet, props.connection]);
+  }, [publicKey, props.connection]);
 
   useEffect(refreshCandyMachineState, [
-    wallet,
+    anchorWallet,
     props.candyMachineId,
     props.connection,
   ]);
 
   return (
     <main>
-      {wallet && (
-        <p>Wallet {shortenAddress(wallet.publicKey.toBase58() || "")}</p>
-      )}
+      {publicKey && <p>Wallet {shortenAddress(publicKey.toBase58() || "")}</p>}
 
-      {wallet && <p>Balance: {(balance || 0).toLocaleString()} SOL</p>}
+      {publicKey && <p>Balance: {(balance || 0).toLocaleString()} SOL</p>}
 
-      {wallet && <p>Total Available: {itemsAvailable}</p>}
+      {publicKey && <p>Total Available: {itemsAvailable}</p>}
 
-      {wallet && <p>Redeemed: {itemsRedeemed}</p>}
+      {publicKey && <p>Redeemed: {itemsRedeemed}</p>}
 
-      {wallet && <p>Remaining: {itemsRemaining}</p>}
+      {publicKey && <p>Remaining: {itemsRemaining}</p>}
 
       <MintContainer>
-        {!wallet ? (
-          <ConnectButton>Connect Wallet</ConnectButton>
+        {!publicKey ? (
+          <ConnectButton
+            onClick={(e) => {
+              if (
+                wallet?.adapter.name === SolanaMobileWalletAdapterWalletName
+              ) {
+                connect();
+                e.preventDefault();
+              }
+            }}
+          >
+            Connect Wallet
+          </ConnectButton>
         ) : (
           <MintButton
             disabled={isSoldOut || isMinting || !isActive}