Widget Design

You can easily customize the wallet widget through Wepin Workspace to provide a user experience tailored to your app. This document provides a step-by-step guide on how to set up the design and functionality of the widget using Wepin Workspace.

Previewing Widget Design

First, you can review the currently applied default design of the widget in the Wepin Workspace. Before entering the design modification phase, you can preview three key widget UIs—Account Details, Main, and Login—from the widget design menu.

• Account Details: This screen allows users to view the balance and detailed information of a specific blockchain account they own. Here, users can send or receive assets.

• Main: This screen provides an overview of the assets across multiple blockchain networks at a glance. Wallets and NFT lists are displayed.

• Login: This screen allows users to log in to their Wepin wallet using various social login options, such as Google, Apple, Naver, and Discord.

Editing the Design

In the widget design menu, you can move to the design editing screen by clicking the "Edit" button on the right.

Choosing a Color Theme

Once you enter the design editing page, you can select a Color Theme for the widget. A variety of color options are provided, including Light, Dark, Mono, Pastel, Woody, and DarkBerry. You can choose one of these options to customize the widget to align with the overall design of your app.

Setting the Layout

In the Home Layout, you decide how the content within the widget is arranged. For example, you can position the asset list and NFT either at the top or bottom, and choose from various layouts such as single-column list, two-column list, or single-block layout. These layout options allow you to present the most important information to the user in the most efficient way.

Setting Login Image and App Icon

In the Logo Image tab, you can set the image that will be displayed on the login screen of the Wepin widget. Here, you can upload your logo to enhance brand identity. The logo you set can be previewed in real-time to see how it will appear.

File Specifications: It is recommended to use a PNG or SVG file with a size of 120x120 pixels and a maximum size of 5MB.

Saving and Applying the Design

Once all customization work is complete, you can save the changes by clicking the "Save" button. However, saving alone does not immediately reflect the changes in the service. It is necessary to compare the saved design with the currently applied design and then proceed to apply the design to the service.

As shown in the image, a screen will appear where you can compare the saved design with the design currently applied to the service. In this screen, you can compare the two designs side by side, with the current design applied to the service on the left and the newly saved design on the right.

In the example, the following changes have been applied:

• Color Theme: The theme has been changed to Dark, setting the widget's background to a dark color.

• NFT Position: The NFT list has been moved to the top of the screen.

This comparison screen allows you to visually confirm whether the saved design has been applied as desired. If you are satisfied with the design, click the "Apply to Service" button to reflect the new design in the actual service. After applying, all users will see the updated Wepin widget with the new design.

With Wepin Workspace, it is possible to customize the widget without writing any code. Additionally, Wepin offers the functionalities used in the widget through RESTful APIs. If you wish to build a more optimized wallet environment for your app, please refer to the RESTful API page.