Skip to content

docs: [widgets] update to include built-in wallet connection flow #407

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
kristiehuang merged 22 commits into from
Aug 9, 2022
Merged

docs: [widgets] update to include built-in wallet connection flow #407

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
22 commits
Select commit Hold shift + click to select a range
92731f1
docs: update widgets doc to describe built-in wallet connect function…
kristiehuang Jun 8, 2022
77fdfac
widgets API reference update provider
kristiehuang Jun 8, 2022
52219c0
Update swap-widget docs to make provider & rpc endpoint optional
kristiehuang Jun 28, 2022
ac42248
Update API reference
kristiehuang Jun 28, 2022
1fc9588
Add widgets-demo
kristiehuang Jun 28, 2022
0ddff8a
Add recommended provider, jsonRpc example
kristiehuang Jun 28, 2022
01aedad
Fix margins with live preview of widget
kristiehuang Jun 28, 2022
82e6c13
Update
kristiehuang Jun 28, 2022
1a25ba9
Undo auto-lint changes
kristiehuang Jun 29, 2022
8503b6a
Add note directing iframe integrators to swap widget
kristiehuang Jul 5, 2022
447d9c3
Update states - light mode
kristiehuang Jul 15, 2022
4c5279c
Update jsonRpcEndpoint prop + add defaultChainId prop
kristiehuang Jul 21, 2022
b9f0dd9
update w3r github link
kristiehuang Jul 21, 2022
8a021c0
rename onClickConnectWallet to onConnectWalletClick
kristiehuang Aug 1, 2022
296a648
add hideConnectionUI bool prop
kristiehuang Aug 2, 2022
82d8210
add note about severe ratelimiting + unreliable of public RPCs
kristiehuang Aug 2, 2022
df8066e
update onConnectWalletClick
kristiehuang Aug 3, 2022
aeeaa46
nit
kristiehuang Aug 3, 2022
063d7f7
fix width
kristiehuang Aug 3, 2022
33463a8
Add old API reference in deprecated page
kristiehuang Aug 5, 2022
0105730
nit
kristiehuang Aug 8, 2022
7b6554d
Merge branch 'main' into kh-widgets/connect-wallet-flow-docs
kristiehuang Aug 9, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
58 changes: 58 additions & 0 deletions SDK_versioned_docs/version-3.0.0/widgets/swap-widget-api-v1.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,58 @@
---
id: swap-widget-api-v1
slug: swap-widget/api/v1
title: Swap Widget API V1 Reference
sidebar_label: (Deprecated) V1 API Reference
sidebar_position: 4
---

# Swap Widget API V1 Reference (Deprecated)

<div className="widget-api">

## Required Parameters {#required-parameters}

| Prop Name | Prop Type | Default Value | Description |
| ----------------- | --------- | ------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `jsonRpcEndpoint` | `string` | `undefined` | URI of your JSON-RPC endpoint. Strongly recommended in order to provide trade quotes prior to the user connecting a wallet. If none is provided, the widget will be completely disabled until the user connects a wallet. Once a wallet is connected, the widget will use the wallet’s JSON-RPC. See [Understanding the Swap Widget States](../swap-widget#understanding-widget-states). |
| `provider` | `any` | `undefined` | An [EIP-1193](https://eips.ethereum.org/EIPS/eip-1193) provider. This is required to swap. |

## Optional Parameters {#optional-parameters}

| Prop Name | Prop Type | Default Value | Description |
| --------------------------- | ----------------------------- | ----------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| `convenienceFee` | `number` | `undefined` | Optionally, you may charge a convenience fee on top of swaps executed through your web app. The allowed range is 1 to 100 basis points (inclusive of 100) consistent with the Uniswap v3 Periphery contract. |
| `convenienceFeeRecipient` | `{[chainId: number]: string}` | `undefined` | The address to receive the convenience fee on each network. Required if `convenienceFee` is provided. |
| `defaultInputTokenAddress` | `{[chainId: number]: string}` | `string` or `'NATIVE'` | Address of the token to be selected by default in the input field (e.g. USDC) for each network chain ID. If left empty the widget will use the native token of the connected chain as default. This can be explicitly defined by the special string `'NATIVE'`. For convenience you may pass a single string instead of a `chainId` mapping. In this case, the widget will assume that string corresponds to an L1 Ethereum address with `chaindId=1`. Any addresses provided in this parameter must be included in the `tokenList`. |
| `defaultInputAmount` | `number` | `0` | Default amount for the input field (e.g. 1 ETH). This value will respect the decimals of the `defaultInputTokenAddress`. This parameter is valid only if `defaultInputTokenAddress` is also set. This parameter is mutually exclusive with `defaultOutputAmount`, so you may set only one of `defaultInputAmount` and `defaultOutputAmount`. |
| `defaultOutputTokenAddress` | `{[chainId: number]: string}` | `string` or `undefined` | Address of the token to be selected by default in the input field (e.g. USDC) for each network chain ID. None if left empty. Any addresses provided in this parameter must be included in the `tokenList`. |
| `defaultOutputAmount` | `number` | `0` | Default amount for the input field (e.g. 100 USDC). This value will respect the decimals of the `defaultOutputTokenAddress`. This parameter is mutually exclusive with `defaultInputAmount`, so you may set only one of `defaultInputAmount` and `defaultOutputAmount`. |
| `locale` | `SupportedLocale` | `en-US` | Specifies an explicit locale to use for the widget interface. This can be set to one of the values exported by the library in [`SUPPORTED_LOCALES`](https://github.com/Uniswap/widgets/blob/main/src/constants/locales.ts). |
| `onConnectWallet` | `() => void` | `undefined` | If passed, the “Connect your wallet” message will be clickable, and clicking it will trigger this handler function. This can be used to trigger your own wallet connection flow from the widget. |
| `onError` | `ErrorHandler` | `undefined` | An error handler which receives any errors that occur in the widget. This can be used for collecting error metrics. |
| `theme` | `Theme` | `lightTheme` | Specifies a custom theme (colors, font, and border radii). See [Customizing the Theme](../swap-widget#customizing-theme). |
| `tokenList` | `string` | `TokenInfo[]` | Specifies the set of tokens that appear by default in the token selector list. Accepts either a URI of a token list as defined by the Token Lists standard, or an inline array of tokens. If none is provided, the Uniswap Labs default token list will be used. See [Customizing the Default Token List](../swap-widget#customizing-default-token-list). |
| `width` | `number` or `string` | `360` | Specifies the width of the widget. If specified as a number, this is in pixels; otherwise, it is interpreted as a CSS `<length>` data type. Recommended width is 360px. Minimum width is 270px. See [Customizing the Width](../swap-widget#customizing-width). |

## Subscribing to Events

During the lifecycle of the swap widget, most of the events you will need are available on the web3 provider. For example, the below snippet shows how to listen for events when the wallet account changes or a new wallet connects. You can see more event examples in the [MetaMask](https://docs.metamask.io/guide/ethereum-provider.html) docs.

```js
// Subscribe to messages
interface ProviderMessage {
type: string;
data: unknown;
}

ethereum.on(
'message',
handler: (message: ProviderMessage) => void
);
```

</div>

:::note Questions?
Join the [Discord channel](https://discord.com/channels/597638925346930701/941447445844463676) to ask questions and get support from the Uniswap community.
:::
Loading