Have an idea?

Punk Panda – Swap, Stake, and Farming platform

Punk Panda – Swap, Stake, and Farming platform - Website Development - Photo 1
Overview

This application allows Swap and Stake PPM and Farm PPM Token for PPM-BNB LP tokens powered by Pancake

Punk Panda is the world’s first secure messaging app that PAYS YOU crypto for using & sharing the app. The PPM utility token taps into the major online trends of secure communications & crypto sports fantasy. With Phenomenon Studio’s help, you can now buy PPM tokens, Stake, and Farm PPM-BNB and get rewards!

Client Punk Panda
Services
  • Discovery
  • Wireframing
  • UI design
  • Development
Technologies
  • Next.js
  • Laravel
  • PancakeSwap
Review
What the client says
I've been contracting Phenomenon Studio for design and development projects for the last two years, and I am yet to find a better agency that is more capable when it comes to production-quality design and development.
Joshua Caleb
Chief Innovation Officer at Divi Labs   See on DesignRush
1M+

PunkPanda has hit 1,000,000 PandaApp users!

80K+

Number of unique users per day

$80K+

PPM token’s 24-hour trading volume

Business needs

Client request

The client’s request required a broad scope, and it began with the Discovery phase. The project then continued as follows. 

The Punk Panda team tasked us with designing a large crypto exchange platform with broad functionality for operations with PPM tokens. The company also wanted website redesign and development, and rebranding for its existing product.

Our role

The role of our team on this project was not only to implement solutions. The main goal was to identify these solutions during the UX research, competitor, and business analysis, such as choosing the best technologies, integrations, and even the better way for internal fees for additional monetization of the platform.

Project
Problems & solutions
Problem
1

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 site.

2

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

3

Pancake API requests will prevent our graphs from working because after a certain time the Pancake blocks requests from outside its network.

Solution
1

A custom API that allowed us to make any custom design in alignment with Pancake’s logic. As a result, we produced custom forms for swap, stake, and farm.

2

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

3

We decided to work with a proxy server to receive data from Pancake without interruption, so we created custom graphs on our website.

Research stages

Research process

We analyzed the best competitors in the client’s field using a SWOT analysis. We conducted business analysis to find the best way to implement features and ensure that the product was profitable. 

Stages
  • UX audit
  • Business analysis
  • Map
  • User Flow
Punk Panda – Swap, Stake, and Farming platform - Website Development - Photo 6
Stage 1
UX audit

UX research is the launchpad for every project. We analyze our clients’ current products, competitors, and target audience at this stage. We then combine all these strands to create a site map and a list of UX features and improvements that can be actioned.

What we did 

We conducted competitor analysis as a part of our UX research. The focus of the project was the creation and operation of a cryptocurrency. Our team came across a number of key findings which we passed on to the client.

Punk Panda – Swap, Stake, and Farming platform - Website Development - Photo 7
Stage 2
Business Analysis
  • Analysis of the subject area
  • Identification of current problems and their solutions
  • Recommendations and advice on solution implementation
  • Prioritized feature list
What we did

During BA, we discovered an additional route for monetization, as our client requested. So, we explained the characteristics of the solutions we put together to our client, outlining their benefits and risks.

  • Thanks to the additional smart contract, we enabled the client to set their own extra commission on top of Pancake.
  • Despite its limitations, the solution for implementing custom design to Pancake was to add a custom API that allowed us to make any custom design and align it with Pancake’s logic.
  • As a result, we received custom forms for swap, stake, and farm.
  • After conducting our analysis, we realized that Pancake API requests would prevent our graphs from working because after a certain time the Pancake blocks requests from outside its network.
  • We decided to work with a proxy server to receive data from a pancake without interruption. To do this, we created custom graphs on our platform.
Stage 3
Map

Based on the data from our client and the results obtained during the research stage, we created a navigation map for the app. It helped us organize the information, devise a roadmap for future developments, and scope out the work. Through a series of iterations and deep-dive exploration sessions, we clarified the vision we had in mind for the app. This allowed us to work through the details with the client, including additional clarification about UK financial regulatory constraints. As a result, we arrived at seven main flows, and we continued to work on these.

Punk Panda – Swap, Stake, and Farming platform - Website Development - Photo 8
Stage 4
User flow

The user flow is a visual representation of the sequence of actions the user performs to achieve their goal. It is a necessary part of the process for building future steps and carrying out more work on the interface itself.

Punk Panda – Swap, Stake, and Farming platform - Website Development - Photo 9
Design stages

Design

At this stage, we turn the results from our analysis into a user-friendly interface that complies with generally accepted usability rules, solves users’ needs, and makes their journey as smooth as possible.

Stages
  • Wireframe
  • Moodboard
  • Design Concept
  • UI Design
Stage 1
Wireframes

Creating wireframes and clickable prototypes is integral when working on the design structure. It is also key to testing and improving the user journey before you proceed to the final mockup design.

This stage helps us understand the logic and structure of the future service. We create and approve prototypes for every single flow.

Punk Panda – Swap, Stake, and Farming platform - Website Development - Photo 10
Punk Panda – Swap, Stake, and Farming platform - Website Development - Photo 11
Stage 2
Moodboard & Design Concept

To determine the visual direction and style of the interface, our team creates moodboards and coordinates them with the client. This means that you can choose the most suitable solution at the earliest stage possible.

Based on the research and the direction chosen in the moodboards, we create the first visual concept of the site to demonstrate the chosen style in real conditions before we produce the finished UI design.

Stage 3
UI Design

It is here that the magic begins. We use the moodboard and design concepts we have already produced to start bringing the project to life. We then create the UI design for the whole project and make a UI kit or design system for our developers.

Punk Panda – Swap, Stake, and Farming platform - Website Development - Photo 14
Project
Features we implemented
Farm

PPM Token Farm for PPM-BNB LP tokens. Interaction with the custom smart contract to stake LPs for 90 days, 180 days, and 1 year, and get rewards. LPs forwarded back to the PPM-BNB pair that hosted on PancakeSwap.

Punk Panda – Swap, Stake, and Farming platform - Website Development - Photo 15
Stake

PPM token staking users can stake PPM tokens for 90d, 180d, and 1y and get a reward. Interaction with custom staking smart contracts.

Punk Panda – Swap, Stake, and Farming platform - Website Development - Photo 16
Swap functionality for PPM-BNB

Swap functionality for PPM-BNB Powered by PancakeSwap BNB/PPM Pair hosted on PancakeSwap. The application interacts with PancakeSwap smart contracts to execute swap operations.

Punk Panda – Swap, Stake, and Farming platform - Website Development - Photo 17
Swap

PancakeSwap subgraph real-time data. Proxy Server set up to retrieve chart data from PancakeSwap subgraph.

Punk Panda – Swap, Stake, and Farming platform - Website Development - Photo 18
Liquidity

Liquidity management (Add/Remove) for PPM-BNB pair, powered by PancakeSwap. Interaction with PancakeSwap Router Smart Contract to add or remove liquidity.

Punk Panda – Swap, Stake, and Farming platform - Website Development - Photo 19
Dashboard

Dashboard analytics on the rewards and last transactions in swap, farming, and staking for the user's convenience. It also allows them to track all their operations.

Punk Panda – Swap, Stake, and Farming platform - Website Development - Photo 20
Technologies

Development stage

For this project, a custom landing page design was developed using Next.js for Front-end. The design was complicated, with animations created using Framer Motion. The multi-language Admin panel was developed on Laravel.

The Pancake.finance API was integrated for swap, stake, LP, and farming functionality. Metamask serves as a login and allows users to make operations in the Binance Smart Chain Network with BEP-20 and ERC-72 protocols. The smart contracts for the custom token and for operations with it were developed.

The graph from the Pancake platform couldn’t be parsed. To solve this, we integrated the proxy server with Redis caching.

Stack
Technologies
Pancake

PancakeSwap focuses on BEP20 tokens – a specific token standard developed by Binance. Since our customer's project is built on BEP20, we chose PancakeSwap.

Next.js

Excellent performance in terms of load times, great SEO, scalability, and beneficial for any integration — we decided Next.js was the best solution.

Laravel

Developing the multi-language admin panel and our client’s desire for security meant that we used Lavarel.

Punk Panda – Swap, Stake, and Farming platform - Website Development - Photo 21
Integrations
Integrations we implemented
  1. MetaMask integration

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

  2. Smart contracts

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

  3. PancakeSwap subgraph real-time data

    Proxy server set up to retrieve charts data from PancakeSwap subgraph.

Work in progress
Work continues on new functionalities
NFT marketplace

We are currently working on the NFT marketplace for this project.

NFT Collections

Our team is creating the characters' NFT collection for PunkPanda and working on custom NFT Mint functionality.

Additional smart contracts

We plan to add additional smart contracts to improve the platform's functionality.

Offer pages for the website

The website’s development doesn’t end here. We're preparing a lot of new pages that focus on the customers' products.

Results

The team created a top-notch design that helped the client boost their profile in the crypto-trading market.

The development team brought all the designers’ intricate ideas to life, and added decentralized staking. Now, users can stake their PPM token right on the landing page using MetaMask, and create a liquidity pool of PPM-BNB tokens to farm so they can get rewards from their investments.

  • The platform acquired more than 1 million users in less than a year.
  • The number of unique visitors to the website increased by 29% percent.
  • Customers got a strong foundation and trustworthy to build new products based on their roadmap.

Our team is very grateful to Punk Panda for their trust in our services, and we are pleased to be a significant part of such an ambitious product!

1M+

PunkPanda hits 1,000,000 PandaApp users!

80K+

The number of unique users per day

$80K+

PPM token’s 24-hour trading volume

Our cases
More cases
We work with both small startups and large corporations.
Saifast – logistics web app - Website Development - Photo

A system for a logistics company that improves the freight management

Wayels – Courier System Dashboard - Website Development - Photo

Wayels is a company that provides logistics services.

You can upload maximum 5 files
Some of your file not loaded, because maximum file size - 5 mb