@jetstreamgg/sky-widgets v1.0.0

Sky Ecosystem Widgets

The widgets package serves as a repository for portable widgets that allow plug and play integration with protocol functionality.

Installation

npm install @jetstreamgg/sky-widgets

Example Usage

Below is an example of how to use the SavingsWidget in your React application. This example demonstrates handling connection, transactions, notifications, and widget state changes.

import React from 'react';
import { SavingsWidget } from '@jetstreamgg/sky-widgets';

function onConnect() {
  // Handle wallet connection
}

function addRecentTransaction({ hash, description }) {
  // Handle adding a recent transaction
}

function onStateValidated(state) {
  // Handle validated external state
  console.log('Validated State:', state);
}

function onNotification(message) {
  // Handle widget notifications
  console.log('Notification:', message);
}

function onWidgetStateChange(params) {
  // Handle widget state changes
  console.log('Widget State Changed:', params);
}

function onExternalLinkClicked(e) {
  // Handle external link clicks
  console.log('External link clicked');
}

const externalWidgetState = {
  token: 'USDS',
  amount: '1000',
  tab: 'left'
  // Add any additional external state properties as needed
};

function App() {
  return (
    <div>
      <h2>Savings Page</h2>
      <SavingsWidget
        onConnect={onConnect}
        addRecentTransaction={addRecentTransaction}
        locale="en-US"
        rightHeaderComponent={<button>Custom Action</button>}
        externalWidgetState={externalWidgetState}
        onStateValidated={onStateValidated}
        onNotification={onNotification}
        onWidgetStateChange={onWidgetStateChange}
        onExternalLinkClicked={onExternalLinkClicked}
        enabled={true}
        referralCode={1234}
      />
    </div>
  );
}

export default App;

Available Widgets

WidgetProps

The WidgetProps type defines the common set of properties that can be passed to all widgets:

Savings Widget

The SavingsWidget is a React component that provides interactions with the USDS Savings Rate, allowing users to supply and withdraw funds. In addition to the common WidgetProps, the SavingsWidget has no additional unique props.

BaseSavingsWidget

The BaseSavingsWidget is a specialized variant of the Savings Widget designed for use on the Base network. It supports all common widget props and has no additional unique props.

Upgrade Widget

A React component that allows users to upgrade their tokens to a new version. In addition to the common WidgetProps, it supports:

Trade Widget

A React component that enables users to trade between different tokens. In addition to the common WidgetProps, it supports:

BaseTradeWidget

The BaseTradeWidget is a specialized widget for trading tokens on the Base network. It provides a robust interface for token selection, amount input, and transaction overview specifically optimized for trade flows on Base. In addition to the common WidgetProps, it supports:

Rewards Widget

The Rewards Widget allows users to participate in Sky Token Rewards. In addition to the common WidgetProps, it supports:

SealModule Widget

The SealModule Widget allows users to seal their tokens in the protocol's Seal Module. In addition to the common WidgetProps, it supports:

Internationalization and Translation

This application supports i18n and translations via the Lingui package. To add content that can be translated, you need to follow three simple steps:

• Wrap the text in <Trans> tags, the t function or the msg function depending on the context.
• Run pnpm extract from the root of this repo to extract the messages into .po files, which can then be translated.
• Run pnpm compile to compile the translations into optimized JavaScript format.

For more information on the i18n process, refer to the Internationalization and Translation Process section in the root README and for more information on how Lingui works, refer to the Lingui documentation.