More UI bug fixes (#1515)

* fix for error token map parsings

* update varios UI styles

* update padding on & amounts

package.json

@@ -20,7 +20,7 @@
     "@storybook/react": "^6.1.17",
     "@storybook/theming": "^6.1.17",
     "@styled-system/css": "^5.1.5",
-    "@typechain/ethers-v5": "^6.0.5",
+    "@typechain/ethers-v5": "^7.0.0",
     "@types/jest": "^25.2.1",
     "@types/lodash.flatmap": "^4.5.6",
     "@types/luxon": "^1.24.4",
@@ -104,7 +104,7 @@
     "start-server-and-test": "^1.11.0",
     "styled-components": "^4.2.0",
     "styled-system": "^5.1.5",
-    "typechain": "^4.0.3",
+    "typechain": "^5.0.0",
     "typescript": "^4.2.3",
     "ua-parser-js": "^0.7.28",
     "use-count-up": "^2.2.5",
@@ -117,8 +117,8 @@
   },
   "scripts": {
     "compile-contract-types": "yarn compile-external-abi-types && yarn compile-v3-contract-types",
-    "compile-external-abi-types": "npx typechain --target ethers-v5 --outDir src/abis/types './src/abis/**/*.json'",
-    "compile-v3-contract-types": "npx typechain --target ethers-v5 --outDir src/types/v3 './node_modules/@uniswap/?(v3-core|v3-periphery)/artifacts/contracts/**/*.json'",
+    "compile-external-abi-types": "npx typechain --target ethers-v5 --out-dir src/abis/types './src/abis/**/*.json'",
+    "compile-v3-contract-types": "npx typechain --target ethers-v5 --out-dir src/types/v3 './node_modules/@uniswap/?(v3-core|v3-periphery)/artifacts/contracts/**/*.json'",
     "build": "yarn compile-contract-types && react-scripts build",
     "integration-test": "start-server-and-test 'serve build -l 3000' http://localhost:3000 'cypress run'",
     "postinstall": "yarn compile-contract-types",

src/components/CurrencyInputPanel/FiatValue.tsx

@@ -3,6 +3,7 @@ import React, { useMemo } from 'react'
 import useTheme from '../../hooks/useTheme'
 import { TYPE } from '../../theme'
 import { warningSeverity } from '../../utils/prices'
+import HoverInlineText from 'components/HoverInlineText'
 
 export function FiatValue({
   fiatValue,
@@ -23,7 +24,8 @@ export function FiatValue({
 
   return (
     <TYPE.body fontSize={14} color={fiatValue ? theme.text2 : theme.text4}>
-      {fiatValue ? '~' : ''}${fiatValue ? Number(fiatValue?.toSignificant(6)).toLocaleString('en') : '-'}
+      {fiatValue ? '~' : ''}$
+      <HoverInlineText text={fiatValue ? Number(fiatValue?.toSignificant(6)).toLocaleString('en') : '-'} />{' '}
       {priceImpact ? (
         <span style={{ color: priceImpactColor }}> ({priceImpact.multiply(-100).toSignificant(3)}%)</span>
       ) : null}

src/components/HoverInlineText/index.tsx

@@ -2,7 +2,7 @@ import Tooltip from 'components/Tooltip'
 import React, { useState } from 'react'
 import styled from 'styled-components'
 
-const TextWrapper = styled.div<{ margin: boolean; link: boolean; fontSize?: string; adjustSize?: boolean }>`
+const TextWrapper = styled.span<{ margin: boolean; link: boolean; fontSize?: string; adjustSize?: boolean }>`
   position: relative;
   margin-left: ${({ margin }) => margin && '4px'};
   color: ${({ theme, link }) => (link ? theme.blue1 : theme.text1)};

src/components/PositionListItem/index.tsx

@@ -15,6 +15,7 @@ import { unwrappedToken } from 'utils/wrappedCurrency'
 import { DAI, USDC, USDT, WBTC } from '../../constants'
 import RangeBadge from 'components/Badge/RangeBadge'
 import { RowFixed } from 'components/Row'
+import HoverInlineText from 'components/HoverInlineText'
 
 const Row = styled(Link)`
   align-items: center;
@@ -244,8 +245,10 @@ export default function PositionListItem({ positionDetails }: PositionListItemPr
           >
             <RangeText>
               <ExtentsText>Min: </ExtentsText>
-              {formatPrice(priceLower, 5)} {manuallyInverted ? currencyQuote?.symbol : currencyBase?.symbol} {' per '}{' '}
-              {manuallyInverted ? currencyBase?.symbol : currencyQuote?.symbol}
+              {formatPrice(priceLower, 5)}{' '}
+              <HoverInlineText text={manuallyInverted ? currencyQuote?.symbol ?? '' : currencyBase?.symbol ?? ''} />{' '}
+              {' per '}{' '}
+              <HoverInlineText text={manuallyInverted ? currencyBase?.symbol ?? '' : currencyQuote?.symbol ?? ''} />
             </RangeText>{' '}
             <HideSmall>
               <DoubleArrow>⟷</DoubleArrow>{' '}
@@ -255,8 +258,13 @@ export default function PositionListItem({ positionDetails }: PositionListItemPr
             </SmallOnly>
             <RangeText>
               <ExtentsText>Max:</ExtentsText>
-              {formatPrice(priceUpper, 5)} {manuallyInverted ? currencyQuote?.symbol : currencyBase?.symbol} {' per '}{' '}
-              {manuallyInverted ? currencyBase?.symbol : currencyQuote?.symbol}
+              {formatPrice(priceUpper, 5)}{' '}
+              <HoverInlineText text={manuallyInverted ? currencyQuote?.symbol ?? '' : currencyBase?.symbol ?? ''} />{' '}
+              {' per '}{' '}
+              <HoverInlineText
+                maxCharacters={10}
+                text={manuallyInverted ? currencyBase?.symbol ?? '' : currencyQuote?.symbol ?? ''}
+              />
             </RangeText>{' '}
           </RangeLineItem>
         </>

src/components/Tooltip/index.tsx

@@ -5,8 +5,8 @@ import Popover, { PopoverProps } from '../Popover'
 const TooltipContainer = styled.div`
   width: 256px;
   padding: 0.6rem 1rem;
-  /* line-height: 150%; */
   font-weight: 400;
+  word-break: break-word;
 `
 
 interface TooltipProps extends Omit<PopoverProps, 'content'> {

src/pages/Pool/CTACards.tsx

@@ -109,6 +109,7 @@ const ResponsiveColumn = styled(AutoColumn)`
 `
 
 const StyledImage = styled.img`
+  height: 114px;
   margin-top: -28px;
   ${({ theme }) => theme.mediaWidth.upToMedium`
     height: 80px;

yarn.lock

@@ -3410,10 +3410,10 @@
     lz-string "^1.4.4"
     pretty-format "^26.6.2"
 
-"@typechain/ethers-v5@^6.0.5":
-  version "6.0.5"
-  resolved "https://registry.yarnpkg.com/@typechain/ethers-v5/-/ethers-v5-6.0.5.tgz#39bbf9baadd0e8d9efad9d16c60152b7cd9a467b"
-  integrity sha512-KJh+EWuxmX1a17fQWS1ba8DCYcqK7UpdbqMZZwyfiv9FQfn8ZQJX17anbkCMOSU8TV3EvRuJ/vFEKGzKnpkO8g==
+"@typechain/ethers-v5@^7.0.0":
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/@typechain/ethers-v5/-/ethers-v5-7.0.0.tgz#cadb5262b3827d1616c21f4ba86a36a71269bd7e"
+  integrity sha512-ykNaqYcQ1yC928x8bogL9LECUg0osfqqHCKBhP7qbGlNfvC/bvTiIfnjQUgXUYWEJRx5r0Y78vcKMo8F3sJTBA==
 
 "@types/anymatch@*":
   version "1.3.1"
@@ -3638,13 +3638,6 @@
   resolved "https://registry.yarnpkg.com/@types/minimatch/-/minimatch-3.0.4.tgz#f0ec25dbf2f0e4b18647313ac031134ca5b24b21"
   integrity sha512-1z8k4wzFnNjVK/tlxvrWuK5WMt6mydWWP7+zvH5eFep4oj+UkrfiJTRtjCeBXNpwaA/FYqqtb4/QS4ianFpIRA==
 
-"@types/mkdirp@^0.5.2":
-  version "0.5.2"
-  resolved "https://registry.yarnpkg.com/@types/mkdirp/-/mkdirp-0.5.2.tgz#503aacfe5cc2703d5484326b1b27efa67a339c1f"
-  integrity sha512-U5icWpv7YnZYGsN4/cmh3WD2onMY0aJIiTE6+51TwJCttdHvtCYmkBNOobHlXwrJRL0nkH9jH4kD+1FAdMN4Tg==
-  dependencies:
-    "@types/node" "*"
-
 "@types/multicodec@^1.0.0":
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/@types/multicodec/-/multicodec-1.0.0.tgz#9c9c2df84ea5006c65a048873600f71c4565a397"
@@ -3813,7 +3806,7 @@
     "@types/styled-system" "*"
     "@types/styled-system__css" "*"
 
-"@types/resolve@0.0.8", "@types/resolve@^0.0.8":
+"@types/resolve@0.0.8":
   version "0.0.8"
   resolved "https://registry.yarnpkg.com/@types/resolve/-/resolve-0.0.8.tgz#f26074d238e02659e323ce1a13d041eee280e194"
   integrity sha512-auApPaJf3NPfe18hSoJkp8EbZzer2ISk7o8mCC3M9he/a04+gbMF97NkpD2S8riMGvm4BMRI59/SZQSaLTKpsQ==
@@ -18099,11 +18092,6 @@ ts-dedent@^2.0.0:
   resolved "https://registry.yarnpkg.com/ts-dedent/-/ts-dedent-2.1.1.tgz#6dd56870bb5493895171334fa5d7e929107e5bbc"
   integrity sha512-riHuwnzAUCfdIeTBNUq7+Yj+ANnrMXo/7+Z74dIdudS7ys2k8aSGMzpJRMFDF7CLwUTbtvi1ZZff/Wl+XxmqIA==
 
-ts-essentials@^1.0.0:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/ts-essentials/-/ts-essentials-1.0.4.tgz#ce3b5dade5f5d97cf69889c11bf7d2da8555b15a"
-  integrity sha512-q3N1xS4vZpRouhYHDPwO0bDW3EZ6SK9CrrDHxi/D6BPReSjpVgWIOpLS2o0gSBZm+7q/wyKp6RVM1AeeW7uyfQ==
-
 ts-essentials@^2.0.3:
   version "2.0.12"
   resolved "https://registry.yarnpkg.com/ts-essentials/-/ts-essentials-2.0.12.tgz#c9303f3d74f75fa7528c3d49b80e089ab09d8745"
@@ -18114,21 +18102,6 @@ ts-essentials@^7.0.1:
   resolved "https://registry.yarnpkg.com/ts-essentials/-/ts-essentials-7.0.1.tgz#d205508cae0cdadfb73c89503140cf2228389e2d"
   integrity sha512-8lwh3QJtIc1UWhkQtr9XuksXu3O0YQdEE5g79guDfhCaU1FWTDIEDZ1ZSx4HTHUmlJZ8L812j3BZQ4a0aOUkSA==
 
-ts-generator@^0.1.1:
-  version "0.1.1"
-  resolved "https://registry.yarnpkg.com/ts-generator/-/ts-generator-0.1.1.tgz#af46f2fb88a6db1f9785977e9590e7bcd79220ab"
-  integrity sha512-N+ahhZxTLYu1HNTQetwWcx3so8hcYbkKBHTr4b4/YgObFTIKkOSSsaa+nal12w8mfrJAyzJfETXawbNjSfP2gQ==
-  dependencies:
-    "@types/mkdirp" "^0.5.2"
-    "@types/prettier" "^2.1.1"
-    "@types/resolve" "^0.0.8"
-    chalk "^2.4.1"
-    glob "^7.1.2"
-    mkdirp "^0.5.1"
-    prettier "^2.1.2"
-    resolve "^1.8.1"
-    ts-essentials "^1.0.0"
-
 ts-pnp@1.2.0, ts-pnp@^1.1.6:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/ts-pnp/-/ts-pnp-1.2.0.tgz#a500ad084b0798f1c3071af391e65912c86bca92"
@@ -18255,18 +18228,20 @@ type@^2.0.0:
   resolved "https://registry.yarnpkg.com/type/-/type-2.5.0.tgz#0a2e78c2e77907b252abe5f298c1b01c63f0db3d"
   integrity sha512-180WMDQaIMm3+7hGXWf12GtdniDEy7nYcyFMKJn/eZz/6tSLXrUN9V0wKSbMjej0I1WHWbpREDEKHtqPQa9NNw==
 
-typechain@^4.0.3:
-  version "4.0.3"
-  resolved "https://registry.yarnpkg.com/typechain/-/typechain-4.0.3.tgz#e8fcd6c984676858c64eeeb155ea783a10b73779"
-  integrity sha512-tmoHQeXZWHxIdeLK+i6dU0CU0vOd9Cndr3jFTZIMzak5/YpFZ8XoiYpTZcngygGBqZo+Z1EUmttLbW9KkFZLgQ==
+typechain@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/typechain/-/typechain-5.0.0.tgz#730e5fb4709964eed3db03be332b38ba6eaa1d9f"
+  integrity sha512-Ko2/8co0FUmPUkaXPcb8PC3ncWa5P72nvkiNMgcomd4OAInltJlITF0kcW2cZmI2sFkvmaHV5TZmCnOHgo+i5Q==
   dependencies:
+    "@types/prettier" "^2.1.1"
     command-line-args "^4.0.7"
     debug "^4.1.1"
     fs-extra "^7.0.0"
+    glob "^7.1.6"
     js-sha3 "^0.8.0"
     lodash "^4.17.15"
+    prettier "^2.1.2"
     ts-essentials "^7.0.1"
-    ts-generator "^0.1.1"
 
 typedarray-to-buffer@3.1.5, typedarray-to-buffer@^3.1.5:
   version "3.1.5"