Skip to content

Commit

Permalink
Merge branch 'main' into link-checker
Browse files Browse the repository at this point in the history
  • Loading branch information
jmintuitive authored Sep 11, 2024
2 parents e5a5cfc + 5cfd5f3 commit e546962
Show file tree
Hide file tree
Showing 8 changed files with 156 additions and 86 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,9 @@ export default {
boilerplate: {
title: "Boilerplate Template",
},
"clicker-game-tg-mini-app": {
title: "Telegram Clicker Game Mini App Template",
},
"nft-minting-dapp": {
title: "NFT minting dapp Template",
},
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -16,21 +16,18 @@ The Boilerplate template provides:
- Trasnfer APT implementation - Pre-made `transfer` component to send APT to an address.
- Message board functionality implementation - Pre-made `message` component to send and read a message on chain

## Getting started

<Steps>
## Generate the Boilerplate template

### Initialize contract publishing account

```bash
npm run move:init
On your terminal, navigate to the directory you want to work in and run:
```bash
npx create-aptos-dapp@latest
```

The CLI will prompt you to provide a private key for your contract publishing account. If you provide no input, it will generate one for you.
Follow the CLI prompts.

This will:
1. Create an account you will later publish the contract with.
2. Create a `./aptos/config.yaml` file with the newly created account information.
## Getting started

<Steps>

### Publish the contract

Expand Down Expand Up @@ -70,12 +67,14 @@ If you started your dapp on testnet, and you are happy with your testing, you wi

To publish the smart contract on mainnet, we need to change some configuration.

1. Change the `VITE_APP_NETWORK` value to `mainnet` in the `.env` file
2. Run `npm run move:init` to initialize an account to work against Mainnet
3. If you already have an account you would like to use to publish the contract under, you can pass its private key when the prompt asks for that.
4. If you are generating a new account, you need to transfer this account some APT on Aptos Mainnet since the tool can’t fund the account when it is against Mainnet.
5. Check: open `.aptos/config.yaml` file and see that you have a profile under the `{PROJECT_NAME}-mainnet` name (where `PROJECT_NAME` is specified in your `.env` file). In addition, open the `.env` file and check the `VITE_MODULE_ADDRESS` value is the same as the new profile's account account address.
7. Finally, run `npm run move:publish` to publish your move module on Aptos mainnet.
Open the `.env` file and:

> Note: Make sure you have created an existing account on the Aptos `mainnet`
1. Change the `APP_NETWORK` value to `mainnet`
2. Update the `MODULE_PUBLISHER_ACCOUNT_ADDRESS` to be the existing account address
3. Update the `MODULE_PUBLISHER_PRIVATE_KEY` to be the existing account private key
4. Run `npm run move:publish` to publish your move module on Aptos mainnet.

## Deploy to a live server

Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,82 @@
---
title: "Create Aptos Dapp Telegram Clicker Game Mini App Template"
---

import { Callout, Steps } from 'nextra/components';

# Create Aptos Dapp Telegram Clicker Game Mini App Template

This template provides a ready to use clicker game dapp that can be run as a Telegram Mini App.

We provide 2 signing experience for the Telegram Mini App, you can choose one of them during the setup:
- explicit signing - the user needs to sign each transaction, this is powered by [Aptos Wallet Adapter](https://github.com/aptos-labs/aptos-wallet-adapter) similar to other dapps
- [demo](https://t.me/aptos_explict_siging_bot/)
- seamless signing - the user doesn't need to sign each transaction because the approval is done in the background, this is powered by [Mizu Wallet SDK Core](https://docs.mizu.io/docs/api-connect/core)
- [demo](https://t.me/seamless345_bot/)

## Getting started

<Steps>

### Publish the contract

Run the below command to publish the contract on-chain:
```bash
npm run move:publish
```
This command will:
1. Publish the contract to chain.
2. Setting the `VITE_MODULE_ADDRESS` in the `.env` file to set the contract object address.

### Create a Telegram bot

Start a chat with [BotFather](https://t.me/BotFather), use the `/newbot` command to create a new bot. You can learn more about the process at [Telegram Docs](https://docs.telegram-mini-apps.com/platform/creating-new-app#creating-application-in-botfather).

### (Optional) Obtain the app ID from Mizu wallet

If you choose the seamless signing experience, you are using `@mizuwallet-sdk/core` instead of Aptos Wallet Adapter. You need to obtain a Mizu App ID from the Mizu team by filling up their [form](https://ankaalabs.typeform.com/to/bAPqSxDu). Once you have the App ID, set it in the `.env` file as `VITE_MIZU_WALLET_APP_ID`.

You can learn more about using it in the [Mizu doc](https://docs.mizu.io/docs/api-connect/core).

### Host the frontend

`create-aptos-dapp` provides an npm command to easily deploy the static site to [Vercel](https://vercel.com/home).

At the root of the folder, simply run

```bash filename="Terminal"
npm run deploy
```

Then, follow the prompts. Please refer to Vercel docs to learn more about the [Vercel CLI](https://vercel.com/docs/cli)

If you are looking for different services to deploy the static site to, `create-aptos-dapp` utilizes Vite as the development tool, so you can follow the [Vite deployment guide](https://vitejs.dev/guide/static-deploy). In a nutshell, you would need to:

1. Run `npm run build` to build a static site
2. Run `npm run preview` to see how your dapp would look like on a live server
3. Next, all you need is to deploy your static site to a live server, there are some options for you to choose from and can follow [this guide](https://vitejs.dev/guide/static-deploy) on how to use each

### Create a Telegram mini app

Use the `/newapp` command to create a new mini app and link the mini app with the bot you just created. When BotFather asks for the mini app's URL, provide the URL of the frontend you deployed in the previous step. You can learn more about the process at [Telegram Docs](https://docs.telegram-mini-apps.com/platform/creating-new-app#creating-application-in-botfather).


### Set the menu button of the bot to open the mini app

Use the `/mybots` command to find your bot, choose `bot settings` -> `menu button` -> `configure menu button`, provide the mini app's name and URL. Now you can access the mini app from your bot's menu. You can learn more about the process at [Telegram Docs](https://docs.telegram-mini-apps.com/platform/creating-new-app#web-application-link).

</Steps>

## Ready for Mainnet

If you started your dapp on testnet, and you are happy with your testing, you will want to get the dapp on mainnet.

To publish the smart contract on mainnet, we need to change some configuration.

Open the `.env` file and:

> Note: Make sure you have created an existing account on the Aptos `mainnet`
1. Change the `APP_NETWORK` value to `mainnet`
2. Update the `MODULE_PUBLISHER_ACCOUNT_ADDRESS` to be the existing account address
3. Update the `MODULE_PUBLISHER_PRIVATE_KEY` to be the existing account private key
4. Run `npm run move:publish` to publish your move module on Aptos mainnet.
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,14 @@ The NFT minting dapp template provides 3 pages:
- [Customizing the frontend](#customizing-the-front-end)
- [Deploy to a live server](#deploy-to-a-live-server)

## Generate the NFT minting dapp template

On your terminal, navigate to the directory you want to work in and run:
```bash
npx create-aptos-dapp@latest
```

Follow the CLI prompts.

## Create Collection Assets

Expand Down Expand Up @@ -140,18 +148,6 @@ The `image` field of the metadata.json files above will be filled in automatical

<Steps>

### On the project root folder, use the below command to initiliaze an account to publish the contract with.

```bash
npm run move:init
```

The CLI will prompt you to provide the private key for your wallet in order for the tool to publish the contract on your behalf. If you provide no input, it will generate one for you.

This will:
1. Create an account you will later publish the contract with.
2. Create a `./aptos/config.yaml` file with the newly created account information.

### In the `.env` file, set `VITE_COLLECTION_CREATOR_ADDRESS` to be the same as your account address.
This determines which account is allowed to create collections using the dapp.

Expand Down Expand Up @@ -269,17 +265,16 @@ Check out our [TS SDK](../../sdks/ts-sdk.mdx) to see what other [API queries](ht

If you started your dapp on testnet, and you are happy with your NFT collection testing, you will want to get your collection on mainnet.

Creating a collection on mainnet follows the same flow as creating a collection on testnet. But, we need to change some configuration changes.

1. Change the `VITE_APP_NETWORK` value to `mainnet` in the `.env` file
2. Run `npm run move:init` to initialize an account to work against Mainnet
3. If you already have an account you would like to use to publish the contract under, you can pass its private key when the prompt asks for that.
4. If you are generating a new account, you need to transfer this account some APT on Aptos Mainnet since the tool can’t fund the account when it is against Mainnet.
5. Check: open `.aptos/config.yaml` file and see that you have a profile under the `{PROJECT_NAME}-mainnet` name (where `PROJECT_NAME` is specified in your `.env` file). In addition, open the `.env` file and check the `VITE_MODULE_ADDRESS` value is the same as the new profile's account account address.
6. Edit the `scripts/move/publish.js` file, and change the `minter` address to [`0x5ca749c835f44a9a9ff3fb0bec1f8e4f25ee09b424f62058c561ca41ec6bb146`](https://explorer.aptoslabs.com/object/0x5ca749c835f44a9a9ff3fb0bec1f8e4f25ee09b424f62058c561ca41ec6bb146/modules/code/mint_stage?network=mainnet) so it would use the Mainnet token-minter address.
7. Create or get the account you want to create a collection with, open the `.env` file and assign the account address as the `VITE_COLLECTION_CREATOR_ADDRESS` value.
8. Finally, run `npm run move:publish` to publish your move module on Aptos mainnet.
9. The next step would be to create a collection using this account. Simply follow [the instructions here](#create-a-nft-collection-page)
Creating a collection on mainnet follows the same flow as creating a collection on testnet. But, we need to change some configuration.

> Note: Make sure you have created an existing account on the Aptos `mainnet`
1. Change the `VITE_APP_NETWORK` value to `mainnet` on the `.env` file
2. Update the `VITE_MODULE_PUBLISHER_ACCOUNT_ADDRESS` to be the existing account address on the `.env` file
3. Update the `VITE_MODULE_PUBLISHER_PRIVATE_KEY` to be the existing account private key on the `.env` file
4. Create or get the account you want to create a collection with, open the `.env` file and assign the account address as the `VITE_COLLECTION_CREATOR_ADDRESS` value.
5. Finally, run `npm run move:publish` to publish your move module on Aptos mainnet.
6. The next step would be to create a collection using the account you set as the `VITE_COLLECTION_CREATOR_ADDRESS`. Simply follow [the instructions here](#create-a-nft-collection-page)

## Deploy to a live server

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -26,22 +26,18 @@ The Token minting dapp template provides 3 pages:
- [Customizing the frontend](#customizing-the-front-end)
- [Deploy to a live server](#deploy-to-a-live-server)

## Generate the Token minting dapp template

## Publish the Move Contract

<Steps>

### On the project root folder, use the below command to initiliaze an account to publish the contract with.

```bash filename="Terminal"
npm run move:init
On your terminal, navigate to the directory you want to work in and run:
```bash
npx create-aptos-dapp@latest
```

The CLI will prompt you to provide the private key for your wallet in order for the tool to publish the contract on your behalf. If you provide no input, it will generate one for you.
Follow the CLI prompts.

This will:
1. Create an account you will later publish the contract with.
2. Create a `./aptos/config.yaml` file with the newly created account information.
## Publish the Move Contract

<Steps>

### In the `.env` file, set `VITE_FA_CREATOR_ADDRESS` to be the same as your account address.
This determines which account is allowed to create assets using the dapp.
Expand Down Expand Up @@ -163,14 +159,14 @@ If you started your dapp on testnet, and you are happy with your asset testing,

Creating a asset on mainnet is the same flow as creating on testnet, but we need to change some configuration.

1. Change the `VITE_APP_NETWORK` value to `mainnet` in the `.env` file
2. Run `npm run move:init` to initialize an account to work against Mainnet
3. If you already have an account you would like to use to publish the contract under, you can pass its private key when the prompt asks for that.
4. If you are generating a new account, you need to transfer this account some APT on Aptos Mainnet since the tool can’t fund the account when it is against Mainnet.
5. Check: open `.aptos/config.yaml` file and see that you have a profile under the `{PROJECT_NAME}-mainnet` name (where `PROJECT_NAME` is specified in your `.env` file). In addition, open the `.env` file and check the `VITE_MODULE_ADDRESS` value is the same as the new profile's account account address.
6. Create or get the account you want to create a asset with, open the `.env` file and assign the account address as the `VITE_FA_CREATOR_ADDRESS` value.
7. Finally, run `npm run move:publish` to publish your move module on Aptos mainnet.
8. The next step would be to create an asset using this account. Simply follow [Create a Fungible Asset Page](#create-a-fungible-asset-page)
> Note: Make sure you have created an existing account on the Aptos `mainnet`
1. Change the `VITE_APP_NETWORK` value to `mainnet` on the `.env` file
2. Update the `VITE_MODULE_PUBLISHER_ACCOUNT_ADDRESS` to be the existing account address on the `.env` file
3. Update the `VITE_MODULE_PUBLISHER_PRIVATE_KEY` to be the existing account private key on the `.env` file
4. Create or get the account you want to create a asset with, open the `.env` file and assign the account address as the `VITE_FA_CREATOR_ADDRESS` value.
5. Finally, run `npm run move:publish` to publish your move module on Aptos mainnet.
6. The next step would be to create an asset using the account you set as the `VITE_FA_CREATOR_ADDRESS`. Simply follow [Create a Fungible Asset Page](#create-a-fungible-asset-page)

## Deploy to a live server

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -30,22 +30,18 @@ The Token staking dapp template provides a one page with different components:
- [Incentivize the pool with rewards](#incentivize-the-pool-with-rewards)
- [Deploy to a live server](#deploy-to-a-live-server)

## Generate the Token Staking dapp template

## Publish the Move Contract

<Steps>

### On the project root folder, use the below command to initiliaze an account to publish the contract with.

```bash filename="Terminal"
npm run move:init
On your terminal, navigate to the directory you want to work in and run:
```bash
npx create-aptos-dapp@latest
```

The CLI will prompt you to provide the private key for your wallet in order for the tool to publish the contract on your behalf. If you provide no input, it will generate one for you.
Follow the CLI prompts.

This will:
1. Create an account you will later publish the contract with.
2. Create a `./aptos/config.yaml` file with the newly created account information.
## Publish the Move Contract

<Steps>

### In the `.env` file, set `VITE_REWARD_CREATOR_ADDRESS` to be the same as your account address.
This determines which account is allowed to create a pool using the dapp.
Expand Down Expand Up @@ -145,15 +141,15 @@ If you started your dapp on testnet, and you are happy with your asset testing,

Creating a asset on mainnet is the same flow as creating on testnet, but we need to change some configuration.

1. Change the `VITE_APP_NETWORK` value to `mainnet` in the `.env` file
2. Run `npm run move:init` to initialize an account to work against Mainnet
3. If you already have an account you would like to use to publish the contract under, you can pass its private key when the prompt asks for that.
4. If you are generating a new account, you need to transfer this account some APT on Aptos Mainnet since the tool can’t fund the account when it is against Mainnet.
5. Check: open `.aptos/config.yaml` file and see that you have a profile under the `{PROJECT_NAME}-mainnet` name (where `PROJECT_NAME` is specified in your `.env` file). In addition, open the `.env` file and check the `VITE_MODULE_ADDRESS` value is the same as the new profile's account account address.
> Note: Make sure you have created an existing account on the Aptos `mainnet`
1. Change the `VITE_APP_NETWORK` value to `mainnet` on the `.env` file
2. Update the `VITE_MODULE_PUBLISHER_ACCOUNT_ADDRESS` to be the existing account address on the `.env` file
3. Update the `VITE_MODULE_PUBLISHER_PRIVATE_KEY` to be the existing account private key on the `.env` file
6. Create or get the account you want to create a asset with, open the `.env` file and assign the account address as the `VITE_REWARD_CREATOR_ADDRESS` value.
7. Create or get the asset you want to use in your dapp, open the `.env` file and assign the asset address as the `VITE_FA_ADDRESS` value.
8. Finally, run `npm run move:publish` to publish your move module on Aptos mainnet.
9. The next step would be to create an incentivize pool using this account. Simply follow [Incentivize the pool with rewards](#incentivize-the-pool-with-rewards)
9. The next step would be to create an incentivize pool using the account you set as the `VITE_REWARD_CREATOR_ADDRESS`. Simply follow [Incentivize the pool with rewards](#incentivize-the-pool-with-rewards)

## Deploy to a live server

Expand Down
7 changes: 3 additions & 4 deletions apps/nextra/pages/en/build/guides/aptos-keyless.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -15,9 +15,8 @@ Visit this page to learn more [Simple Example](aptos-keyless/simple-example.mdx)

<br/>

{/* ADD BACK WHEN WE HAVE A BETTER APPROACH TO SOLVING THE CREDITS PROBLEM */}
{/* <iframe
src="https://codesandbox.io/p/devbox/aptos-keyless-example-pwsfs8?embed=1&file=%2FREADME.md"
<iframe
src="https://stackblitz.com/edit/vitejs-vite-3fuvtu?embed=1&file=README.md"
style={{
width: "100%",
height: "800px",
Expand All @@ -28,4 +27,4 @@ Visit this page to learn more [Simple Example](aptos-keyless/simple-example.mdx)
title="aptos-keyless-example"
allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
></iframe> */}
></iframe>
Original file line number Diff line number Diff line change
Expand Up @@ -8,12 +8,12 @@ Explore the code in [aptos-keyless-example repository](https://github.com/aptos-

The Keyless Simple Example is currently undergoing maintenance. Please check back later.

{/* This is a live Keyless example on CodeSandbox. Follow the instructions in the `README.md` to add your own Google `client_id`. Explore the code in [aptos-keyless-example repository](https://github.com/aptos-labs/aptos-keyless-example/).
This is a live Keyless example on CodeSandbox. Follow the instructions in the `README.md` to add your own Google `client_id`. Explore the code in [aptos-keyless-example repository](https://github.com/aptos-labs/aptos-keyless-example/).

<br/>

<iframe
src="https://codesandbox.io/p/devbox/aptos-keyless-example-pwsfs8?embed=1&file=%2FREADME.md"
<iframe
src="https://stackblitz.com/edit/vitejs-vite-3fuvtu?embed=1&file=README.md"
style={{
width: "100%",
height: "800px",
Expand All @@ -24,4 +24,4 @@ The Keyless Simple Example is currently undergoing maintenance. Please check bac
title="aptos-keyless-example"
allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
></iframe> */}
></iframe>

0 comments on commit e546962

Please sign in to comment.