Lotso Coins - Leading the PvP Mode

Last Modified: 2024-04-22
Author: Phill Weston

Introduction

Lotso Coins is a decentralized platform for non-fungible tokens (NFTs), where users can buy, sell, and trade unique digital assets. Our platform operates on the Base blockchain, utilizing its capabilities to ensure secure ownership and provenance of NFTs through smart contracts. Users have the opportunity to connect their digital wallets to the platform, exploring a diverse collection of NFTs across various categories such as art, collectibles, and virtual real estate. Additionally, Lotso Coins provides a marketplace for creators to showcase and monetize their digital creations. By embracing the world of NFTs, Lotso Coins aims to empower artists, collectors, and enthusiasts, fostering creativity and innovation in the digital realm.

Co-Branding with Disney: We are proud to announce our collaboration with Disney, bringing beloved characters and iconic moments to the world of NFTs. Stay tuned for exclusive Disney-themed NFT collections and experiences on Lotso Coins!

Requirements

Install the following dependencies for WalletConnect API:

npm install --save-dev @web3modal/wagmi @wagmi/core @wagmi/connectors viem

Install the following dependencies for Webpack:
```
npm install --save-dev webpack webpack-cli
```
Install the following dependencies for Web3:
```
npm install --save-dev web3
```

Install the following dependencies for Babel:

npm install --save-dev @babel/core @babel/preset-env babel-loader

How to Use Webpack to Bundle the Project

Create a webpack.config.js file in the root directory of the project.

Add the following code to the webpack.config.js file:

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
};

Add the following script to the package.json file:
```
"scripts": {
  "build": "webpack"
}
```
Run the following command to bundle the project:
```
npm run build
```

Note: After running the command, a dist folder will be created in the root directory of the project, and the bundled JavaScript file bundle.js will be generated in the dist folder. Remember to perform a production build before deploying the project to GitHub Pages.

How to Obtain the Airdrop

Click here to view the detailed documentation on how to obtain the airdrop.

WalletConnect API Usage

Click here to learn more about WalletConnect API.

Click here to learn more about how to use the WalletConnect API for JavaScripts.

Infura API Usage

Click here to learn more about Infura API.

Click here to choose a network for Infura API.

Network for Our Blockchain

We are using the Base Mainnet network for our blockchain.

Click here to learn more about the Base Mainnet network.

We use viem library to define the Base network in our project.

Blockchain Information for Base Network

Name	Value
Network Name	Base Mainnet
Description	The public mainnet for Base.
RPC Endpoint	https://mainnet.base.org
Chain ID	8453
Currency Symbol	ETH
Block Explorer	https://basescan.org

Refer to the Base Network for the definition of the Base Mainnet network in viem.

Blockchain Information for Base Sepolia Network

Name	Value
Network Name	Base Sepolia Testnet
Description	The public testnet for Base.
RPC Endpoint	https://sepolia.base.org
Chain ID	84531
Currency Symbol	ETH
Block Explorer	https://sepolia.basescan.org

Refer to the Base Sepolia Network for the definition of the Base Mainnet network in viem.

Supported Blockchain

Click here to view the supported blockchain for WalletConnect.

Setting Up for Mail Subscription Service

Here is the detailed step about how to configure the backend mail server for GitHub Pages (or other web services that only support frontend pages).

Generate HTML Mail Template (Postcards)

Postcards - Designmodo

After editing the contents, export as a ZIP file with the images and HTML files together.
Domain Email Account Registration and SMTP Server Setting

GoDaddy Webmail
Use EmailJS for Email Backend Service

Basic Setting

Send email directly from your code | EmailJS

REST API Documentation

/send API | EmailJS

Note:
- SMTP.js only supports elasticemail as its backend SMTP mail server, no third-party SMTP server is supported.
- The limitation of the content body of EmailJS is no more than 50kb, be sure the size of the HTML file is less than the threshold.
- We can use the following website to shrink the size of the HTML file by removing the unnecessary characters (like white space, etc)
  
  HTML Compressor - Reduce the size of HTML, CSS, JavaScript, PHP and Smarty code.
Backblaze B2 OBS Bucket for Image Storage

We need to upload the images extracted from the downloaded ZIP file to the OBS bucket and replace all of the image paths from the relative path to the HTTPS path, which can be obtained through the detailed property of the file in the OBS bucket.

Setting Up `contract-config.json` for Local Deployment

To successfully deploy and run the project locally, you need to create a contract-config.json file in the root directory of the project. This file contains essential configuration details needed for the application to interact with the blockchain network.

Step-by-Step Guide

Create the File:
- In the root directory of your project, create a file named contract-config.json.

Add Basic Structure:

Open the file in a text editor and add the following JSON structure:

{
    "_comment": "Configuration settings for blockchain interaction and Turnstile widget. 'projectId' is the unique identifier for the project, 'activeNetwork' specifies the blockchain network (like 'baseMainnet' for Base Mainnet or 'baseSepolia' for Sepolia Base Testnet or 'sepolia' for Sepolia Main Testnet), 'contractAddress' is the address of the smart contract, 'authWebAddress' is the API endpoint for backend authentication server, and 'turnstileSiteKey' is the site key for the Cloudflare Turnstile widget.",
    "activeNetwork": "Your_Network_Choice",
    "contractAddress": "Your_Contract_Address",
    "authWebAddress": "Your_Web_Address",
    "turnstileSiteKey": "Your_CloudFlare_Turnstile_Site_Key",
    "emailToken": "Your_Email_Token",
    "emailServiceID": "Your_Email_Service_ID",
    "emailTemplate": "Your_Email_Template",
    "tweetId": "Your_Tweet_Id",
    "tweetMessage": "Your_Tweet_Message",
    "userName": "Your_User_Name",
    "checkRetweetEnabled": "true",
    "checkTweetEnabled": "true",
    "checkLikeEnabled": "true",
    "checkFollowEnabled": "true",
    "retweetEnabled": "true",
    "tweetEnabled": "true",
    "likeEnabled": "true",
    "followEnabled": "true"
}

Replace Your_Network_Choice with the network you are using (e.g., base for the Base Mainnet).
Replace Your_Contract_Address with the actual contract address you are using.
Replace Your_Web_Address with the web address for airdrop eligibility check.
Replace Your_CloudFlare_Turnstile_Site_Key with the site key for the Cloudflare Turnstile widget.
Replace Your_Email_Token with the token for sending emails.
Replace Your_Email_Service_ID with the service ID for sending emails, for example: lotso_email.
Replace Your_Email_Template with the email template name, for example: lotso_email_template.
Replace Your_Tweet_Id with the tweet ID for the target tweet.
Replace Your_Second_Tweet_Id with the second tweet ID for the target tweet.
Replace Your_User_Name with the user ID for the target user.

Save the File:
- Save your changes to contract-config.json.
Important Notes:
- The contract-config.json file is crucial for the application's interaction with the blockchain. Ensure that the details are correct.
- If you are working in a team or planning to push this code to a public repository, do not include sensitive information like private keys or secret tokens in the contract-config.json file. Instead, use environment variables or other secure methods to handle sensitive data.
.gitignore:
- If you are using Git, make sure to add contract-config.json to your .gitignore file to prevent accidentally pushing it to a public repository:
```
echo "contract-config.json" >> .gitignore
```

Example File

Here is an example of what your contract-config.json might look like for the Base Mainnet:

{
    "_comment": "Configuration settings for blockchain interaction and Turnstile widget. 'projectId' is the unique identifier for the project, 'activeNetwork' specifies the blockchain network (like 'baseMainnet' for Base Mainnet or 'baseSepolia' for Sepolia Base Testnet or 'sepolia' for Sepolia Main Testnet), 'contractAddress' is the address of the smart contract, 'authWebAddress' is the API endpoint for backend authentication server, and 'turnstileSiteKey' is the site key for the Cloudflare Turnstile widget.",
    "projectId": "0x123abc456def789ghi",
    "activeNetwork": "baseMainnet",
    "contractAddress": "0x123abc456def789ghi",
    "authWebAddress": "https://api.btiplatform.com",
    "turnstileSiteKey": "0x123abc456def789ghi",
    "emailToken": "0x123abc456def789ghi",
    "emailServiceID": "lotso_email",
    "emailTemplate": "lotso_email_template",
    "tweetId": "0x123abc456def789ghi",
    "tweetMessage": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
    "userName": "0x123abc456def789ghi",
    "checkRetweetEnabled": "false",
    "checkTweetEnabled": "false",
    "checkLikeEnabled": "true",
    "checkFollowEnabled": "true",
    "retweetEnabled": "true",
    "tweetEnabled": "true",
    "likeEnabled": "true",
    "followEnabled": "true"
}

Once you have created and configured your contract-config.json file, you can proceed with the local deployment of the application.

Cloud Deployment on GitHub Pages and Cloudflare Pages

This section provides guidance on deploying your project to GitHub Pages and Cloudflare Pages, with specific instructions on setting up required environment variables for each platform.

Required Environment Variables

Used for Website:

Env Name	Ignorable	Description
`ACTIVE_NETWORK`	Essential	Specifies the blockchain network the application should connect to (e.g., baseMainnet, baseSepolia, sepolia).
`CLOUDFLARE_ENV` (Set to `true` for cloud building)	Essential	Indicates if the build process is running in a cloud environment, often used for specific configurations or optimizations for automated CI for cloud hosting.
`CONTRACT_ADDRESS`	Essential	The Ethereum smart contract address the web application interacts with.
`PROJECT_ID`	Essential	A unique identifier obtained from WalletConnect, used for WalletConnect API calls.
`TURNSTILE_SITE_KEY`	Essential	The site key for Cloudflare's Turnstile service, used for bot protection and CAPTCHA verification.
`AUTH_WEB_ADDRESS`	Essential	The backend URL of the authentication function, used for verifying user credentials.
`EMAIL_TOKEN`	Essential	The token for sending emails
`EMAIL_SERVICE_ID`	Essential	The service ID for sending emails
`EMAIL_TEMPLATE`	Essential	The email template name
`TWEET_ID`	Essential	The tweet ID for the target tweet
`TWEET_MESSAGE`	Essential	The message for the target tweet
`USER_NAME`	Essential	The user name for the target user
`CHECK_RETWEET_ENABLED`	Optional	Indicates if the retweet check is enabled, "false" by default
`CHECK_RETWEET_2_ENABLED`	Optional	Indicates if the retweet check is enabled, "false" by default
`CHECK_LIKE_ENABLED`	Optional	Indicates if the like check is enabled, "true" by default
`CHECK_FOLLOW_ENABLED`	Optional	Indicates if the follow check is enabled, "true" by default
`RETWEET_ENABLED`	Optional	Indicates if the retweet is enabled, "false" by default
`RETWEET_2_ENABLED`	Optional	Indicates if the retweet is enabled, "false" by default
`LIKE_ENABLED`	Optional	Indicates if the like is enabled, "true" by default
`FOLLOW_ENABLED`	Optional	Indicates if the follow is enabled, "true" by default

Used for Reverse Proxy

Env Name	Ignorable	Description
`CLOUDFLARE_ACCOUNT_ID`	Essential	The account ID for Cloudflare, used to authenticate and manage resources via Cloudflare APIs.
`CLOUDFLARE_API_TOKEN`	Essential	A token used to authenticate API requests to Cloudflare, allowing to interact with Cloudflare worker services.
`CLOUDFLARE_WORKER_NAME`	Optional	The name of a Cloudflare Worker, if used, which can execute serverless code at the edge for tasks like routing or custom caching, "api" by default
`AIRDROP_SERVER_HTTP_PORT`	Essential	The port number on which the reverse proxy server listens for HTTP traffic of production website, "8080" by default
`AIRDROP_SERVER_HTTP_PORT2`	Essential	The second port number on which the reverse proxy server listens for HTTP traffic of test website, "8081" by default
`TWITTER_SERVER_HTTP_PORT`	Essential	The port number on which the reverse proxy server listens for HTTP traffic of Twitter server, "5000" by default
`TWITTER_SERVER_HTTP_PORT2`	Essential	The second port number on which the reverse proxy server listens for HTTP traffic of Twitter server, "5001" by default
`GANACHE_HTTP_PORT`	Essential	The port number on which the reverse proxy server listens for HTTP traffic of Ganache server, "8546" by default

Setting Environment Variables in GitHub

Go to your repository on GitHub.
Navigate to "Settings" > "Secrets".
Click on "New repository secret" and add each environment variable:
- Name: Variable name (e.g., PROJECT_ID).
- Value: Corresponding value for the variable.
Repeat this process for ACTIVE_NETWORK, CONTRACT_ADDRESS, AUTH_WEB_ADDRESS, TURNSTILE_SITE_KEY and others.

Deploying to GitHub Pages

Your project should be configured for deployment via GitHub Actions.
Push a commit to trigger the GitHub Actions workflow, utilizing the set environment variables.

Setting Environment Variables in Cloudflare Pages

Log into your Cloudflare account and access the Pages dashboard.
Select your project and go to "Settings" > "Environment variables" (under "Build & deploy").
Add each variable by specifying its Name and Value.
Particularly, ensure CLOUDFLARE_ENV is set to true.

Setting Custom Domains in Cloudflare Workers

Go to your Cloudflare account and access the Workers dashboard.
Select your worker (by default the worker name is set to 'api') and go to "Settings" > "Triggers".
Add the following custom domains for the worker to route traffic accordingly.
- api.btiplatform.com
- api-dev.btiplatform.com
- ganache.btiplatform.com

Deploying to Cloudflare Pages

Cloudflare Pages automatically builds and deploys upon repository updates.
Ensure your repository is linked to Cloudflare Pages with correct build commands.
The environment variables will be utilized during Cloudflare's build process.

Important Notes

Keep sensitive data such as API keys secure and prevent unnecessary exposure.
For local development, replicate the environment variable setup to test the application effectively.
Document any unique build steps or configurations specific to your project.

Size of Images

Replaced Image Sizes:

about1.png - 255x420
about2.png - 238x420
about3.png - 258x420
banner.png - 664x480
blog1.jpg - 310x210
blog3.jpg - 310x210
blog4.jpg - 310x210
g1.png - 760x380
g2.png - 270x400
g3.png - 201x320
g4.png - 201x320
g5.png - 821x650
pro1.png - 288x450
p1.png - 90x90
p2.png - 90x90
p3.png - 90x90
p4.png - 90x90
p5.png - 90x90
t1.png - 400x400
t2.png - 400x400
t3.png - 400x400
testimonial1.png - 90x89
testimonial2.png - 90x89
testimonial3.png - 90x89
blog1.jpg - 620x420

License

This project is licensed under the MIT License - see the LICENSE file for details.

Name		Name	Last commit message	Last commit date
Latest commit History 124 Commits
.github		.github
.vscode		.vscode
css		css
documentation		documentation
email		email
fonts		fonts
images		images
js		js
worker		worker
.babelrc		.babelrc
.eslintignore		.eslintignore
.eslintrc.js		.eslintrc.js
.gitignore		.gitignore
LICENSE		LICENSE
README.md		README.md
auth-success.html		auth-success.html
create-config.js		create-config.js
index.html		index.html
package-lock.json		package-lock.json
package.json		package.json
webpack.config.js		webpack.config.js
wrangler.toml		wrangler.toml

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Repository files navigation

Lotso Coins - Leading the PvP Mode

Table of Contents

Introduction

Requirements

How to Use Webpack to Bundle the Project

How to Obtain the Airdrop

WalletConnect API Usage

Infura API Usage

Network for Our Blockchain

Blockchain Information for Base Network

Blockchain Information for Base Sepolia Network

Supported Blockchain

Setting Up for Mail Subscription Service

Setting Up `contract-config.json` for Local Deployment

Step-by-Step Guide

Example File

Cloud Deployment on GitHub Pages and Cloudflare Pages

Required Environment Variables

Setting Environment Variables in GitHub

Deploying to GitHub Pages

Setting Environment Variables in Cloudflare Pages

Setting Custom Domains in Cloudflare Workers

Deploying to Cloudflare Pages

Important Notes

Size of Images

License

About

Releases

Packages

Languages

License

BTI-US/Lotso-Dev

Folders and files

Latest commit

History

Repository files navigation

Lotso Coins - Leading the PvP Mode

Table of Contents

Introduction

Requirements

How to Use Webpack to Bundle the Project

How to Obtain the Airdrop

WalletConnect API Usage

Infura API Usage

Network for Our Blockchain

Blockchain Information for Base Network

Blockchain Information for Base Sepolia Network

Supported Blockchain

Setting Up for Mail Subscription Service

Setting Up contract-config.json for Local Deployment

Step-by-Step Guide

Example File

Cloud Deployment on GitHub Pages and Cloudflare Pages

Required Environment Variables

Setting Environment Variables in GitHub

Deploying to GitHub Pages

Setting Environment Variables in Cloudflare Pages

Setting Custom Domains in Cloudflare Workers

Deploying to Cloudflare Pages

Important Notes

Size of Images

License

About

Topics

Resources

License

Stars

Watchers

Forks

Releases

Packages 0

Languages

Setting Up `contract-config.json` for Local Deployment

Packages