HACKATHON: Limit order UI

package.json

@@ -140,6 +140,7 @@
     "@ubeswap/sdk": "^2.1.2",
     "@uniswap/default-token-list": "^2.0.0",
     "ajv-formats": "^2.1.1",
+    "axios": "^1.2.1",
     "eventemitter3": "^4.0.7",
     "graphql": "^15.6.1",
     "hamburger-react": "^2.4.1",
@@ -150,7 +151,9 @@
     "rc-drawer": "^4.4.3",
     "react-is": "^17.0.2",
     "react-router": "^5.2.0",
+    "react-ts-tradingview-widgets": "^1.0.14",
     "rebass": "^4.0.7",
+    "recharts": "^2.2.0",
     "redux": "^4.2.0",
     "rlp": "^2.2.6",
     "tiny-invariant": "^1.1.0",

src/components/swap/styleds.tsx

@@ -7,7 +7,7 @@ import styled, { css } from 'styled-components'
 import { AutoColumn } from '../Column'
 
 export const Wrapper = styled.div`
-  position: relative;
+  /* position: relative; */
   padding: 1rem;
 `
 

src/pages/App.tsx

@@ -35,7 +35,7 @@ import { OpenClaimAddressModalAndRedirectToSwap, RedirectPathToSwapOnly, Redirec
 const AppWrapper = styled.div`
   display: flex;
   flex-flow: column;
-  align-items: flex-start;
+  /* align-items: flex-start; */
   overflow-x: hidden;
   min-height: 100vh;
 `
@@ -49,9 +49,9 @@ const HeaderWrapper = styled.div`
 const BodyWrapper = styled.div`
   display: flex;
   flex-direction: column;
-  width: 100%;
+  /* width: 100%; */
   padding-top: 40px;
-  align-items: center;
+  /* align-items: center; */
   flex: 1;
   overflow-y: auto;
   overflow-x: hidden;

src/pages/AppBody.tsx

@@ -3,13 +3,13 @@ import styled from 'styled-components'
 
 export const BodyWrapper = styled.div`
   position: relative;
-  max-width: 420px;
-  width: 100%;
+  /* max-width: 420px; */
+  /* width: 100%; */
   background: ${({ theme }) => theme.bg1};
   box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.01), 0px 4px 8px rgba(0, 0, 0, 0.04), 0px 16px 24px rgba(0, 0, 0, 0.04),
     0px 24px 32px rgba(0, 0, 0, 0.01);
   border-radius: 30px;
-  /* padding: 1rem; */
+  padding: 1rem;
 `
 
 /**

src/state/limit/actions.ts

@@ -5,7 +5,7 @@ export enum Field {
   PRICE = 'PRICE',
 }
 
-export const selectCurrency = createAction<{ field: Field; currencyId: string }>('limit/selectCurrency')
+export const selectCurrency = createAction<{ field: Field; currencyId: string; symbol: string }>('limit/selectCurrency')
 export const switchCurrencies = createAction<void>('limit/switchCurrencies')
 export const typeInput = createAction<{ field: Field; typedValue: string }>('limit/typeInput')
 export const setBuying = createAction<{ buying: boolean }>('limit/setBuying')

src/state/limit/hooks.ts

@@ -187,10 +187,12 @@ export function useLimitOrderActionHandlers(): {
   const dispatch = useDispatch<AppDispatch>()
   const onCurrencySelection = useCallback(
     (field: Field, currency: Token) => {
+      console.log(field, currency, 'field currency')
       dispatch(
         selectCurrency({
           field,
           currencyId: currency instanceof Token ? currency.address : '',
+          symbol: currency?.symbol ?? '',
         })
       )
     },