diff --git a/SDK_versioned_docs/version-3.0.0/widgets/swap-widget-api-v1.md b/SDK_versioned_docs/version-3.0.0/widgets/swap-widget-api-v1.md new file mode 100644 index 0000000000..b7b80bcacf --- /dev/null +++ b/SDK_versioned_docs/version-3.0.0/widgets/swap-widget-api-v1.md @@ -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) + +
+ +## 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 `` 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 +); +``` + +
+ +:::note Questions? +Join the [Discord channel](https://discord.com/channels/597638925346930701/941447445844463676) to ask questions and get support from the Uniswap community. +::: diff --git a/SDK_versioned_docs/version-3.0.0/widgets/swap-widget-api.md b/SDK_versioned_docs/version-3.0.0/widgets/swap-widget-api.md index 08c32931bf..91fa49ef09 100644 --- a/SDK_versioned_docs/version-3.0.0/widgets/swap-widget-api.md +++ b/SDK_versioned_docs/version-3.0.0/widgets/swap-widget-api.md @@ -1,38 +1,40 @@ --- id: swap-widget-api -slug: swap-widget/api -title: Swap Widget API Reference +slug: swap-widget/api/v2 +title: Swap Widget API V2 Reference sidebar_label: API Reference sidebar_position: 3 --- -# Swap Widget API Reference +# Swap Widget API V2 Reference
-## Required Parameters {#required-parameters} +## Recommended Parameters {#recommended-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. | +| Prop Name | Prop Type | Default Value | Description | +| --------------- | -------------------------------------- | ----------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `jsonRpcUrlMap` | `{ [chainId: number]: string[] }` | `JSON_RPC_FALLBACK_ENDPOINTS` | Mapping of your JSON-RPC endpoint URLs indexed by chainId, used to provide trade quotes prior to the user connecting a wallet. If none is provided for a chain, the widget will fallback to public JSON-RPC endpoints, which are unreliable and rate-limited. See [JSON-RPC Endpoints](../swap-widget#json-rpc-endpoint). | +| `provider` | `JsonRpcProvider` or `Eip1193Provider` | `undefined` | An [EIP-1193](https://eips.ethereum.org/EIPS/eip-1193) provider. See [Web3 provider](../swap-widget#web3-provider). | ## 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 `` data type. Recommended width is 360px. Minimum width is 270px. See [Customizing the Width](../swap-widget#customizing-width). | +| 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. | +| `defaultChainId` | `number` | `1` | You may specify which chainId you want to prompt a user to connect their wallet to. [See a list of all chains supported on widget.](https://github.com/Uniswap/widgets/blob/main/src/constants/chains.ts#L4) | +| `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 `defaultOutputTokenAmount`, so you may set only one of `defaultInputTokenAmount` and `defaultOutputTokenAmount`. | +| `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 `defaultInputTokenAmount`, so you may set only one `of defaultInputTokenAmount and` `defaultOutputTokenAmount`. | +| `hideConnectionUI` | `boolean` | `false` | Hide the widget's built-in wallet connection UI, including the connected account chip & 'Connect wallet to swap' button. | +| `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). | +| `onConnectWalletClick` | `() => void` or `() => Promise` | `undefined` | If passed, allows you to add custom behavior when the user clicks on the 'Connect your wallet to swap' button. To manage displaying the widget's built-in wallet connection modal, return a resolved promise with `resolve(true/false)`. | +| `onError` | `ErrorHandler` | `undefined` | An error handler which receives any Javascript 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 `` data type. Recommended width is 360px. Minimum width is 300px. See [Customizing the Width](../swap-widget#customizing-width). | ## Subscribing to Events diff --git a/SDK_versioned_docs/version-3.0.0/widgets/swap-widget-examples.mdx b/SDK_versioned_docs/version-3.0.0/widgets/swap-widget-examples.mdx index 31a6166735..8378118c12 100644 --- a/SDK_versioned_docs/version-3.0.0/widgets/swap-widget-examples.mdx +++ b/SDK_versioned_docs/version-3.0.0/widgets/swap-widget-examples.mdx @@ -24,11 +24,7 @@ const theme: Theme = { function App() {
- +
} ``` diff --git a/SDK_versioned_docs/version-3.0.0/widgets/swap-widget.mdx b/SDK_versioned_docs/version-3.0.0/widgets/swap-widget.mdx index c9098609c3..e3c5d213cd 100644 --- a/SDK_versioned_docs/version-3.0.0/widgets/swap-widget.mdx +++ b/SDK_versioned_docs/version-3.0.0/widgets/swap-widget.mdx @@ -6,18 +6,23 @@ sidebar_label: Getting Started sidebar_position: 1 --- -import ThemedImage from '@theme/ThemedImage'; -import useBaseUrl from '@docusaurus/useBaseUrl'; +import ThemedImage from '@theme/ThemedImage' +import useBaseUrl from '@docusaurus/useBaseUrl' # Getting Started with the Swap Widget -This guide walks you through the steps to embed the swap widget in your web3 decentralized application (dApp). With the swap widget, your users can trade tokens on the Uniswap Protocol without leaving your dApp! +This guide walks you through the steps to embed the swap widget in your website in 2 minutes — whether your site is already a decentralized application (dApp) or not. With the swap widget, your users can trade ERC-20 tokens on the Uniswap Protocol without leaving your site! -Here’s a live preview of the swap widget. Please note that wallet connect is not supported here in the documentation. Your app will be responsible for providing a method to connect a wallet. +Here’s a live preview of the swap widget. - + -With the swap widget, your users can trade for any ERC-20 token without leaving your app! Example use cases include: +Example use cases include: - Building a custom frontend for the Uniswap Protocol - Swapping assets in a DeFi application @@ -26,32 +31,6 @@ With the swap widget, your users can trade for any ERC-20 token without leaving You can make the widget feel like a native part of your app by customizing the colors, font, and token list to match your app theme. This guide will teach you how. -## Requirements {#requirements} - -The swap widget is a React component that can be easily imported into any React project. It supports trading on all networks where the Uniswap Protocol is deployed: Ethereum, Arbitrum, Optimism, and Polygon. - -The swap widget is designed to work out of the box. Only one parameter is strictly required and that is a [web3 provider](#web3-provider). Additionally, a [JSON RPC Endpoint](#json-rpc-endpoint) is strongly recommended as described below. Additional [optional parameters](/sdk/widgets/swap-widget/api#optional-parameters) are available to customize the appearance and performance of the swap widget to fit your unique use case. - -### Web3 Provider {#web3-provider} - -The swap widget requires a web3 provider to fetch balances and submit transactions through the user’s connected wallet. If you’re building a dApp, you probably have a web3 provider already. Both the [ethers](https://docs.ethers.io/v5/api/providers/provider/) and [web3.js](https://web3js.readthedocs.io/en/v1.5.2/index.html) provider objects are compatible with the widget, as is any [EIP-1193](https://eips.ethereum.org/EIPS/eip-1193) provider. You can pass this directly into the `provider` prop. - -If you don’t have a web3 provider yet, you can add a wallet connect flow to your app by using a library such as [web3-react](https://github.com/NoahZinsmeister/web3-react), BlockNative’s [Onboard](https://www.blocknative.com/onboard), or Aragon’s [useWallet()](https://github.com/aragon/use-wallet). In a future release, we may make this wallet connect functionality available directly in the widget. If that would be useful for you, please file a [feature request](https://github.com/Uniswap/widgets/issues)! - -The widget will match the network currently selected by the user. If the user switches networks in your app or in their wallet, that change will propagate to the widget as well. If the user connects to a network that is not supported by the swap widget, the widget will gracefully disable itself. - -### JSON-RPC Endpoint {#json-rpc-endpoint} - -We strongly recommend you provide a JSON-RPC endpoint URI in the widget’s `jsonRpcEndpoint` prop. The widget will use this endpoint to fetch on-chain data and submit transactions for signature. - -If your dApp already has a JSON RPC endpoint, you can pass that in the `jsonRpcEndpoint` prop. - -If you don’t yet have a JSON RPC endpoint, you can easily create one with services like [Infura](https://infura.io/product/ethereum) or [Alchemy](https://www.alchemy.com/supernode). - -If you choose not to provide a JSON-RPC endpoint, the widget will be [disabled](#understanding-widget-states) until the user connects a wallet. The user will not be able to interact with the widget or fetch a price quote until a wallet is connected. Thus, it is strongly recommended that you provide your own JSON-RPC endpoint. - -After the user connects a wallet, the widget will use the JSON-RPC provided by the wallet when possible. - ## Installing the Widgets Library {#installing-library} To get started, install the widgets library using npm or Yarn. If you don’t already use it, you’ll need to install `react-redux` as well. @@ -62,45 +41,87 @@ npm install --save @uniswap/widgets react-redux ## Adding the Swap Widget to Your App {#adding-the-widget} -Next, embed the React component in your application. Pass along the `provider` and `jsonRpcEndpoint` parameters. +Next, embed the React component in your application. ```jsx import { SwapWidget } from '@uniswap/widgets' import '@uniswap/widgets/fonts.css' -// Web3 provider as described in the requirements above -import { provider } from './your/provider' - -// Infura endpoint -const jsonRpcEndpoint = 'https://mainnet.infura.io/v3/' - function App() {
- +
} ``` That’s it! You should now see a fully functional swap widget on your site. The widget is self-contained and gracefully handles all interactions with the Uniswap Protocol. It leverages the [Auto Router](https://docs.uniswap.org/sdk/guides/auto-router) to compute the best price across all Uniswap v2 and v3 pools. +See a full implementation of the swap widget in the `/cra` and `/nextjs` branches of the [widgets-demo](https://github.com/Uniswap/widgets-demo) repo. + :::note Create React App V4 All code snippets will work seamlessly if you use [Next.js](https://nextjs.org/) or [Create React App](https://create-react-app.dev/) V5. However, if you’re using Create React App V4, you’ll need to use the following `import` statements instead: + ```jsx import { SwapWidget } from '@uniswap/widgets/dist/index.js' import '@uniswap/widgets/dist/fonts.css' ``` + ::: +# Recommended Parameters {#recommended-parameters} + +The swap widget is a React component that can be easily imported into any React project. It's designed to work out-of-the-box, with no required parameters or web3 integration necessary. Trading is supported on all networks where the Uniswap Protocol is deployed. + +Although the widget will work out-of-the-box with no parameters, we highly recommend integrators provide [JSON-RPC endpoints](#json-rpc-endpoint), like from Infura or Alchemy. Existing dApps can also provide their existing [web3 provider](#web3-provider) to integrate the widget seamlessly into their dApp. + +Additional [optional parameters](/sdk/widgets/swap-widget/api#optional-parameters) are available to customize the appearance and performance of the swap widget to fit your unique use case. + +## JSON-RPC Endpoints {#json-rpc-endpoint} + +We strongly recommend you provide JSON-RPC endpoint URLs in the widget’s `jsonRpcUrlMap` prop. The widget will use these endpoints to fetch on-chain data and submit transactions for signature. If the user connects a MetaMask wallet, the widget will use the JSON-RPC provided by MetaMask when possible. [(See a list of all chains supported on widget.)](https://github.com/Uniswap/widgets/blob/main/src/constants/chains.ts#L4) + +If you don’t yet have JSON-RPC endpoints, you can easily create them with services like [Infura](https://infura.io/product/ethereum) or [Alchemy](https://www.alchemy.com/supernode). + +If you choose not to provide a `jsonRpcUrlMap` prop or are missing endpoints for some chains, the widget uses free public JSON-RPC endpoints to still allow users to interact with the widget and fetch price quotes. However, these public endpoints are NOT recommended for production environment usage, are severely rate-limited, and aren't necessarily as reliable. When possible, we'd recommend providing your own endpoints! + +## Web3 Provider {#web3-provider} + +The swap widget uses a web3 `provider` prop to allow users to connect their wallets, fetch balances, and submit transactions through the user’s connected wallet. + +If you already have a web3 provider, you can pass your provider object directly into the `provider` prop. Both the [ethers](https://docs.ethers.io/v5/api/providers/provider/) and [web3.js](https://web3js.readthedocs.io/en/v1.5.2/index.html) provider objects are compatible with the widget, as is any [EIP-1193](https://eips.ethereum.org/EIPS/eip-1193) provider. + +If you don't have a web3 provider yet, the widget has built-in wallet connection functionality that supports [WalletConnect](https://walletconnect.com/) and [MetaMask](https://metamask.io/) wallets, making it super simple for you to integrate web3 in your app! + +Otherwise, you can also add your own custom wallet connection flow in the [`onConnectWalletClick` handler](../swap-widget/api), which is triggered when the widget's 'Connect your wallet to swap' button is clicked. Check out libraries such as [web3-react](https://github.com/Uniswap/web3-react), BlockNative’s [Onboard](https://www.blocknative.com/onboard), or Aragon’s [useWallet()](https://github.com/aragon/use-wallet) to build your own flow. To hide the widget's native wallet connection flow, set the `hideConnectionUI` prop to true. + +The widget will match the network currently selected by the user. If the user switches networks in your app or in their wallet, that change will propagate to the widget as well. If the user connects to a network that is not supported by the swap widget, the widget will gracefully disable itself. + +```tsx +import { SwapWidget } from '@uniswap/widgets' +import '@uniswap/widgets/fonts.css' + +// Recommended to provide a Web3 provider +import { provider } from './your/provider' +// Recommended to provide your own JSON-RPC endpoints +const jsonRpcUrlMap = { + 1: ['https://mainnet.infura.io/v3/'], + 3: ['https://ropsten.infura.io/v3/'] +} + +function App() { +
+ +
+} +``` + # Customizing the Swap Widget {#customizing-widget} You can set [optional parameters](/sdk/widgets/swap-widget-reference#optional-parameters) to tailor the appearance and functionality of the swap widget to fit your dApp. ## Customizing the Width {#customizing-width} -The swap widget has a fixed height of 348px and a default width of 360px. You cannot modify the height of the widget. You can modify the width up to a minimum width of 272px. +The swap widget has a fixed height of 360px and a default width of 360px. You cannot modify the height of the widget. You can modify the width up to a minimum width of 300px. You can customize the width by passing a number (of pixels) or a valid CSS width to the `width` prop of the widget. @@ -111,15 +132,13 @@ import '@uniswap/widgets/fonts.css' function App() {
} ``` - For example: +For example: - `width={360}` sets the width to 360 pixels - `width="100%"` sets the width to dynamically fill 100% of the parent container @@ -168,11 +187,7 @@ const theme: Theme = { function App() {
- +
} ``` @@ -199,11 +214,7 @@ const enableColorExtractionTheme: Theme = { function App() {
- +
} ``` @@ -219,11 +230,7 @@ import '@uniswap/widgets/fonts.css' let darkMode = true // Dynamically toggle dark mode on and off function App() {
- +
} ``` @@ -243,11 +250,7 @@ function useSystemTheme() { function App() { const theme = useSystemTheme() // Get a theme that matches the user system preference
- +
} ``` @@ -277,11 +280,7 @@ const myDarkTheme: Theme = { let darkMode = true function App() {
- +
} ``` @@ -303,8 +302,6 @@ const CMC_TOKEN_LIST = 'https://api.coinmarketcap.com/data-api/v3/uniswap/all.js function App() {
@@ -351,11 +348,7 @@ const MY_TOKEN_LIST = [ function App() {
- +
} ``` @@ -388,8 +381,6 @@ const WBTC = '0x2260FAC5E5542a773Aa44fBCfeDf7C193bc2C599' function App() {
-1. **Before wallet connection**, the widget has two possible states: - 1. **If you did *not* provide a JSON-RPC**, the swap widget will be disabled. Without a JSON-RPC endpoint the widget is unable to show token price data or fetch quotes. Without a web3 provider, the widget is unable to submit transactions. The widget will remain disabled until the user connects a wallet and you pass the `provider` and `jsonRpcEndpoint` parameters from the wallet into the widget. - 2. **If your dApp provides a JSON-RPC,** the widget will be interactive even prior to the user connecting a wallet. The widget will use your JSON-RPC endpoint to fetch token price data and provide trade quotes. For this reason, it is strongly recommended that your app provide a JSON RPC endpoint as an input parameter. +1. **Before wallet connection**, the widget will use the JSON-RPC endpoint to fetch token price data and provide trade quotes, but submitting transactions will be disabled. 2. **After wallet connection**, the widget will be fully functional. The user will be able to fetch trade quotes and submit swap transactions using the JSON-RPC endpoint and web3 provider from their connected wallet. :::note Questions? diff --git a/static/img/widgets/swap-widget-states-dark.png b/static/img/widgets/swap-widget-states-dark.png index 0d7d8f4850..51f28c8fc5 100644 Binary files a/static/img/widgets/swap-widget-states-dark.png and b/static/img/widgets/swap-widget-states-dark.png differ diff --git a/static/img/widgets/swap-widget-states-light.png b/static/img/widgets/swap-widget-states-light.png index 67f35f67e1..466da12b33 100644 Binary files a/static/img/widgets/swap-widget-states-light.png and b/static/img/widgets/swap-widget-states-light.png differ diff --git a/versioned_docs/version-V2/guides/interface-integration/03-iframe-integration.md b/versioned_docs/version-V2/guides/interface-integration/03-iframe-integration.mdx similarity index 89% rename from versioned_docs/version-V2/guides/interface-integration/03-iframe-integration.md rename to versioned_docs/version-V2/guides/interface-integration/03-iframe-integration.mdx index 01c2f812e9..d8a4e2055c 100644 --- a/versioned_docs/version-V2/guides/interface-integration/03-iframe-integration.md +++ b/versioned_docs/version-V2/guides/interface-integration/03-iframe-integration.mdx @@ -3,7 +3,11 @@ id: iframe-integration title: Iframe Integration --- -Uniswap can be used within other sites as an iframe. An iframe shows an exact version of the uniswap frontend site and can have custom prefilled settings. +:::note Swap Widget +These docs are deprecated. Please refer to [Swap Widget](https://docs.uniswap.org/sdk/widgets/swap-widget) to embed the Uniswap swap widget as a React component in your website in 2 minutes. +::: + +Uniswap can be used within other sites as an iframe. An iframe shows an exact version of the Uniswap frontend site and can have custom prefilled settings. # Why You May Want This