feat: add new hedge creation to silkroad

[heyJonBray]

Objective

we need to integrate the silkroad page frontend with the XeonHedging_Test_V1 ABI which was added in #49 and ensure that all necessary contract interactions are correctly wired up.

this issue is being worked on alongside

New Hedge Popup

• feat: change OTC token entry to a dropdown #59

for testnet, we only need oVELA, oPEPE, oDEGEN, oHIGHER, oROR but set it up to pull from a separate list file so we can easily wire it up to a token list when #21 is finished

• ensure the style matches the hedge type dropdown

Create Hedge

• allow users to open a new hedge (createHedge)
  when a user clicks the (+) button to create a new hedge this opens a popup to enter information about the option being opened. when the user clicks write this data gets passed to the createHedge function with the following params:
  tool: the type of hedge (0 = CALL, 1 = PUT, 2 = SWAP)
  token: address of the ERC20 token
  amount: amount of the underlying asset
  cost: the premium or buying cost
  strikePrice: strike price of the option
  deadline: expiration timestamp of the hedge

• change 0xA929...0cE7 to the address of the token selected in the dropdown (format the address the same way using ...)

• show user hedge details (getUserTokenBalances)
  the small section on the bottom to "View Your Balances" shows the amount of tokens the user currently has in the protocol. It is is obtained by reading the getUserTokenBalances method and requires:
  token: address of the token selected from the dropdown
  user: address of the user

returns

deposited uint256, withdrawn uint256, lockedInUse uint256, withdrawable uint256, withdrawableValue uint256, paired address

note that the values for deposited, locked, withdrawn, and available will come back as the token amount with 18 decimals and need to be formatted to 2 decimals of precision (i.e. a return value of 100000000000000000000 is 100 tokens and should be displayed as 100.00)

[RTJ99]

im getting this error when i try to create a hedge.

Error creating hedge: Error: cannot estimate gas; transaction may fail or may require manual gas limit [ See: https://links.ethers.org/v5-errors-UNPREDICTABLE_GAS_LIMIT ] (reason="execution reverted", method="estimateGas", transaction={"from":"0xA929C6bad2EeBeD5748a339AadBC5E33d4780cE7","to":"0xF527B037e30D8764E8e24B7Ed7a6158488C6a758","data":"0x6355cb7200000000000000000000000000000000000000000000000000000000000000c000000000000000000000000000000000000000000000000000000000000000e000000000000000000000000000000000000000000000000000000000000003e8000000000000000000000000000000000000000000000000000000000000006400000000000000000000000000000000000000000000000000000000000000640000000000000000000000000000000000000000000000000000000067114d840000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000002a30783764433965634532356463434134314438613632376362343764656434613933323266373732326200000000000000000000000000000000000000000000","accessList":null}, error={"code":-32603,"message":"Internal JSON-RPC error.","data":{"code":-32000,"message":"execution reverted","cause":null}}, code=UNPREDICTABLE_GAS_LIMIT, version=providers/5.7.2)
at Logger.makeError (index.js:231:23)
at Logger.throwError (index.js:240:20)
at checkError (json-rpc-provider.js:92:20)
at Web3Provider.eval (json-rpc-provider.js:591:24)
at Generator.throw ()
at rejected (json-rpc-provider.js:22:65)

[heyJonBray]

@RTJ99 what parameters are you entering when opening a hedge?

we need to first ensure that tokens are approved before depositing into the contract

logic for approvals to open hedge should be

1. when user fills out the "amount" field, silently check if the contract has an approval for that amount of address(token) using address(token).allowance(wallet.address,XeonHedgingAddress) which returns uint256 amount

if approval amount is < amount

1. the "open hedge" button should read "approve"
2. first tx should approve tokens to the contract using: address(token).approve(XeonHedgingAddress,amount)

if approval amount is > amount

1. proceed to open the hedge normally

[heyJonBray]

UX should trigger a popup when a user creates a hedge and check for the approval in the popup, so the workflow looks like:

1. user fills out new hedge info, presses "open hedge"
2. popup confirming all of the info the user has entered (amount, token, hedge type, etc.)

• if an approval is needed, show text: "Approve {amount} {ticker} for {hedgeType}"
• if already approved, show text: "Open {hedgeType} for {amount} {ticker}

3. populate a button to either approve or submit
4. submit relevant transaction

having this popup component would be helpful as we can reuse it throughout the app any time a user adds tokens to one of our contracts