/elven-tools-dapp

Elven Tools Dapp - Elrond blockckchain frontend dapp demo. Primarily for NFT minting, but it can be used for other purposes.

Primary LanguageTypeScriptMIT LicenseMIT

Elven Tools Dapp

The Dapp is built using Nextjs and a couple of helpful tools. It allows you to interact with the Elrond blockchain, smart contracts, and especially it is prepared for the Elven Tools Smart Contract. But you can always modify it and adjust for your needs.

It provides:

  • Auth with 4 Elrond blockchain providers
    • Web Wallet
    • Maiar mobile app
    • Maiar DeFi browser extension
    • Ledger Nano
  • React hooks for making transactions
  • React hooks for querying smart contracts
  • Tools and React hooks for app state synchronization
  • API endpoint rewrites and 'guard' middleware
  • Preconfigured UI based on Chakra UI
  • The template with sections mainly used on minter dapps (it will be developed further)

Examples

Login with one of four methods.

const { login, isLoggedIn, error, walletConnectUri, getHWAccounts } = useLogin();

(...)

login(LoginMethodsEnum.ledger)

Custom mint transactions for the Elven Tools Smart Contract. There is also more generic useScTransaction hook.

const { mint, pending, transaction, error } = useMintTransaction();

(...)

mint(amount)

Query the Elven Tools Smart Contract. There is also more generic useScQuery hook.

const {
  data,
  fetch,
  isLoading,
} = useElvenScQuery<boolean>({
  funcName: 'isAllowlistEnabled',
  type: SCQueryType.BOOLEAN,
  autoInit: false,
});

(...)

fetch()

For more docs on how to use it check the link above, and for more examples see: elven.tools/docs/dapp-react-hooks-and-components.html

Tracking the progress

How to start it locally:

  1. npm install -g elven-tools
  2. elven-tools init-dapp
  3. cd your-dapp-directory
  4. npm run dev

--- or ---

  1. clone or download the repo code
  2. cd elven-tools-dapp
  3. npm install
  4. configure .env.local (you can copy the contents of the .env.example)
  5. npm run dev

Check detailed docs on it here: How to start with the Dapp

Main assumption for the dapp:

  • it works on Nextjs
  • it uses the newest version of erdjs without the dapp-core library.
  • it uses backend side rewrites to hide the API endpoint. The only exposed one is /api
  • it uses .env file - there is an example in the repo
  • it uses chakra-ui

More docs on it: Minter Dapp introduction

Community