diff --git a/package.json b/package.json
index 47e21ec9d03..39e4deeecc3 100644
--- a/package.json
+++ b/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",
diff --git a/src/components/swap/styleds.tsx b/src/components/swap/styleds.tsx
index 059b7489d9e..167b00babd2 100644
--- a/src/components/swap/styleds.tsx
+++ b/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;
 `
 
diff --git a/src/pages/App.tsx b/src/pages/App.tsx
index 69ee6f6de46..b84e0262021 100644
--- a/src/pages/App.tsx
+++ b/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;
diff --git a/src/pages/AppBody.tsx b/src/pages/AppBody.tsx
index 3ec2b9e0d9a..8b435f4b657 100644
--- a/src/pages/AppBody.tsx
+++ b/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;
 `
 
 /**
diff --git a/src/pages/LimitOrder/index.tsx b/src/pages/LimitOrder/index.tsx
index a919fb5e7fa..e53b2875e08 100644
--- a/src/pages/LimitOrder/index.tsx
+++ b/src/pages/LimitOrder/index.tsx
@@ -1,6 +1,6 @@
 import { useContractKit, WalletTypes } from '@celo-tools/use-contractkit'
 import { RampInstantSDK } from '@ramp-network/ramp-instant-sdk'
-import { ChainId as UbeswapChainId, cUSD, JSBI, TokenAmount, Trade } from '@ubeswap/sdk'
+import { ChainId as UbeswapChainId, cUSD, JSBI, TokenAmount } from '@ubeswap/sdk'
 import { CardNoise, CardSection, DataCard } from 'components/earn/styled'
 import { useQueueLimitOrderTrade } from 'components/swap/routing/limit/queueLimitOrderTrade'
 import { useTradeCallback } from 'components/swap/routing/useTradeCallback'
@@ -10,6 +10,7 @@ import useENS from 'hooks/useENS'
 import React, { useCallback, useContext, useEffect, useState } from 'react'
 import ReactGA from 'react-ga'
 import { useTranslation } from 'react-i18next'
+import { AdvancedRealTimeChart } from 'react-ts-tradingview-widgets'
 import { Text } from 'rebass'
 import { useDerivedLimitOrderInfo, useLimitOrderActionHandlers, useLimitOrderState } from 'state/limit/hooks'
 import { useSingleCallResult } from 'state/multicall/hooks'
@@ -105,7 +106,6 @@ export default function LimitOrder() {
   // modal and loading
   const [{ showConfirm, tradeToConfirm, swapErrorMessage, attemptingTxn, txHash }, setSwapState] = useState<{
     showConfirm: boolean
-    tradeToConfirm: Trade | undefined
     attemptingTxn: boolean
     swapErrorMessage: string | undefined
     txHash: string | undefined
@@ -274,223 +274,229 @@ export default function LimitOrder() {
           </DataCard>
         </TopSectionLimitOrder>
       )}
-      <AppBody>
-        <SwapHeader title={t('limitOrder')} hideSettings={true} />
-        <div style={{ display: 'flex', justifyContent: 'center' }}>
-          <TabButton active={buying} onClick={() => setBuying(true)}>
-            Buy
-          </TabButton>
-          <TabButton active={!buying} onClick={() => setBuying(false)}>
-            Sell
-          </TabButton>
+      <div style={{ padding: '16px', columnGap: '16px', display: 'flex', justifyContent: 'center' }}>
+        <div style={{ width: '80%', borderRadius: '120px' }}>
+          <AdvancedRealTimeChart theme="dark" autosize symbol={'cUSD/cREAL'}></AdvancedRealTimeChart>
         </div>
-        <Wrapper id="swap-page">
-          <ConfirmSwapModal
-            isOpen={showConfirm}
-            trade={tradeToConfirm}
-            originalTrade={tradeToConfirm}
-            onAcceptChanges={handleAcceptChanges}
-            attemptingTxn={attemptingTxn}
-            txHash={txHash}
-            recipient={recipient}
-            allowedSlippage={allowedSlippage}
-            onConfirm={handlePlaceOrder}
-            swapErrorMessage={swapErrorMessage}
-            onDismiss={handleConfirmDismiss}
-          />
-
-          <AutoColumn gap={'md'}>
-            <TYPE.body color={theme.text2} style={{ display: 'inline', marginLeft: 8 }}>
-              {buying ? 'Buy' : 'Sell'} Amount
-            </TYPE.body>
-            <CurrencyInputPanel
-              value={formattedAmounts[Field.TOKEN]}
-              currency={currencies[Field.TOKEN]}
-              onUserInput={handleTypeTokenAmount}
-              onCurrencySelect={handleTokenSelect}
-              otherCurrency={currencies[Field.PRICE]}
-              hideBalance={buying}
-              id="limit-order-token"
-            />
-            <TYPE.body color={theme.text2} style={{ display: 'inline', marginLeft: 8, marginTop: 16 }}>
-              Limit Price
-            </TYPE.body>
-            <CurrencyInputPanel
-              value={formattedAmounts[Field.PRICE]}
-              currency={currencies[Field.PRICE]}
-              onUserInput={handleTypePrice}
-              onCurrencySelect={handlePriceSelect}
-              otherCurrency={currencies[Field.TOKEN]}
-              hideBalance={!buying}
-              id="limit-order-price"
-            />
-
-            <Card padding={'0px'} borderRadius={'20px'}>
-              <AutoColumn gap="8px" style={{ padding: '0 16px' }}>
-                <>
-                  <RowBetween align="center" style={{ marginBottom: '0.5rem' }}>
-                    {marketPriceDiffIndicator && (
-                      <div style={{ display: 'flex' }}>
-                        <Text fontWeight={500} fontSize={14} color={getColor()}>
-                          {marketPriceDiffIndicator.toSignificant(4)}% {aboveMarketPrice ? 'below' : 'above'} &nbsp;
+        <div>
+          <AppBody>
+            <SwapHeader title={t('limitOrder')} hideSettings={true} />
+            <div style={{ display: 'flex', justifyContent: 'center' }}>
+              <TabButton active={buying} onClick={() => setBuying(true)}>
+                Buy
+              </TabButton>
+              <TabButton active={!buying} onClick={() => setBuying(false)}>
+                Sell
+              </TabButton>
+            </div>
+            <Wrapper id="swap-page">
+              <ConfirmSwapModal
+                isOpen={showConfirm}
+                trade={tradeToConfirm}
+                originalTrade={tradeToConfirm}
+                onAcceptChanges={handleAcceptChanges}
+                attemptingTxn={attemptingTxn}
+                txHash={txHash}
+                recipient={recipient}
+                allowedSlippage={allowedSlippage}
+                onConfirm={handlePlaceOrder}
+                swapErrorMessage={swapErrorMessage}
+                onDismiss={handleConfirmDismiss}
+              />
+
+              <AutoColumn gap={'md'}>
+                <TYPE.body color={theme.text2} style={{ display: 'inline', marginLeft: 8 }}>
+                  {buying ? 'Buy' : 'Sell'} Amount
+                </TYPE.body>
+                <CurrencyInputPanel
+                  value={formattedAmounts[Field.TOKEN]}
+                  currency={currencies[Field.TOKEN]}
+                  onUserInput={handleTypeTokenAmount}
+                  onCurrencySelect={handleTokenSelect}
+                  otherCurrency={currencies[Field.PRICE]}
+                  hideBalance={buying}
+                  id="limit-order-token"
+                />
+                <TYPE.body color={theme.text2} style={{ display: 'inline', marginLeft: 8, marginTop: 16 }}>
+                  Limit Price
+                </TYPE.body>
+                <CurrencyInputPanel
+                  value={formattedAmounts[Field.PRICE]}
+                  currency={currencies[Field.PRICE]}
+                  onUserInput={handleTypePrice}
+                  onCurrencySelect={handlePriceSelect}
+                  otherCurrency={currencies[Field.TOKEN]}
+                  hideBalance={!buying}
+                  id="limit-order-price"
+                />
+                <Card padding={'0px'} borderRadius={'20px'}>
+                  <AutoColumn gap="8px" style={{ padding: '0 16px' }}>
+                    <>
+                      <RowBetween align="center" style={{ marginBottom: '0.5rem' }}>
+                        {marketPriceDiffIndicator && (
+                          <div style={{ display: 'flex' }}>
+                            <Text fontWeight={500} fontSize={14} color={getColor()}>
+                              {marketPriceDiffIndicator.toSignificant(4)}% {aboveMarketPrice ? 'below' : 'above'} &nbsp;
+                            </Text>
+                            <Text fontWeight={500} fontSize={14} color={theme.text2}>
+                              market price
+                            </Text>
+                          </div>
+                        )}
+                      </RowBetween>
+                      <RowBetween align="center">
+                        <Text fontWeight={500} fontSize={14} color={theme.text2}>
+                          Market Price
                         </Text>
+                        {trade ? (
+                          <TradePrice
+                            price={trade.executionPrice}
+                            showInverted={buying ? showInverted : !showInverted}
+                            setShowInverted={setShowInverted}
+                          />
+                        ) : (
+                          <Text>-</Text>
+                        )}
+                      </RowBetween>
+                      <RowBetween align="center">
                         <Text fontWeight={500} fontSize={14} color={theme.text2}>
-                          market price
+                          Order Reward
                         </Text>
-                      </div>
-                    )}
-                  </RowBetween>
-                  <RowBetween align="center">
-                    <Text fontWeight={500} fontSize={14} color={theme.text2}>
-                      Market Price
-                    </Text>
-                    {trade ? (
-                      <TradePrice
-                        price={trade.executionPrice}
-                        showInverted={buying ? showInverted : !showInverted}
-                        setShowInverted={setShowInverted}
-                      />
-                    ) : (
-                      <Text>-</Text>
-                    )}
-                  </RowBetween>
-                  <RowBetween align="center">
-                    <Text fontWeight={500} fontSize={14} color={theme.text2}>
-                      Order Reward
-                    </Text>
-                    <Text fontWeight={500} fontSize={14} color={theme.text2}>
-                      {reward?.toSignificant(2) ?? '-'} {reward?.currency.symbol}
-                    </Text>
-                  </RowBetween>
-                  <RowBetween align="center">
-                    <Text fontWeight={500} fontSize={14} color={theme.text2}>
-                      Order Fee
-                    </Text>
-                    <Text fontWeight={500} fontSize={14} color={theme.text2}>
-                      {orderFee?.toSignificant(2) ?? '-'} {orderFee?.currency.symbol}
-                    </Text>
-                  </RowBetween>
-                  <RowBetween align="center">
-                    <Text fontWeight={500} fontSize={14} color={theme.text2}>
-                      {buying ? 'Total Buy' : 'Total Sell'}
-                    </Text>
-                    {buying ? (
-                      <Text fontWeight={500} fontSize={14} color={theme.text2}>
-                        {parsedOutputTotal ? parsedOutputTotal.toSignificant(6) : '-'}{' '}
-                        {parsedOutputTotal?.currency.symbol}
-                      </Text>
-                    ) : (
-                      <Text fontWeight={500} fontSize={14} color={theme.text2}>
-                        {parsedInputTotal && orderFee ? parsedInputTotal.add(orderFee).toSignificant(6) : '-'}{' '}
-                        {parsedInputTotal?.currency.symbol}
-                      </Text>
-                    )}
-                  </RowBetween>
-                  <RowBetween align="center">
-                    <Text fontWeight={800} fontSize={14} color={theme.text1}>
-                      {buying ? 'Total Cost' : 'Total Received'}
-                    </Text>
-                    {buying ? (
-                      <Text fontWeight={800} fontSize={14} color={theme.text1}>
-                        {parsedInputTotal && orderFee ? parsedInputTotal.add(orderFee).toSignificant(6) : '-'}{' '}
-                        {parsedInputTotal?.currency.symbol}
-                      </Text>
-                    ) : (
-                      <Text fontWeight={800} fontSize={14} color={theme.text1}>
-                        {parsedOutputTotal ? parsedOutputTotal.toSignificant(6) : '-'}{' '}
-                        {parsedOutputTotal?.currency.symbol}
-                      </Text>
-                    )}
-                  </RowBetween>
-                </>
+                        <Text fontWeight={500} fontSize={14} color={theme.text2}>
+                          {reward?.toSignificant(2) ?? '-'} {reward?.currency.symbol}
+                        </Text>
+                      </RowBetween>
+                      <RowBetween align="center">
+                        <Text fontWeight={500} fontSize={14} color={theme.text2}>
+                          Order Fee
+                        </Text>
+                        <Text fontWeight={500} fontSize={14} color={theme.text2}>
+                          {orderFee?.toSignificant(2) ?? '-'} {orderFee?.currency.symbol}
+                        </Text>
+                      </RowBetween>
+                      <RowBetween align="center">
+                        <Text fontWeight={500} fontSize={14} color={theme.text2}>
+                          {buying ? 'Total Buy' : 'Total Sell'}
+                        </Text>
+                        {buying ? (
+                          <Text fontWeight={500} fontSize={14} color={theme.text2}>
+                            {parsedOutputTotal ? parsedOutputTotal.toSignificant(6) : '-'}{' '}
+                            {parsedOutputTotal?.currency.symbol}
+                          </Text>
+                        ) : (
+                          <Text fontWeight={500} fontSize={14} color={theme.text2}>
+                            {parsedInputTotal && orderFee ? parsedInputTotal.add(orderFee).toSignificant(6) : '-'}{' '}
+                            {parsedInputTotal?.currency.symbol}
+                          </Text>
+                        )}
+                      </RowBetween>
+                      <RowBetween align="center">
+                        <Text fontWeight={800} fontSize={14} color={theme.text1}>
+                          {buying ? 'Total Cost' : 'Total Received'}
+                        </Text>
+                        {buying ? (
+                          <Text fontWeight={800} fontSize={14} color={theme.text1}>
+                            {parsedInputTotal && orderFee ? parsedInputTotal.add(orderFee).toSignificant(6) : '-'}{' '}
+                            {parsedInputTotal?.currency.symbol}
+                          </Text>
+                        ) : (
+                          <Text fontWeight={800} fontSize={14} color={theme.text1}>
+                            {parsedOutputTotal ? parsedOutputTotal.toSignificant(6) : '-'}{' '}
+                            {parsedOutputTotal?.currency.symbol}
+                          </Text>
+                        )}
+                      </RowBetween>
+                    </>
+                  </AutoColumn>
+                </Card>
               </AutoColumn>
-            </Card>
-          </AutoColumn>
-          <BottomGrouping>
-            {swapIsUnsupported ? (
-              <ButtonPrimary disabled={true}>
-                <TYPE.main mb="4px">Unsupported Asset</TYPE.main>
-              </ButtonPrimary>
-            ) : !account ? (
-              <ButtonLight onClick={toggleWalletModal}>{t('connectWallet')}</ButtonLight>
-            ) : showRamp ? (
-              <ButtonLight
-                onClick={() => {
-                  new RampInstantSDK({
-                    hostAppName: 'Ubeswap',
-                    hostLogoUrl: 'https://info.ubeswap.org/favicon.png',
-                    userAddress: account,
-                    swapAsset: `CELO_${parsedInputTotal?.currency.symbol}`,
-                    hostApiKey: process.env.REACT_APP_RAMP_KEY,
-                  }).show()
-                }}
-              >
-                Get more {parsedInputTotal?.currency.symbol} via Ramp
-              </ButtonLight>
-            ) : (
-              <RowBetween>
-                <ButtonConfirmed
-                  onClick={approvalCallback}
-                  disabled={
-                    (limitOrderApproval !== ApprovalState.NOT_APPROVED &&
-                      orderBookApproval !== ApprovalState.NOT_APPROVED) ||
-                    approvalSubmitted
-                  }
-                  width="48%"
-                  altDisabledStyle={
-                    limitOrderApproval === ApprovalState.PENDING || orderBookApproval === ApprovalState.PENDING
-                  } // show solid button while waiting
-                  confirmed={
-                    limitOrderApproval === ApprovalState.APPROVED && orderBookApproval === ApprovalState.APPROVED
-                  }
-                >
-                  {limitOrderApproval === ApprovalState.PENDING || orderBookApproval === ApprovalState.PENDING ? (
-                    <AutoRow gap="6px" justify="center">
-                      Approving <Loader stroke="white" />
-                    </AutoRow>
-                  ) : approvalSubmitted && orderBookApproval === ApprovalState.APPROVED ? (
-                    'Approved'
-                  ) : (
-                    'Approve ' + (currencies[buying ? Field.PRICE : Field.TOKEN]?.symbol ?? '')
-                  )}
-                </ButtonConfirmed>
-                <ButtonPrimary
-                  onClick={async () => {
-                    if (parsedInputTotal && parsedOutputTotal) {
-                      queueLimitOrderCallback({
-                        inputAmount: parsedInputTotal,
-                        outputAmount: parsedOutputTotal,
-                        chainId: chainId,
-                      })
-                    }
-                  }}
-                  width="48%"
-                  id="swap-button"
-                  disabled={
-                    !isValid ||
-                    limitOrderApproval !== ApprovalState.APPROVED ||
-                    orderBookApproval !== ApprovalState.APPROVED
-                  }
-                  altDisabledStyle={queueOrderLoading} // show solid button while waiting
-                  paddingY="14px"
-                >
-                  <AutoRow gap="4px" justify="center" wrap="nowrap">
-                    <Text fontSize={16} fontWeight={500}>
-                      {t('placeOrder')}
-                    </Text>
-                    {queueOrderLoading && <Loader stroke="white" />}
-                  </AutoRow>
-                </ButtonPrimary>
-              </RowBetween>
-            )}
-            {showApproveFlow && (
-              <Column style={{ marginTop: '1rem' }}>
-                <ProgressSteps steps={[orderBookApproval === ApprovalState.APPROVED]} />
-              </Column>
-            )}
-          </BottomGrouping>
-        </Wrapper>
-      </AppBody>
+              <BottomGrouping>
+                {swapIsUnsupported ? (
+                  <ButtonPrimary disabled={true}>
+                    <TYPE.main mb="4px">Unsupported Asset</TYPE.main>
+                  </ButtonPrimary>
+                ) : !account ? (
+                  <ButtonLight onClick={toggleWalletModal}>{t('connectWallet')}</ButtonLight>
+                ) : showRamp ? (
+                  <ButtonLight
+                    onClick={() => {
+                      new RampInstantSDK({
+                        hostAppName: 'Ubeswap',
+                        hostLogoUrl: 'https://info.ubeswap.org/favicon.png',
+                        userAddress: account,
+                        swapAsset: `CELO_${parsedInputTotal?.currency.symbol}`,
+                        hostApiKey: process.env.REACT_APP_RAMP_KEY,
+                      }).show()
+                    }}
+                  >
+                    Get more {parsedInputTotal?.currency.symbol} via Ramp
+                  </ButtonLight>
+                ) : (
+                  <RowBetween>
+                    <ButtonConfirmed
+                      onClick={approvalCallback}
+                      disabled={
+                        (limitOrderApproval !== ApprovalState.NOT_APPROVED &&
+                          orderBookApproval !== ApprovalState.NOT_APPROVED) ||
+                        approvalSubmitted
+                      }
+                      width="48%"
+                      altDisabledStyle={
+                        limitOrderApproval === ApprovalState.PENDING || orderBookApproval === ApprovalState.PENDING
+                      } // show solid button while waiting
+                      confirmed={
+                        limitOrderApproval === ApprovalState.APPROVED && orderBookApproval === ApprovalState.APPROVED
+                      }
+                    >
+                      {limitOrderApproval === ApprovalState.PENDING || orderBookApproval === ApprovalState.PENDING ? (
+                        <AutoRow gap="6px" justify="center">
+                          Approving <Loader stroke="white" />
+                        </AutoRow>
+                      ) : approvalSubmitted && orderBookApproval === ApprovalState.APPROVED ? (
+                        'Approved'
+                      ) : (
+                        'Approve ' + (currencies[buying ? Field.PRICE : Field.TOKEN]?.symbol ?? '')
+                      )}
+                    </ButtonConfirmed>
+                    <ButtonPrimary
+                      onClick={async () => {
+                        if (parsedInputTotal && parsedOutputTotal) {
+                          queueLimitOrderCallback({
+                            inputAmount: parsedInputTotal,
+                            outputAmount: parsedOutputTotal,
+                            chainId: chainId,
+                          })
+                        }
+                      }}
+                      width="48%"
+                      id="swap-button"
+                      disabled={
+                        !isValid ||
+                        limitOrderApproval !== ApprovalState.APPROVED ||
+                        orderBookApproval !== ApprovalState.APPROVED
+                      }
+                      altDisabledStyle={queueOrderLoading} // show solid button while waiting
+                      paddingY="14px"
+                    >
+                      <AutoRow gap="4px" justify="center" wrap="nowrap">
+                        <Text fontSize={16} fontWeight={500}>
+                          {t('placeOrder')}
+                        </Text>
+                        {queueOrderLoading && <Loader stroke="white" />}
+                      </AutoRow>
+                    </ButtonPrimary>
+                  </RowBetween>
+                )}
+                {showApproveFlow && (
+                  <Column style={{ marginTop: '1rem' }}>
+                    <ProgressSteps steps={[orderBookApproval === ApprovalState.APPROVED]} />
+                  </Column>
+                )}
+              </BottomGrouping>
+            </Wrapper>
+          </AppBody>
+        </div>
+      </div>
       <LimitOrderHistory />
     </>
   )
diff --git a/src/state/limit/actions.ts b/src/state/limit/actions.ts
index ef46103dc37..48079021882 100644
--- a/src/state/limit/actions.ts
+++ b/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')
diff --git a/src/state/limit/hooks.ts b/src/state/limit/hooks.ts
index 9d6eaf00abf..9b6a50635b3 100644
--- a/src/state/limit/hooks.ts
+++ b/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 ?? '',
         })
       )
     },
diff --git a/yarn.lock b/yarn.lock
index 3135072df6c..7ce31f00ed1 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3175,6 +3175,42 @@
   resolved "https://registry.yarnpkg.com/@types/country-data/-/country-data-0.0.0.tgz#6f5563cae3d148780c5b6539803a29bd93f8f1a1"
   integrity sha512-lIxCk6G7AwmUagQ4gIQGxUBnvAq664prFD9nSAz6dgd1XmBXBtZABV/op+QsJsIyaP1GZsf/iXhYKHX3azSRCw==
 
+"@types/d3-color@^2":
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/@types/d3-color/-/d3-color-2.0.3.tgz#8bc4589073c80e33d126345542f588056511fe82"
+  integrity sha512-+0EtEjBfKEDtH9Rk3u3kLOUXM5F+iZK+WvASPb0MhIZl8J8NUvGeZRwKCXl+P3HkYx5TdU4YtcibpqHkSR9n7w==
+
+"@types/d3-interpolate@^2.0.0":
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/@types/d3-interpolate/-/d3-interpolate-2.0.2.tgz#78eddf7278b19e48e8652603045528d46897aba0"
+  integrity sha512-lElyqlUfIPyWG/cD475vl6msPL4aMU7eJvx1//Q177L8mdXoVPFl1djIESF2FKnc0NyaHvQlJpWwKJYwAhUoCw==
+  dependencies:
+    "@types/d3-color" "^2"
+
+"@types/d3-path@^2":
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/@types/d3-path/-/d3-path-2.0.2.tgz#6052f38f6186319769dfabab61b5514b0e02c75c"
+  integrity sha512-3YHpvDw9LzONaJzejXLOwZ3LqwwkoXb9LI2YN7Hbd6pkGo5nIlJ09ul4bQhBN4hQZJKmUpX8HkVqbzgUKY48cg==
+
+"@types/d3-scale@^3.0.0":
+  version "3.3.2"
+  resolved "https://registry.yarnpkg.com/@types/d3-scale/-/d3-scale-3.3.2.tgz#18c94e90f4f1c6b1ee14a70f14bfca2bd1c61d06"
+  integrity sha512-gGqr7x1ost9px3FvIfUMi5XA/F/yAf4UkUDtdQhpH92XCT0Oa7zkkRzY61gPVJq+DxpHn/btouw5ohWkbBsCzQ==
+  dependencies:
+    "@types/d3-time" "^2"
+
+"@types/d3-shape@^2.0.0":
+  version "2.1.3"
+  resolved "https://registry.yarnpkg.com/@types/d3-shape/-/d3-shape-2.1.3.tgz#35d397b9e687abaa0de82343b250b9897b8cacf3"
+  integrity sha512-HAhCel3wP93kh4/rq+7atLdybcESZ5bRHDEZUojClyZWsRuEMo3A52NGYJSh48SxfxEU6RZIVbZL2YFZ2OAlzQ==
+  dependencies:
+    "@types/d3-path" "^2"
+
+"@types/d3-time@^2":
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/@types/d3-time/-/d3-time-2.1.1.tgz#743fdc821c81f86537cbfece07093ac39b4bc342"
+  integrity sha512-9MVYlmIgmRR31C5b4FVSWtuMmBHh2mOWQYfl7XAYOa8dsnb7iEmUmRSWSFgXFtkjxO65d7hTUHQC+RhR/9IWFg==
+
 "@types/debug@^4.1.5":
   version "4.1.7"
   resolved "https://registry.yarnpkg.com/@types/debug/-/debug-4.1.7.tgz#7cc0ea761509124709b8b2d1090d8f6c17aadb82"
@@ -4729,6 +4765,15 @@ axios@^0.21.0:
   dependencies:
     follow-redirects "^1.14.0"
 
+axios@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/axios/-/axios-1.2.1.tgz#44cf04a3c9f0c2252ebd85975361c026cb9f864a"
+  integrity sha512-I88cFiGu9ryt/tfVEi4kX2SITsvDddTajXTOFmt2uK1ZVA8LytjtdeyefdQWEf5PU8w+4SSJDoYnggflB5tW4A==
+  dependencies:
+    follow-redirects "^1.15.0"
+    form-data "^4.0.0"
+    proxy-from-env "^1.1.0"
+
 axobject-query@^2.2.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/axobject-query/-/axobject-query-2.2.0.tgz#943d47e10c0b704aa42275e20edf3722648989be"
@@ -5576,9 +5621,9 @@ caniuse-api@^3.0.0:
     lodash.uniq "^4.5.0"
 
 caniuse-lite@^1.0.0, caniuse-lite@^1.0.30000981, caniuse-lite@^1.0.30001109, caniuse-lite@^1.0.30001125, caniuse-lite@^1.0.30001332:
-  version "1.0.30001346"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001346.tgz#e895551b46b9cc9cc9de852facd42f04839a8fbe"
-  integrity sha512-q6ibZUO2t88QCIPayP/euuDREq+aMAxFE5S70PkrLh0iTDj/zEhgvJRKC2+CvXY6EWc6oQwUR48lL5vCW6jiXQ==
+  version "1.0.30001439"
+  resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001439.tgz"
+  integrity sha512-1MgUzEkoMO6gKfXflStpYgZDlFM7M/ck/bgfVCACO5vnAf0fXoNVHdWtqGU+MYca+4bL9Z5bpOVmR33cWW9G2A==
 
 capture-exit@^2.0.0:
   version "2.0.0"
@@ -5750,6 +5795,11 @@ class-utils@^0.3.5:
     isobject "^3.0.0"
     static-extend "^0.1.1"
 
+classnames@^2.2.5:
+  version "2.3.2"
+  resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.3.2.tgz#351d813bf0137fcc6a76a16b88208d2560a0d924"
+  integrity sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw==
+
 classnames@^2.2.6:
   version "2.3.1"
   resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.3.1.tgz#dfcfa3891e306ec1dad105d0e88f4417b8535e8e"
@@ -6420,6 +6470,11 @@ css-tree@^1.1.2:
     mdn-data "2.0.14"
     source-map "^0.6.1"
 
+css-unit-converter@^1.1.1:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/css-unit-converter/-/css-unit-converter-1.1.2.tgz#4c77f5a1954e6dbff60695ecb214e3270436ab21"
+  integrity sha512-IiJwMC8rdZE0+xiEZHeru6YoONC4rfPMqGm2W85jMIbkFvv5nFTwJVFHam2eFrN6txmoUYFAFXiv8ICVeTO0MA==
+
 css-what@^3.2.1:
   version "3.4.2"
   resolved "https://registry.yarnpkg.com/css-what/-/css-what-3.4.2.tgz#ea7026fcb01777edbde52124e21f327e7ae950e4"
@@ -6567,6 +6622,67 @@ cyclist@^1.0.1:
   resolved "https://registry.yarnpkg.com/cyclist/-/cyclist-1.0.1.tgz#596e9698fd0c80e12038c2b82d6eb1b35b6224d9"
   integrity sha512-NJGVKPS81XejHcLhaLJS7plab0fK3slPh11mESeeDq2W4ZI5kUKK/LRRdVDvjJseojbPB7ZwjnyOybg3Igea/A==
 
+d3-array@2, d3-array@^2.3.0:
+  version "2.12.1"
+  resolved "https://registry.yarnpkg.com/d3-array/-/d3-array-2.12.1.tgz#e20b41aafcdffdf5d50928004ececf815a465e81"
+  integrity sha512-B0ErZK/66mHtEsR1TkPEEkwdy+WDesimkM5gpZr5Dsg54BiTA5RXtYW5qTLIAcekaS9xfZrzBLF/OAkB3Qn1YQ==
+  dependencies:
+    internmap "^1.0.0"
+
+"d3-color@1 - 2":
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/d3-color/-/d3-color-2.0.0.tgz#8d625cab42ed9b8f601a1760a389f7ea9189d62e"
+  integrity sha512-SPXi0TSKPD4g9tw0NMZFnR95XVgUZiBH+uUTqQuDu1OsE2zomHU7ho0FISciaPvosimixwHFl3WHLGabv6dDgQ==
+
+"d3-format@1 - 2":
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/d3-format/-/d3-format-2.0.0.tgz#a10bcc0f986c372b729ba447382413aabf5b0767"
+  integrity sha512-Ab3S6XuE/Q+flY96HXT0jOXcM4EAClYFnRGY5zsjRGNy6qCYrQsMffs7cV5Q9xejb35zxW5hf/guKw34kvIKsA==
+
+"d3-interpolate@1.2.0 - 2", d3-interpolate@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/d3-interpolate/-/d3-interpolate-2.0.1.tgz#98be499cfb8a3b94d4ff616900501a64abc91163"
+  integrity sha512-c5UhwwTs/yybcmTpAVqwSFl6vrQ8JZJoT5F7xNFK9pymv5C0Ymcc9/LIJHtYIggg/yS9YHw8i8O8tgb9pupjeQ==
+  dependencies:
+    d3-color "1 - 2"
+
+"d3-path@1 - 2":
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/d3-path/-/d3-path-2.0.0.tgz#55d86ac131a0548adae241eebfb56b4582dd09d8"
+  integrity sha512-ZwZQxKhBnv9yHaiWd6ZU4x5BtCQ7pXszEV9CU6kRgwIQVQGLMv1oiL4M+MK/n79sYzsj+gcgpPQSctJUsLN7fA==
+
+d3-scale@^3.0.0:
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/d3-scale/-/d3-scale-3.3.0.tgz#28c600b29f47e5b9cd2df9749c206727966203f3"
+  integrity sha512-1JGp44NQCt5d1g+Yy+GeOnZP7xHo0ii8zsQp6PGzd+C1/dl0KGsp9A7Mxwp+1D1o4unbTTxVdU/ZOIEBoeZPbQ==
+  dependencies:
+    d3-array "^2.3.0"
+    d3-format "1 - 2"
+    d3-interpolate "1.2.0 - 2"
+    d3-time "^2.1.1"
+    d3-time-format "2 - 3"
+
+d3-shape@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/d3-shape/-/d3-shape-2.1.0.tgz#3b6a82ccafbc45de55b57fcf956c584ded3b666f"
+  integrity sha512-PnjUqfM2PpskbSLTJvAzp2Wv4CZsnAgTfcVRTwW03QR3MkXF8Uo7B1y/lWkAsmbKwuecto++4NlsYcvYpXpTHA==
+  dependencies:
+    d3-path "1 - 2"
+
+"d3-time-format@2 - 3":
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/d3-time-format/-/d3-time-format-3.0.0.tgz#df8056c83659e01f20ac5da5fdeae7c08d5f1bb6"
+  integrity sha512-UXJh6EKsHBTjopVqZBhFysQcoXSv/5yLONZvkQ5Kk3qbwiUYkdX17Xa1PT6U1ZWXGGfB1ey5L8dKMlFq2DO0Ag==
+  dependencies:
+    d3-time "1 - 2"
+
+"d3-time@1 - 2", d3-time@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/d3-time/-/d3-time-2.1.1.tgz#e9d8a8a88691f4548e68ca085e5ff956724a6682"
+  integrity sha512-/eIQe/eR4kCQwq7yxi7z4c6qEXf2IYGcjoWB5OOQy4Tq9Uv39/947qlDcN2TLkiTzQWzvnsuYPB9TrWaNfipKQ==
+  dependencies:
+    d3-array "2"
+
 d@1, d@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/d/-/d-1.0.1.tgz#8698095372d58dbee346ffd0c7093f99f8f9eb5a"
@@ -6634,7 +6750,7 @@ decamelize@^1.1.1, decamelize@^1.2.0:
   resolved "https://registry.yarnpkg.com/decamelize/-/decamelize-1.2.0.tgz#f6534d15148269b20352e7bee26f501f9a191290"
   integrity sha512-z2S+W9X73hAUUki+N+9Za2lBlun89zigOyGrsax+KUQ6wKW4ZoWpEYBkGhQjwAjjDCkWxhY0VKEhk8wzY7F5cA==
 
-decimal.js-light@^2.5.1:
+decimal.js-light@^2.4.1, decimal.js-light@^2.5.1:
   version "2.5.1"
   resolved "https://registry.yarnpkg.com/decimal.js-light/-/decimal.js-light-2.5.1.tgz#134fd32508f19e208f4fb2f8dac0d2626a867934"
   integrity sha512-qIMFpTMZmny+MMIitAB6D7iVPEorVw6YQRWkvarTkT4tBeSLLiHzcwj6q0MmYSFCiVpiqPJTJEYIrpcPzVEIvg==
@@ -6901,6 +7017,13 @@ dom-converter@^0.2.0:
   dependencies:
     utila "~0.4"
 
+dom-helpers@^3.4.0:
+  version "3.4.0"
+  resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-3.4.0.tgz#e9b369700f959f62ecde5a6babde4bccd9169af8"
+  integrity sha512-LnuPJ+dwqKDIyotW1VzmOZ5TONUN7CwkCR5hrgawTUbkBGYdeoNLZo6nNfGkCrjtE1nXXaj7iMMpDa8/d9WoIA==
+  dependencies:
+    "@babel/runtime" "^7.1.2"
+
 dom-serializer@0:
   version "0.2.2"
   resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-0.2.2.tgz#1afb81f533717175d478655debc5e332d9f9bb51"
@@ -7726,7 +7849,7 @@ eventemitter3@4.0.4:
   resolved "https://registry.yarnpkg.com/eventemitter3/-/eventemitter3-4.0.4.tgz#b5463ace635a083d018bdc7c917b4c5f10a85384"
   integrity sha512-rlaVLnVxtxvoyLsQQFBx53YmXHDxRIzzTLbdfxqi4yocpSjAxXwkU0cScM5JgSKMqEhrZpnvQ2D9gjylR0AimQ==
 
-eventemitter3@^4.0.0, eventemitter3@^4.0.7:
+eventemitter3@^4.0.0, eventemitter3@^4.0.1, eventemitter3@^4.0.7:
   version "4.0.7"
   resolved "https://registry.yarnpkg.com/eventemitter3/-/eventemitter3-4.0.7.tgz#2de9b68f6528d5644ef5c59526a1b4a07306169f"
   integrity sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw==
@@ -7940,6 +8063,11 @@ fast-diff@^1.1.2:
   resolved "https://registry.yarnpkg.com/fast-diff/-/fast-diff-1.2.0.tgz#73ee11982d86caaf7959828d519cfe927fac5f03"
   integrity sha512-xJuoT5+L99XlZ8twedaRf6Ax2TgQVxvgZOYoPKqZufmJib0tL2tegPBOZb1pVNgIhlqDlA0eO0c3wBvQcmzx4w==
 
+fast-equals@^2.0.0:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/fast-equals/-/fast-equals-2.0.4.tgz#3add9410585e2d7364c2deeb6a707beadb24b927"
+  integrity sha512-caj/ZmjHljPrZtbzJ3kfH5ia/k4mTJe/qSiXAGzxZWRZgsgDV0cvNaQULqUX8t0/JVlzzEdYOwCN5DmzTxoD4w==
+
 fast-glob@^3.1.1, fast-glob@^3.2.9:
   version "3.2.11"
   resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-3.2.11.tgz#a1172ad95ceb8a16e20caa5c5e56480e5129c1d9"
@@ -8173,6 +8301,11 @@ follow-redirects@^1.0.0, follow-redirects@^1.14.0:
   resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.15.1.tgz#0ca6a452306c9b276e4d3127483e29575e207ad5"
   integrity sha512-yLAMQs+k0b2m7cVxpS1VKJVvoz7SS9Td1zss3XRwXj+ZDH00RJgnuLx7E44wx02kQLrdM3aOOy+FpzS7+8OizA==
 
+follow-redirects@^1.15.0:
+  version "1.15.2"
+  resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.15.2.tgz#b460864144ba63f2681096f274c4e57026da2c13"
+  integrity sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA==
+
 for-each@^0.3.3:
   version "0.3.3"
   resolved "https://registry.yarnpkg.com/for-each/-/for-each-0.3.3.tgz#69b447e88a0a5d32c3e7084f3f1710034b21376e"
@@ -8212,6 +8345,15 @@ form-data@^3.0.0:
     combined-stream "^1.0.8"
     mime-types "^2.1.12"
 
+form-data@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/form-data/-/form-data-4.0.0.tgz#93919daeaf361ee529584b9b31664dc12c9fa452"
+  integrity sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==
+  dependencies:
+    asynckit "^0.4.0"
+    combined-stream "^1.0.8"
+    mime-types "^2.1.12"
+
 form-data@~2.3.2:
   version "2.3.3"
   resolved "https://registry.yarnpkg.com/form-data/-/form-data-2.3.3.tgz#dcce52c05f644f298c6a7ab936bd724ceffbf3a6"
@@ -9240,6 +9382,11 @@ internal-slot@^1.0.3:
     has "^1.0.3"
     side-channel "^1.0.4"
 
+internmap@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/internmap/-/internmap-1.0.1.tgz#0017cc8a3b99605f0302f2b198d272e015e5df95"
+  integrity sha512-lDB5YccMydFBtasVtxnZ3MRBHuaoE8GKsppq+EchKL2U4nK/DmEpPHNH8MZe5HkMtpSiTSOZwfN0tzYjO/lJEw==
+
 invariant@^2.2.4:
   version "2.2.4"
   resolved "https://registry.yarnpkg.com/invariant/-/invariant-2.2.4.tgz#610f3c92c9359ce1db616e538008d23ff35158e6"
@@ -13038,7 +13185,7 @@ postcss-unique-selectors@^4.0.1:
     postcss "^7.0.0"
     uniqs "^2.0.0"
 
-postcss-value-parser@^3.0.0:
+postcss-value-parser@^3.0.0, postcss-value-parser@^3.3.0:
   version "3.3.1"
   resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz#9ff822547e2893213cf1c30efa51ac5fd1ba8281"
   integrity sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==
@@ -13580,7 +13727,7 @@ react-i18next@^11.10.0:
     html-escaper "^2.0.2"
     html-parse-stringify "^3.0.1"
 
-react-is@^16.12.0, react-is@^16.13.1, react-is@^16.6.0, react-is@^16.7.0:
+react-is@^16.10.2, react-is@^16.12.0, react-is@^16.13.1, react-is@^16.6.0, react-is@^16.7.0:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
@@ -13590,7 +13737,7 @@ react-is@^17.0.1, react-is@^17.0.2:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.2.tgz#e691d4a8e9c789365655539ab372762b0efb54f0"
   integrity sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==
 
-react-lifecycles-compat@^3.0.0:
+react-lifecycles-compat@^3.0.0, react-lifecycles-compat@^3.0.4:
   version "3.0.4"
   resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362"
   integrity sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==
@@ -13654,6 +13801,13 @@ react-remove-scroll@^2.4.3:
     use-callback-ref "^1.3.0"
     use-sidecar "^1.1.2"
 
+react-resize-detector@^7.1.2:
+  version "7.1.2"
+  resolved "https://registry.yarnpkg.com/react-resize-detector/-/react-resize-detector-7.1.2.tgz#8ef975dd8c3d56f9a5160ac382ef7136dcd2d86c"
+  integrity sha512-zXnPJ2m8+6oq9Nn8zsep/orts9vQv3elrpA+R8XTcW7DVVUJ9vwDwMXaBtykAYjMnkCIaOoK9vObyR7ZgFNlOw==
+  dependencies:
+    lodash "^4.17.21"
+
 react-router-dom@^5.0.0:
   version "5.3.3"
   resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-5.3.3.tgz#8779fc28e6691d07afcaf98406d3812fe6f11199"
@@ -13749,6 +13903,14 @@ react-scripts@^4.0.3:
   optionalDependencies:
     fsevents "^2.1.3"
 
+react-smooth@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/react-smooth/-/react-smooth-2.0.1.tgz#74c7309916d6ccca182c4b30c8992f179e6c5a05"
+  integrity sha512-Own9TA0GPPf3as4vSwFhDouVfXP15ie/wIHklhyKBH5AN6NFtdk0UpHBnonV11BtqDkAWlt40MOUc+5srmW7NA==
+  dependencies:
+    fast-equals "^2.0.0"
+    react-transition-group "2.9.0"
+
 react-spring@^8.0.27:
   version "8.0.27"
   resolved "https://registry.yarnpkg.com/react-spring/-/react-spring-8.0.27.tgz#97d4dee677f41e0b2adcb696f3839680a3aa356a"
@@ -13766,6 +13928,21 @@ react-style-singleton@^2.2.0:
     invariant "^2.2.4"
     tslib "^2.0.0"
 
+react-transition-group@2.9.0:
+  version "2.9.0"
+  resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-2.9.0.tgz#df9cdb025796211151a436c69a8f3b97b5b07c8d"
+  integrity sha512-+HzNTCHpeQyl4MJ/bdE0u6XRMe9+XG/+aL4mCxVN4DnPBQ0/5bfHWPDuOZUzYdMj94daZaZdCCc1Dzt9R/xSSg==
+  dependencies:
+    dom-helpers "^3.4.0"
+    loose-envify "^1.4.0"
+    prop-types "^15.6.2"
+    react-lifecycles-compat "^3.0.4"
+
+react-ts-tradingview-widgets@^1.0.14:
+  version "1.0.14"
+  resolved "https://registry.yarnpkg.com/react-ts-tradingview-widgets/-/react-ts-tradingview-widgets-1.0.14.tgz#bb82be565e721e0f535821f1095dfdaa72a0d3d8"
+  integrity sha512-gnpW/p2pi428nm5JshCjT69pJETT0eNJC7pI1juRwwNGNT67x8ZETTszK6vHgMnye3LUGiMJNXQSllzSbxTx/Q==
+
 react-use-gesture@^9.1.3:
   version "9.1.3"
   resolved "https://registry.yarnpkg.com/react-use-gesture/-/react-use-gesture-9.1.3.tgz#92bd143e4f58e69bd424514a5bfccba2a1d62ec0"
@@ -13873,6 +14050,33 @@ rebass@^4.0.7:
   dependencies:
     reflexbox "^4.0.6"
 
+recharts-scale@^0.4.4:
+  version "0.4.5"
+  resolved "https://registry.yarnpkg.com/recharts-scale/-/recharts-scale-0.4.5.tgz#0969271f14e732e642fcc5bd4ab270d6e87dd1d9"
+  integrity sha512-kivNFO+0OcUNu7jQquLXAxz1FIwZj8nrj+YkOKc5694NbjCvcT6aSZiIzNzd2Kul4o4rTto8QVR9lMNtxD4G1w==
+  dependencies:
+    decimal.js-light "^2.4.1"
+
+recharts@^2.2.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/recharts/-/recharts-2.2.0.tgz#1b8ba0799ff0feb96c87f009cd2ddd8cf5108817"
+  integrity sha512-/uRJ0oaESGyz//PgAzvrwXEhrKaNha1ELLysEMRklbnsddiVQsSNicP7DWiz8qFcyYXy3BrDqrUjiLiVRTSMtA==
+  dependencies:
+    "@types/d3-interpolate" "^2.0.0"
+    "@types/d3-scale" "^3.0.0"
+    "@types/d3-shape" "^2.0.0"
+    classnames "^2.2.5"
+    d3-interpolate "^2.0.0"
+    d3-scale "^3.0.0"
+    d3-shape "^2.0.0"
+    eventemitter3 "^4.0.1"
+    lodash "^4.17.19"
+    react-is "^16.10.2"
+    react-resize-detector "^7.1.2"
+    react-smooth "^2.0.1"
+    recharts-scale "^0.4.4"
+    reduce-css-calc "^2.1.8"
+
 recursive-readdir@2.2.2:
   version "2.2.2"
   resolved "https://registry.yarnpkg.com/recursive-readdir/-/recursive-readdir-2.2.2.tgz#9946fb3274e1628de6e36b2f6714953b4845094f"
@@ -13880,6 +14084,14 @@ recursive-readdir@2.2.2:
   dependencies:
     minimatch "3.0.4"
 
+reduce-css-calc@^2.1.8:
+  version "2.1.8"
+  resolved "https://registry.yarnpkg.com/reduce-css-calc/-/reduce-css-calc-2.1.8.tgz#7ef8761a28d614980dc0c982f772c93f7a99de03"
+  integrity sha512-8liAVezDmUcH+tdzoEGrhfbGcP7nOV4NkGE3a74+qqvE7nt9i4sKLGBuZNOnpI4WiGksiNPklZxva80061QiPg==
+  dependencies:
+    css-unit-converter "^1.1.1"
+    postcss-value-parser "^3.3.0"
+
 redux-localstorage-simple@^2.4.0:
   version "2.5.1"
   resolved "https://registry.yarnpkg.com/redux-localstorage-simple/-/redux-localstorage-simple-2.5.1.tgz#d01b1a03786d010ccce0ae6808c64a62dc041ef8"