Home /
Projects /
PNSwap – token exchange platform

Web3 Web app

PNSwap – token exchange platform

Overview

A unique platform to exchange, buy and sell tokens

Users can stake their PNS tokens directly on the platform using MetaMask and create a liquidity pool of PNS-BNB tokens to farm to get rewards from their investments.

Client

PNSwap

Services

Discovery
Wireframing
UI design

Technologies

Next.js
Laravel
PancakeSwap

PNSwap – token exchange platform - Website Development - Photo 2

PNSwap – token exchange platform - Website Development - Photo 3

Business needs

Get an estimate

Client request

The client’s request included the design of a crypto exchange platform with broad functionality for working with PNS tokens, the creation of a corporate website, and development.

Our role

The role of our team in the project was to create a design that would fully satisfy the most important things: convenient platform navigation with a lot of actions, simplification of the token exchange process, and the ability to view income statistics.

While working on the solution, we had to consider the specifics of the market with a large number of competitors and a high entry barrier.

Get an estimate

PNSwap – token exchange platform - Website Development - Photo 4

Project

Problems & solutions

Problems

Pancake takes a commission on each transaction. Our client required an additional commission for the user to make transactions through our website.

Integration with Pancake and custom design. Pancake is a very popular protocol, but its disadvantages are that it only provides an iframe that can be inserted into the website.

Solutions

Thanks to the additional smart contract, we enabled the client to set their own additional commission on top of Pancake.

A custom API that allowed us to do any custom design in alignment with Pancake's logic. As a result, we created custom forms for swap, bet, and farm.

Research stages

Research process

After starting work on the project, we conducted a SWOT analysis. It was used to analyze the field competition to implement the features and stand out from the competition properly.

Stages

UX audit
Business analysis
Map

PNSwap – token exchange platform - Website Development - Photo 5

UX audit

An essential part of the work was the study of PNSwap’s competitors among companies offering a similar range of services. After analyzing the main points, approaches, and solutions, we were able to highlight the advantages and disadvantages of each competitor, as well as think of a unique approach that would allow the company to stand out from the competition.

Business Analysis

During the BA, we offered the client another way to monetize the platform, describing the benefits and risks. Our team created a list of priority features. We analyzed the business. We identified problems that the client might encounter in the future and provided recommendations and advice on how to solve them.

Map

After understanding the project’s goals and researching UX, we designed the platform’s architecture based on competitors, research, and the client’s wishes.

PNSwap – token exchange platform - Website Development - Photo 6

Design stages

Get an estimate

Design

As a tech startup, our goal was to build and maintain meaningful leads in this industry. It was also important to create a design that stood out from the competition. We were tasked with an exciting brief to create an immersive experience reflecting slope solutions’ innovative nature.

Stages

Wireframe
Moodboard
Design Concept
UI Design

Get an estimate

Stage 1

Wireframes

To understand the page structure and the necessary blocks and sections, we created a highly detailed prototype of each screen.

PNSwap – token exchange platform - Website Development - Photo 7

PNSwap – token exchange platform - Website Development - Photo 8

Stage 2

Moodboard & Design Concept

Before creating the UI design of the platform, we made a moodboard on the visual style and color palette. Our design should make the user feel like they are using today’s latest technology (modern and forward-thinking).

Stage 3

UI Design

After approving the prototypes and the moodboard, we moved on to the next stage – designing the user interface. Design components were added to the UI kit for developers to use. In addition to the platform’s web version, we also developed a design for mobile browsers and tablets.

Interactions

We develop clickable prototypes for all of our projects, and this one is no exception. During testing, there are unfinished blocks that we immediately eliminate before the development step. This immediately tests the usability and clarity of the application.

PNSwap – token exchange platform - Website Development - Photo 9

PNSwap – token exchange platform - Website Development - Photo 10

PNSwap – token exchange platform - Website Development - Photo 11

PNSwap – token exchange platform - Website Development - Photo 12

Project

Features we implemented

Corporate website

Corporate website before entering the platform. The site displays popular tokens and recommendations for buying and trading tokens. Directly on the website, you can see details about the main areas with which the user can work on the platform.

PNSwap – token exchange platform - Website Development - Photo 13

Swap / Stake / Farm pages

Swap functionality for PNS-BNB Powered by PancakeSwap BNB/PNS pair hosted on PancakeSwap. The application interacts with PancakeSwap smart contracts to perform swap operations. PNS token staking users can stake PNS tokens for 90d, 180d, and 1y and receive a reward. Interact with custom staking smart contracts. PNS token farm for PNS-BNB LP tokens. Interacts with the custom smart contract to stake LPs for 90 days, 180 days, and 1 year and receive rewards. LPs are redirected back to the PNS-BNB pair hosted on PancakeSwap.

PNSwap – token exchange platform - Website Development - Photo 14

Dashboard

The dashboard has a graph that shows the user's income and losses in real-time, as well as asset information and customizable widgets. This page is flexible so that the user can customize it.

PNSwap – token exchange platform - Website Development - Photo 15

Stake in Pool

The Stake in Pool gives participants additional flexibility. It is because a fraction of the coins must be locked up for a certain period and usually has a withdrawal or exit time set by the protocol. In addition, a significant minimum balance is required to add coins to the staking pool, which is a form of security. The staking pool also requires a minimum amount to join and does not limit the amount of money you can withdraw. Therefore, joining a staking pool instead of staking alone can be an ideal option for beginners.

PNSwap – token exchange platform - Website Development - Photo 16

PNSwap – token exchange platform - Website Development - Photo 17

Integrations

Get an estimate

Integrations we have implemented

PancakeSwap subgraph real-time data

Proxy server set up to retrieve chart data from PancakeSwap subgraph.
MetaMask Integration

MetaMask acts as login and allows users to perform operations in Binance Smart Chain Network with BEP-20 and ERC-72 protocols.
Smart Contracts

The smart contracts integrate the custom token and operations with it.

Get an estimate

Functional

Work continues on new functionality

Additional Smart Contracts

We plan to add more smart contracts to enhance the platform's functionality.

Offer pages for the platform

The development doesn't stop here. We are preparing many new pages dedicated to customer products.

Mobile application

It is also planned to develop a mobile application.

PNSwap – token exchange platform - Website Development - Photo 18

Conclusion

Get an estimate

Results

We have launched an updated interface for the PNSwap platform. In this project, we applied bold and memorable visual solutions and increased brand awareness. Navigation and work with the exchange, sale and purchase of tokens have been simplified. It allowed us to attract many new users interested in the company’s services.

Our team is very grateful to PNSwap for their trust in our services, and we are happy to be an important part of such an ambitious product!

Get an estimate

Our cases

More cases

We work with both small startups and large corporations.