# Hedera NFT Minter App

The Hedera NFT Minter is an example webapp which demonstrates how you can mint NFTs on the Hedera public network utilizing the Hedera Token Service ("HTS"). All NFTs assets are uploaded to IPFS and enforce the [HIP-412](https://hips.hedera.com/hip/hip-412) metadata standard. In addition to minting, the webapp includes a My NFT Gallery page which displays all HTS NFTs owned by the current session user.

Please note that the Hedera NFT Minter does NOT mint NFTs using either the ERC721 or ERC1155 standard.


#### Built With

- [Hedera Hashgraph](https://www.hedera.com/) - The enterprise grade public network
- [Hedera Mirror Node](https://docs.hedera.com/guides/core-concepts/mirror-nodes/) - provide a way to store and cost-effectively query historical data from the public ledger
- [Hedera Hashgraph JavaScript SDK](https://github.com/hashgraph/hedera-sdk-js) - The easiest way to use Hedera in JavaScript
- [NFT Storage](https://api.nft.storage) - The long-term storage service designed for off-chain NFT data
- [Node.JS](https://nodejs.org) - Node.js is an open-source, cross-platform, JavaScript runtime environment
- [React.Js](https://reactjs.org/) - A fast, unopinionated web framework for node.js
- [TypeScript](https://www.typescriptlang.org/) - Strongly typed programming language that builds on JavaScript
- [SASS](https://sass-lang.com/) - The most mature, stable, and powerful professional grade CSS extension language in the world.
- [BabelJS](https://babeljs.io/) - a free and open-source JavaScript transcompiler
- [WebPack](https://webpack.js.org/) - Static module bundler for modern JavaScript applications

## Contributors & maintainers

I'd love your help supporting, growing, and improving this application. Seriously!

If you have any ideas please [get in touch]([e-mail]) or file a [pull request](https://github.com/).

## Prerequisites
This demo assumes that you are familiar with [Node.JS](https://nodejs.org) based applications and the [React.js](https://reactjs.org/) UI framework.

You should also be familiar with using [Hedera Mirror Node](https://docs.hedera.com/guides/core-concepts/mirror-nodes/) and the [Hedera Hashgraph JavaScript SDK](https://github.com/hashgraph/hedera-sdk-js)
You will need to generate API keys from [NFT Storage](https://api.nft.storage) in order to upload the image and json metadata files.

Finally, you will need a Hedera Account (testnet and/or mainnet). Both accounts can be created using either the [Hashpack](https://www.hashpack.app/) or [Blade](https://www.bladewallet.io/) wallets. If you need testnet hbar tokens, please visit [portal.hedera.com](https://portal.hedera.com).

## Getting Started

You can clone this repository by running the following command:

git clone https://github.com/???.git

Copy the `.env.sample` file and rename the copy to `.env`

Then update the newly renamed `.env` file with your IPFS data, Hedera network type and Mirror Node version:

APP_NAME=Mintbar

HEDERA_NETWORK=testnet
HEDERA_MIRROR_NODE_API_VERSION=v1

IPFS_URL=https://api.nft.storage
IPFS_KEYS=['key1','key2','key3','key4','key5']

HASHPACK_APP_CONFIG_NAME=Mintbar.xyz
HASHPACK_APP_CONFIG_DESCRIPTION=Mint your own NFT.
# HASHPACK_APP_CONFIG_ICON_URL=

- The `APP_NAME` is used for generating localStorage variable names for holding both wallets connection data.
- The `HEDERA_NETWORK` holds Hedera Network type (testnet, mainnet)
- The `HEDERA_MIRROR_NODE_API_VERSION` is variable for store the mirror node api version
- The `IPFS_URL` is your IPFS storage api url
- The `IPFS_KEYS` is an array with generated [NFT Storage](https://api.nft.storage) api keys
- The `HASHPACK_APP_CONFIG_NAME` stores name shown in HashPack connection modal
- The `HASHPACK_APP_CONFIG_DESCRIPTION` stores description shown in HashPack connection modal
- The `HASHPACK_APP_CONFIG_ICON_URL` is optional. Stores URL to image shown in HashPack connection modal. If not provided, app is looking for `${ window.location.protocol }//${ window.location.host }/logo.svg` to serve in HashPack connection modal

After downloading and setting up our environment, we'll install our packages via [npm](https://docs.npmjs.com/about-npm/).

npm install

If installing the dependencies was successful, now try to run the app

npm run start

## Application design

#### Page Components (*src/pages*)

1. **HomePage** Component : This component includes whole *MinterWizard* used to process minting. The ``handleFormSubmit`` method contains all procedures used for minting an NFT.

2. **MyNFTCollection** Component : This Component displays the listed NFTs of connected user of the selected customer. This Component gets its data from a json file in assets folder as well. This Component is the Child Component of *Customers* Component

#### Services (*src/services*)
##### HTS
1. ``createToken({
accountId: string;
tokenName: string;
tokenSymbol: string;
amount: number;
customFees?: Fees[];
keys?: TokenKey[]
})``: method used for generating [TokenCreateTransaction](https://hedera.com). Public key for connected account is fetched from MirrorNode.
2. ``mintToken(tokenId: string | TokenId, acc1: string, cids: string[])``: method used for generating [TokenMintTransaction](https://hedera.com)

##### MirrorNode
1. ``async fetchAccountInfo(accountId: string)``: fetch account info for Hedera account. [Mirror Node API - Accounts](https://docs.hedera.com/guides/docs/mirror-node-api/rest-api#api-v1-accounts-idoraliasorevmaddress)
2. ``async fetchTokenInfo(tokenId: string)``: fetch Hedera token info. [Mirror Node API - Token info](https://docs.hedera.com/guides/docs/mirror-node-api/rest-api#token-info)
3. ``async fetchNFTInfo(tokenId: string | TokenId)``: fetch all NFTs associated with provided token ID
(https://docs.hedera.com/guides/docs/mirror-node-api/rest-api#nfts)
4. ``async fetchNFTMetadata(cid: string)``: method fetches nft metadata from cid. If cid not contains https protocol we using https://ipfs.io/ipfs/ to serve metadata
5. ``async fetchUserCollectionsInfo(
accountId: string,
options: {
fetchNftsData?: boolean,
onlyAllowedToMint?: boolean,
onlyHasNFTs?: boolean
})``: method for fetching all collections of Hedera account. In options can select if you want to return only collections with NFTs, choose if you want to fetch all collection NFTs or return only collections, where new NFTs can be minted.
6. ``async fetchAllNFTs(idOrAliasOrEvmAddress: string)``: in this method all NFTs connected with Hedera account are returned. [Mirror Node API - Account NFTs](https://docs.hedera.com/guides/docs/mirror-node-api/rest-api#nfts-by-account-id)
7. ``async fetchCollectionInfoForGroupedNFTs(groupedNfts: GroupedNFTs)``: group NFTs fetched from ``MirrorNode.fetchAllNFTs()`` by collection ID and fetch additional collection info

##### IPFS
Both methods are using random IPFS key from ``.env`` variable for each request.
1. ``uploadFile(file: File | Blob)``: upload file
2. ``createMetadataFile(meta: NFTMetadata)``: upload `metadata.json` file

#### Connection Hooks (*src/utils/hooks*)
##### useHashPack
Inside this hook the HashConnect instance is created and connection with HashPack extension is trying to establish. Hook helps handle connection flow. Inside hook are listeners for HashPack wallet pairing and extension events. To support auto-reconnection, on every connection hook saving connection data in *localStorage* variable. Returns connectionData, clearing connection method, connection method and HashConnect instance.

const {
    hashConnect,
    hashConnectSaveData,
    connectToHashPack,
    clearPairedAccountsAndHashPackWalletData,
} = useHashPack();

##### useBladeWallet
Hook provides ability for connection within Hedera network with BladeWallet. It helps to handle connection. Has reconnect feature similar to useHashPack hook. Hook returns connection method, connected user ID, bladeSigner instance and clear pairing method.

const {
    bladeSigner,
    bladeAccountId,
    connectBladeWallet,
    clearConnectedBladeWalletData,
} = useBladeWallet();

##### useHederaWallets
The connection and sending transaction magic happened here. Hooks under the hood creates a context, where two above hooks are used to provide connection with each wallet extension. Within ``useHederaWallets`` you can send transaction generated from [Hedera JS SDK](https://hedera.com) signed by account connected with any supported Hedera wallet extension.

const {
    userWalletId,
    connectedWalletType,
    connect,
    disconnect,
    sendTransaction,
} = useHederaWallets()

#### URL (*src/routes/base.tsx*)
The application has:
- ``/`` which ties to **HomePage** Component
- ``/my-nft-collection`` which ties to **MyNFTCollection** Component

#### HTTP calls

**axios** library is used to make HTTP Calls. https://axios-http.com/

#### Hedera calls
- **@hashgraph/sdk**: to generate Hedera transactions. https://github.com/hashgraph/hedera-sdk-js
- **@bladelabs/blade-web3.js**: for submitting transactions with Blade wallet. https://github.com/Blade-Labs/blade-web3.js
- **hashconnect**: for submitting transactions with HashPack wallet. https://www.hashpack.app/hashconnect

## UI Resources
- **ReactJS** : Refer to https://reactjs.org/ to understand the concepts of ReactJS
- **classnames**: https://github.com/JedWatson/classnames#readme
- **lodash**: https://lodash.com/
- **formik**: Reactive forms with https://formik.org/
- **yup**: Easy form validation https://github.com/jquense/yup
- **react-transition-group** : https://reactcommunity.org/react-transition-group/
- **react-toastify**: https://github.com/fkhadra/react-toastify#readme
- **react-scrollbars-custom**: https://github.com/xobotyi/react-scrollbars-custom
- **react-dropzone**: https://react-dropzone.js.org/
- **body-scroll-lock**: https://github.com/willmcpo/body-scroll-lock#readme

## Disclaimer

This is just a simple demo application. Please use responsibly.

## LICENSE

[Apache 2.0](LICENSE)