Dotdrop(a.k.a Dot Gifts)

Dotdrop is a dapp (decentralized app) built on top of substrate compatible networks to let the users of any substrate based network send tokens to anyone no matter if the recepient has any accounts in the network or not. The sender of a gift can simply wrap their DOTs as a gift in a unique secret hash that functions as a voucher and then share the secret with the recipient (through email, message or just simply write it on a paper), while the recipient of the gift can go to the app and reveal the recieved voucher (gift secret hash) to redeem their gifted DOTs to their account. If the recipient has no accounts in the network to redeem their gift, the app will walk them through account creation steps to let them create an account before redeeming their gift.

Running the Dotdrop dapp

Requirements

• node.js version >=14
• yarn
• git
• a substrate node deployed with gift pallet for the dot gift dapp to connect to.

Installation

The codebase is installed using git and yarn. This assumes you have installed yarn globally prior to installing it within the subdirectories. For the most recent version and how to install yarn, please refer to yarn documentation and installation guides.

# Clone the repository
git clone https://github.com/hamidra/dotdrop.git
cd dotdrop
yarn install

Usage

You can start the dapp in development mode to connect to a locally running node with gift pallet

yarn start

You can also build the app in production mode,

yarn build

and open build/index.html in your favorite browser.

Configuration

The dapps configuration is stored in the src/config directory, with common.json being loaded first, then the environment-specific json file, and finally environment variables, with precedence.

• development.json affects the development environment
• test.json affects the test environment, triggered in yarn test command.
• production.json affects the production environment, triggered in yarn build command.

Some environment variables are read and integrated in the template config object, including:

• REACT_APP_PROVIDER_SOCKET overriding config[PROVIDER_SOCKET]
• REACT_APP_DEVELOPMENT_KEYRING overriding config[DEVELOPMENT_KEYRING]

More on React environment variables.

When writing and deploying your own dapp, you should configure:

• Custom types as JSON in src/config/types.json. See Extending types.
• PROVIDER_SOCKET in src/config/production.json pointing to your own deployed node.
• DEVELOPMENT_KEYRING in src/config/common.json be set to false if you don't want to load the keyrings usual suspects (Alice, Bob, ...) as test accounts. See Keyring.

Specifying Connecting Node

There are two ways to specify it:

• With PROVIDER_SOCKET in {common, development, production}.json.

• With rpc=<ws or wss connection> query paramter after the URL. This overrides the above setting.

  The connecting node should include the gift pallet in order to be able to issue gift vouchers

Reusable Components

useSubstrate Custom Hook

The custom hook useSubstrate provides access to the Polkadot js API and thus the keyring and the blockchain itself. Specifically it exposes this API.

{
  socket,
  types,
  keyring,
  keyringState,
  api,
  apiError,
  apiState,
  chainInfo,
}

• socket - The remote provider socket it is connecting to.
• types - The custom types used in the connected node.
• keyring - A keyring of accounts available to the user.
• keyringState - One of "READY" or "ERROR" states. keyring is valid only when keyringState === "READY".
• api - The remote api to the connected node.
• apiState - One of "CONNECTING", "READY", or "ERROR" states. api is valid only when apiState === "READY".
• apiError - the api error if any has happened during connecting to the chain Api
• chainInfo - the chain information that are configured for the network including chainDecimals, chainTokens, genesisHash, chainSS58 address type and existentialDeposit