From 7fd052a0bf04e733a2ea8c7f1740138b76fee703 Mon Sep 17 00:00:00 2001 From: toniocodo Date: Sun, 27 Aug 2023 23:43:23 +0200 Subject: [PATCH] feat: update swap inputs styles, add tokens --- apps/oeth/src/App.tsx | 5 -- libs/oeth/swap/src/views/SwapView.tsx | 63 ++++++++++++++++--- libs/shared/assets/files/tokens/OGN.svg | 14 +++++ libs/shared/assets/files/tokens/OGV.svg | 10 +++ .../components/src/Inputs/TokenInput.tsx | 10 ++- libs/shared/contracts/src/tokens.ts | 40 ++++++++++-- .../src/wagmi/components/TokenSelectModal.tsx | 2 +- 7 files changed, 122 insertions(+), 22 deletions(-) create mode 100644 libs/shared/assets/files/tokens/OGN.svg create mode 100644 libs/shared/assets/files/tokens/OGV.svg diff --git a/apps/oeth/src/App.tsx b/apps/oeth/src/App.tsx index be90f4dbb..999231de7 100644 --- a/apps/oeth/src/App.tsx +++ b/apps/oeth/src/App.tsx @@ -2,17 +2,12 @@ import { Container, Stack } from '@mui/material'; import { HistoryView } from '@origin/oeth/history'; import { SwapView } from '@origin/oeth/swap'; import { WrapView } from '@origin/oeth/wrap'; -import { usePrices } from '@origin/shared/providers'; import { Route, Routes } from 'react-router-dom'; import { ApyHeader } from './components/ApyHeader'; import { Topnav } from './components/Topnav'; export function App() { - const { data } = usePrices(); - - console.log('data', data); - return ( diff --git a/libs/oeth/swap/src/views/SwapView.tsx b/libs/oeth/swap/src/views/SwapView.tsx index 5c6840291..4a0622ea5 100644 --- a/libs/oeth/swap/src/views/SwapView.tsx +++ b/libs/oeth/swap/src/views/SwapView.tsx @@ -1,6 +1,6 @@ import { useState } from 'react'; -import { Box, IconButton, Stack } from '@mui/material'; +import { alpha, Box, IconButton, Stack } from '@mui/material'; import { Card, TokenInput } from '@origin/shared/components'; import { TokenSelectModal, usePrices } from '@origin/shared/providers'; import { isNilOrEmpty } from '@origin/shared/utils'; @@ -9,12 +9,19 @@ import { useIntl } from 'react-intl'; import { useAccount, useBalance } from 'wagmi'; import { GasPopover } from '../components/GasPopover'; +import { SwapRoute } from '../components/SwapRoute'; import { swapTokens } from '../constants'; import { SwapProvider, useSwapState } from '../state'; import type { IconButtonProps } from '@mui/material'; import type { Token } from '@origin/shared/contracts'; +export const SwapView = () => ( + + + +); + function SwapViewWrapped() { const intl = useIntl(); const { address, isConnected } = useAccount(); @@ -98,6 +105,38 @@ function SwapViewWrapped() { tokenPriceUsd={prices?.[tokenIn.symbol]} isPriceLoading={isPriceLoading} isConnected={isConnected} + sx={{ + backgroundColor: 'grey.900', + padding: 2.875, + border: '1px solid', + borderColor: 'divider', + borderRadius: 1, + borderEndStartRadius: 0, + borderEndEndRadius: 0, + '&:hover, &:focus-within': { + borderColor: 'transparent', + borderStartStartRadius: (theme) => theme.shape.borderRadius, + borderStartEndRadius: (theme) => theme.shape.borderRadius, + }, + '&:hover': { + background: (theme) => + `linear-gradient(${theme.palette.grey[900]}, ${ + theme.palette.grey[900] + }) padding-box, + linear-gradient(90deg, ${alpha( + theme.palette.primary.main, + 0.4, + )} 0%, ${alpha( + theme.palette.primary.dark, + 0.4, + )} 100%) border-box;`, + }, + '&:focus-within': { + background: (theme) => + `linear-gradient(${theme.palette.grey[900]}, ${theme.palette.grey[900]}) padding-box, + linear-gradient(90deg, var(--mui-palette-primary-main) 0%, var(--mui-palette-primary-dark) 100%) border-box;`, + }, + }} /> alpha(theme.palette.grey[400], 0.2), + padding: 2.875, + }} /> + ( - - - -); - function SwapButton(props: IconButtonProps) { return ( theme.palette.background.paper, strokeWidth: (theme) => theme.typography.pxToRem(2), stroke: (theme) => theme.palette.grey[700], - transform: { xs: 'translateY(-20%)', md: 'translateY(-8%)' }, backgroundColor: (theme) => theme.palette.divider, '& img': { transition: (theme) => theme.transitions.create('transform'), diff --git a/libs/shared/assets/files/tokens/OGN.svg b/libs/shared/assets/files/tokens/OGN.svg new file mode 100644 index 000000000..bc220e5ba --- /dev/null +++ b/libs/shared/assets/files/tokens/OGN.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/libs/shared/assets/files/tokens/OGV.svg b/libs/shared/assets/files/tokens/OGV.svg new file mode 100644 index 000000000..0f57558f3 --- /dev/null +++ b/libs/shared/assets/files/tokens/OGV.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/libs/shared/components/src/Inputs/TokenInput.tsx b/libs/shared/components/src/Inputs/TokenInput.tsx index 743616544..5c3fb7c08 100644 --- a/libs/shared/components/src/Inputs/TokenInput.tsx +++ b/libs/shared/components/src/Inputs/TokenInput.tsx @@ -89,7 +89,7 @@ export const TokenInput = forwardRef( {isConnected && ( - + {isBalanceLoading ? ( ) : ( @@ -105,7 +105,12 @@ export const TokenInput = forwardRef( color="inherit" size="small" disabled={bal === 0} - sx={(theme) => theme.typography.body2} + sx={(theme) => ({ + ...theme.typography.body2, + minWidth: 0, + margin: 0, + padding: 0, + })} > {intl.formatMessage({ defaultMessage: 'MAX' })} @@ -120,6 +125,7 @@ export const TokenInput = forwardRef( ); }, ); + TokenInput.displayName = 'TokenInput'; type TokenButtonProps = { token: Token; isDisabled?: boolean } & StackProps; diff --git a/libs/shared/contracts/src/tokens.ts b/libs/shared/contracts/src/tokens.ts index f82880af6..8cf962f5c 100644 --- a/libs/shared/contracts/src/tokens.ts +++ b/libs/shared/contracts/src/tokens.ts @@ -1,6 +1,11 @@ import { erc20ABI } from 'wagmi'; import { mainnet } from 'wagmi/chains'; +import OETH from './abis/OETHProxy.json'; +import OUSD from './abis/OUSDProxy.json'; +import WOETH from './abis/WOETHProxy.json'; +import WOUSD from './abis/WOUSDProxy.json'; + export const tokens = { mainnet: { ETH: { @@ -62,7 +67,7 @@ export const tokens = { OETH: { address: '0x856c4Efb76C1D1AE02e20CEB03A2A6a08b0b8dC3', chainId: mainnet.id, - abi: erc20ABI, + abi: OETH, name: 'Origin Ether', icon: '/images/tokens/OETH.svg', decimals: 18, @@ -71,7 +76,7 @@ export const tokens = { WOETH: { address: '0xDcEe70654261AF21C44c093C300eD3Bb97b78192', chainId: mainnet.id, - abi: erc20ABI, + abi: WOETH, name: 'Wrapped Origin Ether', icon: '/images/tokens/WOETH.svg', decimals: 18, @@ -80,7 +85,7 @@ export const tokens = { OUSD: { address: '0x2A8e1E676Ec238d8A992307B495b45B3fEAa5e86', chainId: mainnet.id, - abi: erc20ABI, + abi: OUSD, name: 'Origin Dollar', icon: '/images/tokens/OUSD.svg', decimals: 18, @@ -89,12 +94,39 @@ export const tokens = { WOUSD: { address: '0xD2af830E8CBdFed6CC11Bab697bB25496ed6FA62', chainId: mainnet.id, - abi: erc20ABI, + abi: WOUSD, name: 'WrappedOrigin Dollar', icon: '/images/tokens/WOUSD.svg', decimals: 18, symbol: 'WOUSD', }, + OGN: { + address: '0x8207c1FfC5B6804F6024322CcF34F29c3541Ae26', + chainId: mainnet.id, + abi: erc20ABI, + name: 'Origin Token', + icon: '/images/tokens/OGN.svg', + decimals: 18, + symbol: 'OGN', + }, + OGV: { + address: '0x9c354503C38481a7A7a51629142963F98eCC12D0', + chainId: mainnet.id, + abi: erc20ABI, + name: 'Origin Dollar Governance', + icon: '/images/tokens/OGV.svg', + decimals: 18, + symbol: 'OGV', + }, + veOGV: { + address: '0x0C4576Ca1c365868E162554AF8e385dc3e7C66D9', + chainId: mainnet.id, + abi: erc20ABI, + name: 'Staked Origin Dollar Governance', + icon: '/images/tokens/OGV.svg', + decimals: 18, + symbol: 'veOGV', + }, // 1-inch LP stETH: { address: '0xae7ab96520DE3A18E5e111B5EaAb095312D7fE84', diff --git a/libs/shared/providers/src/wagmi/components/TokenSelectModal.tsx b/libs/shared/providers/src/wagmi/components/TokenSelectModal.tsx index ade44affa..0d3fa1bb4 100644 --- a/libs/shared/providers/src/wagmi/components/TokenSelectModal.tsx +++ b/libs/shared/providers/src/wagmi/components/TokenSelectModal.tsx @@ -55,7 +55,7 @@ export const TokenSelectModal = ({ > {tokens.map((token) => ( { onSelectToken(token);