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.

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

Update Hiro Platform Guides #715

Draft
wants to merge 4 commits into
base: develop
Choose a base branch
from
Draft
Show file tree
Hide file tree
Changes from all commits
Commits
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
15 changes: 3 additions & 12 deletions content/docs/stacks/platform/guides/build-contracts.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -3,16 +3,10 @@ title: Build contracts
description: Learn how to develop contracts and build in the Hiro Platform.
---

## Prerequisites

- Log in using any of the methods described in the [Quickstart](/stacks/platform/quickstart) guide.
- Create or import a project by following the steps in the [create project](/stacks/platform/guides/create-project) guide.

## Build contract
Building contracts on the Hiro Platform allows you to leverage the power of Clarity, a language designed for smart contracts on the Stacks blockchain.

<Callout title="Note">
If you are new to Clarity programming, check out the [Bitcoin Builders
Primer](https://start.bitcoinprimer.dev/).
If you are new to Clarity programming, check out the [Bitcoin Builders Primer](https://start.bitcoinprimer.dev/).
</Callout>

If you have create or imported a project with no Clarity contracts, you will see a window that prompts you to create a new contract or open a web (or local) editor.
Expand All @@ -28,10 +22,7 @@ To create a new contract, you can simply click the "Create contract" button whic
You can also create a new contract for your project from the editor by following the steps below. Note: the sample project used here is from [Clarity examples](https://github.com/hirosystems/clarity-examples/tree/main/examples/blank-project), and these steps assume that your project has no Clarity contracts already.

<Callout title="Note">
Hiro offers a [collection of Clarity smart
contracts](https://github.com/hirosystems/clarity-examples/tree/main/examples)
in the platform available for you to quickly extend and deploy. Or you can
write your own from scratch.
Hiro offers a [collection of Clarity smart contracts](https://github.com/hirosystems/clarity-examples/tree/main/examples) in the platform available for you to quickly extend and deploy. Or you can write your own from scratch.
</Callout>

1. Click the "Open in Web Editor" button. If you want to do this locally, you first need to [set up SSH](/stacks/platform/guides/connect-desktop-to-cloud).
Expand Down
66 changes: 53 additions & 13 deletions content/docs/stacks/platform/guides/create-project.mdx
Original file line number Diff line number Diff line change
@@ -1,38 +1,78 @@
---
title: Create a project
description: Create a new project or import a project from GitHub.
description: Learn how to create a new project or import an existing one from GitHub on the Hiro Platform.
---

This article walks you through the process of creating a new project or importing a project from GitHub.
In this guide, you'll discover how to easily create a new project or import an existing project from GitHub within the [Hiro Platform](https://platform.hiro.so/).

After you log into the [Hiro Platform](https://platform.hiro.so/), you will automatically land on the projects tab and be prompted to create a project or import from GitHub.
After you log in, you'll land on the `/projects` page. This is where you can either create a project from scratch, choose an example project, or import one from GitHub.

## Create or import a project

![create or import a project](../images/project/create-or-import.png)

## Create new project
### Create a new project

To start a new project, you can begin with a blank project or by choosing one of the example projects provided. The selections includes options such as:

- [Hello world](https://github.com/hirosystems/clarity-examples/tree/main/examples/hello-world)
- [Fungible token](https://github.com/hirosystems/clarity-examples/tree/main/examples/fungible-token) and [Non-fungible token](https://github.com/hirosystems/clarity-examples/tree/main/examples/non-fungible-token)
- [Counter](https://github.com/hirosystems/clarity-examples/tree/main/examples/counter)
- [DeFi](https://github.com/hirosystems/clarity-examples/tree/main/examples/stx-defi)

For this example, create a new project using the **Counter** template.

<Callout title="Examples">
For the rest of the examples, check out the [Clarity examples](https://github.com/hirosystems/clarity-examples/tree/main/examples) repo.
</Callout>

Starting on the `/projects` page:

To create a new project, you can start with a blank project or use one of the examples displayed in the project modal. Those sample projects include a Hello world contract, fungible and non-fungible token contracts, a counter contract, a swap contract, and more. You can also refer to the examples in the [Clarity examples](https://github.com/hirosystems/clarity-examples/tree/main/examples) to view the source code.
1. Click on the **New project** button.
2. In the template section, browse the examples. Look for the **Counter** template and select it.

![Create new project](../images/project/new-project.png)

Once you select a new project from the list, the selected example project will be automatically cloned and displayed on the [projects](https://platform.hiro.so) page. For example, here is a project page with the `counter` project template.
Selecting the **Counter** template immediately takes you to a new project page, as the template will automatically be cloned and displayed.

![Hello world project](../images/project/counter.png)
Here, you can see a single `counter.clar` contract with the example code already written.

From this projects page, you can manage all of your projects, and when you click into an individual project, you can then see all of the contracts in that particular project, edit those contracts, and add new ones.
![Counter project](../images/project/counter.png)

## Import project from GitHub
On the right hand side of the interface, you can start editing your smart contracts, which will be validated in real-time.

When you import a project from GitHub, there will be a modal displayed on the right where you can enter the GitHub URL of your project.
To add a new contract, you can click on the **Create Contract** button that sits on the left hand side of the interface above your existing contracts.

![Import from GitHub](../images/project/import-from-github.png)
<Callout title="Note">
With a new project now created, you'll now see it on the `/projects` page. Here, you can manage all your projects.
</Callout>

### Import a project from GitHub

Once you enter the URL of your project, select _clone_ to clone your project into the Hiro Platform.
1. Click on the **Import from GitHub** button.
2. Enter the GitHub URL of the project you wish to import and click on **Clone**.

![Import from GitHub](../images/project/import-from-github.png)

<Callout title="Requirements" type="warn">
The maximum project size allowed for imports is 50 MB.
</Callout>

You can now find your cloned project on the projects page in the platform, and by clicking into the project, you can see a list of all Clarity contracts ending with `.clar` extension, which will look something like this:
Similar to creating a new project manually, cloning will redirect you to your project page where you can view the imported contracts.

![Import Clarinet project from GitHub](../images/project/import-from-clarinet.png)

## Next steps

<Cards>
<Card
href="/stacks/platform/guides/deploy-project"
title="Deploy a project"
description="Deploy your project to devnet, testnet, or mainnet using the Hiro Platform."
/>
<Card
href="/stacks/platform/guides/connect-desktop-to-cloud"
title="Connect your local editor to the Hiro Platform"
description="Connect your local editor to the cloud."
/>
</Cards>
8 changes: 4 additions & 4 deletions content/docs/stacks/platform/guides/deploy-project.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -24,21 +24,21 @@ The following are the steps to deploy your contracts using the deploy button.
![deploy to environments](../images/deploy-project/deploy-to-environment.png)
5. Once you choose testnet or mainnet, a pop-up window will open and prompt you to connect your wallet and confirm the deployment.

![wallet](../images/deploy-project/connect-wallet.png)
![wallet](../images/deploy-project/connect-wallet.png)

6. While the deployment is in progress, you will see the contract status as "In mempool" under the environment field for the contract.

7. Once the deployment is confirmed, that status will update to "Deployed" under the chosen environment.

![Mainnet deployment](../images/deploy-project/mainnet-deployment.png)
![Mainnet deployment](../images/deploy-project/mainnet-deployment.png)

## Monitor your contract in the Stacks Explorer

At any time, you can monitor your contract in the [Stacks Explorer](https://explorer.hiro.so/?chain=mainnet).

1. You can use the Pop-out button "View in Explorer" beside the deployment status to monitor your contract in the Explorer.
![Exporer view](../images/deploy-project/explorer-view.png)
![Exporer view](../images/deploy-project/explorer-view.png)
2. This button will open the Explorer to a page showing the contract you just deployed. From this page, you can see relevant information about your contract and the contract details.
![Explorer](../images/deploy-project/contract-on-explorer.png)
![Explorer](../images/deploy-project/contract-on-explorer.png)

If you find issues with your deployment process, you can refer to the [FAQ section](/stacks/platform/faqs) or file an issue [here](https://hiro-pbc.canny.io/hiro-platform).
Loading