Dev Environment

Setting up the development environment, writing the smart contracts (programs), deploying on Solana’s testnet, and integrating the front-end.

Here's the full process:

Step 1: Set Up Development Environment

1.1 Install Rust and Solana CLI

To start, we need Rust (for writing Solana programs) and the Solana CLI (for interacting with the Solana blockchain).

Install Rust Run the following command to install Rust:
```
curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh
```
Add the nightly toolchain for Anchor (since it often requires a nightly version of Rust):
```
rustup default stable
rustup update
rustup install nightly
```
Install Solana CLI Install the Solana CLI using this command:
```
sh -c "$(curl -sSfL https://release.solana.com/stable/install)"
```
Confirm installation with:
```
solana --version
```

Set Solana to Devnet We'll use the Devnet for testing:

solana config set --url https://api.devnet.solana.com

1.2 Install Anchor Framework

Anchor is a framework for developing smart contracts on Solana.

Install Anchor using npm:
```
npm install -g @project-serum/anchor-cli
```
Confirm the installation with:
```
anchor --version
```

1.3 Set Up Your Project Directory

Now, create a new project directory with Anchor:

anchor init solana-marketplace
cd solana-marketplace

This initializes a basic Anchor project structure.

Step 2: Write and Deploy Smart Contracts (Solana Programs)

2.1 Define the Smart Contract Logic

Start by writing the core programs: review submission, token incentive system, and voting mechanism.

Navigate to the programs/solana-marketplace/src/lib.rs file.

An example of a review submission contract:

use anchor_lang::prelude::*;

declare_id!("YOUR_PROGRAM_ID");

#[program]
pub mod solana_marketplace {
    use super::*;

    // Submit a review
    pub fn submit_review(ctx: Context<SubmitReview>, review_text: String, rating: u8) -> Result<()> {
        let review = &mut ctx.accounts.review;
        review.reviewer = *ctx.accounts.user.key;
        review.business = *ctx.accounts.business.key;
        review.review_text = review_text;
        review.rating = rating;
        review.timestamp = Clock::get()?.unix_timestamp;
        Ok(())
    }
}

// Define the Review struct
#[account]
pub struct Review {
    pub reviewer: Pubkey,
    pub business: Pubkey,
    pub review_text: String,
    pub rating: u8,
    pub timestamp: i64,
}

#[derive(Accounts)]
pub struct SubmitReview<'info> {
    #[account(init, payer = user, space = 8 + Review::LEN)]
    pub review: Account<'info, Review>,
    #[account(mut)]
    pub user: Signer<'info>,
    #[account(mut)]
    pub business: AccountInfo<'info>,
    pub system_program: Program<'info, System>,
}

impl Review {
    const LEN: usize = 32 + 32 + 255 + 1 + 8;
}

2.2 Build and Test Your Program

Compile the smart contracts:

anchor build

This command compiles the Rust code into a Solana program.

2.3 Deploy the Program to Devnet

To deploy your program to the Solana Devnet:

First, make sure you have some Devnet SOL to pay for deployment:
```
solana airdrop 2
```
Deploy your Anchor program:
```
anchor deploy
```

Take note of the Program ID returned after deployment. Wel need this for interactions in our front-end.

Step 3: Set Up the Front-End (React with Solana Wallet Integration)

3.1 Initialize the React Project

In a separate directory, initialize a React project using:

npx create-react-app solana-marketplace-frontend
cd solana-marketplace-frontend

3.2 Install Solana Web3 and Wallet Adapter

Install the Solana libraries to interact with Solana programs from the front-end:

npm install @solana/web3.js @solana/wallet-adapter-react @solana/wallet-adapter-react-ui @solana/wallet-adapter-wallets @solana/wallet-adapter-phantom

3.3 Connect Wallet in React

Update our React app to integrate Phantom Wallet for transactions and interactions. Here’s an example setup in App.js:

import React, { useMemo } from 'react';
import {
  ConnectionProvider,
  WalletProvider
} from '@solana/wallet-adapter-react';
import {
  PhantomWalletAdapter
} from '@solana/wallet-adapter-wallets';
import { WalletModalProvider, WalletMultiButton } from '@solana/wallet-adapter-react-ui';
import { clusterApiUrl } from '@solana/web3.js';

require('@solana/wallet-adapter-react-ui/styles.css');

function App() {
  const network = clusterApiUrl('devnet');
  const wallets = useMemo(() => [new PhantomWalletAdapter()], []);

  return (
    <ConnectionProvider endpoint={network}>
      <WalletProvider wallets={wallets} autoConnect>
        <WalletModalProvider>
          <div>
            <h1>Solana Marketplace</h1>
            <WalletMultiButton />
          </div>
        </WalletModalProvider>
      </WalletProvider>
    </ConnectionProvider>
  );
}

export default App;

3.4 Connect Front-End to Your Deployed Program

Interactering with the deployed program from the front-end. First, we install the Anchor client for JavaScript:

npm install @project-serum/anchor

Add the following to interact with your smart contract:

import { Connection, PublicKey } from '@solana/web3.js';
import { Program, Provider, web3 } from '@project-serum/anchor';

const programId = new PublicKey("YOUR_PROGRAM_ID"); // Replace with your program ID
const network = clusterApiUrl('devnet');
const opts = { preflightCommitment: "processed" };

async function getProvider() {
  const connection = new Connection(network, opts.preflightCommitment);
  const provider = new Provider(connection, window.solana, opts.preflightCommitment);
  return provider;
}

async function submitReview(reviewText, rating, businessPublicKey) {
  const provider = await getProvider();
  const program = new Program(idl, programId, provider);

  try {
    await program.rpc.submitReview(reviewText, rating, {
      accounts: {
        review: web3.Keypair.generate().publicKey,
        user: provider.wallet.publicKey,
        business: businessPublicKey,
        systemProgram: web3.SystemProgram.programId,
      }
    });
    console.log('Review submitted');
  } catch (err) {
    console.error('Error submitting review:', err);
  }
}

This function allows us to call the submitReview method of your smart contract and pass in parameters such as the review text, rating, and business public key.

Step 4: Test and Deploy the MVP

4.1 Testing the Application

Wallet Connection: Open the React app and connect your Phantom wallet.
Submit Review: Call the submitReview function to submit reviews tied to real on-chain transactions.
Deploy to Devnet: Test the full flow on Solana's Devnet to ensure all interactions work as expected (i.e., submitting reviews, voting, rewarding tokens).

4.2 Mainnet Deployment (When Ready)

Once we have thoroughly tested the application on Devnet, we can deploy the contract to Solana Mainnet:

solana config set --url https://api.mainnet-beta.solana.com
anchor deploy

PreviousSolana Program Logic NextPage

Last updated 3 months ago