Skip to content

Commit

Permalink
Reorganization of the repository
Browse files Browse the repository at this point in the history
The repository was reorganized to include both the 'backend' and the 'frontend' code. These will be containerized via Docker (#19).
  • Loading branch information
regcs committed Sep 4, 2023
1 parent 5971f82 commit c0e27f5
Show file tree
Hide file tree
Showing 103 changed files with 21,798 additions and 409 deletions.
3 changes: 3 additions & 0 deletions src/.gitignore → backend/src/.gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -8,3 +8,6 @@
*.DS_Store
*.log
testnet.env
snippets
initializer
tmp
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
6 changes: 3 additions & 3 deletions src/webapp/root.go → backend/src/webapp/root.go
Original file line number Diff line number Diff line change
Expand Up @@ -22,8 +22,8 @@ package webapp

/*
The webapp package provides the backend and front end for the user UI, which will
be served locally as a webapp.
The webapp package provides the communication layer between backend and frontend for the user UI, which will
be served locally as a web app.
*/

Expand Down Expand Up @@ -84,7 +84,7 @@ func (webappm *PackageManager) DeInit() error {

}

// RENDER MANAGER COMMAND LINE INTERFACE
// WEBAPP MANAGER COMMAND LINE INTERFACE
// #############################################################################
// Create the command for the command line interface
func (webappm *PackageManager) CreateCommand() *cobra.Command {
Expand Down
1 change: 1 addition & 0 deletions frontend/.env
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
HTTPS=true
23 changes: 23 additions & 0 deletions frontend/.gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.

# dependencies
/node_modules
/.pnp
.pnp.js

# testing
/coverage

# production
/build

# misc
.DS_Store
.env.local
.env.development.local
.env.test.local
.env.production.local

npm-debug.log*
yarn-debug.log*
yarn-error.log*
136 changes: 136 additions & 0 deletions frontend/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,136 @@
Hedera DApp Starter Template using Create React App, Material UI and Typescript with HashPack, Blade, and MetaMask wallet support.

## Prerequisites

### Hedera Testnet account

Don't have one? Create one by going to [portal.hedera.com](https://portal.hedera.com/register). This testnet account will recieve 10,000 test HBAR every 24 hours!

### Hashpack Wallet
* Install the [Hashpack extension](https://chrome.google.com/webstore/detail/hashpack/gjagmgiddbbciopjhllkdnddhcglnemk).
* Import a Hedera ED25519 testnet account into Hashpack.

### Blade Wallet
* Install the [Blade extension](https://chrome.google.com/webstore/detail/blade-%E2%80%93-hedera-web3-digit/abogmiocnneedmmepnohnhlijcjpcifd).
* Import a Hedera ED25519 testnet account into Blade.

### Metamask Wallet
* Install the [MetaMask extension](https://chrome.google.com/webstore/detail/metamask/nkbihfbeogaeaoehlefnkodbefgpgknn).

#### How to activate your account on Hedera Testnet

* Activate it by transferring any amount of test HBAR to your EVM address

-----

## How to use
```npx create-react-app <app-name> --template hedera-dapp-template ```

> Blade requires the use of HTTPS in order to pair wallets. An `.env` file exists in your root directory with `HTTPS=true` in order to connect to blade.
----

## Examples
### Transfer HBAR
```tsx
<Stack
direction='row'
gap={2}
alignItems='center'
>
<Typography>
Transfer
</Typography>
<TextField
type='number'
label='amount'
value={amount}
onChange={(e) => setAmount(parseInt(e.target.value))}
sx={{
maxWidth: '100px'
}} />
<Typography>
HBAR
to
</Typography>
<TextField
value={toAccountId}
onChange={(e) => setToAccountId(e.target.value)}
label='account id or evm address'
/>
<Button
variant='contained'
onClick={async () => {
const txId = await walletInterface.transferHBAR(toAccountId, amount);
}}
>
<SendIcon />
</Button>
</Stack>
```
### Transfer a Fungible/ERC20 Token

```tsx
<Button
variant='contained'
onClick={async () => {
const txId = await walletInterface.transferToken(toAccountId, TokenId.fromString(tokenId), amount);
}}
>
Transfer Token
</Button>

<Button
variant='contained'
onClick={async () => {
const txId = await walletInterface.associateToken(TokenId.fromString(tokenId));
}}
>
Associate Token
</Button>
```
### Executing Two Contract Functions

```tsx
<Button
variant='contained'
onClick={async () => {
const txId = await walletInterface.executeContractFunction(ContractId.fromString(contractId), "createTodo", new ContractFunctionParameterBuilder().addParam({ type: "string", name: "todoName", value: "Testing Totoro" }), 5000000);
}}
>
Execute Contract Function
</Button>
<Button
variant='contained'
onClick={async () => {
const txId = await walletInterface.executeContractFunction(ContractId.fromString(contractId), "getTodoById", new ContractFunctionParameterBuilder().addParam({ type: "uint256", name: "todoId", value: 1 }), 5000000);
}}
>
Execute Contract Function 2
</Button>
```
### Mirror Node Query: Get Account Info By Account Id

```tsx
<Stack>
<Button
variant='contained'
onClick={async () => {
const mirrorNodeClient = new MirrorNodeClient(appConfig.networks.testnet);
const accountInfo = await mirrorNodeClient.getAccountInfo(accountId);
console.log(accountInfo.balance);
}}
>
Query for Account Info
</Button>
</Stack>
```

---

## JSON RPC Relay Endpoint Alternatives
### Set up your own Hedera JSON RPC relay
Check out the Hedera JSON RPC relay GitHub repo [here](https://github.com/hashgraph/hedera-json-rpc-relay) and set up an RPC relay to run locally.

### Arkhia
Arkhia offers another community JSON RPC relay that you can leverage. Sign up for free and get started [here](https://www.arkhia.io/features/#api-services).
Loading

0 comments on commit c0e27f5

Please sign in to comment.