diff --git a/.github/workflows/docs.yml b/.github/workflows/docs.yml index 3a5d7b415..ee4d05515 100644 --- a/.github/workflows/docs.yml +++ b/.github/workflows/docs.yml @@ -4,12 +4,8 @@ name: Deploy documentation to Pages on: # Runs on pushes targeting the default branch push: - branches: ["docs-main"] - - - # Allows you to run this workflow manually from the Actions tab workflow_dispatch: diff --git a/docs/package.json b/docs/package.json index 41a8d56cf..b530aba22 100644 --- a/docs/package.json +++ b/docs/package.json @@ -14,11 +14,14 @@ "format": "prettier --write --plugin-search-dir=. ." }, "devDependencies": { - "@iconify-json/ri": "^1.1.1", + "@iconify-json/ri": "^1.1.3", "@playwright/test": "^1.22.2", - "@sveltejs/kit": "next", + "@sveltejs/adapter-static": "^1.0.0-next.39", + "@sveltejs/adapter-vercel": "next", + "@sveltejs/kit": "1.0.0-next.357", "@svelteness/kit-docs": "^0.22.12", "@tailwindcss/typography": "^0.5.2", + "@types/react-dom": "^18.0.6", "@typescript-eslint/eslint-plugin": "^5.27.0", "@typescript-eslint/parser": "^5.27.0", "@vitebook/client": "^0.100.5", @@ -40,8 +43,6 @@ "svelte-preprocess": "^4.10.7", "tslib": "^2.3.1", "typescript": "^4.7.2", - "@sveltejs/adapter-static": "^1.0.0-next.39", - "@sveltejs/adapter-vercel": "next", "unplugin-icons": "^0.13.4" }, "type": "module", diff --git a/docs/src/lib/assets/uniswap-example.mp4 b/docs/src/lib/assets/uniswap-example.mp4 new file mode 100644 index 000000000..880349a9b Binary files /dev/null and b/docs/src/lib/assets/uniswap-example.mp4 differ diff --git a/docs/src/lib/components/examples/ConnectWallet.svelte b/docs/src/lib/components/examples/connect-wallet/ConnectWallet.svelte similarity index 100% rename from docs/src/lib/components/examples/ConnectWallet.svelte rename to docs/src/lib/components/examples/connect-wallet/ConnectWallet.svelte diff --git a/docs/src/lib/components/examples/ReactConnectWallet.md b/docs/src/lib/components/examples/connect-wallet/ReactConnectWallet.md similarity index 100% rename from docs/src/lib/components/examples/ReactConnectWallet.md rename to docs/src/lib/components/examples/connect-wallet/ReactConnectWallet.md diff --git a/docs/src/lib/components/examples/SvelteConnectWallet.md b/docs/src/lib/components/examples/connect-wallet/SvelteConnectWallet.md similarity index 100% rename from docs/src/lib/components/examples/SvelteConnectWallet.md rename to docs/src/lib/components/examples/connect-wallet/SvelteConnectWallet.md diff --git a/docs/src/lib/components/examples/index.ts b/docs/src/lib/components/examples/index.ts index d7e8d00f2..da992af9e 100644 --- a/docs/src/lib/components/examples/index.ts +++ b/docs/src/lib/components/examples/index.ts @@ -1,3 +1,3 @@ -export { default as ConnectWallet } from './ConnectWallet.svelte' -export { default as ReactConnectWallet } from './ReactConnectWallet.md' -export { default as SvelteConnectWallet } from './SvelteConnectWallet.md' \ No newline at end of file +export { default as ConnectWallet } from './connect-wallet/ConnectWallet.svelte' +export { default as ReactConnectWallet } from './connect-wallet/ReactConnectWallet.md' +export { default as SvelteConnectWallet } from './connect-wallet/SvelteConnectWallet.md' diff --git a/docs/src/routes/examples/uniswap-widget.md b/docs/src/routes/examples/uniswap-widget.md new file mode 100644 index 000000000..907211eec --- /dev/null +++ b/docs/src/routes/examples/uniswap-widget.md @@ -0,0 +1,237 @@ + + +# Uniswap Widget Example + +This example will walk you through how to integrate `@web3-onboard` with the [Uniswap Widget](https://docs.uniswap.org/sdk/widgets/swap-widget)! Add this web3-onboard enabled uniswap widget to your site to provide users with token swap capabilities quickly. + +## Step 1: Install + +To start, we'll install the widgets library and the web3-onboard react library using npm or Yarn. + + + + +```bash copy +yarn add @web3-onboard/react @web3-onboard/injected-wallets +``` + + + + +```bash copy +npm install @web3-onboard/react @web3-onboard/injected-wallets +``` + + + + + + +## Step 2: Import + Configure + +Import the libraries and any wallets you would like to use. For this example, we are going to use the injected wallets module. You can easily add more wallet support to your dapp via our other wallet modules. Additionally, we'll setup web3-onboard to support 2 chains: Ethereum mainnet and Polygon mainnet. + +We'll create a file called `web3-onboard.ts` and then export the initialized `web3-onboard` instance and use this throughout our dapp. + +```ts title="web3-onboard.ts"|copy +import { init } from '@web3-onboard/react' +import injectedModule from '@web3-onboard/injected-wallets' + +const INFURA_KEY = '' + +const ethereumRopsten = { + id: '0x3', + token: 'rETH', + label: 'Ethereum Ropsten', + rpcUrl: `https://ropsten.infura.io/v3/${INFURA_KEY}`, +} + +const polygonMainnet = { + id: '0x89', + token: 'MATIC', + label: 'Polygon', + rpcUrl: 'https://matic-mainnet.chainstacklabs.com', +} + +const chains = [ethereumRopsten, polygonMainnet] + +const wallets = [injectedModule()] + +const appMetadata = { + name: 'Uniswap Widget Example', + icon: 'My App Icon', + description: + 'Example showcasing how to integrate web3-onboard with uniswap widget.', + recommendedInjectedWallets: [ + { name: 'MetaMask', url: 'https://metamask.io' }, + { name: 'Coinbase', url: 'https://wallet.coinbase.com/' }, + ], +} + +// initialize and export Onboard +export default init({ + wallets, + chains, + appMetadata, +}) +``` + +## Step 3: Add the react hooks +In our main `App` component we'll setup our Web3-Onboard react hooks. For this example we'll be using the `useConnectWallet` react hook. This will give us access to the currently connected wallets, as well as, methods for us to facilitate connecting and disconnecting a wallet. + +```tsx title="App.tsx"|copy +import { useState, useEffect } from 'react' + +import { ethers } from 'ethers' +import { useConnectWallet } from '@web3-onboard/react' + +export default function App() { + + const [{ wallet, connecting }, connect, disconnect] = useConnectWallet() + const [provider, setProvider] = useState() + + // Once the wallet is connected the provider will be defined and we'll set the provider value + // This provider will then be passed to the Uniswap component in the next step. + useEffect(() => { + if (wallet?.provider) { + setProvider(new ethers.providers.Web3Provider(wallet.provider, 'any')) + } else { + // Reset the provider back to 'undefined' such that the + // connect wallet option will reappear in the uniswap modal + setProvider(undefined) + } + }, [wallet]) + + // The connect wallet function which will be based to the Uniswap component in the next step. + const connectWallet = () => { + connect() + } + + return ( +
+

Uniswap Swap Widget

+ // Uniswap widget will go here +
+ ) +} +``` + +## Step 4: Add the Uniswap widget + +To begin, we'll import the `SwapWidget` along with the corresponding fonts. We'll define a few constants that will be passed to the swap widget: + + - The json rpc endpoint that will be used to provide trade quotes prior to the user connecting a wallet + - The token list url used to provide a list of tokens for the user to select from + - The Uniswap token address which will be used as the default selected token + +To learn more about all of the `SwapWidget` props, check out [the api reference](https://docs.uniswap.org/sdk/widgets/swap-widget/api). + +We will take the `connectWallet` function that we previously defined and pass it to the `onConnectWallet` prop on the `SwapWidget`. This will allow us to initiate the web3-onboard connect wallet modal once the user clicks the on the connect wallet button within the `SwapWidget`. Finally, we'll also pass the `provider` to the SwapWidget such that once the `provider` is defined, the `SwapWidget` will be able to use the wallet's provider to facilitate the swap. + +```tsx title="App.tsx"|copy|{6-13,40-58} +import { useState, useEffect } from 'react' + +import { ethers } from 'ethers' +import { useConnectWallet } from '@web3-onboard/react' + +import { SwapWidget } from '@uniswap/widgets' +import '@uniswap/widgets/fonts.css' + +const JSON_RPC_URL = 'https://cloudflare-eth.com' +// The url of the default uniswap token list. This list will be passed to the Uniswap component +// and will appear by default in the token selector UI. +const TOKEN_LIST = 'https://gateway.ipfs.io/ipns/tokens.uniswap.org' +const UNI = '0x1f9840a85d5aF5bf1D1762F925BDADdC4201F984' + +export default function App() { + + const [{ wallet, connecting }, connect, disconnect] = useConnectWallet() + const [provider, setProvider] = useState() + + // Once the wallet is connected the provider will be defined and we'll set the provider value + // This provider will then be passed to the Uniswap component below. + useEffect(() => { + if (wallet?.provider) { + setProvider(new ethers.providers.Web3Provider(wallet.provider, 'any')) + } else { + // Reset the provider back to 'undefined' such that the + // connect wallet option will reappear in the uniswap modal + setProvider(undefined) + } + }, [wallet]) + + // The connect wallet function which will be based to the Uniswap component below. + const connectWallet = () => { + connect() + } + + return ( +
+

Uniswap Swap Widget

+ +
+ ) +} +``` + +## Step 5: Wrap the context provider + +Finally, we'll wrap our main App component with the `web3-onboard` context provider in order for us to access the `web3-onboard` instance throughout our app. + +```js title="index.tsx"|copy|{8-9,13-15} +import React from 'react' +import ReactDOM from 'react-dom' +import { Web3OnboardProvider } from '@web3-onboard/react' + +import './index.css' +import App from './App.tsx' + +// Import the web3-onboard singleton +import web3Onboard from './web3-onboard' + +ReactDOM.render( + + + + + , + document.getElementById('root') +) +``` +## See in action! + + + +## Live Example 🚀 + +Check out the live example on StackBlitz! StackBlitz will install and build the package in the below container + +