1

Hello, I`ve forked Uniswap V2 perfectly fine on the backend and now I want to connect it to my frontend. I have built a basic webpage and I am now doing the frontend. When calling the createPair function, my frontend isnt responsing and showing the following error in the console.log:

POST https://eth-goerli.g.alchemy.com/v2/XXX 400
(anonym) @ browser-geturl.ts:35
(anonym) @ browser-geturl.ts:1
__awaiter @ browser-geturl.ts:1
getUrl @ browser-geturl.ts:9
(anonym) @ index.ts:253
(anonym) @ index.ts:1
__awaiter @ index.ts:1
(anonym) @ index.ts:247
_fetchData @ index.ts:363
fetchJson @ index.ts:410
send @ json-rpc-provider.ts:523
(anonym) @ json-rpc-provider.ts:255
Promise.then (asynchron)
sendUncheckedTransaction @ json-rpc-provider.ts:243
(anonym) @ json-rpc-provider.ts:281
fulfilled @ json-rpc-provider.ts:1
Promise.then (asynchron)
step @ json-rpc-provider.ts:1
(anonym) @ json-rpc-provider.ts:1
__awaiter @ json-rpc-provider.ts:1
sendTransaction @ json-rpc-provider.ts:276
createPair @ uniswap.js:28
await in createPair (asynchron)
handleCreatePair @ Pool.js:17
await in handleCreatePair (asynchron)
callCallback @ react-dom.development.js:4164
invokeGuardedCallbackDev @ react-dom.development.js:4213
invokeGuardedCallback @ react-dom.development.js:4277
invokeGuardedCallbackAndCatchFirstError @ react-dom.development.js:4291
executeDispatch @ react-dom.development.js:9041
processDispatchQueueItemsInOrder @ react-dom.development.js:9073
processDispatchQueue @ react-dom.development.js:9086
dispatchEventsForPlugins @ react-dom.development.js:9097
(anonym) @ react-dom.development.js:9288
batchedUpdates$1 @ react-dom.development.js:26140
batchedUpdates @ react-dom.development.js:3991
dispatchEventForPluginEventSystem @ react-dom.development.js:9287
dispatchEventWithEnableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay @ react-dom.development.js:6465
dispatchEvent @ react-dom.development.js:6457
dispatchDiscreteEvent @ react-dom.development.js:6430
uniswap.js:33 
        
       Error creating pair: Error: bad response (status=400, headers={"content-length":"179","content-type":"application/json"}, body="{\"jsonrpc\":\"2.0\",\"id\":47,\"error\":{\"code\":-32600,\"message\":\"Unsupported method: eth_sendTransaction. See available methods at https://docs.alchemy.com/alchemy/documentation/apis\"}}", requestBody="{\"method\":\"eth_sendTransaction\",\"params\":[{\"gas\":\"0x1eb892\",\"from\":\"0xf450b38cccfdcfad2f98f7e4bb533151a2fb00e9\",\"to\":\"0x28fe679719e740d15fc60325416bb43eac50cd15\",\"data\":\"0xc9c65396000000000000000000000000a14cb03507a29ce3167ec83998050ae9237ad16a000000000000000000000000b4fbf271143f4fbf7b91a5ded31805e42b2208d6\"}],\"id\":47,\"jsonrpc\":\"2.0\"}", requestMethod="POST", url="https://eth-goerli.g.alchemy.com/v2/XXX", code=SERVER_ERROR, version=web/5.7.1)
    at Logger.makeError (index.ts:269:1)
    at Logger.throwError (index.ts:281:1)
    at index.ts:308:1
    at Generator.next (<anonymous>)
    at fulfilled (index.ts:1:1)
createPair @ uniswap.js:33
await in createPair (asynchron)
handleCreatePair @ Pool.js:17
await in handleCreatePair (asynchron)
callCallback @ react-dom.development.js:4164
invokeGuardedCallbackDev @ react-dom.development.js:4213
invokeGuardedCallback @ react-dom.development.js:4277
invokeGuardedCallbackAndCatchFirstError @ react-dom.development.js:4291
executeDispatch @ react-dom.development.js:9041
processDispatchQueueItemsInOrder @ react-dom.development.js:9073
processDispatchQueue @ react-dom.development.js:9086
dispatchEventsForPlugins @ react-dom.development.js:9097
(anonym) @ react-dom.development.js:9288
batchedUpdates$1 @ react-dom.development.js:26140
batchedUpdates @ react-dom.development.js:3991
dispatchEventForPluginEventSystem @ react-dom.development.js:9287
dispatchEventWithEnableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay @ react-dom.development.js:6465
dispatchEvent @ react-dom.development.js:6457
dispatchDiscreteEvent @ react-dom.development.js:6430
Pool.js:18 Pair created at address: undefined

This is the code to my Pool.js:

import React, { useState } from 'react';
import { init, createPair, addLiquidity } from './uniswap';
import './Pool.css';
import { ethers } from 'ethers';

const providerUrl = 'https://eth-goerli.g.alchemy.com/v2/XXX';

function Pool({ account }) {
  const [tokenA, setTokenA] = useState('');
  const [tokenB, setTokenB] = useState('');
  const [amountADesired, setAmountADesired] = useState('');
  const [amountBDesired, setAmountBDesired] = useState('');

  const handleCreatePair = async () => {
    await init(providerUrl, account);
    const pairAddress = await createPair(tokenA, tokenB);
    console.log('Pair created at address:', pairAddress);
  };

  const handleAddLiquidity = async () => {
    const amountADesiredBN = ethers.utils.parseUnits(amountADesired, 18); 
    const amountBDesiredBN = ethers.utils.parseUnits(amountBDesired, 18); 
    const amountAMin = ethers.utils.parseUnits(amountADesired, 18); 
    const amountBMin = ethers.utils.parseUnits(amountBDesired, 18); 
    const deadline = Math.floor(Date.now() / 1000) + 20 * 60; // 20 minutes from now
    const to = account; 
    await addLiquidity(tokenA, tokenB, amountADesiredBN, amountBDesiredBN, amountAMin, amountBMin, to, deadline);
  };
  

  return (
    <div className="Pool">
      <h1>Create Token Pair</h1>
      <input
        type="text"
        value={tokenA}
        onChange={(e) => setTokenA(e.target.value)}
        placeholder="Token A address"
      />
      <input
        type="text"
        value={tokenB}
        onChange={(e) => setTokenB(e.target.value)}
        placeholder="Token B address"
      />
      <button onClick={handleCreatePair}>Create Pair</button>
      <h1>Add Liquidity</h1>
      <input
        type="text"
        value={amountADesired}
        onChange={(e) => setAmountADesired(e.target.value)}
        placeholder="Amount A desired"
      />
      <input
        type="text"
        value={amountBDesired}
        onChange={(e) => setAmountBDesired(e.target.value)}
        placeholder="Amount B desired"
      />
      <button onClick={handleAddLiquidity}>Add Liquidity</button>
    </div>
  );
}

export default Pool;

and this is the uniswap.js file with the logic behind it:

import { ethers } from 'ethers';
import UniswapV2FactoryABI from '../abis/Factory.sol/UniswapV2Factory.json';
import UniswapRouter02ABI from '../abis/Router.sol/UniswapV2Router02.json';

const UniswapV2FactoryAddress = '0x28fE679719e740D15FC60325416bB43eAc50cD15';
const UniswapRouter02Address = '0xeAEdaF63CbC1d00cB6C14B5c4DE161d68b7C63A0';

let provider, signer, factoryContract, routerContract;

async function init(providerUrl, account) {
  provider = new ethers.providers.JsonRpcProvider(providerUrl);
  signer = provider.getSigner(account);

  // Add the console.log statements here to log the ABIs
  console.log('Factory ABI:', UniswapV2FactoryABI);
  console.log('Router ABI:', UniswapRouter02ABI);

  factoryContract = new ethers.Contract(UniswapV2FactoryAddress, UniswapV2FactoryABI.abi, signer);
  routerContract = new ethers.Contract(UniswapRouter02Address, UniswapRouter02ABI.abi, signer);
}




async function createPair(tokenA, tokenB) {
  try {
    const createPairTx = await factoryContract.populateTransaction.createPair(tokenA, tokenB);
    const tx = await signer.sendTransaction(createPairTx);
    const receipt = await tx.wait();
    const event = receipt.events.find((e) => e.event === 'PairCreated');
    return event.args.pair;
  } catch (error) {
    console.error('Error creating pair:', error);
  }
}


async function addLiquidity(tokenA, tokenB, amountADesired, amountBDesired, amountAMin, amountBMin, to, deadline) {
  try {
    const tx = await routerContract.addLiquidity(
      tokenA,
      tokenB,
      amountADesired,
      amountBDesired,
      amountAMin,
      amountBMin,
      to,
      deadline
    );
    const receipt = await tx.wait();
    return receipt;
  } catch (error) {
    console.error('Error adding liquidity:', error);
  }
}

export { init, createPair, addLiquidity };

I would be very gratefulif someone can help me and even send a token tip if possible. Thanks a lot. I cant find anything online of fixing this. I have of course censored the alchemyaddress

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Browse other questions tagged or ask your own question.