Griptape.js

Griptape Update 2021-08-06

Agenda

  • Announcements
  • Current Development
  • Next release

Announcements

  • griptape-vue.js 0.2.24 release
    • Merge PR #25
    • Upgrade pinia version from ^2.0.0-beta.2 to 2.0.0-beta.2
  • Setup Griptape Discord Channel
  • Provide Griptape bug report guide
  • Provide Griptape PR guide

Current development

  • Module renaming
  • Bootstrap API improvements
  • Contracts API improvements
  • Using griptape.js in React.js

Module renaming

  • Rename wsecretjs module to blockchain module

Bootstrap API improvements

WARNING

Note: any figures and code in this presentation are in development and therefore, not final.

The improvements of the API have two objectives:

  1. Initialize blockchain module
  2. Configure the account provider

Current API for bootstraping your application:

import { grip } from '@stakeoride/griptape.js';

// Initialize `account` module
// Initialize `blockchain` module (before `wsecretjs`)
grip({ restUrl: '...' })
1
2
3
4
5

With provider:

import {
  grip,
  KeplrProvider
} from '@stakeoride/griptape.js';

// Initialize `wallet` module
const accountProvider = new KeplrProvider();

// Initialize `blockchain` module
grip(accountProvider, { restUrl: '...' })
1
2
3
4
5
6
7
8
9
10

Contracts API improvements

Current API:

// @/contracts/my-contract.js
import {
  useWalletStore,
  useViewingKeyStore
} from '@stakeordie/griptape-vue.js'

const def = {
  state: { ... },

  queries: {
    async getHoldings() {
      const wallet = useWalletStore();
      const vks = useViewingKeyStore();

      const key = vks.getViewingKey(this.contractAddress);
      if (!key) {
        return;
      }

      const address = wallet.address;
      const time = Math.round(new Date().getTime() / 1000);
      const queryMsg = { holdings: { address, key, time } };
      const res =
        await this.scrtClient.queryContract(this.contractAddress, queryMsg);

      this.userHoldings = res.holdings;
    }
  },

  messages: {
    stake(amount) {
      const handleMsg = { stake: { } };
      const transferAmount = [
        {
          amount: amount,
          denom: 'uscrt'
        }
      ];
      return this.scrtClient.executeContract(
        this.contractAddress, handleMsg, 'memo', transferAmount);
    }
  }
}

export const useStkdStore = createSnip20Contract('stkd', 'secret...', stkd);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

Improved API:

// @/contracts/my-contract.js
import {
  createContract,
} from '@stakeordie/griptape.js';

const def = {
  queries: {
    getHoldings(ctx) {
      const { address, key } = ctx;
      const time = Math.round(new Date().getTime() / 1000);
      return { holdings: { address, key, time } };
    }
  },
  messages: {
    stake(ctx, amount) {
      const handleMsg = { stake: { } };
      const transferAmount = [
        {
          amount: amount,
          denom: 'uscrt'
        }
      ];
      return {
        transferAmount,
        handleMsg
      };
    }
  }
};

export const contract = createContract({
  id: 'stkd',
  at: 'secret1mtg8tuqsfvk9ma36tmtz5mc7pae73j0hsc6jla',
  definition: stkdDef
});

// In another file

import { contract } from '@/contracts/my-contract.js';

contract.getHoldings();
contract.stake('100000000');
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

Next Releases

griptape.js:0.3.0

  • Module renaming
  • Contracts API improvements
  • Bootstrap API improvements
  • Vue.js composition API examples!
  • React.js examples!

griptape-vue.js:0.2.25

  • Viewing keys bug fixes
  • Viewing keys UI component updates