Secret Grant #3: Griptape, Front-End Secret App Development Framework

Secret Network
July 29, 2021
Twitter
LinkedIn

Hello to the Secret community!

With the rapidly expanding development of the application layer of Secret Network, there has emerged a need for better developer tools, including simplifying SecretJS integration with Secret Contracts.

With all the various tools in our community surrounding contract development, there are a million different directions to take front-end and user interface development with Secret Contracts. The lack of a dedicated framework introduces additional complexity when there is a significant amount of possible customization and design direction as it pertains to viewing key management, Keplr interactions, and secret contract queries.

Enter Griptape – the latest recipient of a Secret Grant!

Griptape is built from a popular open-source Javascript framework known as “Vue.js”. At its core, Griptape is an opinionated, web application front-end framework for developing DApps on Secret Network.

To quote one of the core creators of Griptape: “It just makes things easier.”

Best of all, you can start developing with Griptape NOW! If you’ve been waiting to build or deploy your first Secret App, now is the best time to get started.

griptape.js
griptape.js is a library for developing Secret Apps on Secret Network

Read on for a little more technical detail on Griptape, or scroll to the bottom of this post to learn how you can get involved as a developer or apply for a Secret Grant!

Components

By default, Griptape provides a set of core Vue components and support for the features that are common to all DApps:

  • Wallet
  • Viewing Key
  • State
  • Contracts
  • Utilities

Wallet

Like other Web3 applications, Secret Apps on Secret Network need the ability to easily interact with a wallet. Griptape solves for this with an easy implementation of a wallet. For Secret Network, Keplr is the de facto wallet, and so this is the wallet enabled by default. When you grip a Vue application with Griptape, the Keplr wallet extension should be installed in order to bootstrap your application.

The gripped app will then have the ability to access some information provided by the Keplr extension, such as the address and the balance.

The <wallet-info> component shows the address and the balance of the user. It is fully reactive, that means, whenever you change your wallet in Keplr, the component and the whole application state will update as well:

Viewing Keys

Viewing keys are required on Secret Network whenever the state of a particular secret contract is kept private. Griptape provides a way to store viewing keys and a component, <viewing-key-manager>, for creating and referencing them.

contractAddress is just a string that represents the contract address which this instance of the <viewing-key-manager> can create viewing keys for.

Griptape’s <viewing-key-manager> uses the createViewingKey() method that is part of any Griptape Contract by default. A contract definition can, however, override this default createViewingKey() method. An example to this is a SNIP-20 contract where the functionality of creating or getting a viewing key can be yielded to Keplr and then stored locally for efficient access.

State

One of the principles behind Griptape design is related to state management. Centralization of state is not necessary for all applications, but Griptape takes advantage of a state management pattern to provide a much improved UX/UI experience.

Currently, not all dApps take this design decision into account (due to the complexity of implementation) when interacting with 3rd party extensions and common functionality such as the viewing keys management. Griptape solves this by providing state management using Pinia (an open-source state management library).

Contracts

Contracts are essential when working with developing Secret Applications. Unfortunately, Secret Network has its own challenges when interacting with contracts from a front-end development perspective. Griptape solves this by creating a unified, uniform, and simplified way of interacting with secret contracts. This is done by a creating a standard within the Griptape framework for the following:

  • Anatomy of a secret contract
  • Instantiating secret contracts
  • Treatment of implicit state
  • Queries
  • Messages
  • Creation of SNIP-20 contracts

Utilities

Griptape has many other utilities to help you solve some of the most common but non-trivial problems you will find while developing your Secret Application. This includes problems with operations on numbers and formatting addresses and viewing keys.

Click to visit the Griptape website!


Secret Network Developer Opportunities

Are you interested in using Griptape to develop Secret Applications on Secret Network? If so,  there are a variety of options available for developers to get directly involved and building!

Secret Network Developer Grants

The Secret Network Grant Program is originally funded with 20M $SCRT- currently worth ~$20,000,000. For simplicity, proposals are split into three categories: Secret Apps, for everything that is directly built on top of Secret Network; Ecosystem, for tools that expand Secret Network and improve general usability; and Network improvements, for major upgrades to the network itself.

Within the Secret Network application layer, Secret DeFi and Secret NFTs (private metadata) hold an exciting amount of use cases that have yet to be developed. Grants have already been rewarded for the development of the NFT reference implementation as well as Secret Fardels, a new kind of decentralized social media leveraging Secret NFTs.

With a list consisting of over 35+ grant ideas, get started with the grant application process today!


Are you a developer looking to develop full-time on Secret Network?

The Secret Foundation Fellow Program (Secret Fellows) is designed to involve more developers full-time in the Secret Network ecosystem. The goal of the program is to bring in talented individuals full-time to the Secret Network ecosystem for 3 months during which developers can work on Secret Network related dApp/ tooling development and receive competitive compensation.

Apply for Secret Fellows here!

For any other questions about the network and how to get started using and developing on Secret Network, join our awesome community on the Secret Chat (Discord) or Secret Forum.

Onwards & Upwards!

To discuss Secret Network and Secret Apps, visit our community channels:

Website | Forum | Twitter | Discord | Telegram