Skip to content

halaprix/shapes-mint-page-cm-v2

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

23 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Candy Machine V2 - Template

by Halaprix.
Live preview here
1click deploy:

Deploy with Vercel

Imgur

Installation

  1. Prerequisities:

    • node.js
    • yarn - npm add -g yarn (run as root / su eg. sudo npm add -g yarn)
  2. Clone the repository:

    git clone https://github.com/halaprix/shapes-mint-page-cm-v2

    cd shapes-mint-page-cm-v2

  3. use yarn to install all dependencies:

    yarn install

  4. Fill .env-example with your Candy Machine details (can be found in .json file in .cache directory, after CM upload). Rename the file to .env.

  5. Run yarn start to start the developement server.

    yarn start

  6. If you are using traditional hosting, run yarn build and uplaod contents of the build folder to your hostings public_html

  7. (Optional) - If deploying to Vercel, use the ENV VARIABLES from .env file here or use one click prefilled deploy:
    Deploy with Vercel


Example configuration

Devnet:

- REACT_APP_SOLANA_NETWORK=devnet
- REACT_APP_SOLANA_RPC_HOST=https://psytrbhymqlkfrhudd.dev.genesysgo.net:8899/

Mainnet-beta:

- REACT_APP_SOLANA_NETWORK=mainnet-beta
- REACT_APP_SOLANA_RPC_HOST=https://ssc-dao.genesysgo.net/

Styling

Favicon, Phantom styling - index.html

  • Use this generator to generate favicons, metadata and images, to be put to /public.

Buttons - /src/MintButton.tsx and src/Home.tsx

  • Change the style of the buttons in styled components. background: linear-gradient(29deg, #34342F 0%, #44C3A1 100%); is reponsible for the button gradient.

Images - /public

  • /public/logo.png is the top logo
  • /public/animation.gif is the middle container image.

Styles - /src/index.css

  • Change the styles of the website. background: linear-gradient(29deg, #34342f 0%, #5ff1cb 50%, #44c3a1 100%); is the background gradient. You can generate the gradient using this generator
  • change the Paper style (the three containers) in /src/Home.tsx :
    const StyledPaper = styled(Paper)`
    padding: 24px;
    background-color: #34342f;
    border-radius: 6px;
    margin: 10px;
    `;