soroswap / frontend

Soroswap.Finance Frontend Repo

🌟 Soroswap Frontend @ Soroban Preview 10🌟

Welcome to Soroswap, a decentralized exchange (DEX) that draws inspiration from the Uniswap V2 protocol and is specifically tailored for the Soroban network.

Before you begin, ensure you have met the following requirements:

• docker >= v24.0.2
• Freighter Wallet v5.6.3 Please use this version. You can have an intependent environment following the instructios in this post

🛠 Setting Up Soroswap 🛠

1. Clone the Repository

   git clone https://github.com/soroswap/frontend.git
   cd frontend

2. Set Up Environment Variables

   Copy the .env.example file to create a new .env file:

   cp .env.local.example .env

   Now, edit the .env file and provide the NEXT_PUBLIC_BACKEND_URL, NEXT_PUBLIC_SOROSWAP_BACKEND_API_KEY and NEXT_PUBLIC_TEST_TOKENS_ADMIN_SECRET_KEY variables. This will tell the frontend where to look for:

   • the list of known tokens
   • the SoroswapFactory address
   • the SoroswapRouter address
   • the admin key for token minting

   If you are following the instructions in https://github.com/soroswap/core in order to deploy the smart contacts in your local environment and serve the API. you should have:

   NEXT_PUBLIC_BACKEND_URL=http://localhost:8010

   If you don't want to use the backend, you should also set the following variable:

   NEXT_PUBLIC_SOROSWAP_BACKEND_ENABLED=false

   Also, the variable NEXT_PUBLIC_TEST_TOKENS_ADMIN_SECRET_KEY should be the same as the one that deployed the tokens in the core repository.

   If you are ready for production, you can take Futurenet Contracts information from https://api.soroswap.finance and just do

   cp .env.production.example .env

   ❗️❗️ Note that some Futurenet RPC's might not have the same version, so we recomend you to connect to a local quickstart node following the instructions in https://github.com/soroswap/core; and setting up your Freighter Wallet as in step 6.

3. Start Docker

   Navigate to the the run.sh script inside the docker folder

   bash docker/run.sh

   This script will set up and start the Docker containers required for Soroswap.

4. Install the Dependencies

   After the Docker container is up, you will be inside the root folder on the container. Then, install the dependencies using Yarn:

   yarn install

5. Run the Development Instance

   Now you are ready to start the development instance. Run the following command:

   yarn dev

   This will start the Soroswap development instance.

6. Configure your Freigher Wallet

   For Standalone network

   Name	Local Standalone
   HORIZON RPC URL	http://localhost:8000
   SOROBAN RPC URL	http://localhost:8000/soroban/rpc
   Passphrase	Standalone Network ; February 2017
   Friendbot	http://localhost:8000/friendbot
   Allow HTTP connection	Enabled
   Switch to this network	Enabled

   For Futurenet network

   Name	Local Futurenet
   HORIZON RPC URL	http://localhost:8000
   SOROBAN RPC URL	http://localhost:8000/soroban/rpc
   Passphrase	Test SDF Future Network ; October 2022
   Friendbot	http://localhost:8000/friendbot
   Allow HTTP connection	Enabled
   Switch to this network	Enabled

   ** Important:** You should also do: Preferences> Allow experimental mode

7. Last, but not least, add some lumens to your Freighter wallet!

   Do it directly on the wallet or use:

   For Standalone: http://localhost:8000/friendbot?addr=<your address> For Futurenet, visit: https://laboratory.stellar.org/#create-account

🚀 Congrats! 🚀

You have successfully set up Soroswap on your local machine! Start swapping, pooling, and exploring the possibilities of decentralized finance (DeFi) on the Soroban network.

🧪🔨 Testing 🧪🔨

To execute the tests, you must first start the development container. To do this, run the following command from your host machine:

bash docker/run.sh

Once the development container is running, you can install the dependencies for the tests by running the following command:

## 🧪🔨 Testing 🧪🔨
To execute the tests, you must first start the development container. To do this, run the following command from your host machine:

```bash
bash docker/run.sh

Once the development container is running, you can install the dependencies for the tests by running the following command:

yarn install

Finally, to run the tests, run the following command from within the development container:

yarn test

This will run all of the unit and integration tests for the project.

The tests are written using Vitest & testing-library.

For more information on Vitest, please see the Vitest documentation: https://vitest.dev/.

For more information on Testing Library, please see the Testing Library documentation: https://testing-library.com/docs/react-testing-library/intro/

Contributing

If you find a bug or have a feature request, please create an issue or submit a pull request. Contributions are always welcome!

License: MIT

Acknowledgments

Special thanks to the Uniswap team for providing the base protocol on which Soroswap is built.
Thank you to the Stellar Community for the continuous support.

---

---

Made with ❤️ by the Soroswap Team.

frontend's Issues

Test with Futurenet

Swap: Modal

Add a review swap modal, same as the one in uniswap for now. should popup after clicking swap button, if #70 is already working the swap function should be called after this popup

i think this same modal changes after to a waiting for confirmation ( waiting for the user to sign the transaction in the wallet) and then it turns into a transaction submitted, so research how uniswap modal works, we should bring the logic to our app

Please refer to uniswap interface for the styled components and how the component is compose. I've been running this project locally to see the files and its workings.

Add CommonBasses.tsx from uniswap

The common bases file shows up in the token selector modal as the "most used or base tokens"

the one with ETH, DAI, USDC, etc

just get the files from uniswap interface, fix the styled css and show it in the token selector

Add token SafetyModal from uniswap interface

The token safety modal opens when a token is flagged, might not be necessary for now, but it should be copied from uniswap interface clone this repo and run it locally so you can see and understand how it works

its in this file

CurrencySearchModal.tsx

(D 5.2) Fetch best price of an specific swap

useTokenFromActiveNetwork -> Search token

In the search currency modal, when you type and address the app should look for the token information in the blockchain

The function is already there and its being used, but it returns null it should return a new TokenType object with its information

src/hooks/useTokens.tsx Line: 82

In this line there is the function useTokenFromActiveNetwork, should look for the token information (id, address, symbol, name)

There is a lot of commented code from the uniswap interface, deleted if there is no use to it

When a pair does not exist: Show a Button to create the pair

• Create useCreatePair(token0,token1,factory) function
• Show the button that will trigger that function in the case the pair does not exist
• Test

getPairContractAddress(tokenAddressA, tokenAddressB) →PairAddress.

Create function getPairContractAddress(tokenAddressA, tokenAddressB) →PairAddress. Given 2 token address, query the Factory contract to return the Pair contract address of both tokens. Returns undefined if that pair does not exist.

getExpectedInputAmount(contract_id, token0, token1, amount1) -> int:

create function getExpectedInputAmount(contract_id, token0, token1, amount1) -> int: Given contract_id (pair contract), token0 contract address, token1 contract address and amount for token1, it returns the amount0 a user has to input in order to receive the amount1 when swapping.

(Liquidity): calculatePoolTokenOptimalAmount(pairAddress, tokenAddress, inputAmount

Create function calculatePoolTokenOptimalAmount(pairAddress, tokenAddress, inputAmount → Calculate) optimalOtherAmount Given a contract_id (I mean pair contract address) an amount and a token Address it returns an integer that indicates what’s the optimal amount of the other token in the pair contract to deposit.
Check github preriphery contracts and uniswap sdk https://github.com/Uniswap/v2-sdk/
Write this in a good way.

Liquidity Pools Add liquidity

V2 Provide liquidity

The add liquidity button should take you to this screen, where you can select 2 tokens and provide liquidity to them or create the pair if it doesnt exist, the settings menu is exactly the same as #68

You should be able to make it work right away, provide liquidity old component is already working, see how uniswap function works too see if we can improve ours

Please refer to uniswap interface for the styled components and how the component is compose. I've been running this project locally to see the files and its workings.

All functions: check that input=token0 is not hardcoded

pairBalance(pairAddress, userAddress)--> [int]:

Create function pairBalance(pairAddress, userAddress)--> [int]: Returns the LP token balance of an account or the account in context.

Error: Handle error when contract does not exist

How to replicate:

• Deploy in Futurenet
• Configure your wallet to use Futurenet in localhost:8000
• Run quistart node with Standalone in port 8000
• Try to use Soroswap

Current: Nothing happens, there is only an error in the console

error: HostError
Value: Status(HostStorageError(AccessToUnknownEntry))

What we want:
Warn the user

Solve user declined access in Create Pair

Change token address in create_token.sh to be the token address and not the address of the token admin account

deposit(tokenAddress0, tokenAddress1, amount0, amount1)->reponse

Create function deposit(tokenAddress0, tokenAddress1, amount0, amount1)->reponse to make user sign transaction and deposit the given amounts It returns a response object (a json) which indicates if the transaction was successful or if it has been an error.

(D5.1) Deploy in Vercel.app to support soroswap.finance

Check build errors

tokenBalance (tokenAddress, userAddress?) -> int/bigint:

Create a function tokenBalance (tokenAddress, userAddress?) -> int/bigint: Given a token address it returns a balance for the account on context. If the user_address is set, look the balance of the user, otherwise, use the address in the context.

Transaction Submitted Modal

Dependant of #71

This modal will be used in multiple situations, every time a transaction is submitted to the blockchain, for now it should show after Swapping and providing liquidity

Please refer to uniswap interface for the styled components and how the component is compose. I've been running this project locally to see the files and its workings.

(D5.1): Add instructions on how to deploy contracts

Add instructions in README on cloning/executing core contract in order to deploy tokens and pair/factory contracts

Swap: Show balances and dont let the user continue if does not have balances

(D 5.2) Swap: getExpectedAmount(contract_id, token0, token1, amount0) -> int:

create function getExpectedAmount(contract_id, token0, token1, amount0) -> int: Given contract_id (pair contract), token0 contract address, token1 contract address and amount for token0, it returns the expected amount when swapping. CHeck https://github.com/Uniswap/v2-periphery/blob/0335e8f7e1bd1e8d8329fd300aea2ef2f36dd19f/contracts/libraries/UniswapV2Library.sol#L43

userHasTrustline(tokenAddress, user).

create function userHasTrustline(tokenAddress, user).

ProvideLiquidity: For new pairs, user should be able to choose both amounts

createTrustline(tokenAddress) -> response:

Create function createTrustline(tokenAddress) -> response: Given a token address creates a trustline for the account on context. It asks user to sign the trustline creation for the token. It returns a response object (a json) which indicates if the transaction was successful or if it has been an error.

Swap.tsx:

In CArd on file Swap.tsx:
It should have 2 dropdowns with its corresponding input fields
first dropdown should have all tokens
second dropdown should have the tokens available to swap with
If you modify one input field, the other input field should change using getInputAmount() or getExpectedInputAmount()
Button should create trustline if output token doesn’t have a trustline :)
Button calls swap() function

Provide Liq: LP tokens to receive is not taking into account the first locked LP tokens

Open Token Modal after connecting wallet for the first time

Hay un error que al conectar la wallet por primera vez y luego abrir el modal de los tokens se cae al montar el componente, si se monta el componente antes de conectar la wallet y luego la conecto ahi funciona bien

• Reproducir
• Entender por qué
• Solucionar

Dockerize project

Create a dockerfile and bash script to run a dockerized version of the project, you could refer to Uniswap Forked Interface

(D5.2) Calculate price impact & minimum received

Swap/Provide Liq: User should choose a pair in any order

tokenBalances(userAddress??) -> Array(int/bigint):

• Create function tokenBalances(userAddress??) -> Array(int/bigint): Iterates from the tokens.json lists and returns the balances of those tokens for the given account or the account in context
• use this function to show a list of balances in Balances.tsx:

Provide Liq. User should be able to choose amount of second token, and amount of first should be calculated automatically

ProvideLiquidity.tsx:

In Card on file ProvideLiquidity.tsx:

• It should have 2 dropdowns with its corresponding input fields
• first dropdown should have all tokens
• second dropdown should have the tokens available to add liquidity with
• If you modify one input field, the other input field should change using calculatePoolTokenOptimalAmount() function
• Button to add liquidity and send transaction that calls deposit function

user balance below the token selector

selectedCurrencyBalance const is hardcoded to 1000 there is commented code on what it should do

  const selectedCurrencyBalance = 1000 //useFormattedTokenBalance(currency?.token_address, address)

if useFormattedTokenBalance is used, when you connect the wallet immediately after loading the website it shows an error... this should be fixed

file

src/components/currencyInputPanel/SwapCurrencyInputPanel.tsx

max button should also work and set the input amount to the max possible amount, if its XLM it should count for the fees

mintTokens(address, amount) -> response:

Create function mintTokens(address, amount) -> response: Given a token address and an amount, it mints the token for the account on context. It returns a response object (a json) which indicates if the transaction was successful or if it has been an error.

Settings: modal / button - import components from Uniswap

Add this settings modal/context that opens when the settings icon is clicked

Including

• Local Routing
  - [ ] Max Slippage
• Transaction deadline

Please refer to uniswap interface for the styled components and how the component is compose. I've been running this project locally to see the files and its workings.

getPoolShareQuote(token0Address, amount0, token1Address, amount1) -> float:

Create function getPoolShareQuote(token0Address, amount0, token1Address, amount1) -> float: Given the addresses and amounts to deposit gives a quote on what percentage of the pool the user will have. Uses getLPTokensAmount.

Liquidity Pools Main Section

This section should show your open positions (LP Tokens), i like how the liquidity pools are showed in uniswap, we can do a combination between V3 and V2.

V3 Pools section

With the V2 pools warning about the fees below the pools and without those 2 other options

Please refer to uniswap interface for the styled components and how the component is compose. I've been running this project locally to see the files and its workings.

Inject created tokens and pairs to frontend

From core, serve tokens.json file, and pairs.json.
Then frontend takes them. Also, admin-key.

For example, it can be accessed through http://localhost:8001/api/tokens.json or http://stellar:8001/api/tokens.json
tokens.json should have name and symbol fields

For production: factory.json tokens.json & pairs.json are in a public github repo soroswap/addresses

swap()

create function swap() that allow user to sign and send tx to blockchain

Mint.tsx:

In Card on file Mint.tsx:
Update Dropdown to show all tokens
Button on bottom should call functions: createTrustline() and mintTokens()
Verify input amount is positive and integer.

Sort tokens with balances

There used to be a function that sorts the tokens with balances to show them at the beginning of the list in the Token Selector modal. It was taken out because it generated problems while rendering the app...

Needs to find another way to sort the tokens and show the ones with balances first

getPairExist(token0Address, token1Address ) -> bool:

Create function getPairExist(token0Address, token1Address ) -> bool: Returns true if a LP pair of tokens already exist,

Swap: User should be able to choose output. And input amount its calculated automatically

• create function getExpectedInputAmount(contract_id, token0, token1, amount1) -> int: Given contract_id (pair contract), token0 contract address, token1 contract address and amount for token1, it returns the amount0 a user has to input in order to receive the amount1 when swapping.
• use function in fronted

Swap: Use imported component from Uniswap

After issue #67 you should be able to have everything to make this component able to swap

Should work as expected, the swap is already working with the old swap component

Add second token selector to swap

Add second token selector to the swap section

• Add inverse button
• Add Second token input/selector
• Add Swap Button

Please refer to uniswap interface for the styled components and how the component is compose. I've been running this project locally to see the files and its workings

getLPTokensAmount(token0Address, amount0, token1Address, amount1) -> int | bigint:

Create function getLPTokensAmount(token0Address, amount0, token1Address, amount1) -> int | bigint: Given the addresses and amounts to deposit it returns the LP tokens that user will receive after depositing

Swap: Information Component

Add this swap information component

(From 1 DERC = 0.00008 ETH to Order Routing)

This components appear after two tokens have been selected and it shows information about the swap; The component can be closed or open, it shows the conversion (x PYR = x ETH) and if clicked, it shows the other way around

Network fees, Price Impact, Minimum output, Expected output

Please refer to uniswap interface for the styled components and how the component is compose. I've been running this project locally to see the files and its workings.