interlay / interbtc-ui

Kintsugi and Interlay App - BTC DeFi
https://app.interlay.io/
Apache License 2.0
32 stars 30 forks source link

Banxa on-ramp integration #987

Closed tomjeatt closed 1 year ago

tomjeatt commented 1 year ago

Describe the solution you'd like Integrate Banxa into UI: Banxa integrations

Additional context https://www.figma.com/file/sic772rhNcFWKinCnDsenK/Fund-Wallet-Modal?node-id=0%3A1&t=qJwtW9bMRFXE7zJh-0 https://www.notion.so/interlay/Banxa-integration-ac26badf3e014a788f0cbbddb9210050?pvs=4

The UI for this can be built now.

Requirements

  1. Get KINT button renamed to Fund Wallet
  2. Clicking on Fund Wallet opens a tabbed interface (as shown in design)
  3. Exchange tab will show and link to the existing exchanges
  4. Buy tab will show a button that links to Banxa

There is no iFrame integration in this version. Banxa integration hasn't been finalised yet, so we won't be able to specify the link for the Banxa icon. We can use a placeholder so that the UI can be built, and the link added when the integration has been completed.

Screenshot 2023-03-02 at 12 06 20
tomjeatt commented 1 year ago

@danielsimao

Requirements have been updated. Banxa logo should link to this URL structure: https://talisman.banxa.com/?walletAddress=[ACCOUNTADDRESS]&fiatType=EUR

The account address needs to be for the current user, and in the Polkadot address format.

Could you make this change when you get a chance? It's unlikely this will be going out immediately, but would be good to have the PR finished/approved so we can deploy as soon as Banxa are ready.

github-actions[bot] commented 1 year ago

Running Lighthouse audit...

danielsimao commented 1 year ago

what happens to this link when the user does not have a wallet added?

tomjeatt commented 1 year ago

what happens to this link when the user does not have a wallet added?

They can enter the address manually—the query parameters pre-populate the form fields https://talisman.banxa.com/?walletAddress=&fiatType=EUR

tomjeatt commented 1 year ago

Validation on the Banxa form is quite restrictive (by design) so we'll need to change the URL structure to: https://talisman.banxa.com/?walletAddress=[ADDRESS]&coinType=KINT&fiatType=EUR

The address will need to use the Kintsugi network format. Passing in a valid coinType stops the user from selecting a different currency.

Note: KINT is not yet supported so the URL won't resolve properly (it will fall back to BNB)