Development

Development Guild

Add an API

• API is define in folder packages/extension-koni-base/src/api
  • Add new file depend on types of API
  • Simple API can be defined in function, more complicated API should define in Object.

Add a store

Store is used to persist data into local storage. Stores is defined in folder packages/extension-koni-base/src/store

• Store class should extend class BaseStore or SubscribableStore and overwrite class prefix call via constructor.
  • BaseStore include basic functions persist with chrome local storage
  • SubscribableStore extend BaseStore, include rxjs subject and can be subscribed with method getSubject(). This subject trigger every time data is set.

  export default class PriceStore extends SubscribableStore<PriceJson> {
    constructor () {
      super(EXTENSION_PREFIX ? `${EXTENSION_PREFIX}price` : null);
    }
  }

• Defined in class KoniState and call by KoniExtension, KoniTabs or KoniCron.

  export default class KoniState extends State {
    private readonly priceStore = new PriceStore();
    private priceStoreReady = false;
  
    public setPrice (priceData: PriceJson, callback?: (priceData: PriceJson) => void): void {
      ...
    }
  
    public getPrice (update: (value: PriceJson) => void): void {
      ...
    }
    
    public subscribePrice () {
      return this.priceStore.getSubject();
    }
  }

Add a message handle

Subwallet extension use message passing concept via browser API to interact between Background - Extensions - Chrome Tabs.

• Extension or Chrome Tabs send a message with id and type to Background
• Background handle message by id and type and response data.
• There are 2 message type:
  • One time message: Extension Or Chrome Tabs will send message request and listen response. Listener will be deleted after receive response.
  • Subscription message: Same as one time message but listener continue receive data util window close.
• Steps to add new message handle:
  • Add request type:
    • New request type must define in interface KoniRequestSignatures

      export interface KoniRequestSignatures {
        'pri(price.getPrice)': [RequestPrice, PriceJson] // Message type from extension
        'pri(price.getSubscription)': [RequestSubscribePrice, boolean, PriceJson] // Message type from extension with subscription
        'pub(utils.getRandom)': [RandomTestRequest, number] // Message type from Tabs
      }

    • Every message type must be included:
      • Type name like pri(price.getPrice). Message type from extension must start with pri, message type from Tabs must start with pub.
      • Request type like RequestPrice
      • Response type like PriceJson
      • Subscription param type (optional) like PriceJson
  • Add handler (Background):
    • Add new case in function handle of KoniExtension or KoniTabs of package extension-koni-base
  • Add caller (Extension, Chrome Tabs):
    • Add new function in file messaging.ts of package extension-koni-ui to send request and handle receive data.

Add a cron

Cronjob is define in folder packages/extension-koni-base/src/cron.

• Group of cron action should define in separate file in this folder.
• Define new cronjob in method init of class KoniCron

Develop UI

UI Structure

• Koni Extension UI build with React Native.
• Popup: Main extension page, show when click into extension icon in browser extension list.
• Portfolio (Coming soon): Display more complicated view like dashboard, transaction...
• Another folders:
  • assets: images, resources of extensions.
  • components: Common components use in extension pages.
  • hooks: public hook for global function.
  • i18n: Internationalization.
  • stores: Redux stores generate with react hook.
  • partials: Header components
  • util: utilities methods.
  • messaging.ts: Send to background and handle return message.

Add new redux store

• Subwallet extension use redux-tookit to generate store.
• Define redux store reducers and state into separate file by method createSlice of redux toolkit.
• Map reducer into root store in file index.ts

Add new message caller

Read "Add a message handle"

Auto validate

Extension auto validate code with eslint. Please setup eslint in editor and run yarn lint before commit code.

Write test

Subwallet run test with jest. Create new file with name filename.spec.ts to write test.

Commit and Build

• Please run yarn lint and yarn test