klaytn / klaytn-dex-frontend

NO LONGER MAINTAINED

Important

Since the launch of Kaia Blockchain, this repository has been parked in favour of the new open-source projects in Kaia's Github. Contributors have now moved there continuing with massive open-source contributions to our blockchain ecosystem. A big thank you to everyone who has contributed to this repository.

For future development and contributions, please refer to the new open-dex-frontend repository

More information about Klaytn's chain merge with Finschia blockchain, please refer to the launching of Kaia blockchain kaia.io.

---

Klaytn-DEX Frontend Documentation

Here you can find Klaytn-DEX frontend documentation:

• User Guide provides instructions on how to interact with Klaytn-DEX
• Frontend Specification describes the Klaytn-DEX module structure
• Deployment Guide provides instructions on how to deploy Klaytn-DEX

Local Development

pnpm i

# run dev server
pnpm dev

# run unit tests in watch mode
pnpm vitest

# open cypress
pnpm cy

# fix formatting
pnpm format:fix

# static analysis
pnpm typecheck
pnpm lint

CI/CD

First of all, create .env.local file. Use .env.example as a reference.

Commands:

pnpm i

# check code formatting
pnpm format:check

# run static analysis
pnpm typecheck
pnpm lint

# run both unit & component tests
pnpm test

# build
pnpm build

Want to Contribute ?

In line with our commitment to decentralization, all Klaytn codebase and its documentations are completely open source. Klaytn always welcomes your contribution. Anyone can view, edit, fix its contents and make suggestions. You can either create a pull request on GitHub or create a enhancement request. Make sure you check out our guidelines before contributing:

• Contribution Guide
• License
• Code of Conducts

klaytn-dex-frontend's Issues

MY FEEDBACK ON THE TESTNET

This is by far the most mind blowing testnet i've ever tested, the guide i followed explain everything and it all works like it should from swaps, add liquidity, staking, checking pools all the steps are great to follow most importantly casting vote too. Big success and growth to the team and this project.

0x8Ff56fc87b66ab9104DB2548c03d20e521A60a4F

Feedback from me

For the whole website is pretty good and smooth. only a few bugs were found, for swap and earn, etc. everything is pretty good and fast.

Address: 0x24aea31Dd03Dda163e18c376774fFd468754d239

add new features

added new features

• language setting
• dark and light display mode settings
  My wallet : 0x8A26C648846D7c59EE7638D977E04e3e5B21f2D2

Add lp failed

there was a slight problem when adding liquidity/lp tokens with the kdex/usdt pair, the problem I experienced was a failure.
the problem is that the supply that I did didn't work as it should.

I use a mobile phone with Android OS 11 browser misses. With metamask wallet extension.

Screenrecorder-2022-11-30-18-31-53-998_756x1680.mp4

You can chek my transaction on address
0xFC85a441009D914eD6798e47Dd224C3d6F90DFEd

Suggestion

There is no problem whatsoever when making transactions, comfortable simple and elegant. Continue to develop to achieve maximum results and be able to compete in the future.

0x915D72Fd6Cf53c34D6b7C238be60a79d5214C452

Nothing wrong. Good Job. Just want to suggest 2 things.

Feedback:

• I like the UI. So simple. Easy to understand.
• Swapping, LP was easy.
• Good job for the ROI Calculator. It made life easier.
• I apprectiate the assets and transactions list. It's a simple feature but not every projects had it.
• The font and background color was okay.
• The website was fast to load.
• Claiming from Farms and Pools worked fine.

Suggestion:

• Add a dark mode. Option always good.
• Make the font bigger for "assets, trade, earn, voting, charts"

Overall, a very solid web with a good amount of feature for Klaytn ecosystem.

Feedback

UI/UX runs smoothly , also fast transaction. there are no problems or errors, everything works as it should. maybe there are some suggestions , please add dark mode because not everyone is comfortable with light mode.

My address 0x0000001089167600c25258Da29d2e2c857ec1689

Bug

There was an error while swapping, please fix it as soon as possible

My contrack addres
0x4D2bA6B91842Be0E766EFe3a354F7B4dDD31c437

An error while trying swap klay to other coin and add liq

Hii.please fix a bug where too much error lfor swap and add liq.

this is example error
https://baobab.scope.klaytn.com/tx/0x77b0c087c954edd1c86a82044d52906f16f7840f1a00b2ff28956ef8b2216820

Feedback

I have tried all the existing features, everything went smoothly, fast response, swap, add Lp, earn and vote, if there is a bug I will report it.
I hope this project, a long term project Dan will benefit the members and the team.

BUG WEB https://dex.baobab.klaytn.net/assets

when making transactions sometimes errors appear
when adding LP
and token exchange
many tokens that cannot be exchanged with DEX tokens
there must be rounding, for example, a minimum swap of 500wklay cannot be more than 500wklay to exchange DEX tokens

my wallet : 0x24cF23516a167F2EA58D1186426a0ef97E8C5Fde
transactions : https://baobab.klaytnfinder.io/tx/0x90ecd4625a7cfa08c235ff957d293988ebffb3aa3d1f03f1ad99c23b17002679

Original Value
0xb216fe9b000000000000000000000000061b1747c0479af7402795b194e6c420367e1463000000000000000000000000000000000000000000000000a8e11862cc6538dd000000000000000000000000000000000000000000000000a730c3a97d8d2b7f000000000000000000000000000000000000000000000018061d03874ccd979700000000000000000000000024cf23516a167f2ea58d1186426a0ef97e8c5fde0000000000000000000000000000000000000000000000000000000063873b71

Decoded Value
function addLiquidityKLAY(address,uint256,uint256,uint256,address,uint256)

Method ID : 0xb216fe9b
[0] address : 0x061b1747c0479af7402795b194e6c420367e1463
[1] uint256 : 12169034480746838237
[2] uint256 : 12047344135939369855
[3] uint256 : 443162369987225425815
[4] address : 0x24cf23516a167f2ea58d1186426a0ef97e8c5fde
[5] uint256 : 1669806961

CALL
0x24cf23516a167f2ea58d1186426a0ef97e8c5fde
0x5867c40175a45b080abad03f19131cfa9569287b
addLiquidityKLAY
447.
638757563
150,306

Mobile wallet

Describe the bug
A clear and concise description of what the bug is.

How to reproduce
Steps to reproduce the behavior:

Expected behavior
A clear and concise description of what you expected to happen.

Attachments
If applicable, add data, logs or screenshots to help explain your problem.

Environment (please complete the following information)

• klaytn-dex-frontend release version that exhibits the issue
• OS and its version [e.g. macOS/10.14]
• Wallet and its version used [e.g. Kaikas, metamask]

Additional context
Cant use to mobile wallet cant conected to dex

Dex UI

0xa89EA4C7828bB5A8b8845865E62561A267E279aF

i love the dex ui, simple--without unnecessary animation and material, and most importantly have clear navigation buttons. all features is working, speed loading very smooth, i tried on many device resolution and it's working perfectly. Great job dev!!!
maybe you can add dark mode because many users prefer using dark mode.

Feedback and Review

1. UI is very smooth and light to use
2. Swap , Add Liquidity , Stake , Unstake ,Withdraw works well
3. didn't find any bugs during the testnet feature test
4. Very fast transaction
5. Goodluck

address :
0x4881B8C19E9F4dbcFca5e0cEEe74F148Eb5939C6

bug

Describe the bug
A clear and concise description of what the bug is.

How to reproduce
Steps to reproduce the behavior:

Expected behavior
A clear and concise description of what you expected to happen.

Attachments
If applicable, add data, logs or screenshots to help explain your problem.

Environment (please complete the following information)

• klaytn-dex-frontend release version that exhibits the issue
• OS and its version [e.g. macOS/10.14]
• Wallet and its version used [e.g. Kaikas, metamask]

Additional context
Add any other context about the problem here.

Icon placement

From the user interface, I think it is very easy to understand and the use of colours is also interesting, all transactions also run quickly and smoothly. But, there are somethings that are disturbing such as the placement of elements that are not in place and the use of very bad fonts while in mobile mode, therefore it seems that it would be more interesting if it was improved by using fonts that fit the theme and the use of elements that fit the place. While in desktop mode everything works fine

Klay testnet address :
0x4aA06cDE891Bf049F2C59927400E48098645B7dF

The UI/UX isn't responsive

The UI/UX isn't responsive, I suggest you to improve the UI/UX in term of the smooth transaction. My balance is not synchronous, actually I have at least 256 KLAY test, that's increase from the faucet. But on asset menu it's only at least 109 KLAY test.

My Address: 0x6B1c9112Df0bE9D9A3e8987A96584519f6f81946

Remove Liqudity Bug

Describe the bug
Cant Remove Liquidity in Dex

How to reproduce
Liquidity -> Remove Liqudity -> Set Amount Remove -> Remove

Expected behavior
Run All Feature Sucess

Attachments

Environment (please complete the following information)

• klaytn-dex-frontend release version that exhibits the issue
• OS Windows 10
• Wallet Metamask

Additional context

Feedback and advice

From the user interface, I think it is very easy to understand and the use of colours is also interesting, all transactions also run quickly and smoothly. But, there are somethings that are disturbing such as the placement of elements that are not in place and the use of very bad fonts while in mobile mode, therefore it seems that it would be more interesting if it was improved by using fonts that fit the theme and the use of elements that fit the place. While in desktop mode everything works fine

Klay testnet address :
0x4aA06cDE891Bf049F2C59927400E48098645B7dF

Review and feedback

hi, im testnet user you DEX almost perfect but there're some issue that i confused.

review: all is good on swap, earn and stake
issue: cannot remove LP
thanks

my wallet
0x7afc7a6CF727308CB211E2396088041F33C60e11

Remove LP Web Bug and Problem with Gas Fee

Hi, I have trying the platform and used windows10 and metamask to doin a test then I've found two major issue about removing LP.

1. First, removing LP page wasn't responsive and all the balances details was not appear correctly. like my attached picture below.
   
2. Sometimes, remove LP details was showing correctly but when I'm try to remove, the errors pop up was appeared. Like this picture.
   
   After some test, I found that the problem was on the gas fees. I need to modify the gas fee manually if I want a successful transactions on removing LP page.

That's all my faced issue, hope the platform will be more responsive and it can help the team to improve your platform. Thank you!

My Address: 0xD7FCE914df1876192A2b73C7c17f1dd00C2dc266

Remove LP issue

All features have been working properly, although the transactions were quite slow.
I can claim faucet, trading, adding LP, farming, etc without any problem
The only problem that I faced is when trying to remove LP
( The " remove LP" button didn't give any response although I've clicked it several times, and after refreshing the page & reconnecting my wallet about 3-4x, finally I got succesfull to remove my LP)
So please fix this issue.
My address: 0xd942875817988CeE8687fcA8428C7a14DC2B6041

I've tried all the features currently available.

I've tried all the features currently available.
I like the simplicity of this app. It's very easy to understand as well as operate.
I tried to swap, add liquidity and remove liquidity no problem at all. The transaction process is relatively fast. I didn't find any problems in opening and closing positions. However, I think there is still a need to add more features to make it easier for users to analyze price movements and determine positions. I hope more features will be unlocked soon and I'll be happy to try again

my address : 0x8aE5d75Df2800AEAd7fB04Ab6E98D19D83dd03a6

interesting features

Is your request related to a problem? Please describe.
A clear and concise description of what the problem is.

Describe the solution you'd like
A clear and concise description of what you want to happen.

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context
Add any other context or screenshots about the feature request here.

No bugs

0x8805aECce9c6c1232e876F528D59E89ea9898fe8

Error swap transaction

Describe the bug
failure occurs when making a transaction with a large nominal balance

My wallet : 0x8A26C648846D7c59EE7638D977E04e3e5B21f2D2

Bug in the remove liquidity

I added liquid about four token pairs. but when I remove liquid, one pair of tokens, almost three pairs of tokens, which I add liquidity, also remove all liquid. And the only one left that I added liquidly

Address: 0x24aea31Dd03Dda163e18c376774fFd468754d239

LP issue/bug

I encountered 2 LP bugs:

1. I can not remove LP
   Neither the page or the button give any response
2. Sometimes the LP page doesn't show some of my LP positions ( I have 3 LP positions but the page only shows 1 LP position)
   I've already refreshed /reload the page but it still doesn't work

Please solve these problems/bugs

My address: 0x604E2cFd469E1030F029e13B7E0CD88A15193314

HTML Injection leads to Open Redirect on https://dex.baobab.klaytn.net/voting through third party

Describe the bug
Hi,
I would like to report HTML Injection and possible cross site scripting (XSS) vulnerability in https://dex.baobab.klaytn.net/voting/.
Due to a lack of sanitization and validation in parameter affected,
we can input HTML Tag and system will render it.

How to reproduce

1. go to https://snapshot.org/#/toniya.eth
2. create new proposals https://snapshot.org/#/toniya.eth/create/0
3. input ur html injection payloads like a :

<h1><font color="red">Malicious Vote!!</font></h1>

<a href=http://evil.com>Vote Here!!</a>

4. and then check ur vote on https://dex.baobab.klaytn.net/voting/

my vote : https://dex.baobab.klaytn.net/voting/0xcac6c3e48ff1668c7c995de5c9fcbd46ec750f29714b1d1564c901ac5271146a

Expected behavior
because it's a problem of lack of sanitization and validation and you should issue a fix on this issue.

Attachments

My Feedback

web is very smooth, no problems, no bugs/errors, everything looks good
nice ui/ux with not too crowded background color available features work well
smooth faucet transactions no problems

can't swap

Describe the bug
Failed to swap with pair klytn/dex

How to reproduce
Trade or swap pair klytn->dex

Expected behavior
create/replace new smartcontract address

Attachments

Environment (please complete the following information)

• Windows 10 PRO 64bit
• Browser Chrome Version 107.0.5304.121
• Wallet Metamask

some suggestions from me that must be addressed immediately by the team
-increase the loading speed of new back end servers that supply websites with cached data for pools and tokens.

• added a websocket server providing up-to-date pairs and tokens.
• fixed issues with swap amounts and fees calculation when swapping KDEX.
• added on-the-fly pair reserves update when swapping/managing positions.
• small improvements to the governance page

Wallet not enable

I found a problem when I entered the chart menu and returned to the dex swap page, it said wallet not enable and it often happens, the other features are very good,

Wallet used : 0x1503259c505A39497487FaE967B4cfC8E0aBa031

BUG

Describe the bug

1. wallet sometimes likes to say not enable even though it's already connected
2. Liquidity farms sometimes fail on the first try

**How to reproduce **
Steps to reproduce the behavior:

1. Improved the transaction again

**Expected behavior **

1. Connecting the wallet is easy and doesn't fail
2. Farm liquidity transactions took place successfully

Attachments

Environment (please complete the following information)

• klaytn-dex-frontend release version that exhibits the issue : https://dex.baobab.klaytn.net/swap
• OS and its version [e.g. macOS/10.14] : Chrome
• Wallet and its version used [e.g. Kaikas, metamask] : Metamask versi new

Additional context
Add any other context about the problem here.

suggest & idea

I think it's pretty good, simple, I like it, but on the price dex feature, it's good to fix, in my opinion it's not neat.

my address: 0xf4424c46f42fda089c99951311c56acd06b71a41

Feature request & suggestion

The next picture is about suggestion/ idea from Me:

• Picture Number 1: Add balance percentage feature (25%, 50%, 75% for convenient user balance management) Not only MAX because this feature is so important for the user
• Picture Number 2: I suggest you to add dark mode also add social media widgets/ social media buttons feature for accessing, join or follow Your Social Media. And Please add more feature like support feature, it will be helping users if They found any problem. Language feature would be great for users to choose/ using another language

My Address: 0x6B1c9112Df0bE9D9A3e8987A96584519f6f81946

Bug on Remove Liquidity and Wallet Address

Hi team i want to report 2 bugs i found on Klaytn DEX :

1. Remove Liquidity not working
   

As you can see i have DAI-WKLAY LP, but when i want to remove my liquidity, it's not working. Only blank. Please fix it team

2. Wallet Address 0x is not shown
   

As you can see there is no 0x on wallet address on red circle, please fix it team.

I will be glad if it's fixed before mainnet, thanks

UI/UX is good and runs normally but can't vote even though there is a balance

Describe the bug
A clear and concise description of what the bug is.

How to reproduce
Steps to reproduce the behavior:

Expected behavior
A clear and concise description of what you expected to happen.

Attachments
If applicable, add data, logs or screenshots to help explain your problem.

Environment (please complete the following information)

• klaytn-dex-frontend release version that exhibits the issue
• OS and its version [e.g. macOS/10.14]
• Wallet and its version used [e.g. Kaikas, metamask]

Additional context
Add any other context about the problem here.

Sangat puas

Freely describe your questions or issues here.yes it is very important in trying a project here i have tried it and i think it is very good dex

Balance Nothing

It's just a balance, it's hard to detect if all of them are smooth ... I tried it, it's good ........

0x7C9D4CfD530BE4ae1DA52d77D0470da85D738E2d

Good project

A good project and strong team in a predictable and transparent road map , planned and projected. I think in the near future we will see an unprecedented growth of this project.

Default Slippage value

While first time connecting wallet into the platform, and try to swap always returned on failed transactions after wallet confirmations. After try check on slippage settings the default value was 0 and make tx is failed. Kindly make the default slippage value is 0.5 or more to prevent failed tx, or kindly make a confirmations pop up for choose slippage settings if not set up/still on 0% before popup confirmations swap.

How to reproduce
Connecting new wallet to the platform then do swap after claiming test token. There will be failure tx and its happen because default slippage value given by platform is 0%.

Expected behavior
The default slippage should be had same value with the minimal slippage value on slippage selections settings. Not 0%.

Attachments
N/A

Environment (please complete the following information)

• klaytn-dex-frontend release version that exhibits the issue
• OS: Windows, browser: Chrome
• Wallet: Kaikas

cross chain

Is your request related to a problem? Please describe.
A clear and concise description of what the problem is.
almost no problem everything working good and normal
Describe the solution you'd like
A clear and concise description of what you want to happen.
i think if there is available bridge feature that will be a good ideaDescribe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context
Add any other context or screenshots about the feature request here.

feedback And advice

My address :0x61cDCc0DC52d262aBF59C3E2d1990942d982BeF3

Feedback

1. The swap feature works fine
2. The LP feature runs fine with no problems
3. Smooth earn feature
   The web runs fine, there are no problems when I do the testing

Suggestions for the future

1. The chart menu has been repaired again because it takes a long time to open it
   2.Increase web speed again, change the appearance of the web to be more beautiful, add other features such as the presentation feature 25% 50% 75% in the swap menu when you want to fill in the number of tokens

My balance not available

Why my balance not available, now I can't removed my liquidity. Please fixed this issue

My adress: 0x94c2b05acee96B52CC3c39489Aadd4781D56f637

feedback

After I tried all the available features, everything went well, nice display. i love the ui/ux. it's simple and easy to use for new user,
all features is working, speed loading very smooth, i tried on many device resolution and it's working perfectly
my address wallet
0x44cb9Ff76a361df0DC3ad25C3ed9335Dab1b6758

Remove LP Failed

always fails when deleting LP.
my address
0xE8E5909dAe931d39c0d068D5896DB656ff87D1db

feedback

Is your request related to a problem? Please describe.
nothink transaction notification

Describe the solution you'd like
Add transaction notification
Describe alternatives you've considered
Notify when swap/add liquid is successful

Additional context
Add transaction notification

Feedback

Freely describe your questions or issues here.

for features that are very light when doing swaps, adding liquidity, the process is very fast, my great hope is that when global access starts, don't let the speed when processing transactions decrease...

Feedback and review

1. UI is very smooth and light to use
2. Swap , Add Liquidity , Stake , Unstake ,Withdraw works well
3. didn't find any bugs during the testnet feature test
4. Very fast transaction
5. Goodluck

address :
0x4881B8C19E9F4dbcFca5e0cEEe74F148Eb5939C6

Please add 'Claim All' on Earn

Hi team, i have a suggestion about feature request. Right now if user want to claim rewards, user need to claim it one by one. How about add Claim all features so user will be easier to claim all rewards they get from farming LP and staking KDEX? it will be a plus point for Klaytn DEX.

Also on wallet address section it will be good if provided with link to klaytn explorer. Lastly, i think it will be good if Charts is available on Trade rather than on different section.

I think it's only suggestion i can give for Klaytn DEX. Hopefully this can help, thanks