feat: update swap inputs styles, add tokens

OriginProtocol · Aug 27, 2023 · 7fd052a · 7fd052a
1 parent c3a30f8
commit 7fd052a
Show file tree

Hide file tree

Showing 7 changed files with 122 additions and 22 deletions.
diff --git 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 (
     <Stack>
       <Topnav />

diff --git 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 = () => (
+  <SwapProvider>
+    <SwapViewWrapped />
+  </SwapProvider>
+);
+
 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;`,
+              },
+            }}
           />
           <TokenInput
             amount={amountOut}
@@ -112,9 +151,20 @@ function SwapViewWrapped() {
             isPriceLoading={isPriceLoading}
             inputProps={{ readOnly: true }}
             isConnected={isConnected}
+            sx={{
+              border: '1px solid',
+              borderColor: 'divider',
+              borderTop: 0,
+              borderRadius: 1,
+              borderStartStartRadius: 0,
+              borderStartEndRadius: 0,
+              backgroundColor: (theme) => alpha(theme.palette.grey[400], 0.2),
+              padding: 2.875,
+            }}
           />
           <SwapButton onClick={handleExchangeTokens} />
         </Box>
+        <SwapRoute routes={[]} isLoading={false} />
       </Card>
       <TokenSelectModal
         open={!isNilOrEmpty(tokenModal)}
@@ -129,12 +179,6 @@ function SwapViewWrapped() {
   );
 }
 
-export const SwapView = () => (
-  <SwapProvider>
-    <SwapViewWrapped />
-  </SwapProvider>
-);
-
 function SwapButton(props: IconButtonProps) {
   return (
     <IconButton
@@ -145,14 +189,13 @@ function SwapButton(props: IconButtonProps) {
         left: 0,
         right: 0,
         bottom: 0,
-        margin: 'auto',
-        zIndex: 2,
         width: { md: '3rem', xs: '2rem' },
         height: { md: '3rem', xs: '2rem' },
+        margin: 'auto',
+        zIndex: 2,
         fill: (theme) => 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
diff --git a/libs/shared/assets/files/tokens/OGV.svg b/libs/shared/assets/files/tokens/OGV.svg
diff --git a/libs/shared/components/src/Inputs/TokenInput.tsx b/libs/shared/components/src/Inputs/TokenInput.tsx
@@ -89,7 +89,7 @@ export const TokenInput = forwardRef<HTMLInputElement, TokenInputProps>(
         </Stack>
         <Stack alignItems="flex-end" justifyContent="flex-end">
           {isConnected && (
-            <Stack direction="row" alignItems="center">
+            <Stack direction="row" alignItems="center" gap={0.5}>
               {isBalanceLoading ? (
                 <Skeleton width={60} />
               ) : (
@@ -105,7 +105,12 @@ export const TokenInput = forwardRef<HTMLInputElement, TokenInputProps>(
                       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' })}
                     </Button>
@@ -120,6 +125,7 @@ export const TokenInput = forwardRef<HTMLInputElement, TokenInputProps>(
     );
   },
 );
+
 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
@@ -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
@@ -55,7 +55,7 @@ export const TokenSelectModal = ({
       >
         {tokens.map((token) => (
           <TokenListItem
-            key={token.address}
+            key={token.address || 'eth'}
             token={token}
             onClick={() => {
               onSelectToken(token);