update(docs): enhanced System Contracts' Dapp's documentation (#270)

* dapp-update(docs): reworded `Running the project` guides Signed-off-by: Logan Nguyen <logan.nguyen@swirldslabs.com> * dap-update(docs): added `Config` section to describe different config files in the project Signed-off-by: Logan Nguyen <logan.nguyen@swirldslabs.com> * dapp-update(docs): added license header to files in project Signed-off-by: Logan Nguyen <logan.nguyen@swirldslabs.com> * dapp-update(docs): updated package.json - added `@hashgraph` prefix to project name - added package description - added repository UR, homepageL and bug tracking link - added author information for Hedera Smart Contracts Team - added license information in package.json (Apache-2.0) Signed-off-by: Logan Nguyen <logan.nguyen@swirldslabs.com> * dap-docs: added `Initial account and wallet setup` section to README Signed-off-by: Logan Nguyen <logan.nguyen@swirldslabs.com> * dapp-docs: updated Account and network setup in README Signed-off-by: Logan Nguyen <logan.nguyen@swirldslabs.com> * dapp-fix(docs): fixed typo and updated Block explorer URL for Localnet Signed-off-by: Logan Nguyen <logan.nguyen@swirldslabs.com> --------- Signed-off-by: Logan Nguyen <logan.nguyen@swirldslabs.com>
hashgraph · Aug 3, 2023 · c4952f5 · c4952f5
1 parent ad267c4
commit c4952f5
Show file tree

Hide file tree

Showing 10 changed files with 209 additions and 10 deletions.
diff --git a/system-contract-dapp-playground/README.md b/system-contract-dapp-playground/README.md
@@ -17,8 +17,8 @@ TBD
 - [npm](https://www.npmjs.com/)
 - [nodejs](https://nodejs.org/en/)
 - [contributing guide](https://github.com/hashgraph/.github/blob/main/CONTRIBUTING.md#pull-requests)
-- [Hedera accounts](https://docs.hedera.com/hedera/getting-started/introduction#create-hedera-portal-profile-faucet)
-- [prettier pluggin](https://prettier.io/) (recommended)
+- [Metamask wallet plugin](https://metamask.io/download/)
+- [prettier plugin](https://prettier.io/) (recommended)
 
 ## Quickstart
 
@@ -28,16 +28,104 @@ cd ./hedera-smart-contracts/system-contract-dapp-playground
 npm install
 ```
 
-## Running the project
+## Initial account and wallet setup (important)
 
-### Running project in `dev` mode
+**_Important_**: Before proceeding, ensure your `Metamask wallet` points to the correct `Hedera network` (localnet, previewnet, testnet or mainnet) and is associated with a valid ECDSA based `Hedera account` that was auto-created or lazy-created with an evmAddress alias set as highlighted in [HIP 583](https://hips.hedera.com/hip/hip-583). This is crucial for the project's proper functioning. If you haven't configured these settings yet, please follow the guidelines below.
+
+**_note_**: The information shared below is specifically targeted at individuals who do not currently hold a `Hedera Portal` account and/or have not connected the `Hedera network` to their `Metamask` wallet. Feel free to proceed directly to [Project Execution](README.md#project-execution) if you have already configured your Hedera account and Metamask wallet appropriately
+
+#### 1. Create Hedera Portal Profile
+
+- Visit the [Hedera Portal](https://portal.hedera.com/register), follow the instructions to create a **_Hedera Test_** account on previewnet or testnet.
+
+- Once you have completed the instructions, you will receive a Hedera account ID (0.0.x) and your private/public key pair on your portal page. You will need to save the **_HEX Encoded Private Key_** as later, we will be using it to import the account into your `Metamask` wallet.
+
+<img width="509" alt="image" src="./public/assets/docs/Hedera_portal_profile.png">
+
+**_Important_**: While Hedera supports both ECDSA and ED25519 accounts, please use ECDSA since the EVM is designed to operate with ECDSA accounts.
+
+#### 2. Wallet setup (Metamask)
+
+- Inside your `Metamask` wallet, navigate to Settings > Networks > Add network > Add a network manually. A form will appear, where you can input the required network details. It should look similar to the following:
+
+<img width="509" alt="image" src="./public/assets/docs/Metamask_form.png">
+
+- Please use the provided information below to complete the form and add the desired network based on environment.
+
+##### a. Hedera Mainnet
+
+| Field              | Data                                  |
+| ------------------ | ------------------------------------- |
+| Network name       | Hedera Mainnet                        |
+| New RPC URL        | https://mainnet.hashio.io/api         |
+| Chain ID           | 295                                   |
+| Currency symbol    | HBAR                                  |
+| Block explorer URL | https://hashscan.io/mainnet/dashboard |
+
+##### b. Hedera Testnet
+
+| Field              | Data                                  |
+| ------------------ | ------------------------------------- |
+| Network name       | Hedera Testnet                        |
+| New RPC URL        | https://testnet.hashio.io/api         |
+| Chain ID           | 296                                   |
+| Currency symbol    | HBAR                                  |
+| Block explorer URL | https://hashscan.io/testnet/dashboard |
+
+##### c. Hedera Previewnet
+
+| Field              | Data                                     |
+| ------------------ | ---------------------------------------- |
+| Network name       | Hedera Previewnet                        |
+| New RPC URL        | https://previewnet.hashio.io/api         |
+| Chain ID           | 297                                      |
+| Currency symbol    | HBAR                                     |
+| Block explorer URL | https://hashscan.io/previewnet/dashboard |
+
+##### d. Hedera Localnet
+
+**_important_**: Before proceeding to add `Localnet` to your Metamask, please ensure that an instance of a `Hedera local node` is running. Follow this [guides](https://github.com/hashgraph/hedera-local-node#installation) to set up and run a `Hedera local node`.
+
+| Field              | Data                  |
+| ------------------ | --------------------- |
+| Network name       | Hedera Localnet       |
+| New RPC URL        | http://localhost:7546 |
+| Chain ID           | 298                   |
+| Currency symbol    | HBAR                  |
+| Block explorer URL | http://localhost:8080 |
+
+#### 3. Import Hedera account to Metamask
+
+Please follow this [instruction here](https://support.metamask.io/hc/en-us/articles/360015489331-How-to-import-an-account) on how to import your account to Metamask using your **_HEX Encoded Private Key_** found in your Hedera Portal profile.
+
+## Project Execution
+
+### Running the project locally
 
 ```
   npm run dev
 ```
 
-### Running project in `production` mode
+### Building the project
 
 ```
-  npm run build && npm run start
+  npm run build
 ```
+
+### Starting production-ready build
+
+```
+  npm run start
+```
+
+**_important_**: must [build the project](README.md#building-the-project) first.
+
+## Config
+
+| Config files                             | Purpose                                                                                                                                                                                                                                     |
+| ---------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| [next-env.d.ts](next-env.d.ts)           | a declaration file that allows to extend the global TypeScript types and declare custom types specific to Next.js project. This file ensures that TypeScript correctly recognizes Next.js-specific types and prevents type-checking errors. |
+| [next.config.js](next.config.js)         | allows to customize the Next.js configuration, including settings for features, plugins, environment variables, and webpack behavior.                                                                                                       |
+| [postcss.config.js](postcss.config.js)   | specifies the PostCSS plugins and their settings used to process and transform CSS code during the build process.                                                                                                                           |
+| [tailwind.config.js](tailwind.config.js) | allows to customize Tailwind CSS by providing options to modify colors, fonts, breakpoints, variants, and more, tailoring the framework to specific project requirements.                                                                   |
+| [tsconfig.json](tsconfig.json)           | configures the TypeScript compiler settings, enabling to specify target environments, module systems, and other options, ensuring type-checking and compilation of TypeScript code for the project.                                         |
diff --git a/system-contract-dapp-playground/package-lock.json b/system-contract-dapp-playground/package-lock.json
diff --git a/system-contract-dapp-playground/package.json b/system-contract-dapp-playground/package.json
@@ -1,7 +1,17 @@
 {
-  "name": "system-contract-dapp-playground",
+  "name": "@hashgraph/system-contract-dapp-playground",
   "version": "0.1.0",
-  "private": true,
+  "description": "Hedera System Smart Contract Dapp Playground",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/hashgraph/hedera-smart-contracts.git"
+  },
+  "author": "Hedera Smart Contracts Team",
+  "license": "Apache-2.0",
+  "bugs": {
+    "url": "https://github.com/hashgraph/hedera-smart-contracts/issues"
+  },
+  "homepage": "https://github.com/hashgraph/hedera-smart-contracts/blob/main/system-contract-dapp-playground/README.md",
   "scripts": {
     "dev": "next dev",
     "build": "next build",

diff --git a/system-contract-dapp-playground/public/assets/docs/Hedera_portal_profile.png b/system-contract-dapp-playground/public/assets/docs/Hedera_portal_profile.png
diff --git a/system-contract-dapp-playground/public/assets/docs/Metamask_form.png b/system-contract-dapp-playground/public/assets/docs/Metamask_form.png
diff --git a/system-contract-dapp-playground/src/app/layout.tsx b/system-contract-dapp-playground/src/app/layout.tsx
@@ -1,3 +1,23 @@
+/*-
+ *
+ * Hedera Smart Contracts
+ *
+ * Copyright (C) 2023 Hedera Hashgraph, LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ */
+
 import '@/styles/globals.css';
 import StyreneAWebFont from '@/fonts';
 import dappMetadata from '@/utils/metadata';

diff --git a/system-contract-dapp-playground/src/app/page.tsx b/system-contract-dapp-playground/src/app/page.tsx
@@ -1,3 +1,23 @@
+/*-
+ *
+ * Hedera Smart Contracts
+ *
+ * Copyright (C) 2023 Hedera Hashgraph, LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ */
+
 export default function Home() {
   return (
     <main>

diff --git a/system-contract-dapp-playground/src/fonts/index.ts b/system-contract-dapp-playground/src/fonts/index.ts
@@ -1,3 +1,23 @@
+/*-
+ *
+ * Hedera Smart Contracts
+ *
+ * Copyright (C) 2023 Hedera Hashgraph, LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ */
+
 import localFont from 'next/font/local';
 
 /** @notice learn more about localFont at https://nextjs.org/docs/app/building-your-application/optimizing/fonts#local-fonts */

diff --git a/system-contract-dapp-playground/src/libs/chakra/provider.tsx b/system-contract-dapp-playground/src/libs/chakra/provider.tsx
@@ -1,3 +1,23 @@
+/*-
+ *
+ * Hedera Smart Contracts
+ *
+ * Copyright (C) 2023 Hedera Hashgraph, LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ */
+
 'use client';
 
 import { CacheProvider } from '@chakra-ui/next-js';

diff --git a/system-contract-dapp-playground/src/utils/metadata.ts b/system-contract-dapp-playground/src/utils/metadata.ts
@@ -1,3 +1,23 @@
+/*-
+ *
+ * Hedera Smart Contracts
+ *
+ * Copyright (C) 2023 Hedera Hashgraph, LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ */
+
 import { Metadata } from 'next';
 
 const DAPP_NAME = 'Hedera System Contract Dapp';