Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Yarik/gm world frontend #372

Merged
merged 19 commits into from
May 13, 2024
Merged

Yarik/gm world frontend #372

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
19 commits
Select commit Hold shift + click to select a range
bdaf40f
Update gm frontend tutorial
yarikbratashchuk May 11, 2024
66b24a4
Update gm world tutorial: use bash and which
yarikbratashchuk May 11, 2024
813e6c1
Add celestia-da tutorial, network agnostic (#368)
yarikbratashchuk May 10, 2024
11ceb7b
Node and yarn versions as constants, custom script to install yarn an…
May 12, 2024
a0b2d7b
Add brew bin to $PATH
May 12, 2024
28a79a4
Minor updates to jq and go installation scripts
yarikbratashchuk May 12, 2024
36be7bc
Update public/install-jq.sh
yarikbratashchuk May 13, 2024
a29bc20
Use bash-vue
yarikbratashchuk May 13, 2024
2fabcd8
Use bash instead of sh, yes, it's opinionated
yarikbratashchuk May 13, 2024
ac1b276
Add screenshot with connected wallet
yarikbratashchuk May 13, 2024
20f2313
Uppercase yarn and nodejs
yarikbratashchuk May 13, 2024
2baa4ce
Exit if curl is not installed
yarikbratashchuk May 13, 2024
4a8b183
Merge branch 'main' into yarik/gm-world-frontend
yarikbratashchuk May 13, 2024
7bf3286
docs: add vA callout back
jcstein May 13, 2024
9af829c
fix: image linking, err in runtime
jcstein May 13, 2024
2425342
docs: standard sentence case capitalization
jcstein May 13, 2024
bbb5f6e
feat: remove now unused images
jcstein May 13, 2024
ffe52e0
Apply suggestions from code review
jcstein May 13, 2024
8cefc26
Update tutorials/gm-world-frontend.md
jcstein May 13, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 9 additions & 0 deletions public/install-gm-frontend-app.sh
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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
2 changes: 1 addition & 1 deletion public/install-go.sh
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -117,4 +117,4 @@ else
echo "$GO_BIN_PATH is already in PATH."
fi

/usr/local/go/bin/go version
$(which go) version
yarikbratashchuk marked this conversation as resolved.
Show resolved Hide resolved
289 changes: 22 additions & 267 deletions tutorials/gm-world-frontend.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,293 +1,48 @@
# GM world frontend tutorial
# GM World UI App

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.
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.

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.
## 🛠 Prerequisites

We'll be using `create-cosmos-app` in this tutorial to scaffold
a frontend and add the chain information for our rollup.
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.

jcstein marked this conversation as resolved.
Show resolved Hide resolved
In the end, you'll have something that looks like this
[demo](https://rollkit-frontend.vercel.app)
([repo](https://github.com/jcstein/rollkit-frontend)).

<!-- markdownlint-disable MD033 -->
<script setup>
import Callout from '../.vitepress/components/callout.vue'
</script>
jcstein marked this conversation as resolved.
Show resolved Hide resolved
You will also need Yarn installed for web app development.

:::tip
<Callout />
:::
<!-- markdownlint-enable MD033 -->

## 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.

## Setting up the frontend

Now that you have your rollup running, you are ready to scaffold
the frontend! In your terminal, first install `create-cosmos-app`:

```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:

If you don't have yarn, run this command to install it using cURL on most Linux distros and macOS:
```bash
curl -o- -L https://yarnpkg.com/install.sh | bash
```

:::

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 | sh
```
yarikbratashchuk marked this conversation as resolved.
Show resolved Hide resolved

Follow the instructions at the end of the output to start your app:

```bash
cd ./gm-world && yarn dev
You should see the following output indicating that the development server is up and running:
```

jcstein marked this conversation as resolved.
Show resolved Hide resolved
![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',
];
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)
```

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) => {
```

Now you're ready to see only the chains you've selected, but first, we need
to set up the config for `gmrollup`!

In the `config` directory, create a new file called `chain.ts`. This will
be your config for your GM rollup.
## 🔗 Connecting Your Wallet

In that file, put the following:
To connect your Keplr wallet to the application, simply open your browser and go to [http://localhost:3000](https://localhost:3000).

jcstein marked this conversation as resolved.
Show resolved Hide resolved
```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,
}
```
Click the "Connect Wallet" button on the page, and approve the connection request in the Keplr prompt.

Create a new file in `config` called `assetlist.ts` and add the following:
Once authorized, your wallet address will be displayed, confirming that your wallet is successfully connected.

```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
<ChainProvider
chains={[...chains, chain]}
assetLists={[...assets, assetlist]}
wallets={[...keplrWallets, ...cosmostationWallets, ...leapWallets]}
walletConnectOptions={{
signClient: {
projectId: 'a8510432ebb71e6948cfd6cde54b70f7',
relayUrl: 'wss://relay.walletconnect.org',
metadata: {
name: 'Celestia + Cosmos SDK',
description: 'Celestia + Cosmos SDK',
url: 'https://docs.celestia.org/',
icons: [],
},
},
}}
endpointOptions={{
isLazy: true
}}
wrappedWithChakra={true}
signerOptions={signerOptions}
>
```

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

<!-- ## TODO
Congratulations! You've experienced connecting to a rollup from the user side — simple and straightforward. Now, you might consider exploring how to add more application logic to your rollup using the Cosmos SDK, as demonstrated in our Wordle App tutorial.

jcstein marked this conversation as resolved.
Show resolved Hide resolved
jcstein marked this conversation as resolved.
Show resolved Hide resolved
* edit chain denom/token
* show how to connect wallet and display balance in Keplr
* any other suggestions -->
2 changes: 1 addition & 1 deletion tutorials/gm-world.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ 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}}
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

can we use the same format as bash -c "$(curl -sSL https://rollkit.dev/install-gm-rollup.sh)" so that the script isn't saved locally, and also pass in the golang version/local da version?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this can be done in a new PR

```

- **Windows**: Download and execute the <a :href="`https://go.dev/dl/go${constants.golangVersion}.windows-amd64.msi`">installer</a>.
Expand Down
Loading