Motoko DBank

A quick dive in ICP and Motoko.

This simple app is a quick dive in Motoko and ICP. The app implements deposits, withdrawals and compounds interest every second, that is why if you add $10 your balance will increase by more than that. See pictures at the bottom of the page. Copyright by London App Brewery.

Usefull websites

Setup for mac
Setup for windows
Crypto fund research
Blockchain demo
Censys system overview
App compound finance
Dfinity
Difinity forum
Difinity developer discord
Motoko styling
Dfinity cycle cost
Dfinity cycles faucet
Command line ref
Official docs
GitLab API

Commands

1. dxf new AppName
   
2. dfx start (or dfx start --clean if get errors)
3. dfx deploy
4. npm start
   

Must deploey after each change. If this error:

  No production canister_ids.json found. Continuing with local
  [webpack-cli] TypeError: cli.isMultipleCompiler is not a function
  at Command.<anonymous> (/Users/davidmartinezgil/proyect/node_modules/@webpack-cli/serve/lib/index.js:146:35)
  at async Promise.all (index 1)
  at async Command.<anonymous> (/Users/davidmartinezgil/proyect/node_modules/webpack-cli/lib/webpack-cli.js:1674:

Run these commands:

  npm install --save-dev webpack-cli
  npm upgrade --save-dev webpack-cli

DBUG

  import Debug "mo:base/Debug";
  Debug.print(debug_show(currentValue));

Class Canister

  actor DBank {}

Variable

Decalration and initialization:

  var a = 20;

To replace value use walrus:

  var a := 25;

Constant:

  let id = 54534564564;

Function

Private function:

  func Name() {}

Public function

  public func Name() {}

Public function could be called from a command line:

  dfx canister call AppName FunctionName

Candid UI

A function could be accessed through a browser using Candid.

  dfx canister id __Candid_UI

Enter following into the browser:

  http://127.0.0.1:8000/?canisterId=CANDID-UI-CANISTER-IDENTIFIER

Then enter canister ID for the program (it is not the same ID you entered in porevious step). One can find that id using the code below.

 dfx canister id AppName

Update call vs Query call

Read more on this topic
Update call is slow as it has to write to block chain.

  public func withdrawal(x : Nat) {
      let tempValue : Int = currentValue - x;
      if (tempValue >= 0) {
        currentValue -= x;
        Debug.print(debug_show (currentValue));
      } else {
        Debug.print("Not Enough Funds");
      };
    };

Query call does not modify anything on block chain, it is read only.

  public query func checkBalance() : async Nat {
      return currentValue;
    };

Orthogonal Persistance

Read more on stable variables
Ability to hold on to state over many sycles of updates. If you run the code below and redeploy the canister, unless we add 1 to a again, the value of a will be 5.

  var a = 5;
  a += 1;

But in the canister on ICP it does not have to happen, instead it can hold on to the state of the variable. We can create a persisted variable by using 'stable' keyword:

  stable var currentValue = 300;

Connect Fronend to Backend

If node dependencies have not been installed, open a new terminal and run:

  npm install
  dfx start
  dfx deploy
  npm start

Import app into JS file. Call with await.

  import { dbank } from "../../declarations/dbank";
  
  await dbank.topUp(input_amount);

How to pay for ICP

You can exchange tokens for computational power aka "Cycles".

1) ICP token.

Purchase ICP token from places like Coinbase.

2) Network Nervous System NNS.

Allows to time log ICP token to create a neuron. Earn rewards by voting ona proposal. Send tokens to NNS, link tokens to your Dfinity wallet. If you don't know what your wallet is use dfx identity --network ic get-walletcommand to see your default wallet linked to your app.

3) Dfinity.

Earn grant from Dfinity.

4) Act as a data center.

5) Dfinity faucet.

Dfinity gives you free cycles. Anyone with 90 days old Guthub account get $20 worth of free cycles.

• Head to faucet.dfinity.org/auth and login using GitHub.
  
• Create DFX principal id. It identifies you as a developer.
  
• Generate new cycles walet. It will show balance in teracycles.
  
• Copy and paste given command to set the id of a default wallet. Before that must CD over your project folder.
  
• Check balance by placing into browser's search box <DFX_principal_id>.raw.ic0.app. Then create internet identity anker and save it.
  

Deployment

• From VS Code DFX deploy --network ic.
• Get canister id by typing:

  dfx canister --network ic id dbank_assets

• To load your canister in browser:

  <caniste_Id>.raw.ic0.app

Host static website.

• Create folder in which youc reate another folder called Assets and place all files in it.
  
• Open the main folder in VS Code, next to Assets folder create a file 'dfx.json'.

  {
    "canisters": {
      website: {
        "type": "assets",
        "source": ["assets"]
      }
    }
  }

• All files will be collapsed into a the same level directory. For this reason all of the file referrences in your html must be as if the files are located in the same folder.
• Type command:

  dfx deploy --network ic

• Get web url:

  dfx canister --network ic id website

Remember that we set the name of the canister in dfx.json as "website".
The URL is .raw.ic0.app

Pictures

Once transaction has been submitted, the app will notify that the transaction is being carrried out (async call may take some time) and submitt buttom will be unavailable.