Running Uniswap Frontend Locally for Testnet Environment

Running Uniswap Frontend Locally for Testnet Environment

Using Uniswap in a testnet environment is simple. You can change the network of the connected wallet to a testnet or specify the chain in the query string. For example, if you want to use Uniswap on the Ethereum Sepolia testnet, you can use the following URL:

https://app.uniswap.org/swap?chain=sepolia

However, the current Uniswap web interface does not work properly in the Sepolia testnet environment.

Uniswap Sepolia issues
We do have Sepolia v3 setup, although the Sepolia testnet is currently having issues in the Uniswap app. The developers are aware, and a fix is planned. Currently, there is no estimation for this completion.
 
Here is an older version without the bug. (two links are the same version, just different types of IPFS routing as some browsers will only use one)

The v2 setup here is broken, please don’t use the v2. v2 is currently not available.
Verify these are official here.
Version 1 link 1
Version 1 link 2

This issue first occurred earlier this year, and I have been waiting for it to be resolved, but it has been neglected for almost half a year. I tried to access an older version of Uniswap that was provided in the official Discord, but it also doesn't work. The URL listed as 'Official here' is https://github.com/Uniswap/interface/releases?page=3, but it is unclear which version it refers to due to the passage of time. Which version on page 3?🧐

The Uniswap Interface is open source and available on GitHub. However, even following the guide, it still does not work properly.

GitHub - Uniswap/interface: 🦄 Open source interfaces for the Uniswap protocol
🦄 Open source interfaces for the Uniswap protocol. Contribute to Uniswap/interface development by creating an account on GitHub.

I have documented the process of running the Uniswap Interface locally and confirming that it works well in the testnet environment.

Issues and Solutions:

  • .env.defaults does not exist
  • apps/web/src/utils/generated does not exist
  • There are versions that work well in the testnet environment and versions that have issues. Below are the versions I have tested. I am currently using version 5.19.3.
    • Works well in testnet
      • 5.17.0
      • 5.19.1
      • 5.19.3
    • Does not work in testnet
      • 5.27.2

Below is the script I used.

Copy and paste this as it is, and it should work fine.

git clone https://github.com/Uniswap/interface
cd interface
git fetch --all --tags
git checkout tags/web/5.19.3
mkdir apps/web/src/utils/__generated__  # https://github.com/Uniswap/interface/issues/7631
# create .env.defaults file under project root.
# https://github.com/Uniswap/interface/issues/7678
cat <<EOL > .env.defaults
ALCHEMY_API_KEY='key'
AMPLITUDE_EXPERIMENTS_DEPLOYMENT_KEY='key'
APPSFLYER_API_KEY='key'
APPSFLYER_APP_ID="123"
FIAT_ON_RAMP_API_URL='https://api.uniswap.org'
MOONPAY_API_KEY='key'
MOONPAY_API_URL='https://api.moonpay.com'
MOONPAY_WIDGET_API_URL='https://api.moonpay.com'
INFURA_PROJECT_ID="123"
ONESIGNAL_APP_ID="123"
QUICKNODE_BNB_RPC_URL='https://api.uniswap.org'
SENTRY_DSN='http://sentry.com'
SHAKE_CLIENT_ID="123"
SHAKE_CLIENT_SECRET="123"
SIMPLEHASH_API_KEY='key'
SIMPLEHASH_API_URL='https://api.simplehash.com'
STATSIG_PROXY_URL='https://api.statsig.com'
TEMP_SCANTASTIC_URL='https://api.uniswap.org'
TRADING_API_KEY='key'
TRADING_API_URL='https://api.uniswap.org'
UNISWAP_API_KEY='key'
UNISWAP_API_BASE_URL='https://api.uniswap.org'
UNISWAP_APP_URL='https://app.uniswap.org'
WALLETCONNECT_PROJECT_ID="123"
UNITAGS_API_URL='https://api.uniswap.org/unitags'
FIREBASE_APP_CHECK_DEBUG_TOKEN='token'
EOL

yarn
yarn web start