🖥️For Developers

Develop an xSafe App for interacting with your own SC

Developing an xSafe App is as simple as it can be, if you are using our App Framework.

Step 1: Start the project locally

Fork the GitHub repository through the GitHub UI

Clone the Forked GitHub repository to your machine

git clone FORKED-PROJECT

Install dependencies

yarn // OR npm install --legacy-peer-deps

Start the development server

yarn start

Step 2: Register your app

Open the file located at src/apps/apps.tsx and add your app's configuration based on the structure explained below:

export const apps: AppWithRouteConfig[] = [
  {
    name: 'My Awesome App', // Your App Name
    component: lazy(() =>
      import('./example-app/index').then((module) => ({
        default: module.default,
      })),
    ), // Modify the lazy imported module path to match your apps path
    link: 'example-app', // Link for your App
    id: 'example-app', // Unique ID for your App
    description: 'An awesome App with an awesome description!',
    imageUrlLight: MoreAppsLight, // Imported image used on the App Card
    imageUrlDark: MoreAppsDark, // Imported image used on the App Card
    isInstallable: true, // If False, it will appear as "Coming soon..."
    icon: <DiamondIcon />, // Sidebar Icon
    path: '/example-app', // Route
    title: 'My Awesome App', 
    transaction: sampleTransaction, // OPTIONAL (described in the next section)
    action: sampleAction, // OPTIONAL (described in the next section)
  },
]

Step 3 (optional): Register and test your app's proposal UI through our UI

In the previous step, we saw that two properties for our app config were optional: action and transaction.

You can define these in your app's folder and import them in your app config file. This will enable you to view a sample Proposal UI for your application (under this step, you have a link to the Proposal UI Preview)

// STEP 1: Define sampleTransaction and sampleAction
// FILE: ./example-app/samples/index.ts

// sampleTransaction to be imported in the app config
export const sampleTransaction: RawTransactionType = {
    ... // dummy transaction data (see example in the repo)
}

// sampleAction to be imported in the app config
export const sampleAction = new MultisigActionDetailed(
  new MultisigAddBoardMember(new Address('erd1...')), 
  1, 
  [new Address('erd1...')],
);

// STEP 1: Define sampleTransaction and sampleAction
// FILE: ./example-app/samples/index.ts

import { sampleAction, sampleTransaction } from './example-app/samples';
export const apps: AppWithRouteConfig[] = [
  {
    // ...
    transaction: sampleTransaction, // <-------------- ADDED
    action: sampleAction, // <-------------- ADDED
  },
]