project-serum / swap-ui Goto Github PK

View Code? Open in Web Editor NEW

113.0 8.0 116.0 2.36 MB

React Component for Swapping on the Serum DEX

License: Apache License 2.0

HTML 1.87% CSS 1.12% TypeScript 96.31% JavaScript 0.70%

react serum solana

swap-ui's Introduction

`@project-serum/swap-ui`

A reusable React component for swapping on the Serum DEX. The Solana program can be found here.

Usage

Install

First install the required peer dependencies into your React project.

yarn add @material-ui/core @material-ui/icons @material-ui/lab @project-serum/anchor @solana/spl-token-registry @solana/web3.js material-ui-popup-state react-async-hook

Then install the package.

yarn add @project-serum/swap-ui

Add the Swap Component

To embed the Swap component into your application, one can minimally provide an Anchor Provider and TokenListContainer. For example,

<Swap provider={provider} tokenList={tokenList} />

All of the complexity of communicating with the Serum DEX and managing its data is handled internally by the component.

Referral Fees

To earn referral fees, one can also pass in a referral property, which is the PublicKey of the Solana wallet that owns the associated token accounts in which referral fees are paid (i.e., USDC and USDT).

Developing

Install dependencies

yarn

Build

yarn build

Run the example app

For local development and educational purposes, a minimal React app is provided in the example/ subdirectory.

To run, change directories via cd example/ and start the app.

Start the app

yarn start

swap-ui's People

Contributors

Stargazers

Watchers

Forkers

philippe-ftx mattou78400 artsphere-platform bitjunky bladesfinance secretshardul sultanpeyek sourcecode-readings nordicenergy bitfinance-co solanacrayon compendiumfi beautyfree jadvhal smrnjeet222 nocteapp beovolytics-inc fyfy-dev emma66886 cykura ash-ve25 amilz hesido thevenice sugatach akhileshthite bincrypto axolotl-token jackliu8722 thinkward-ltd munanadi nft-zone solanadev007 elite0226 soletswap kingzrex solbros matt-scientist guijun alimangostudio solcrazyape thewhalessquad kirksgithub bugimgl kasky53 emg110 manekinekolabs dekatron322 dappcenter solempad cryptojlee alebrega risaduck bridgesplit jsmits06 toptalent333 maximver cryptomushroomz alice010101 solventprotocol von-dee port-finance facttoken rafaelescrich crypto-forks adamlawrencium oleksandrbyk madeinmoon coreyman11 astradex-solana squareandcompass mum33n analyticsninja valentineshibaworld convexitydmcc petermilla martiolozz faluraga gemslab-tech solplayground vuvhh tlsingh1 boxingchamps p2ling ynsdev1 pyujin78 juancano57 themagichand777 tim3385 jachengm yjkhaoyun pengxjwawa123 metalgear-dev xxmafiaxxx soltydev ramondreynold prazovic bigmysti h0lme3 zalina-finance

swap-ui's Issues

> this is screenshot showing a funded account and the immediate console.log result of clicking swap. I have not set up any other external accounts other than the wallet account you see here, and I have added a variety of SPL tokens through the interface as the only prerequisite to making the swap.

this is screenshot showing a funded account and the immediate console.log result of clicking swap. I have not set up any other external accounts other than the wallet account you see here, and I have added a variety of SPL tokens through the interface as the only prerequisite to making the swap.

Please let me know if need further information or diagnostics. I am very happy to assist to help improve the UX flow for these swaps.

Originally posted by @laurencefass in #63 (comment)

Websocket connection for account balances

We should open a websocket connection for the currently displayed swap tokens. When a swap occurs, the displayed balances should automatically update.

Automatically create associated token accounts for the Swap referral account

Currently swaps fail if the referral account doesn't have the right associated token account present. It is not practical to anticipate and create every token account in advance, especially as the number of markets grow. This should be handled by the swap library itself.

Selecting tokens is a bit slow

Something in the UI is being blocked when a new token is selected from the menu. No network requests are required to trigger the slowness.

Eliminate unnecessary `@project-serum/serum` Market.load mint requests

The @project-serum/serum package performs two unnecessary requests to fetch mints for a market. We should provide an option to that api to skip this, since the app already has these accounts and so the extra request is unnececessary.

Feature request: add a swap and transaction history to the wallet

I am experimenting with this wallet to understand how it works before committing any significant token amounts to storage. One useful feature of modern wallets is ability to see transaction and swap history. Do you plan to implement this in the future?

Basic swaps from SOL to SRM/RAY/OXY not working as swap button grays on hover

Original issue.

I am testing this wallet for the first time with a small deposit of SOL trying to convert to other SOL tokens.

I have created balances for SRM, RAY and OXY and the basic swap function is not working.

If i select swap SOL to any of SRM/RAY/OXY the Swap button is enablled but it grays and disables when i hover it as shown in the screenshot. There are no other errors shown on the screen.

Pool curve change

Hello there, Is there any way in which you could change the curve type on this swap? I would like swap prices to be the same regardless of the liquidity in the pool.

Use BBO as fair instead of the mid

The BBO might provide a better experience, since it's what the trade would execute at (and so there's less of a chance that the slippage limit is exceeded causing the transaction to fail).

Create token accounts if they don't already exist

Swapping to a token should create an associated token account, if it doesnt already exist. This includes intermediary accounts (udsc, usdt) for transitive swaps. This should happen in the transactions constructed from the @project-serum/swap package.

Newly created open orders accounts aren't picked up by the manage dex component

When the swap component creates a new open orders account, because it detects one doesn't exist, it doesn't save that open orders account after the transaction completes. This will cause the component to recreate a new open orders account, even though one exists, if one initiates a swap for the second time without refreshing.

One easy solution is to just save the new open orders accounts into the context open orders cache immediately after the transaction to create them completes.

Please put up swap-ui example on https://project-serum.github.io/swap-ui/ again

Please put up https://project-serum.github.io/swap-ui/. It was convenient for testing and comparing features

Orderbook view

We have all the orderbook data. Might be nice to provide an additional, advanced view to display the entire orderbook for the currently selected swap pair.

Separate react example app from component package

We should move the example react app to an example/ folder and unpack the src/swap/ directory a level up to make more clear the difference between the component package and the example app.

Explicit flow for wrapping/unwrapping SOL

We should provide an explicit button or alternative flow for wrapping/unwrapping SOL. E.g. when the "from" mint is native SOL and the "to" mint is wrapped SOL, change the button from "swap" to wrap.

Wormhole tab

There should be a tab on the token dialog for listing wormhole related tokens. This includes wormhole wrapped <-> sollet wrapped tokens and wormhole wrapped <-> native tokens.

Referral address

Add a field in the swap component for plumbing through the referral account

Change swap button to "create token account" if the user doesn't have a token account

Instead of dynamically creating the account, we should provide an explicit flow. This will help prevent transactions from going over the tx size limit.

Feature request: add option to remove zero balance accounts from active account balances page

Whilst learning and discovering the interface for the first time I have added balances for tokens I do not wish to hold or see and there is no way to remove them. Feature request: provide option to delete zero balance tokens from a specific Account Balance page. Provide two interfaces:

remove all zero balances (with confirmation)
remove specific zero balance from token specific context menu.

If this feature is adopted I am happy to assist with further testing and feedback.

Duplicate entries in token selection dropdown

On searching USDC, 4 entries for the token get displayed.

On closing the dropdown and opening it again, 2 are shown.

I believe the two tokens are native USDC and Wrapped USDC. They're getting duplicated in the first case.

Swap was not succeeded ! funcation sendAll doesn't work correctly !

I tried to Swap from SOL to USDC , and it doesn't work.
I tried to insert log as following image. In Swap.tsx: line 442 ,then i found it doesn't work expectly!

Reduce precision for small amounts, confusion due to exponential notation

Original issue here.

The current SRM to HOLD rate is 1 SRM = 42513513.513513513 HOLD.

When I pick HOLD -> SRM and set HOLD amount as 1, it shows that I will receive 2.337826453243471e SRM. This appears as 2.33 on the UI.

bug: First token balance not updated after swap

After swaps go through, the second token's balance is updated but the first one's not. This leaves end-users confused.

Before swap: 0.1 SRM, 0.04 USDC.
After swap: SRM balance remains 0.1, even though USDC balance is 0.8 now

can we swap directly on serum dex using phantom wallet.

Transaction failed with error 0x22 on swap: USDC to SPL tokens (RAY and SRM).

I tried and failed to swap USDC to RAY/SRM.

I succesfully converted SOL to USDC as per guidance in #63.

Converting USDC to RAY or SRM resulted in custom program error 0x22.

screen dump:

console log:

MetaMask: The event 'data' is deprecated and will be removed in the future. Use 'message' instead.
For more information, see: https://eips.ethereum.org/EIPS/eip-1193#message
_warnOfDeprecation @ inpage.js:1
on @ inpage.js:1
c.setProvider @ 2.cc189e01.chunk.js:1
e @ 2.cc189e01.chunk.js:1
packageInit @ 2.cc189e01.chunk.js:1
h @ 2.cc189e01.chunk.js:1
290 @ main.a239de0b.chunk.js:1
u @ (index):1
(anonymous) @ main.a239de0b.chunk.js:1
166 @ main.a239de0b.chunk.js:1
u @ (index):1
952 @ main.a239de0b.chunk.js:1
u @ (index):1
r @ (index):1
t @ (index):1
(anonymous) @ main.a239de0b.chunk.js:1
inpage.js:1 MetaMask: The event 'close' is deprecated and may be removed in the future. Please use 'disconnect' instead.
For more information, see: https://eips.ethereum.org/EIPS/eip-1193#disconnect
_warnOfDeprecation @ inpage.js:1
on @ inpage.js:1
c.setProvider @ 2.cc189e01.chunk.js:1
e @ 2.cc189e01.chunk.js:1
packageInit @ 2.cc189e01.chunk.js:1
h @ 2.cc189e01.chunk.js:1
290 @ main.a239de0b.chunk.js:1
u @ (index):1
(anonymous) @ main.a239de0b.chunk.js:1
166 @ main.a239de0b.chunk.js:1
u @ (index):1
952 @ main.a239de0b.chunk.js:1
u @ (index):1
r @ (index):1
t @ (index):1
(anonymous) @ main.a239de0b.chunk.js:1
main.a239de0b.chunk.js:1 Transaction confirmed after 299ms
2.cc189e01.chunk.js:1 Transaction simulation failed: Error processing Instruction 1: custom program error: 0x66 
    Program 11111111111111111111111111111111 invoke [1]
    Program 11111111111111111111111111111111 success
    Program 22Y43yTVxuUkoRKdm9thyRhQ3SdgQS7c7kB6UNCiaczD invoke [1]
    Program 9xQeWvG816bUx9EPjHmaT23yvVM2ZWbrrpZb9PusVFin invoke [2]
    Program TokenkegQfeZyiNwAJbNbGKPFXCWuBvf9Ss623VQ5DA invoke [3]
    Program log: Instruction: Transfer
    Program TokenkegQfeZyiNwAJbNbGKPFXCWuBvf9Ss623VQ5DA consumed 3402 of 159834 compute units
    Program TokenkegQfeZyiNwAJbNbGKPFXCWuBvf9Ss623VQ5DA success
    Program 9xQeWvG816bUx9EPjHmaT23yvVM2ZWbrrpZb9PusVFin consumed 17348 of 170391 compute units
    Program 9xQeWvG816bUx9EPjHmaT23yvVM2ZWbrrpZb9PusVFin success
    Program 9xQeWvG816bUx9EPjHmaT23yvVM2ZWbrrpZb9PusVFin invoke [2]
    Program TokenkegQfeZyiNwAJbNbGKPFXCWuBvf9Ss623VQ5DA invoke [3]
    Program log: Instruction: Transfer
    Program TokenkegQfeZyiNwAJbNbGKPFXCWuBvf9Ss623VQ5DA consumed 3402 of 133247 compute units
    Program TokenkegQfeZyiNwAJbNbGKPFXCWuBvf9Ss623VQ5DA success
    Program TokenkegQfeZyiNwAJbNbGKPFXCWuBvf9Ss623VQ5DA invoke [3]
    Program log: Instruction: Transfer
    Program TokenkegQfeZyiNwAJbNbGKPFXCWuBvf9Ss623VQ5DA consumed 3402 of 127008 compute units
    Program TokenkegQfeZyiNwAJbNbGKPFXCWuBvf9Ss623VQ5DA success
    Program 9xQeWvG816bUx9EPjHmaT23yvVM2ZWbrrpZb9PusVFin consumed 19451 of 142166 compute units
    Program 9xQeWvG816bUx9EPjHmaT23yvVM2ZWbrrpZb9PusVFin success
    Program log: 4ZfIrPLY4R6wrQEAAAAAAFE+BAAAAAAABgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADG+nrzvtutOj1l82qryXQxsbvkwtL24OR8pgIDRS9dYTeZjMvy0EWLYVy8xrGjZ8R0np/vcwZiLhsbWJEBILyaxvp6877brTo9ZfNqq8l0MbG75MLS9uDkfKYCA0UvXWFujNLP7IRouUQsVl4tZQ6zJfcr53DaTI8K1GbIZzTC+A==
    Program log: Custom program error: 0x66
    Program 22Y43yTVxuUkoRKdm9thyRhQ3SdgQS7c7kB6UNCiaczD consumed 88303 of 200000 compute units
    Program 22Y43yTVxuUkoRKdm9thyRhQ3SdgQS7c7kB6UNCiaczD failed: custom program error: 0x66
(anonymous) @ 2.cc189e01.chunk.js:1
l @ 2.cc189e01.chunk.js:1
(anonymous) @ 2.cc189e01.chunk.js:1
(anonymous) @ 2.cc189e01.chunk.js:1
n @ 2.cc189e01.chunk.js:1
s @ 2.cc189e01.chunk.js:1
Promise.then (async)
n @ 2.cc189e01.chunk.js:1
s @ 2.cc189e01.chunk.js:1
(anonymous) @ 2.cc189e01.chunk.js:1
(anonymous) @ 2.cc189e01.chunk.js:1
(anonymous) @ 2.cc189e01.chunk.js:1
(anonymous) @ 2.cc189e01.chunk.js:1
l @ 2.cc189e01.chunk.js:1
(anonymous) @ 2.cc189e01.chunk.js:1
(anonymous) @ 2.cc189e01.chunk.js:1
n @ 2.cc189e01.chunk.js:1
s @ 2.cc189e01.chunk.js:1
(anonymous) @ 2.cc189e01.chunk.js:1
(anonymous) @ 2.cc189e01.chunk.js:1
(anonymous) @ 2.cc189e01.chunk.js:1
(anonymous) @ 2.cc189e01.chunk.js:1
l @ 2.cc189e01.chunk.js:1
(anonymous) @ 2.cc189e01.chunk.js:1
(anonymous) @ 2.cc189e01.chunk.js:1
n @ 2.cc189e01.chunk.js:1
s @ 2.cc189e01.chunk.js:1
(anonymous) @ 2.cc189e01.chunk.js:1
(anonymous) @ 2.cc189e01.chunk.js:1
jn @ 2.cc189e01.chunk.js:1
(anonymous) @ 2.cc189e01.chunk.js:1
l @ 2.cc189e01.chunk.js:1
(anonymous) @ 2.cc189e01.chunk.js:1
(anonymous) @ 2.cc189e01.chunk.js:1
n @ 2.cc189e01.chunk.js:1
s @ 2.cc189e01.chunk.js:1
Promise.then (async)
n @ 2.cc189e01.chunk.js:1
s @ 2.cc189e01.chunk.js:1
Promise.then (async)
n @ 2.cc189e01.chunk.js:1
s @ 2.cc189e01.chunk.js:1
(anonymous) @ 2.cc189e01.chunk.js:1
(anonymous) @ 2.cc189e01.chunk.js:1
(anonymous) @ 2.cc189e01.chunk.js:1
(anonymous) @ main.a239de0b.chunk.js:1
(anonymous) @ main.a239de0b.chunk.js:1
l @ 2.cc189e01.chunk.js:1
(anonymous) @ 2.cc189e01.chunk.js:1
(anonymous) @ 2.cc189e01.chunk.js:1
l @ 2.cc189e01.chunk.js:1
E @ 2.cc189e01.chunk.js:1
(anonymous) @ 2.cc189e01.chunk.js:1
(anonymous) @ 2.cc189e01.chunk.js:1
n @ 2.cc189e01.chunk.js:1
s @ 2.cc189e01.chunk.js:1
(anonymous) @ 2.cc189e01.chunk.js:1
(anonymous) @ 2.cc189e01.chunk.js:1
(anonymous) @ main.a239de0b.chunk.js:1
(anonymous) @ main.a239de0b.chunk.js:1
l @ 2.cc189e01.chunk.js:1
(anonymous) @ 2.cc189e01.chunk.js:1
(anonymous) @ 2.cc189e01.chunk.js:1
n @ 2.cc189e01.chunk.js:1
s @ 2.cc189e01.chunk.js:1
(anonymous) @ 2.cc189e01.chunk.js:1
(anonymous) @ 2.cc189e01.chunk.js:1
(anonymous) @ main.a239de0b.chunk.js:1
(anonymous) @ 2.cc189e01.chunk.js:1
(anonymous) @ 2.cc189e01.chunk.js:1
(anonymous) @ 2.cc189e01.chunk.js:1
a @ 2.cc189e01.chunk.js:1
Promise.then (async)
u @ 2.cc189e01.chunk.js:1
(anonymous) @ 2.cc189e01.chunk.js:1
br @ 2.cc189e01.chunk.js:1
onClick @ 2.cc189e01.chunk.js:1
qe @ 2.cc189e01.chunk.js:1
Qe @ 2.cc189e01.chunk.js:1
(anonymous) @ 2.cc189e01.chunk.js:1
En @ 2.cc189e01.chunk.js:1
An @ 2.cc189e01.chunk.js:1
(anonymous) @ 2.cc189e01.chunk.js:1
Ue @ 2.cc189e01.chunk.js:1
(anonymous) @ 2.cc189e01.chunk.js:1
Tn @ 2.cc189e01.chunk.js:1
$t @ 2.cc189e01.chunk.js:1
Yt @ 2.cc189e01.chunk.js:1
t.unstable_runWithPriority @ 2.cc189e01.chunk.js:1
qi @ 2.cc189e01.chunk.js:1
Pe @ 2.cc189e01.chunk.js:1
Xt @ 2.cc189e01.chunk.js:1
Show 32 more frames
main.a239de0b.chunk.js:1 Error: failed to send transaction: Transaction simulation failed: Error processing Instruction 1: custom program error: 0x66
    at e.<anonymous> (2.cc189e01.chunk.js:1)
    at l (2.cc189e01.chunk.js:1)
    at Generator._invoke (2.cc189e01.chunk.js:1)
    at Generator.next (2.cc189e01.chunk.js:1)
    at n (2.cc189e01.chunk.js:1)
    at s (2.cc189e01.chunk.js:1)
(anonymous) @ main.a239de0b.chunk.js:1
l @ 2.cc189e01.chunk.js:1
(anonymous) @ 2.cc189e01.chunk.js:1
(anonymous) @ 2.cc189e01.chunk.js:1
n @ 2.cc189e01.chunk.js:1
u @ 2.cc189e01.chunk.js:1
Promise.then (async)
n @ 2.cc189e01.chunk.js:1
s @ 2.cc189e01.chunk.js:1
(anonymous) @ 2.cc189e01.chunk.js:1
(anonymous) @ 2.cc189e01.chunk.js:1
m @ main.a239de0b.chunk.js:1
(anonymous) @ main.a239de0b.chunk.js:1
(anonymous) @ main.a239de0b.chunk.js:1
(anonymous) @ main.a239de0b.chunk.js:1
l @ 2.cc189e01.chunk.js:1
(anonymous) @ 2.cc189e01.chunk.js:1
(anonymous) @ 2.cc189e01.chunk.js:1
l @ 2.cc189e01.chunk.js:1
E @ 2.cc189e01.chunk.js:1
(anonymous) @ 2.cc189e01.chunk.js:1
(anonymous) @ 2.cc189e01.chunk.js:1
n @ 2.cc189e01.chunk.js:1
s @ 2.cc189e01.chunk.js:1
(anonymous) @ 2.cc189e01.chunk.js:1
(anonymous) @ 2.cc189e01.chunk.js:1
(anonymous) @ main.a239de0b.chunk.js:1
(anonymous) @ main.a239de0b.chunk.js:1
l @ 2.cc189e01.chunk.js:1
(anonymous) @ 2.cc189e01.chunk.js:1
(anonymous) @ 2.cc189e01.chunk.js:1
n @ 2.cc189e01.chunk.js:1
s @ 2.cc189e01.chunk.js:1
(anonymous) @ 2.cc189e01.chunk.js:1
(anonymous) @ 2.cc189e01.chunk.js:1
(anonymous) @ main.a239de0b.chunk.js:1
(anonymous) @ 2.cc189e01.chunk.js:1
(anonymous) @ 2.cc189e01.chunk.js:1
(anonymous) @ 2.cc189e01.chunk.js:1
a @ 2.cc189e01.chunk.js:1
Promise.then (async)
u @ 2.cc189e01.chunk.js:1
(anonymous) @ 2.cc189e01.chunk.js:1
br @ 2.cc189e01.chunk.js:1
onClick @ 2.cc189e01.chunk.js:1
qe @ 2.cc189e01.chunk.js:1
Qe @ 2.cc189e01.chunk.js:1
(anonymous) @ 2.cc189e01.chunk.js:1
En @ 2.cc189e01.chunk.js:1
An @ 2.cc189e01.chunk.js:1
(anonymous) @ 2.cc189e01.chunk.js:1
Ue @ 2.cc189e01.chunk.js:1
(anonymous) @ 2.cc189e01.chunk.js:1
Tn @ 2.cc189e01.chunk.js:1
$t @ 2.cc189e01.chunk.js:1
Yt @ 2.cc189e01.chunk.js:1
t.unstable_runWithPriority @ 2.cc189e01.chunk.js:1
qi @ 2.cc189e01.chunk.js:1
Pe @ 2.cc189e01.chunk.js:1
Xt @ 2.cc189e01.chunk.js:1
Show 9 more frames
2.cc189e01.chunk.js:1 Uncaught (in promise) Error: failed to send transaction: Transaction simulation failed: Error processing Instruction 1: custom program error: 0x66
    at e.<anonymous> (2.cc189e01.chunk.js:1)
    at l (2.cc189e01.chunk.js:1)
    at Generator._invoke (2.cc189e01.chunk.js:1)
    at Generator.next (2.cc189e01.chunk.js:1)
    at n (2.cc189e01.chunk.js:1)
    at s (2.cc189e01.chunk.js:1)

Enable account closing

Account closing is currently disabled since it's not released on the dex, yet. Once the next DEX version comes out, we should enable closing accounts in @project-serum/swap, so that the account close switch works.

Blocked by project-serum/serum-dex#112.

Support SOL, SRM and RAY quote token markets

Currently swaps are routed through USDC and USDT markets, which is inefficient when direct routes are available. For instance there's a SRM/SOL market available, but swap goes through two markets instead.

feature request: display common bases at top of token selection box

Currently scrolling or searching for popular tokens in the selection box is suboptimal. Like Uniswap, popular token bases can be displayed at the top.

Swap UI currently

Uniswap

Handle SOL swaps

Can just push this to the @project-serum/swap package to automatically open and close wrapped sol accounts.

Exchange rate UI should display fees as well

The exchange rate shown doesn't include taker fees (though the calculated toAmount, i.e. the token on the bottom of the swap form does). We should either add a note that shows the taker fee or embed it into the displayed exchange rate.

Display price impact of a swap

I plan on working on this. Any resources / API on how price impact can be found? Currently plan on looking at the bid / ask slab. Will traverse down bids until order size is filled. The price tick of this bid will be the new price, from which price impact will be calculated.

Pseudocode:

let unfilled_order_size = toAmount
let bids = [b1, b2, b3, ...]
let current_bid
for bid in bids {
  current_bid = bid
  unfilled_order_size -= bid.size
  if unfilled_order_size <= 0 {
    break
  }
}

price_impact = mid_price - current_bid.price
price_impact_percentage = 100 * price_impact / mid_price

Add travis CI

Type mismatch with `sol-wallet-adapter` and `anchor/dist/provider`.

Not sure where to put this, but trying to build the example page with sol-wallet-adapter 0.2.5 and anchor 0.11.1 gives a type mismatch.

Argument of type 'import("..../node_modules/@project-serum/sol-wallet-adapter/dist/cjs/index").default' is not assignable to parameter of type 'import(".../node_modules/@project-serum/anchor/dist/provider").Wallet'.
  Types of property 'publicKey' are incompatible.
    Type 'PublicKey | null' is not assignable to type 'PublicKey'.
      Type 'null' is not assignable to type 'PublicKey'.  TS2345

    139 |     onTransaction: (tx: TransactionSignature | undefined, err?: Error) => void
    140 |   ) {
  > 141 |     super(connection, wallet, opts);
        |                       ^
    142 |     this.onTransaction = onTransaction;
    143 |   }
    144 |

I believe this migration to Typescript in sol-wallet-adapter was the one that broke it: here.

We can see the export interface Wallet in anchor/ts/provider.ts still uses PublicKey instead of PublicKey | null here.

Display minimum tradeable token quantity and disable swap button if too small

Unable to swap USDC for KIN. Users reported issues with some other pairs as well.

I created a KIN SPL account beforehand, but it still fails.

From browser console:

Transaction simulation failed: Error processing Instruction 1: custom program error: 0x66 
    Program 11111111111111111111111111111111 invoke [1]
    Program 11111111111111111111111111111111 success
    Program 22Y43yTVxuUkoRKdm9thyRhQ3SdgQS7c7kB6UNCiaczD invoke [1]
    Program 9xQeWvG816bUx9EPjHmaT23yvVM2ZWbrrpZb9PusVFin invoke [2]
    Program TokenkegQfeZyiNwAJbNbGKPFXCWuBvf9Ss623VQ5DA invoke [3]
    Program log: Instruction: Transfer
    Program TokenkegQfeZyiNwAJbNbGKPFXCWuBvf9Ss623VQ5DA consumed 3402 of 162985 compute units
    Program TokenkegQfeZyiNwAJbNbGKPFXCWuBvf9Ss623VQ5DA success
    Program 9xQeWvG816bUx9EPjHmaT23yvVM2ZWbrrpZb9PusVFin consumed 17384 of 173542 compute units
    Program 9xQeWvG816bUx9EPjHmaT23yvVM2ZWbrrpZb9PusVFin success
    Program 9xQeWvG816bUx9EPjHmaT23yvVM2ZWbrrpZb9PusVFin invoke [2]
    Program TokenkegQfeZyiNwAJbNbGKPFXCWuBvf9Ss623VQ5DA invoke [3]
    Program log: Instruction: Transfer
    Program TokenkegQfeZyiNwAJbNbGKPFXCWuBvf9Ss623VQ5DA consumed 3402 of 136362 compute units
    Program TokenkegQfeZyiNwAJbNbGKPFXCWuBvf9Ss623VQ5DA success
    Program TokenkegQfeZyiNwAJbNbGKPFXCWuBvf9Ss623VQ5DA invoke [3]
    Program log: Instruction: Transfer
    Program TokenkegQfeZyiNwAJbNbGKPFXCWuBvf9Ss623VQ5DA consumed 3402 of 130123 compute units
    Program TokenkegQfeZyiNwAJbNbGKPFXCWuBvf9Ss623VQ5DA success
    Program 9xQeWvG816bUx9EPjHmaT23yvVM2ZWbrrpZb9PusVFin consumed 19451 of 145281 compute units
    Program 9xQeWvG816bUx9EPjHmaT23yvVM2ZWbrrpZb9PusVFin success
    Program log: 4ZfIrPLY4R4QJwAAAAAAAIdJYQsAAAAABgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADG+nrzvtutOj1l82qryXQxsbvkwtL24OR8pgIDRS9dYQszOKCrLMhB1bAUvGo891YpGHSzGclRfZu/qeTpZh75xvp6877brTo9ZfNqq8l0MbG75MLS9uDkfKYCA0UvXWFL+Ym56BXUNmJn50I5czFKmd7/+oJBhPsNNSUASy49Dg==
    Program log: Custom program error: 0x66
    Program 22Y43yTVxuUkoRKdm9thyRhQ3SdgQS7c7kB6UNCiaczD consumed 85188 of 200000 compute units
    Program 22Y43yTVxuUkoRKdm9thyRhQ3SdgQS7c7kB6UNCiaczD failed: custom program error: 0x66

A 'custom program error 0x66' notification is also displayed.

The transaction doesn't show up on Solana explorer

Websocket connections for open orders balances

We should open a websocket connection to listen to changes for open orders balances, so that, when a user settles, the balances update.

Unable to merge Swap UI with serum-dex-ui (wallet provider)

Hello is there anyway to use Serum-dex-ui wallet provider into the swap-ui ?
emergency please !

listen to token change

is there any way to know which is selected token from outside the Swap component ?

Idiomatically update state after fetching orderbook data

Currently context/Dex.ts and context/Token.ts use a hacky approach to update state.

swap-ui/src/context/Dex.tsx

Line 227 in 4a92cad

const [refresh, setRefresh] = useState(0);

A useState hook explicitly for refreshing is used after new values for _ORDERBOOK_CACHE are fetched via websockets. Ideally the orderbook data itself should be stored in useState(); that way updating this value will automatically refresh the UI.

Secondly there's double fetching of same data

Websocket listens to changes in bid or asks, then calls setRefesh(). The fetched value is discarded, the only purpose of this was to update the UI again.
The bid and ask data is fetched again using a useAsync hook

This should be resolved by the mentioned solution.

Automate SOL/SPL liquidity paths for single step swaps.

Based on your earlier advice to used USDC an intermediate step to swap between SOL and SPL tokens I am first converting to USDC. This is creating scope for huge slippage tolarances converting between SOL and my target token. It also creates a less than optimal user experience for users accustomed to a single step process.

In more mature products swaps are performed automatically and transparently to the user without relying on them to work out the path with best liquidity and provide estimated transaction costs calculated based on an automated swap path.

I appreciate that this wallet is still under development but the intermediate USDC swap you recommend feels unncecessary and clunky compared to more mature and established swap services.

Do you plan to automate intermediate liquidity/swap paths in the future to reduce slippage on intended source->destination swaps?

Transaction was not confirmed in 30.01 seconds: RPC delay breaking UX

There's over a 30 second delay before swaps are acknowledged. A red error box shows up, which breaks user experience even though the transaction goes through. We're noticing this for few weeks now. This issue is not faced on Raydium. Tested with v0.2.2.

Add the Swap Component

Show me a code example with swap-ui integration in serum-dex-ui. The 'Add the Swap Component' part is interesting.

Next.js: Global CSS and ES6 import issues

The swap widget is currently incompatible with Next.js.

./node_modules/@fontsource/roboto/index.css
Global CSS cannot be imported from within node_modules.
Read more: https://nextjs.org/docs/messages/css-npm
Location: node_modules/@project-serum/swap-ui/dist/index.js

From the official documentation

Reach out to the maintainer and ask for them to publish a compiled version of their dependency.

Compiled dependencies do not have references to CSS files, or any other files that require bundler-specific integrations.

The dependency should also provide instructions about what CSS needs to be imported by you, in your application.

Material UI components themselves don't include Roboto font. The developer has to install Roboto separately. The same approach can be used here.

project-serum / swap-ui Goto Github PK

swap-ui's Introduction

@project-serum/swap-ui

Usage

Install

Add the Swap Component

Referral Fees

Developing

Install dependencies

Build

Run the example app

Start the app

swap-ui's People

Contributors

Stargazers

Watchers

Forkers

swap-ui's Issues

Swap UI currently

Uniswap

Recommend Projects

Recommend Topics

Recommend Org

`@project-serum/swap-ui`