Skip to content

Commit

Permalink
feat(widget-configurator): button to show drawer (#3324)
Browse files Browse the repository at this point in the history
  • Loading branch information
@shoom3301
shoom3301 authored Nov 3, 2023
1 parent 372b1a6 commit cbc1521
Show file tree
Hide file tree
Showing 3 changed files with 31 additions and 9 deletions.
7 changes: 6 additions & 1 deletion apps/widget-configurator/src/app/configurator/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ import { TradeModesControl } from './controls/TradeModesControl'
import { useProvider } from './hooks/useProvider'
import { useSyncWidgetNetwork } from './hooks/useSyncWidgetNetwork'
import { useWidgetParamsAndSettings } from './hooks/useWidgetParamsAndSettings'
import { ContentStyled, DrawerStyled, WalletConnectionWrapper, WrapperStyled } from './styled'
import { ContentStyled, DrawerStyled, ShowDrawerButton, WalletConnectionWrapper, WrapperStyled } from './styled'
import { ConfiguratorState } from './types'

import { ColorModeContext } from '../../theme/ColorModeContext'
Expand Down Expand Up @@ -87,6 +87,11 @@ export function Configurator({ title }: { title: string }) {

return (
<Box sx={WrapperStyled}>
{!isDrawerOpen && (
<button onClick={() => setIsDrawerOpen(true)} style={ShowDrawerButton(mode)}>
✏️
</button>
)}
<Drawer sx={DrawerStyled} variant="persistent" anchor="left" open={isDrawerOpen}>
<Typography variant="h6" sx={{ width: '100%', textAlign: 'center', margin: '0 0 1.6rem', fontWeight: 'bold' }}>
{title}
Expand Down
17 changes: 17 additions & 0 deletions apps/widget-configurator/src/app/configurator/styled.ts
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,9 @@
import { CSSProperties } from 'react'

import { Theme } from '@mui/material/styles'

import type { PaletteMode } from '@mui/material'

export const WrapperStyled = { display: 'flex', flexFlow: 'column wrap', width: '100%' }

export const DrawerStyled = (theme: Theme) => ({
Expand Down Expand Up @@ -39,3 +43,16 @@ export const WalletConnectionWrapper = {
display: 'flex',
justifyContent: 'center',
}

export const ShowDrawerButton: (mode: PaletteMode) => CSSProperties = (mode: PaletteMode) => ({
borderRadius: '50%',
width: '60px',
height: '60px',
position: 'fixed',
left: '20px',
bottom: '20px',
background: mode === 'dark' ? 'rgb(63 162 255 / 71%)' : '#fff',
border: 0,
fontSize: '24px',
cursor: 'pointer',
})
16 changes: 8 additions & 8 deletions libs/widget-lib/docs/README.md
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
# CowSwap Widget
# CoW Swap Widget

Integrate the power of `CowSwap` into your product!
Integrate the power of `CoW Swap` into your product!
With the widget, you can create an incredible trading interface. Specify the required pair of currencies, customize the
look and much more!

Expand Down Expand Up @@ -61,13 +61,13 @@ const params: CowSwapWidgetParams = {
cowSwapWidget(widgetContainer, params)
```

> **Coming soon, please get in touch to sign up to the beta program: <TODO-TYPEFORM>**
> **Coming soon, please get in touch to sign up to the beta program: TODO-TYPEFORM**
## Wallet provider

You can pass the wallet provider from your application to seamlessly use the widget as part of your application.
Also, you can not specify the provider, in this case the widget will work in standalone mode with the ability to connect
any wallet supported in CowSwap.
any wallet supported in CoW Swap.

A provider must comply with [EIP-1193](https://eips.ethereum.org/EIPS/eip-11930) and implement the interface:

Expand Down Expand Up @@ -110,19 +110,19 @@ cowSwapWidget(
|-----------------------|------------------------|---------------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| `width` | `string` | 400px | The width of the widget in css values (px, vh, etc.). |
| `height` | `string` | 600px | The height of the widget in css values (px, vh, etc.). |
| `appKey` | `string` | 'DEFAULT_INJECTED_WIDGET' | The unique identifier of the widget consumer. Please fill the for to let us know a little about you: <TODO-TYPEFORM> |
| `appKey` | `string` | 'DEFAULT_INJECTED_WIDGET' | The unique identifier of the widget consumer. Please fill the for to let us know a little about you: TODO-TYPEFORM |
| `provider` | `EthereumProvider` | --- | The Ethereum provider to be used for interacting with a wallet. To connect, for example, to Rabby Wallet or Metamask, just set `window.ethereum`. You also might like to use https://web3modal.com |
| `chainId` | `number` | 1 | The blockchain ID on which the trade will take place. Currently supported: 1 (Mainnet), 5 (Goerli), 100 (Gnosis chain) |
| `tradeType` | `TradeType` | 'swap' | The type of trade. Can be `swap` or `limit` or `advanced`. |
| `env` | `CowSwapWidgetEnv` | 'prod' | The environment of the widget (`local` , `prod` , `dev` , `pr`). See [`COWSWAP_URLS`](../src/consts.ts) const value for urls. |
| `env` | `CowSwapWidgetEnv` | 'prod' | The environment of the widget (`local` , `prod` , `dev` , `pr`). See [`COWSWAP_URLS`](https://github.com/cowprotocol/cowswap/blob/develop/libs/widget-lib/src/consts.ts) const value for urls. |
| `tradeAssets` | `TradeAssets` | Same as in swap.cow.fi | An object containing information about the selling and buying assets. Example: `{ asset: 'WBTC', amount: 12 }` or `{ asset: '0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb48' }` |
| `theme` | `CowSwapTheme` | 'light' | The theme of the widget (`'dark'` for dark theme or `'light'` for light theme). |
| `logoUrl` | `string` | --- | Allows to set a custom logo for the widget. |
| `hideLogo` | `boolean` | false | Option to hide the logo in the widget. |
| `hideNetworkSelector` | `boolean` | false | Disables an opportunity to change the network from the widget UI. |
| `enabledTradeTypes` | `Array<TradeType>` | All are enabled | CowSwap provides three trading widgets: `swap`, `limit` and `advanced` orders. Using this option you can narrow down the list of available trading widgets. |
| `enabledTradeTypes` | `Array<TradeType>` | All are enabled | CoW Swap provides three trading widgets: `swap`, `limit` and `advanced` orders. Using this option you can narrow down the list of available trading widgets. |
| `palette` | `CowSwapWidgetPalette` | --- | Using the palette you can customize the appearance of the widget. For example, you can change the main color of the background and text. |
| `partnerFeeBips` | `string` | --- | Coming soon! You can enable a fee for all trades in the widget. Please contact <TODO-TYPEFORM> to enable your partner fee. |
| `partnerFeeBips` | `string` | --- | Coming soon! You can enable a fee for all trades in the widget. Please contact TODO-TYPEFORM to enable your partner fee. |

## Widget updating

Expand Down

0 comments on commit cbc1521

Please sign in to comment.