Swapbox 2.0

[b8zeek]

Summary

This pull request contains fully finished and functioning Swapbox 2.0. I've tested swapping multiple times with various tokens with classical flow, approve flow and wrapping. I tried swapping through multiple platforms such as Swapr, Uniswap, 1Inch, CoW, Curve, Honeswap, etc. With the latest version, everything was working fine. I guess some dedicated, thorough testing should be done before going to the production.

Closes #1655.

What's Done

After Zett created the designs, I started with the implementation. The idea was to go gradually, finish core functionalities, iterate through it and later add some of the features which were planned to be included, as well.

I started working on the swapbox in the middle of January, the first thing in line was to create the whole new UI. I do not like the implementation of the current swapbox as it contains many context providers and wrappers in the process of the component creation which makes it difficult to be read, understood and maintained. Each of those levels often contains pieces of logic. I've tried to make it as simple as possible, as flat as possible with as less logic kept in the components. This process took me about three weeks as I was a part-time Swapr contributor.

After this I started working on understanding the current logic and the way swapbox is functioning in order to know how I should approach this. I tried a few approaches but the best to me seemed to create a hook (useSwapbox) which would contain ~all of the logic in itself and it would further export all the necessary references for the functioning. I figured out it would be easier to maintain it in the future and UI components should achieve the level of reusability that way. This took me two weeks, I still was a part-time Swapr contributor.

The last step was to implement useSwapbox hook, connect the logic to the previously created UI components. I started working on this end of February. I had to add some logic to the components which concerns only those. I've also suggested a solution on how this can be improved in the future in README.md added to the Swapbox 2.0 folder. During this process I've updated some things, made some tweaks in order to achieve the desired output and functionality. I was lacking some clarification about certain things so I've finished them at my own discretion; I've also created some missing pieces of the design. All of those can be easily updated.

Inside the folder containing all of the code written is README.md which provides further clarification and understanding of implementation details. The contents of the README.md will be added after this paragraph.

README.md

Introduction

Welcome friend! 👋

This folder contains a new, re-designed swapbox, Swapbox 2023 by dxDAO. Current version is the first iteration and further plan is to continue working on this, designing new things, updating the current ones, adding new features and improving the existing ones.

SwapContext

It is important to mention, the Swapbox 2023 is wrapped with SwapContext which takes care of some states of the swapbox. It tracks currencies, currency balances, currency amounts, available swapping platforms, currently selected swapping platform, loading state, etc. SwapContext is located outside of this folder, its data model is presented below:

type SwapContextType = {
  currencies: { [field in Field]?: Currency }
  currencyBalances: { [field in Field]?: CurrencyAmount }
  parsedAmount: CurrencyAmount | undefined
  allPlatformTrades: (Trade | undefined)[] | undefined
  trade: Trade | undefined
  inputError?: number
  loading: boolean
  platformOverride: PlatformOverride
  setPlatformOverride: Dispatch<SetStateAction<PlatformOverride>>
}

Folder Structure

The folder contains a few other folders and files, I'll go through them and try to explain the responsibility of each and the idea behind it. Folder tree presented below:

.
├── 📁 components
├── 📁 constants
├── 📁 models
├── 📄 index.ts
├── 📄 README.md
├── 📄 Swapbox.tsx
└── 📄 useSwapbox.ts

models

This folder contains some of the models that are being used in the swapbox.

useSwapbox.ts

useSwapbox.ts is the hook which powers the Swapbox 2023; it contains 90% of the implementation logic that is being used to operate the swapbox. This hook is derived from the previous swapbox implementation with the idea to group the logic, keep it in the same place and in that way enable modularity, readability, maintainability and further development by isolation.

The hook keeps track of some state values in itself, it uses the values from above mentioned SwapContext, extends them, derives new values from them and uses other external hooks to create functionalities through the functions which are exported from the hook for further usage in the Swapbox 2023. Exported values / functions presented below:

export const useSwapbox = () => {
  // ...
  // IMPLEMENTATION LOGIC
  // ...

  return {
    // CURRENCIES
    currencies,
    priceImpact,
    priceImpactSeverity,

    // AMOUNT of CURRENCIES
    formattedAmounts,
    handleTypeInput,
    handleTypeOutput,
    isInputPanelDisabled,

    // AMOUNT WORTH
    fiatValueInput,
    fiatValueOutput,
    isFallbackFiatValueInput,
    isFallbackFiatValueOutput,

    // CURRENCY SELECT
    handleMaxInput,
    handleInputSelect,
    handleOutputSelect,
    maxAmountInput,
    maxAmountOutput,

    // SWITCH CURRENCIES
    onSwitchTokens,

    // LOADING
    loading,

    // SWAP INFO
    allPlatformTrades,
    trade,
    swapCallbackError,

    // SWAP BUTTON
    swapInputError,
    handleSwap,

    // WRAPPING
    showWrap,
    wrapInputError,
    wrapState,
    onWrap,
    wrapType,
    setWrapState,

    // APPROVE FLOW
    showApproveFlow,
    approveCallback,
    approval,

    // CONFIRM SWAP MODAL
    swapErrorMessage,
    recipient,
  }
}

constants

This folder currently contains only UI related stuff. The idea behind is to extract UI values which provide styling for the Swapbox 2023 into the variables. Those are the colors that are being used across the components, the swapbox dimensions, border stylings, elements spacing, indicator types and styling helper functions. If necessary in the future, since all of these are in the same place and all values are being referenced from it, it is really easy to change the looks of the swapbox and it would be really easy to introduce theming with minimal amount of work.

components

components folder contains all of the components that are being used in the Swapbox 2023. The components are split by the functionalities they are responsible for. Root level components are assigned its own folder and their sub-components are kept inside it. Root level components are CurrencyItem, SwitchCurrenciesButton, SwapInfo, SwapboxButton and TokenPicker. As mentioned above, the idea for the components is to mainly focus them on the UI part and keep as little logic as possible inside them. The only logic that can be kept inside is something specific for them and only used in that one place. The components should receive everything necessary for their functioning through the props.

In future, in order to avoid prop drilling with values and functions, everything can be taken to the next level with dedicated state management solution. We should keep track both of the values and functions in one place and in that case ensure that each of the components can be independent and take everything they need directly from the centralized storage.

Swapbox.tsx

Swapbox.tsx is the root component which basically assembles the Swapbox 2023. This is where the references from useSwapbox.ts hook are being unpacked and further fed to the components which need them for functioning.

index.tsx

index.tsx is the main file exported from this folder. It doesn't contain much, the only functionality it has is the composition of the Swapbox 2023 with Hero and LandingSections components into the page. This page is exported as the main component.

Screenshots

1Inch

Swapr

Curve

Uniswap

Sushiswap

Wrapping

Approve Flow

Token Picker

Successfully Made Swaps

🍀🍀🍀

[b8zeek]

Once accepted it throws an error in the console and no change on the swap button. But the transaction will be success after a while.

Its 1inch. Sorry for low resolution. Github only allow max 10mb video.

I was testing this, this issue occurs in state transaction updater. It was there before, I can check und change this but I would need a bit more time. Maybe we can create a ticket and leave it for later as it is unrelated to the swapbox pull request.

[b8zeek]

Both balance and Switch is not clickable

Hey @wixzi, I just finished inspecting this, this functionality works fine. I was able to reproduce this only in one case, and that doesn't work both in the old and new swapbox. I will take a look, the issue lies in one of the old hooks, I would assume this one => useSwapActionHandlers. Switching currencies works every time.

[b8zeek]

Both balance and Switch is not clickable

Hey @wixzi, I just finished inspecting this, this functionality works fine. I was able to reproduce this only in one case, and that doesn't work both in the old and new swapbox. I will take a look, the issue lies in one of the old hooks, I would assume this one => useSwapActionHandlers. Switching currencies works every time.

All right, found what is causing the issue... When the input currency is the native currency, this hook maxAmountSpend is reserving certain amount for the transaction cost, I would say. I can change that behaviour easy if it is desired but Leo updated it to work like that 11 months ago.

[b8zeek]

No notification on transaction rejection

This is resolved, forgot to mention it.