# Socket Bridge Widget

Bridge aggregator widget powered by socket

## Steps for integration:

1. import [npm package](https://www.npmjs.com/package/socket-bridge-plugin) by `npm i socket-bridge-plugin`

2. Add `import Bridge from "socket-bridge-plugin";` in project
   ```
     <Bridge
         accountAdd={accountAdd}
         provider={provider}
         signer={signer}
         fromChainId="10" // optional
         toChainId="137" // optional
         fromChainTokenAddress="0x7f5c764cbc14f9669b88837ca1490cca17c31607" //optional
         toChainTokenAddress="0xeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee" //optional
         isToChainFixed={true} //optional 
         toChainTokenList={[ //optional
           "0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb48", //usdc
           "0xdac17f958d2ee523a2206206994597c13d831ec7", //usdt
           "0xeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee", //eth
           "0x6b175474e89094c44da98b954eedeac495271d0f", //dai
         ]}
         onClose={this.closeModal}
         isDarkMode={isDarkMode}
      ></Bridge>```

4. Bridge properties/requirements for integration:
- `fromChainId` and `toChainId` allow setting default sending and receiving chain. 
- `fromChainTokenAddress` and `toChainTokenAddress` can be passed. Default is usdc.
- `isToChainFixed` allows to fix receiving chain. When this is enabled, swap chain will not work.
- array of token addresses can be supplied to `toChainTokenList`. This will allow only the passed tokens to be selected on receiving chain.
- light mode is in bungee color scheme
- dark mode is in perp color scheme
- you need to pass signer/provider so that user dont have to connect again in this widget
- set ENV variable `REACT_APP_SOCKET_API_KEY=<socket-api-key>`