diff --git a/.vitepress/constants/constants.js b/.vitepress/constants/constants.js index bd8dad746..48fc13615 100644 --- a/.vitepress/constants/constants.js +++ b/.vitepress/constants/constants.js @@ -1,6 +1,9 @@ const constants = Object.freeze({ golangVersion: "1.22.2", + nodeVersion: "21.7.2", + yarnVersion: "1.22.19", + rollkitLatestTag: "v0.13.3", rollkitLatestSha: "45b1573", rollkitCosmosSDKVersion: "v0.50.6-rollkit-v0.13.3-no-fraud-proofs", diff --git a/public/gm/cca-2.png b/public/gm/cca-2.png deleted file mode 100644 index 251630f43..000000000 Binary files a/public/gm/cca-2.png and /dev/null differ diff --git a/public/gm/cca-3.png b/public/gm/cca-3.png deleted file mode 100644 index ef51b418b..000000000 Binary files a/public/gm/cca-3.png and /dev/null differ diff --git a/public/gm/cca.png b/public/gm/cca.png deleted file mode 100644 index f93f9e156..000000000 Binary files a/public/gm/cca.png and /dev/null differ diff --git a/public/img/gm-world-frontend-wallet-connected.png b/public/img/gm-world-frontend-wallet-connected.png new file mode 100644 index 000000000..b460841b8 Binary files /dev/null and b/public/img/gm-world-frontend-wallet-connected.png differ diff --git a/public/install-gm-frontend-app.sh b/public/install-gm-frontend-app.sh new file mode 100644 index 000000000..6cd80eace --- /dev/null +++ b/public/install-gm-frontend-app.sh @@ -0,0 +1,9 @@ +#!/bin/bash + +echo "Downloading GM Frontend tutorial source code..." +git clone https://github.com/rollkit/gm-frontend.git +cd gm-frontend || { echo "Failed to find the downloaded repository"; exit 1; } +echo "Installing dependencies..." +yarn install +echo "Starting dev server..." +yarn run dev diff --git a/public/install-go.sh b/public/install-go.sh index b6c8102ba..89f3807a9 100644 --- a/public/install-go.sh +++ b/public/install-go.sh @@ -4,15 +4,17 @@ # Multi-platform (Linux and macOS) # Multi-architecture (amd64, arm64, arm) support -deps=( curl jq ) +# if curl is not installed then install it +if ! command -v curl &> /dev/null; then + echo "curl is not installed. Please install curl and try again." + exit 1 +fi -for dep in "${deps[@]}"; do - if ! command -v "$dep" &> /dev/null; then - echo "$dep is not installed. Downloading and executing the script..." - curl -sSL https://rollkit.dev/install-jq.sh | bash - exit $? - fi -done +# if jq is not installed then install it using the script +if ! command -v jq &> /dev/null; then + echo "jq is not installed. Downloading and executing the script to install jq..." + curl -sSL https://rollkit.dev/install-jq.sh | bash +fi version="${1:-$(curl -s 'https://go.dev/dl/?mode=json' | jq -r '.[0].version')}" current="$(/usr/local/go/bin/go version 2>/dev/null | awk '{print $3}')" @@ -25,15 +27,26 @@ update_go() { local arch="$1" local os="$2" - local go_url="https://golang.org/dl/${version}.${os}-${arch}.tar.gz" + local go_url="https://golang.org/dl/go${version}.${os}-${arch}.tar.gz" - curl -so "/tmp/${version}.${os}-${arch}.tar.gz" -L "$go_url" && \ - rm -rf /usr/local/go && tar -C /usr/local -xzf /tmp/${version}.${os}-${arch}.tar.gz + echo "Downloading Go from ${go_url}" - tar -C /usr/local -xzf "/tmp/${version}.${os}-${arch}.tar.gz" && \ - echo "Go updated to version ${version}" + curl -so "/tmp/go${version}.${os}-${arch}.tar.gz" -L "$go_url" + if [ $? -eq 0 ]; then + tar -C /usr/local -xzf "/tmp/go${version}.${os}-${arch}.tar.gz" + if [ $? -ne 0 ]; then + echo "Failed to extract Go. Possibly corrupted download." + rm "/tmp/go${version}.${os}-${arch}.tar.gz" + exit 1 + else + echo "Go updated to version ${version}" + fi + else + echo "Failed to download Go from ${go_url}" + exit 1 + fi - rm "/tmp/${version}.${os}-${arch}.tar.gz" + rm "/tmp/go${version}.${os}-${arch}.tar.gz" } case "$(uname -s)" in @@ -117,4 +130,4 @@ else echo "$GO_BIN_PATH is already in PATH." fi -/usr/local/go/bin/go version +$(which go) version diff --git a/public/install-jq.sh b/public/install-jq.sh index 3f1b84f5e..b1b10a994 100644 --- a/public/install-jq.sh +++ b/public/install-jq.sh @@ -1,29 +1,42 @@ #!/bin/bash if [[ "$OSTYPE" == "darwin"* ]]; then - echo "Detected macOS. Installing jq..." - if ! command -v brew &> /dev/null; then - echo "Homebrew is not installed. Installing Homebrew..." - /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)" - fi - brew install jq - echo "jq has been installed successfully." - + echo "Detected macOS. Installing jq..." + if ! command -v brew &> /dev/null; then + echo "Homebrew is not installed. Installing Homebrew..." + /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)" + # adding /opt/homebrew/bin to the $PATH variable based on the shell + if [[ -f "$HOME/.bash_profile" ]]; then + echo "export PATH=\"/opt/homebrew/bin:\$PATH\"" >> "$HOME/.bash_profile" + source "$HOME/.bash_profile" + elif [[ -f "$HOME/.bashrc" ]]; then + echo "export PATH=\"/opt/homebrew/bin:\$PATH\"" >> "$HOME/.bashrc" + source "$HOME/.bashrc" + elif [[ -f "$HOME/.zshrc" ]]; then + echo "export PATH=\"/opt/homebrew/bin:\$PATH\"" >> "$HOME/.zshrc" + source "$HOME/.zshrc" + else + echo "Unsupported shell. Please add /opt/homebrew/bin to your PATH manually." + exit 1 + fi + fi # Closing the brew installation check + brew install jq + echo "jq has been installed successfully." elif [[ "$OSTYPE" == "linux-gnu"* ]]; then - echo "Detected Linux. Installing jq..." - if command -v apt &> /dev/null; then - sudo apt update - sudo apt install -y jq - elif command -v yum &> /dev/null; then - sudo yum install -y epel-release - sudo yum install -y jq - else - echo "Unsupported package manager. Please install jq manually." - exit 1 - fi - echo "jq has been installed successfully." - + echo "Detected Linux. Installing jq..." + if command -v apt &> /dev/null; then + sudo apt update + sudo apt install -y jq + elif command -v yum &> /dev/null; then + sudo yum install -y epel-release + sudo yum install -y jq + else + echo "Unsupported package manager. Please install jq manually." + exit 1 + fi + echo "jq has been installed successfully." else - echo "Unsupported operating system." - exit 1 -fi + echo "Unsupported operating system." + exit 1 +fi # Closing the OS type check + diff --git a/public/install-yarn.sh b/public/install-yarn.sh new file mode 100644 index 000000000..1c8867ec9 --- /dev/null +++ b/public/install-yarn.sh @@ -0,0 +1,66 @@ +#!/bin/sh + +set -e + +INSTALL_NODE_VER=21.7.2 +INSTALL_NVM_VER=0.39.7 +INSTALL_YARN_VER=1.22.19 + +# You can pass node and yarn versions as arguments to this script +if [ "$1" != '' ]; then + echo "==> Using specified node version - $1" + INSTALL_NODE_VER=$1 +fi +if [ "$2" != '' ]; then + echo "==> Using specified yarn version - $2" + INSTALL_YARN_VER=$2 +fi + +echo "==> Ensuring .bashrc exists and is writable" +touch ~/.bashrc + +echo "==> Installing node version manager (NVM). Version $INSTALL_NVM_VER" +# Removed if already installed +rm -rf ~/.nvm +# Unset exported variable +export NVM_DIR= + +# Install nvm +curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v$INSTALL_NVM_VER/install.sh | bash +# Make nvm command available to terminal +source ~/.nvm/nvm.sh + +echo "==> Installing node js version $INSTALL_NODE_VER" +nvm install $INSTALL_NODE_VER + +echo "==> Make this version system default" +nvm alias default $INSTALL_NODE_VER +nvm use default + +echo "==> Installing Yarn package manager" +rm -rf ~/.yarn +curl -o- -L https://yarnpkg.com/install.sh | bash -s -- --version $INSTALL_YARN_VER + +echo "==> Adding Yarn and Node to environment path" +# Yarn configurations +mv $HOME/.nvm/versions/node/v$INSTALL_NODE_VER/bin/node $HOME/.yarn/bin + +export PATH="$HOME/.yarn/bin:$PATH" +yarn config set prefix ~/.yarn -g + +echo "==> Checking for versions" +nvm --version +node --version +npm --version +yarn --version + +echo "==> Print binary paths" +which npm +which node +which yarn + +echo "==> List installed node versions" +nvm ls + +nvm cache clear +echo "==> Now you're all setup and ready for development. If changes are yet to take effect, I suggest you restart your computer" diff --git a/tutorials/gm-world-frontend.md b/tutorials/gm-world-frontend.md index c263888bb..fd71e253d 100644 --- a/tutorials/gm-world-frontend.md +++ b/tutorials/gm-world-frontend.md @@ -1,293 +1,63 @@ -# GM world frontend tutorial - -In this tutorial, we'll learn how to use [Cosmology](https://cosmology.tech/) to -create a frontend for our [GM world](/tutorials/gm-world) rollup. - -Cosmology enables developers to build web3 apps in the Interchain Ecosystem. -With Cosmology, it's simple to begin building apps that communicate with -Cosmos SDK and CosmWasm chains. - -We'll be using `create-cosmos-app` in this tutorial to scaffold -a frontend and add the chain information for our rollup. - -In the end, you'll have something that looks like this -[demo](https://rollkit-frontend.vercel.app) -([repo](https://github.com/jcstein/rollkit-frontend)). +# GM world UI app -:::tip +This tutorial aims to demonstrate the user interface (UI) application aspect of connecting a wallet to a rollup, showcasing that it's as straightforward as connecting to any other blockchain. It assumes you have the [Keplr](https://www.keplr.app/) wallet extension installed in your browser. + +::: tip ::: - - -## Getting started -In order to complete this tutorial you will need to have completed -the [GM world tutorial](/tutorials/gm-world). This requires a running rollup -on your local machine. +## 🛠 Prerequisites -## Setting up the frontend +Before you start, ensure you have completed the [GM world](/tutorials/gm-world) tutorial. Your rollup needs to be running since the app will connect to it via RPC. -Now that you have your rollup running, you are ready to scaffold -the frontend! In your terminal, first install `create-cosmos-app`: +You will also need Yarn installed for web app development. -```bash -yarn global add create-cosmos-app -``` - -::: tip -✋ If you don't have yarn, run this command to install it using cURL on most Linux distros and macOS: +:::tip +If you don't have Yarn or Node.js, run this command to install it using cURL on most Linux distros and macOS: -```bash -curl -o- -L https://yarnpkg.com/install.sh | bash +```bash-vue +curl -sSL https://rollkit.dev/install-yarn.sh | bash -s {{constants.nodeVersion}} {{constants.yarnVersion}} ``` ::: -Now scaffold an app: +## 🚀 Starting an app -```bash -create-cosmos-app -``` - -In this tutorial, we're using the following setting and your output -will look similar to this if everything is successful: +We've simplified the process by preparing a repository with the necessary scaffolding and configuration for our local rollup. Run a command to download the code, install dependencies, and start the development server: ```bash -? [name] Enter your new app name gm-world -Cloning into 'gm-world'... -? [template] which template connect-multi-chain -yarn install v1.22.19 -[1/4] Resolving packages... -[2/4] Fetching packages... -[3/4] Linking dependencies... -[4/4] Building fresh packages... -success Saved lockfile. -Done in 42.23s. - - - | _ _ - === |.===. '\-//` - (o o) {}o o{} (o o) -ooO--(_)--Ooo-ooO--(_)--Ooo-ooO--(_)--Ooo- - -✨ Have fun! Now you can start on your project ⚛️ - -Now, run this command: - -cd ./gm-world && yarn dev +curl -sSL https://rollkit.dev/install-gm-frontend-app.sh | bash ``` -Follow the instructions at the end of the output to start your app: +You should see the following output indicating that the development server is up and running: ```bash -cd ./gm-world && yarn dev -``` - -![cca-3.png](/gm/cca-3.png) - -## Adding your GM portal chain to the config - -First, we'll need to make some changes with the default config. - -We need to add the array of chains that we would like to test -in the `components/wallet.tsx` file on underneath imports: - -```tsx -const allowedChains = [ - 'gmrollup', - 'celestiatestnet', - 'celestiatestnet2', - 'celestiatestnet3', -]; -``` - -In `chainOptions` change `chainRecords` this to show only the allowed chains -from your array: - -```tsx title="hi" -chainRecords - .filter((chainRecord) => allowedChains.includes(chainRecord.name)) - .map((chainRecord) => { +ready - started server on 0.0.0.0:3000, url: http://localhost:3000 +info - SWC minify release candidate enabled. https://nextjs.link/swcmin +event - compiled client and server successfully in 7.8s (2225 modules) ``` -Now you're ready to see only the chains you've selected, but first, we need -to set up the config for `gmrollup`! +## 🔗 Connecting your wallet -In the `config` directory, create a new file called `chain.ts`. This will -be your config for your GM rollup. +To connect your Keplr wallet to the application, simply open your browser and go to [http://localhost:3000](https://localhost:3000). -In that file, put the following: +Click the "Connect Wallet" button on the page, and approve the connection request in the Keplr prompt. -```tsx -export const chain = { - "$schema": "../../chain.schema.json", - "chain_name": "gmrollup", - "chain_id": "gm", - "pretty_name": "my gm rollup", - "status": "live", - "network_type": "testnet", - "bech32_prefix": "gm", - "daemon_name": "gmd", - "node_home": "$HOME/.gm", - "key_algos": [ - "secp256k1" - ], - "slip44": 118, - "fees": { - "fee_tokens": [ - { - "denom": "ustake", - "fixed_min_gas_price": 0 - } - ] - }, - "apis": { - "rpc": [ - { - "address": "http://localhost:26657", - "provider": "JCS" - } - ], - "rest": [ - { - "address": "http://localhost:1317", - "provider": "JCS" - } - ] - }, - "beta": true, - } - ``` +Once authorized, your wallet address will be displayed, confirming that your wallet is successfully connected. -Create a new file in `config` called `assetlist.ts` and add the following: +![gm-world-frontend-connected](/img/gm-world-frontend-wallet-connected.png) -```tsx -export const assetlist = { - "$schema": "../../assetlist.schema.json", - "chain_name": "gmrollup", - "assets": [ - { - "description": "", - "denom_units": [ - { - "denom": "ustake", - "exponent": 0 - }, - { - "denom": "stake", - "exponent": 6 - } - ], - "base": "stake", - "name": "GM rollup", - "display": "stake", - "symbol": "STAKE", - "logo_URIs": { - "svg": "https://raw.githubusercontent.com/jcstein/gm-portal/b030ce3fe548d188fbacb6b932d7e51dc7afd65e/frontend/public/gm.svg" - } - } - ] - } -``` - -Create a new file in `config` directory called `defaults.ts`: - -```tsx -import { assets } from 'chain-registry'; -import { AssetList, Asset } from '@chain-registry/types'; - -export const defaultChainName = 'gmrollup'; - -export const getChainAssets = (chainName: string = defaultChainName) => { - return assets.find((chain) => chain.chain_name === chainName) as AssetList; -}; - -export const getCoin = (chainName: string = defaultChainName) => { - const chainAssets = getChainAssets(chainName); - return chainAssets.assets[0] as Asset; -}; -``` - -In `_app.tsx` you can now import `assetlist` and `chain` with your -new GM config! - -```tsx -# other imports -import { chain } from "../config/chain" -import { assetlist } from "../config/assetlist" - -# rest of code -``` - -Then, modify your `ChainProvider`: - -```tsx - -``` - -You may notice that we added: - -```tsx -endpointOptions={{isLazy: true}} -``` - -This will save our localhost RPC from being overridden. - -Congratulations! You now have a frontend for your rollup. -What features do you want to add now? - -You may notice that the icons for Celestia testnets are not loading, -this is due to an outdated version of the chain registry. - -![cca.png](/gm/cca.png) - -To update -these, you can use your terminal: - -```bash -cd $HOME && cd gm-world -yarn upgrade-interactive --latest -``` - -Use arrow keys and the spacebar to select it`@cosmos-kit/core`, -`@cosmos-kit/cosmostation`, `@cosmos-kit/keplr`, `@cosmos-kit/leap` -and `@cosmos-kit/react`. - -Now use enter to upgrade the dependencies! - -Head back to your frontend and take a look, you should see the -updated icons. +:::tip +If you run into any issues, make sure your Keplr wallet is updated and set to connect to your local environment. +::: -![cca-2.png](/gm/cca-2.png) +## 🎉 Next steps - diff --git a/tutorials/gm-world.md b/tutorials/gm-world.md index 3aca2b040..2c47077ba 100644 --- a/tutorials/gm-world.md +++ b/tutorials/gm-world.md @@ -34,11 +34,12 @@ Rollkit uses the [Go programming language](https://go.dev/dl/). Here's how to in - **Linux or macOS**: Run the provided script: ```bash-vue - curl -sSL https://rollkit.dev/install-go.sh | sh -s {{constants.golangVersion}} + curl -sSL https://rollkit.dev/install-go.sh | bash -s {{constants.golangVersion}} ``` + - **Windows**: Download and execute the installer. - + ## 🌐 Running a Local DA Network {#running-local-da} @@ -47,7 +48,7 @@ Learn to run a local DA network, designed for educational purposes, on your mach To set up a mock DA network node: ```bash-vue -curl -sSL https://rollkit.dev/install-mock-da.sh | sh {{constants.mockDALatestTag}} +curl -sSL https://rollkit.dev/install-mock-da.sh | bash {{constants.mockDALatestTag}} ``` This script builds and runs the node, now listening on port `7980`.