diff --git a/craco.config.ts b/craco.config.ts new file mode 100644 index 000000000..ecacb9441 --- /dev/null +++ b/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; diff --git a/package.json b/package.json index ed16a6fc6..1191022b9 100644 --- a/package.json +++ b/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" } } diff --git a/src/App.tsx b/src/App.tsx index e4c48a19c..01a3bbc63 100644 --- a/src/App.tsx +++ b/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,28 +41,30 @@ 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 = () => { @@ -73,13 +72,13 @@ const App = () => { const wallets = useMemo( () => [ - getPhantomWallet(), - getSlopeWallet(), - getSolflareWallet(), - getSolletWallet({ network }), - getSolletExtensionWallet({ network }) + new PhantomWalletAdapter(), + new SlopeWalletAdapter(), + new SolflareWalletAdapter({network}), + new SolletWalletAdapter({network}), + new SolletExtensionWalletAdapter({network}), ], - [] + [], ); return ( diff --git a/src/Home.tsx b/src/Home.tsx index 93bcf2b62..0113eed58 100644 --- a/src/Home.tsx +++ b/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(); 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 (
- {wallet && ( -

Wallet {shortenAddress(wallet.publicKey.toBase58() || "")}

- )} + {publicKey &&

Wallet {shortenAddress(publicKey.toBase58() || "")}

} - {wallet &&

Balance: {(balance || 0).toLocaleString()} SOL

} + {publicKey &&

Balance: {(balance || 0).toLocaleString()} SOL

} - {wallet &&

Total Available: {itemsAvailable}

} + {publicKey &&

Total Available: {itemsAvailable}

} - {wallet &&

Redeemed: {itemsRedeemed}

} + {publicKey &&

Redeemed: {itemsRedeemed}

} - {wallet &&

Remaining: {itemsRemaining}

} + {publicKey &&

Remaining: {itemsRemaining}

} - {!wallet ? ( - Connect Wallet + {!publicKey ? ( + { + if ( + wallet?.adapter.name === SolanaMobileWalletAdapterWalletName + ) { + connect(); + e.preventDefault(); + } + }} + > + Connect Wallet + ) : ( =5.1.0, safe-buffer@^5.0.1, safe-buffer@^5.1.0, safe-buffer@^5.1.1, resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.2.1.tgz#1eaf9fa9bdb1fdd4ec75f58f9cdb4e6b7827eec6" integrity sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ== -safe-json-utils@^1.1.1: - version "1.1.1" - resolved "https://registry.yarnpkg.com/safe-json-utils/-/safe-json-utils-1.1.1.tgz#0e883874467d95ab914c3f511096b89bfb3e63b1" - integrity sha512-SAJWGKDs50tAbiDXLf89PDwt9XYkWyANFWVzn4dTXl5QyI8t2o/bW5/OJl3lvc2WVU4MEpTo9Yz5NVFNsp+OJQ== - safe-regex@^1.1.0: version "1.1.0" resolved "https://registry.yarnpkg.com/safe-regex/-/safe-regex-1.1.0.tgz#40a3669f3b077d1e943d44629e157dd48023bf2e" @@ -10830,20 +11033,6 @@ schema-utils@^3.0.0: ajv "^6.12.5" ajv-keywords "^3.5.2" -secp256k1@^3.8.0: - version "3.8.0" - resolved "https://registry.yarnpkg.com/secp256k1/-/secp256k1-3.8.0.tgz#28f59f4b01dbee9575f56a47034b7d2e3b3b352d" - integrity sha512-k5ke5avRZbtl9Tqx/SA7CbY3NF6Ro+Sj9cZxezFzuBlLDmyqPiL8hJJ+EmzD8Ig4LUDByHJ3/iPOVoRixs/hmw== - dependencies: - bindings "^1.5.0" - bip66 "^1.1.5" - bn.js "^4.11.8" - create-hash "^1.2.0" - drbg.js "^1.0.1" - elliptic "^6.5.2" - nan "^2.14.0" - safe-buffer "^5.1.2" - secp256k1@^4.0.2: version "4.0.2" resolved "https://registry.yarnpkg.com/secp256k1/-/secp256k1-4.0.2.tgz#15dd57d0f0b9fdb54ac1fa1694f40e5e9a54f4a1" @@ -10892,13 +11081,6 @@ semver@^7.2.1, semver@^7.3.2: dependencies: lru-cache "^6.0.0" -semver@^7.3.5: - version "7.3.5" - resolved "https://registry.yarnpkg.com/semver/-/semver-7.3.5.tgz#0b621c879348d8998e4b0e4be94b3f12e6018ef7" - integrity sha512-PoeGJYh8HK4BTO/a9Tf6ZG3veo/A7ZVsYrSA6J8ny9nb3B1VrpkuN+z9OE5wfE5p6H4LchYZsegiQgbJD94ZFQ== - dependencies: - lru-cache "^6.0.0" - send@0.17.1: version "0.17.1" resolved "https://registry.yarnpkg.com/send/-/send-0.17.1.tgz#c1d8b059f7900f7466dd4938bdc44e11ddb376c8" @@ -11180,7 +11362,7 @@ source-map@0.6.1, source-map@^0.6.0, source-map@^0.6.1, source-map@~0.6.0, sourc resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263" integrity sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g== -source-map@^0.5.0, source-map@^0.5.6: +source-map@^0.5.0, source-map@^0.5.6, source-map@^0.5.7: version "0.5.7" resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.7.tgz#8a039d2d1021d22d1ea14c80d8ea468ba2ef3fcc" integrity sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w= @@ -11534,6 +11716,11 @@ stylehacks@^4.0.0: postcss "^7.0.0" postcss-selector-parser "^3.0.0" +stylis@4.0.13: + version "4.0.13" + resolved "https://registry.yarnpkg.com/stylis/-/stylis-4.0.13.tgz#f5db332e376d13cc84ecfe5dace9a2a51d954c91" + integrity sha512-xGPXiFVl4YED9Jh7Euv2V220mriG9u4B2TA6Ybjc1catrstKD2PpIdU3U0RKpkVBC2EhmL/F0sPCr9vrFTNRag== + superstruct@^0.14.2: version "0.14.2" resolved "https://registry.yarnpkg.com/superstruct/-/superstruct-0.14.2.tgz#0dbcdf3d83676588828f1cf5ed35cda02f59025b" @@ -11568,6 +11755,11 @@ supports-hyperlinks@^2.0.0: has-flag "^4.0.0" supports-color "^7.0.0" +supports-preserve-symlinks-flag@^1.0.0: + version "1.0.0" + resolved "https://registry.yarnpkg.com/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz#6eda4bd344a3c94aea376d4cc31bc77311039e09" + integrity sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w== + svg-parser@^2.0.2: version "2.0.4" resolved "https://registry.yarnpkg.com/svg-parser/-/svg-parser-2.0.4.tgz#fdc2e29e13951736140b76cb122c8ee6630eb6b5" @@ -11748,11 +11940,6 @@ timsort@^0.3.0: resolved "https://registry.yarnpkg.com/timsort/-/timsort-0.3.0.tgz#405411a8e7e6339fe64db9a234de11dc31e02bd4" integrity sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q= -tiny-warning@^1.0.2: - version "1.0.3" - resolved "https://registry.yarnpkg.com/tiny-warning/-/tiny-warning-1.0.3.tgz#94a30db453df4c643d0fd566060d60a875d84754" - integrity sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA== - tmpl@1.0.x: version "1.0.4" resolved "https://registry.yarnpkg.com/tmpl/-/tmpl-1.0.4.tgz#23640dd7b42d00433911140820e5cf440e521dd1" @@ -11849,6 +12036,25 @@ tryer@^1.0.1: resolved "https://registry.yarnpkg.com/tryer/-/tryer-1.0.1.tgz#f2c85406800b9b0f74c9f7465b81eaad241252f8" integrity sha512-c3zayb8/kWWpycWYg87P71E1S1ZL6b6IJxfb5fvsUgsf0S2MVGaDhDXXjDMpdCpfWXqptc+4mXwmiy1ypXqRAA== +ts-node@^10.7.0: + version "10.9.1" + resolved "https://registry.yarnpkg.com/ts-node/-/ts-node-10.9.1.tgz#e73de9102958af9e1f0b168a6ff320e25adcff4b" + integrity sha512-NtVysVPkxxrwFGUUxGYhfux8k78pQB3JqYBXlLRZgdGUqTO5wU/UyHop5p70iEbGhB7q5KmiZiU0Y3KlJrScEw== + dependencies: + "@cspotcode/source-map-support" "^0.8.0" + "@tsconfig/node10" "^1.0.7" + "@tsconfig/node12" "^1.0.7" + "@tsconfig/node14" "^1.0.0" + "@tsconfig/node16" "^1.0.2" + acorn "^8.4.1" + acorn-walk "^8.1.1" + arg "^4.1.0" + create-require "^1.1.0" + diff "^4.0.1" + make-error "^1.1.1" + v8-compile-cache-lib "^3.0.1" + yn "3.1.1" + ts-pnp@1.2.0, ts-pnp@^1.1.6: version "1.2.0" resolved "https://registry.yarnpkg.com/ts-pnp/-/ts-pnp-1.2.0.tgz#a500ad084b0798f1c3071af391e65912c86bca92" @@ -12175,11 +12381,16 @@ uuid@^3.3.2, uuid@^3.4.0: resolved "https://registry.yarnpkg.com/uuid/-/uuid-3.4.0.tgz#b23e4358afa8a202fe7a100af1f5f883f02007ee" integrity sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A== -uuid@^8.3.0: +uuid@^8.3.0, uuid@^8.3.2: version "8.3.2" resolved "https://registry.yarnpkg.com/uuid/-/uuid-8.3.2.tgz#80d5b5ced271bb9af6c445f21a1a04c606cefbe2" integrity sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg== +v8-compile-cache-lib@^3.0.1: + version "3.0.1" + resolved "https://registry.yarnpkg.com/v8-compile-cache-lib/-/v8-compile-cache-lib-3.0.1.tgz#6336e8d71965cb3d35a1bbb7868445a7c05264bf" + integrity sha512-wa7YjyUGfNZngI/vtK0UHAN+lgDCxBPCylVXGp0zu59Fz5aiGtNXaq3DhIov063MorB+VfufLh3JlF2KdTK3xg== + v8-compile-cache@^2.0.3: version "2.2.0" resolved "https://registry.yarnpkg.com/v8-compile-cache/-/v8-compile-cache-2.2.0.tgz#9471efa3ef9128d2f7c6a7ca39c4dd6b5055b132" @@ -12360,6 +12571,13 @@ webpack-manifest-plugin@2.2.0: object.entries "^1.1.0" tapable "^1.0.0" +webpack-merge@^4.2.2: + version "4.2.2" + resolved "https://registry.yarnpkg.com/webpack-merge/-/webpack-merge-4.2.2.tgz#a27c52ea783d1398afd2087f547d7b9d2f43634d" + integrity sha512-TUE1UGoTX2Cd42j3krGYqObZbOD+xF7u28WB7tfUordytSjbWTIjK/8V0amkBfTYN4/pB/GIDlJZZ657BGG19g== + dependencies: + lodash "^4.17.15" + webpack-sources@^1.1.0, webpack-sources@^1.3.0, webpack-sources@^1.4.0, webpack-sources@^1.4.1, webpack-sources@^1.4.3: version "1.4.3" resolved "https://registry.yarnpkg.com/webpack-sources/-/webpack-sources-1.4.3.tgz#eedd8ec0b928fbf1cbfe994e22d2d890f330a933" @@ -12681,11 +12899,16 @@ ws@^7.2.3: resolved "https://registry.yarnpkg.com/ws/-/ws-7.4.3.tgz#1f9643de34a543b8edb124bdcbc457ae55a6e5cd" integrity sha512-hr6vCR76GsossIRsr8OLR9acVVm1jyfEWvhbNjtgPOrfvAlKzvyeg/P6r8RuDjRyrcQoPQT7K0DGEPc7Ae6jzA== -ws@^7.4.0, ws@^7.4.5: +ws@^7.4.5: version "7.5.5" resolved "https://registry.yarnpkg.com/ws/-/ws-7.5.5.tgz#8b4bc4af518cfabd0473ae4f99144287b33eb881" integrity sha512-BAkMFcAzl8as1G/hArkxOxq3G7pjUqQ3gzYbLL0/5zNkph70e+lCoxBGnm6AW1+/aiNeV4fnKqZ8m4GZewmH2w== +ws@^8.5.0: + version "8.9.0" + resolved "https://registry.yarnpkg.com/ws/-/ws-8.9.0.tgz#2a994bb67144be1b53fe2d23c53c028adeb7f45e" + integrity sha512-Ja7nszREasGaYUYCI2k4lCKIRTt+y7XuqVoHR44YpI49TtryyqbqvDMn5eqfW7e6HzTukDRIsXqzVHScqRcafg== + xml-name-validator@^3.0.0: version "3.0.0" resolved "https://registry.yarnpkg.com/xml-name-validator/-/xml-name-validator-3.0.0.tgz#6ae73e06de4d8c6e47f9fb181f78d648ad457c6a" @@ -12770,6 +12993,11 @@ yargs@^15.4.1: y18n "^4.0.0" yargs-parser "^18.1.2" +yn@3.1.1: + version "3.1.1" + resolved "https://registry.yarnpkg.com/yn/-/yn-3.1.1.tgz#1e87401a09d767c1d5eab26a6e4c185182d2eb50" + integrity sha512-Ux4ygGWsu2c7isFWe8Yu1YluJmqVhxqK2cLXNQA5AcC3QfbGNpM7fu0Y8b/z16pXLnFxZYvWhd3fhBY9DLmC6Q== + yocto-queue@^0.1.0: version "0.1.0" resolved "https://registry.yarnpkg.com/yocto-queue/-/yocto-queue-0.1.0.tgz#0294eb3dee05028d31ee1a5fa2c556a6aaf10a1b"