Last active
July 28, 2021 15:46
-
-
Save joshstevens19/1cbbe06d6351b1bd33d3653435eecb7b to your computer and use it in GitHub Desktop.
uniswap-dApp-integration
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import React, { useEffect } from 'react'; | |
| import { | |
| ChainId, | |
| ETH, | |
| UniswapDappSharedLogicContext, | |
| } from 'uniswap-dapp-integration-shared'; | |
| import UniswapReact from 'uniswap-react'; | |
| import './App.css'; | |
| function App() { | |
| // need to not render the component until you have defined this! | |
| const [uniswapDappSharedLogicContext, setUniswapDappSharedLogicContext] = | |
| React.useState<undefined | UniswapDappSharedLogicContext>(undefined); | |
| // just to show you how it would work with metamask | |
| const [metamaskInstalled, setMetamaskInstalled] = React.useState< | |
| undefined | boolean | |
| >(false); | |
| const [loading, setLoading] = React.useState<boolean>(true); | |
| useEffect(() => { | |
| (async () => { | |
| async function getMetaMaskAccount(): Promise<string[]> { | |
| try { | |
| const accounts = await (window as any).ethereum.request({ | |
| method: 'eth_requestAccounts', | |
| }); | |
| return accounts; | |
| } catch (error) { | |
| // keep trying if they reject the request! | |
| return getMetaMaskAccount(); | |
| } | |
| } | |
| // checking metamask or any injected ethereum provider is installed | |
| const ethereum = (window as any).ethereum; | |
| if (!ethereum) { | |
| setMetamaskInstalled(false); | |
| setLoading(false); | |
| return; | |
| } | |
| setMetamaskInstalled(true); | |
| // MetaMask | |
| const accounts = await getMetaMaskAccount(); | |
| // define the config | |
| const uniswapDappSharedLogicContext: UniswapDappSharedLogicContext = { | |
| supportedNetworkTokens: [ | |
| // only showing mainnet but works for all testnets uniswap is deployed on! | |
| { | |
| chainId: ChainId.MAINNET, | |
| // the deep linked input amount | |
| // if not passed input will have nothing deep linked in | |
| // it should always be the formatted string aka 0.0001 ETH | |
| // you pass ether value ('0.0001'). Same with tokens you pass in | |
| // the formatted value | |
| defaultInputValue: '1', | |
| // what you want the deep linked input token to be | |
| // if not passed in will use eth! | |
| defaultInputToken: ETH.MAINNET().contractAddress, | |
| // what you want the deep linked output token to be | |
| // if not passed in will select nothing and make the user pick. | |
| defaultOutputToken: '0x1f9840a85d5af5bf1d1762f925bdaddc4201f984', | |
| // all your supported contract erc20 tokens you wish to support on the | |
| // widget | |
| supportedTokens: [ | |
| { | |
| contractAddress: '0x1f9840a85d5aF5bf1D1762F925BDADdC4201F984', | |
| }, | |
| { | |
| contractAddress: '0xdac17f958d2ee523a2206206994597c13d831ec7', | |
| }, | |
| { | |
| contractAddress: '0x7Fc66500c84A76Ad7e9c93437bFc5Ac33E2DDaE9', | |
| }, | |
| { | |
| contractAddress: '0xde30da39c46104798bb5aa3fe8b9e0e1f348163f', | |
| }, | |
| { | |
| // can override the image with your own icon, by default if this is not defined | |
| // it try to find them in trustwallet assets | |
| tokenImageContext: { | |
| image: 'yourCustomIconImageUrl.png' | |
| }, | |
| contractAddress: '0x2260fac5e5542a773aa44fbcfedf7c193bc2c599', | |
| }, | |
| { | |
| contractAddress: '0x6b175474e89094c44da98b954eedeac495271d0f', | |
| }, | |
| { | |
| contractAddress: '0xc944e90c64b2c07662a292be6244bdf05cda44a7', | |
| }, | |
| { | |
| contractAddress: '0x0bc529c00c6401aef6d220be8c6ea1667f6ad93e', | |
| }, | |
| { | |
| contractAddress: '0x7D1AfA7B718fb893dB30A3aBc0Cfc608AaCfeBB0', | |
| }, | |
| ], | |
| }, | |
| ], | |
| // the ethereum address for the user | |
| ethereumAddress: accounts[0], | |
| // It must confirm to the `https://eips.ethereum.org/EIPS/eip-1193` | |
| // If your using MetaMask for example you can just pass in the ethereum provider from the window aka `window.ethereum`. | |
| // If your using a integrated wallet you should pass in your own custom provider. | |
| ethereumProvider: ethereum, | |
| }; | |
| // set the config in the react state! | |
| setUniswapDappSharedLogicContext(uniswapDappSharedLogicContext); | |
| setLoading(false); | |
| })(); | |
| }, []); | |
| return ( | |
| <div className="App"> | |
| {/* Just a random loading context, just showing that you should not render the component until you have done the above */} | |
| {loading && ( | |
| <div> | |
| {metamaskInstalled && ( | |
| <p>Please approve account or login to MetaMask</p> | |
| )} | |
| <p>Loading...</p> | |
| </div> | |
| )} | |
| {!loading && ( | |
| // added some styling to the dApp to make it small and center showcase has the same css | |
| // https://github.com/uniswap-integration/uniswap-dapp-integration-monorepo/blob/master/showcase/src/App.css | |
| // again this is purely to for demo purposes and to make it look like the uniswap widget width. | |
| <div className="uniswap-container"> | |
| {uniswapDappSharedLogicContext !== undefined && metamaskInstalled && ( | |
| <UniswapReact | |
| uniswapDappSharedLogicContext={uniswapDappSharedLogicContext} | |
| /> | |
| )} | |
| {/* Not part of the lib but just showing handler to let the user know they dont have MetaMask installed */} | |
| {!metamaskInstalled && ( | |
| <p>This showcase only supports MetaMask please install it.</p> | |
| )} | |
| </div> | |
| )} | |
| </div> | |
| ); | |
| } | |
| export default App; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment