upgraded wallets list (added ledge + safepal) + cleaned App.css file

Author: Andréas Brey

.env.example

@@ -2,9 +2,12 @@ REACT_APP_CANDY_MACHINE_ID=__PLACEHOLDER__
 REACT_APP_SOLANA_NETWORK=devnet
 REACT_APP_SOLANA_RPC_HOST=https://api.devnet.solana.com
 
-# Params to set if Spl-Token to mint is enabled
+
+# Params to set if using custom Spl-Token to mint
 # Spl-Token symbol to display next the price
+
 REACT_APP_SPL_TOKEN_NAME=
 
 # Spl-token decimals place defined on creation (default is 9)
+
 REACT_APP_SPL_TOKEN_DECIMALS=

CHANGELOG.md

@@ -1,3 +1,19 @@
+**31 Jan 2022**
+
+REQUIRE A YARN INSTALL
+
+Upgraded wallets list. Supported wallets are :
+
+- Phantom
+- Slope
+- Solflare
+- Solflare Web
+- Sollet
+- Sollet Extension
+- Solong
+- Ledger
+- SafePal
+
 **25 Jan 2022**
 
 Fixed MINTING using spl-token functionality :

README.md

@@ -5,7 +5,9 @@ But that's not all, I share with you a **Prod-ready Responsive UI** which can be
 
 ![Candy Machine Preview Image](https://i.imgur.com/WWSvkBO.png)
 
-I did this in a few hours, and didn't have the time to make it fully ReactJs best practices compliant. So please be kind :)
+### Supported Wallets
+
+![Supported Wallets](https://i.ibb.co/DC6Wt66/wallets.png)
 
 For instructions on how to set up a V2 candy machine, please refer to Metaplex's documentation [here](https://docs.metaplex.com/candy-machine-v2/Introduction)
 
@@ -60,7 +62,7 @@ REACT_APP_SOLANA_RPC_HOST=https://api.devnet.solana.com
 This identifies the RPC server your web app will access the Solana network through.
 
 
-If you are using a SPL Token to MINT, you have two additional environment parameters to set :
+If you are using a custom SPL Token to MINT, you have two additional environment parameters to set :
 
 
 ```

package.json

@@ -11,11 +11,10 @@
     "@material-ui/lab": "^4.0.0-alpha.60",
     "@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.14.0",
-    "@solana/wallet-adapter-react": "^0.11.0",
-    "@solana/wallet-adapter-react-ui": "^0.8.0",
-    "@solana/wallet-adapter-wallets": "^0.9.0",
+    "@solana/wallet-adapter-base": "^0.7.1",
+    "@solana/wallet-adapter-react": "^0.13.1",
+    "@solana/wallet-adapter-react-ui": "^0.6.1",
+    "@solana/wallet-adapter-wallets": "^0.11.3",
     "@solana/web3.js": "^1.32.0",
     "@testing-library/dom": ">=7.21.4",
     "@testing-library/jest-dom": "^5.11.4",

src/App.css

@@ -21,32 +21,5 @@ h3{
 font-weight: normal;
 }
 
-.MuiFab-extended{
-  height: auto;
-  padding-right: 0 !important;
-}
-
-.MuiFab-label{
-  font-weight: bold;
-}
-
-.MuiPaper-root{
-  background-color: var(--card-background-color) !important;
-}
-
-.MuiButton-containedPrimary:not(.MuiButton-fullWidth){
-  border-radius: 24px !important;
-  padding: 6px 16px;
-}
-
-.MuiButton-label{
-  font-size: 1.2em;
-}
 
-.MuiLinearProgress-colorPrimary{
-  background-color:var(--main-text-color) !important;
-}
 
-.MuiLinearProgress-barColorPrimary{
-  background-color:var(--title-text-color) !important;
-}

src/App.tsx

@@ -1,24 +1,33 @@
-import "./App.css";
-import Home from "./Home";
+import { createTheme, ThemeProvider } from "@material-ui/core";
 import { useMemo } from "react";
+import {
+    ConnectionProvider,
+    WalletProvider,
+} from "@solana/wallet-adapter-react";
 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,
+    getPhantomWallet,
+    getSlopeWallet,
+    getSolflareWallet,
+    getSolflareWebWallet,
+    getSolletWallet,
+    getSolletExtensionWallet,
+    getSolongWallet,
+    getLedgerWallet,
+    getSafePalWallet,
 } from "@solana/wallet-adapter-wallets";
 
 import {
-  ConnectionProvider,
-  WalletProvider,
-} from "@solana/wallet-adapter-react";
+    WalletModalProvider
+} from '@solana/wallet-adapter-react-ui';
+
+import "./App.css";
+import Home from "./Home";
+
+require('@solana/wallet-adapter-react-ui/styles.css');
 
-import { WalletDialogProvider } from "@solana/wallet-adapter-material-ui";
-import { createTheme, ThemeProvider } from "@material-ui/core";
 
 const candyMachineId = new anchor.web3.PublicKey(
   process.env.REACT_APP_CANDY_MACHINE_ID!
@@ -57,31 +66,39 @@ const theme = createTheme({
 });
 
 const App = () => {
+    // Custom RPC endpoint.
   const endpoint = useMemo(() => clusterApiUrl(network), []);
 
-  const wallets = useMemo(
-    () => [
-        getPhantomWallet(),
-        getSlopeWallet(),
-        getSolflareWallet(),
-        getSolletWallet({ network }),
-        getSolletExtensionWallet({ network })
-    ],
-    []
-  );
+    // @solana/wallet-adapter-wallets includes all the adapters but supports tree shaking and lazy loading --
+    // Only the wallets you configure here will be compiled into your application, and only the dependencies
+    // of wallets that your users connect to will be loaded.
+    const wallets = useMemo(
+        () => [
+            getPhantomWallet(),
+            getSlopeWallet(),
+            getSolflareWallet(),
+            getSolflareWebWallet(),
+            getSolletWallet({ network }),
+            getSolletExtensionWallet({ network }),
+            getSolongWallet(),
+            getLedgerWallet(),
+            getSafePalWallet(),
+        ],
+        []
+    );
 
   return (
       <ThemeProvider theme={theme}>
         <ConnectionProvider endpoint={endpoint}>
           <WalletProvider wallets={wallets} autoConnect={true}>
-            <WalletDialogProvider>
+            <WalletModalProvider>
               <Home
                 candyMachineId={candyMachineId}
                 connection={connection}
                 txTimeout={txTimeout}
                 rpcHost={rpcHost}
               />
-            </WalletDialogProvider>
+            </WalletModalProvider>
           </WalletProvider>
         </ConnectionProvider>
       </ThemeProvider>

src/Home.tsx

@@ -4,7 +4,7 @@ import confetti from "canvas-confetti";
 import * as anchor from "@project-serum/anchor";
 import {LAMPORTS_PER_SOL, PublicKey} from "@solana/web3.js";
 import {useAnchorWallet} from "@solana/wallet-adapter-react";
-import {WalletMultiButton} from "@solana/wallet-adapter-material-ui";
+import {WalletMultiButton} from "@solana/wallet-adapter-react-ui";
 import {GatewayProvider} from '@civic/solana-gateway-react';
 import Countdown from "react-countdown";
 import {Snackbar, Paper, LinearProgress, Chip} from "@material-ui/core";
@@ -29,10 +29,52 @@ const WalletContainer = styled.div`
   flex-wrap: wrap;
   justify-content: center;
 `;
+
+const WalletAmount = styled.div`
+  color: black;
+  width: auto;
+  padding: 5px 5px 5px 16px;
+  min-width: 48px;
+  min-height: auto;
+  border-radius: 22px;
+  background-color: var(--main-text-color);
+  box-shadow: 0px 3px 5px -1px rgb(0 0 0 / 20%), 0px 6px 10px 0px rgb(0 0 0 / 14%), 0px 1px 18px 0px rgb(0 0 0 / 12%);
+  box-sizing: border-box;
+  transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, border 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+  font-weight: 500;
+  line-height: 1.75;
+  text-transform: uppercase;
+  border: 0;
+  margin: 0;
+  display: inline-flex;
+  outline: 0;
+  position: relative;
+  align-items: center;
+  user-select: none;
+  vertical-align: middle;
+  justify-content: flex-start;
+  gap: 10px;
+`;
+
+const Wallet = styled.ul`
+  flex: 0 0 auto;
+  margin: 0;
+  padding: 0;
+`;
+
+const ConnectButton = styled(WalletMultiButton)`
+  border-radius: 18px !important;
+  padding: 6px 16px;
+  background-color: #4E44CE;
+  margin: 0 auto;
+`;
+
 const NFT = styled(Paper)`
   min-width: 400px;
   padding: 5px 20px 20px 20px;
   flex: 1 1 auto;
+  background-color: var(--card-background-color) !important;
+
 `;
 const Des = styled(NFT)`
   text-align: left;
@@ -71,36 +113,6 @@ const MintButtonContainer = styled.div`
   }
 `;
 
-const WalletAmount = styled.div`
-  color: black;
-  width: auto;
-  height: 48px;
-  padding: 0 5px 0 16px;
-  min-width: 48px;
-  min-height: auto;
-  border-radius: 24px;
-  background-color: var(--main-text-color);
-  box-shadow: 0px 3px 5px -1px rgb(0 0 0 / 20%), 0px 6px 10px 0px rgb(0 0 0 / 14%), 0px 1px 18px 0px rgb(0 0 0 / 12%);
-  box-sizing: border-box;
-  transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, border 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-  font-weight: 500;
-  line-height: 1.75;
-  text-transform: uppercase;
-  border: 0;
-  margin: 0;
-  display: inline-flex;
-  outline: 0;
-  position: relative;
-  align-items: center;
-  user-select: none;
-  vertical-align: middle;
-  justify-content: flex-start;
-  gap: 10px;
-
-`;
-
-const ConnectButton = styled(WalletMultiButton)`
-`;
 const Logo = styled.div`
   flex: 0 0 auto;
 
@@ -157,11 +169,6 @@ const SolExplorerLink = styled.a`
   }
 `;
 
-const Wallet = styled.ul`
-  flex: 0 0 auto;
-  margin: 0;
-  padding: 0;
-`;
 const MainContainer = styled.div`
   display: flex;
   flex-direction: column;
@@ -208,6 +215,12 @@ const BorderLinearProgress = styled(LinearProgress)`
   border-radius: 30px;
   border: 2px solid white;
   box-shadow: 5px 5px 40px 5px rgba(0,0,0,0.5);
+  background-color:var(--main-text-color) !important;
+  
+  > div.MuiLinearProgress-barColorPrimary{
+    background-color:var(--title-text-color) !important;
+  }
+
   > div.MuiLinearProgress-bar1Determinate {
     border-radius: 30px !important;
     background-image: linear-gradient(270deg, rgba(255, 255, 255, 0.01), rgba(255, 255, 255, 0.5));

src/MintButton.tsx

@@ -10,7 +10,8 @@ export const CTAButton = styled(Button)`
   display: block !important;
   margin: 0 auto !important;
   background-color: var(--title-text-color) !important;
-  font-size: 1.2em;
+  min-width: 120px !important;
+  font-size: 1em !important;
 `;
 
 export const MintButton = ({