From 817ea44e8d51cfb1cd7db9e23c03d9135a0e8d32 Mon Sep 17 00:00:00 2001
From: lynn <41491154+lynnshaoyu@users.noreply.github.com>
Date: Thu, 14 Jul 2022 10:15:46 -0400
Subject: [PATCH] fix: update styled-components in package.json to latest to
 remove react invalid hook call warnings (#4103)

* fix warning vig found by updating styled-components

* revert unnecessary yarn.lock changes

* reduce unnecessary changes

* dedup

* manual fix and dedup of yarn.lock

* manually dedup @emotion/is-prop-valid

* update snapshot tests
---
 package.json                                  |  4 +-
 .../RoutingDiagram.test.tsx.snap              | 60 +++++++++----------
 .../__snapshots__/index.test.tsx.snap         | 18 +++---
 yarn.lock                                     | 24 ++++----
 4 files changed, 53 insertions(+), 53 deletions(-)

diff --git a/package.json b/package.json
index e8350a8920..800e100469 100644
--- a/package.json
+++ b/package.json
@@ -82,7 +82,7 @@
     "@types/react-virtualized-auto-sizer": "^1.0.0",
     "@types/react-window": "^1.8.2",
     "@types/rebass": "^4.0.7",
-    "@types/styled-components": "^5.1.0",
+    "@types/styled-components": "^5.1.25",
     "@types/testing-library__cypress": "^5.0.5",
     "@types/ua-parser-js": "^0.7.35",
     "@types/wcag-contrast": "^3.0.0",
@@ -186,7 +186,7 @@
     "redux": "^4.1.2",
     "redux-localstorage-simple": "^2.3.1",
     "setimmediate": "^1.0.5",
-    "styled-components": "^5.3.0",
+    "styled-components": "^5.3.5",
     "tiny-invariant": "^1.2.0",
     "ua-parser-js": "^0.7.28",
     "use-count-up": "^2.2.5",
diff --git a/src/components/RoutingDiagram/__snapshots__/RoutingDiagram.test.tsx.snap b/src/components/RoutingDiagram/__snapshots__/RoutingDiagram.test.tsx.snap
index 81e81dce55..500b934fca 100644
--- a/src/components/RoutingDiagram/__snapshots__/RoutingDiagram.test.tsx.snap
+++ b/src/components/RoutingDiagram/__snapshots__/RoutingDiagram.test.tsx.snap
@@ -3,45 +3,45 @@
 exports[`renders multi route 1`] = `
 <DocumentFragment>
   <div
-    class="RoutingDiagram__Wrapper-sc-i2tbb-0 ivndgC css-vurnku"
+    class="RoutingDiagram__Wrapper-sc-i2tbb-0 jRJomr css-vurnku"
   >
     <div
-      class="sc-bdnxRM Row-sc-u7azg8-0 RoutingDiagram__RouteContainerRow-sc-i2tbb-1 lmTMKd hLLNig hDkZVB"
+      class="sc-bczRLJ Row-sc-u7azg8-0 RoutingDiagram__RouteContainerRow-sc-i2tbb-1 jITePI ivqEIR HOxWI"
     >
       CurrencyLogo currency=USDC
       <div
-        class="sc-bdnxRM Row-sc-u7azg8-0 RoutingDiagram__RouteRow-sc-i2tbb-2 lmTMKd hLLNig hUDqOH"
+        class="sc-bczRLJ Row-sc-u7azg8-0 RoutingDiagram__RouteRow-sc-i2tbb-2 jITePI ivqEIR brWAbq"
       >
         <div
-          class="RoutingDiagram__DottedLine-sc-i2tbb-4 cKqYfU"
+          class="RoutingDiagram__DottedLine-sc-i2tbb-4 gOYlzZ"
         >
           <svg
-            class="RoutingDiagram__DotColor-sc-i2tbb-5 fhSaBA"
+            class="RoutingDiagram__DotColor-sc-i2tbb-5 LYDVx"
           >
             dot_line.svg
           </svg>
         </div>
         <div
-          class="Badge-sc-3epor3-0 RoutingDiagram__OpaqueBadge-sc-i2tbb-6 knpfHF gGARxH"
+          class="Badge-sc-3epor3-0 RoutingDiagram__OpaqueBadge-sc-i2tbb-6 dwGGVA ghYikW"
         >
           <div
-            class="Badge-sc-3epor3-0 RoutingDiagram__ProtocolBadge-sc-i2tbb-7 knpfHF lbdUti"
+            class="Badge-sc-3epor3-0 RoutingDiagram__ProtocolBadge-sc-i2tbb-7 dwGGVA gQUbNf"
           >
             <div
-              class="theme__TextWrapper-sc-5lu8um-0 chxxqs RoutingDiagram__BadgeText-sc-i2tbb-8 ijjHig css-15li2d9"
+              class="theme__TextWrapper-sc-5lu8um-0 hKWSSx RoutingDiagram__BadgeText-sc-i2tbb-8 gTSykl css-15li2d9"
             >
               V2
             </div>
           </div>
           <div
-            class="theme__TextWrapper-sc-5lu8um-0 chxxqs RoutingDiagram__BadgeText-sc-i2tbb-8 ijjHig css-1aekuku"
+            class="theme__TextWrapper-sc-5lu8um-0 hKWSSx RoutingDiagram__BadgeText-sc-i2tbb-8 gTSykl css-1aekuku"
             style="min-width: auto;"
           >
             75%
           </div>
         </div>
         <div
-          class="sc-bdnxRM Row-sc-u7azg8-0 Row__AutoRow-sc-u7azg8-3 iqvZFe hLLNig cUhARX"
+          class="sc-bczRLJ Row-sc-u7azg8-0 Row__AutoRow-sc-u7azg8-3 cYXLjH ivqEIR bzmsdm"
           style="justify-content: space-evenly; z-index: 2;"
           width="100%"
         >
@@ -51,42 +51,42 @@ exports[`renders multi route 1`] = `
       CurrencyLogo currency=DAI
     </div>
     <div
-      class="sc-bdnxRM Row-sc-u7azg8-0 RoutingDiagram__RouteContainerRow-sc-i2tbb-1 lmTMKd hLLNig hDkZVB"
+      class="sc-bczRLJ Row-sc-u7azg8-0 RoutingDiagram__RouteContainerRow-sc-i2tbb-1 jITePI ivqEIR HOxWI"
     >
       CurrencyLogo currency=USDC
       <div
-        class="sc-bdnxRM Row-sc-u7azg8-0 RoutingDiagram__RouteRow-sc-i2tbb-2 lmTMKd hLLNig hUDqOH"
+        class="sc-bczRLJ Row-sc-u7azg8-0 RoutingDiagram__RouteRow-sc-i2tbb-2 jITePI ivqEIR brWAbq"
       >
         <div
-          class="RoutingDiagram__DottedLine-sc-i2tbb-4 cKqYfU"
+          class="RoutingDiagram__DottedLine-sc-i2tbb-4 gOYlzZ"
         >
           <svg
-            class="RoutingDiagram__DotColor-sc-i2tbb-5 fhSaBA"
+            class="RoutingDiagram__DotColor-sc-i2tbb-5 LYDVx"
           >
             dot_line.svg
           </svg>
         </div>
         <div
-          class="Badge-sc-3epor3-0 RoutingDiagram__OpaqueBadge-sc-i2tbb-6 knpfHF gGARxH"
+          class="Badge-sc-3epor3-0 RoutingDiagram__OpaqueBadge-sc-i2tbb-6 dwGGVA ghYikW"
         >
           <div
-            class="Badge-sc-3epor3-0 RoutingDiagram__ProtocolBadge-sc-i2tbb-7 knpfHF lbdUti"
+            class="Badge-sc-3epor3-0 RoutingDiagram__ProtocolBadge-sc-i2tbb-7 dwGGVA gQUbNf"
           >
             <div
-              class="theme__TextWrapper-sc-5lu8um-0 chxxqs RoutingDiagram__BadgeText-sc-i2tbb-8 ijjHig css-15li2d9"
+              class="theme__TextWrapper-sc-5lu8um-0 hKWSSx RoutingDiagram__BadgeText-sc-i2tbb-8 gTSykl css-15li2d9"
             >
               V3
             </div>
           </div>
           <div
-            class="theme__TextWrapper-sc-5lu8um-0 chxxqs RoutingDiagram__BadgeText-sc-i2tbb-8 ijjHig css-1aekuku"
+            class="theme__TextWrapper-sc-5lu8um-0 hKWSSx RoutingDiagram__BadgeText-sc-i2tbb-8 gTSykl css-1aekuku"
             style="min-width: auto;"
           >
             25%
           </div>
         </div>
         <div
-          class="sc-bdnxRM Row-sc-u7azg8-0 Row__AutoRow-sc-u7azg8-3 iqvZFe hLLNig cUhARX"
+          class="sc-bczRLJ Row-sc-u7azg8-0 Row__AutoRow-sc-u7azg8-3 cYXLjH ivqEIR bzmsdm"
           style="justify-content: space-evenly; z-index: 2;"
           width="100%"
         >
@@ -102,45 +102,45 @@ exports[`renders multi route 1`] = `
 exports[`renders single route 1`] = `
 <DocumentFragment>
   <div
-    class="RoutingDiagram__Wrapper-sc-i2tbb-0 ivndgC css-vurnku"
+    class="RoutingDiagram__Wrapper-sc-i2tbb-0 jRJomr css-vurnku"
   >
     <div
-      class="sc-bdnxRM Row-sc-u7azg8-0 RoutingDiagram__RouteContainerRow-sc-i2tbb-1 lmTMKd hLLNig hDkZVB"
+      class="sc-bczRLJ Row-sc-u7azg8-0 RoutingDiagram__RouteContainerRow-sc-i2tbb-1 jITePI ivqEIR HOxWI"
     >
       CurrencyLogo currency=USDC
       <div
-        class="sc-bdnxRM Row-sc-u7azg8-0 RoutingDiagram__RouteRow-sc-i2tbb-2 lmTMKd hLLNig hUDqOH"
+        class="sc-bczRLJ Row-sc-u7azg8-0 RoutingDiagram__RouteRow-sc-i2tbb-2 jITePI ivqEIR brWAbq"
       >
         <div
-          class="RoutingDiagram__DottedLine-sc-i2tbb-4 cKqYfU"
+          class="RoutingDiagram__DottedLine-sc-i2tbb-4 gOYlzZ"
         >
           <svg
-            class="RoutingDiagram__DotColor-sc-i2tbb-5 fhSaBA"
+            class="RoutingDiagram__DotColor-sc-i2tbb-5 LYDVx"
           >
             dot_line.svg
           </svg>
         </div>
         <div
-          class="Badge-sc-3epor3-0 RoutingDiagram__OpaqueBadge-sc-i2tbb-6 knpfHF gGARxH"
+          class="Badge-sc-3epor3-0 RoutingDiagram__OpaqueBadge-sc-i2tbb-6 dwGGVA ghYikW"
         >
           <div
-            class="Badge-sc-3epor3-0 RoutingDiagram__ProtocolBadge-sc-i2tbb-7 knpfHF lbdUti"
+            class="Badge-sc-3epor3-0 RoutingDiagram__ProtocolBadge-sc-i2tbb-7 dwGGVA gQUbNf"
           >
             <div
-              class="theme__TextWrapper-sc-5lu8um-0 chxxqs RoutingDiagram__BadgeText-sc-i2tbb-8 ijjHig css-15li2d9"
+              class="theme__TextWrapper-sc-5lu8um-0 hKWSSx RoutingDiagram__BadgeText-sc-i2tbb-8 gTSykl css-15li2d9"
             >
               V3
             </div>
           </div>
           <div
-            class="theme__TextWrapper-sc-5lu8um-0 chxxqs RoutingDiagram__BadgeText-sc-i2tbb-8 ijjHig css-1aekuku"
+            class="theme__TextWrapper-sc-5lu8um-0 hKWSSx RoutingDiagram__BadgeText-sc-i2tbb-8 gTSykl css-1aekuku"
             style="min-width: auto;"
           >
             100%
           </div>
         </div>
         <div
-          class="sc-bdnxRM Row-sc-u7azg8-0 Row__AutoRow-sc-u7azg8-3 iqvZFe hLLNig cUhARX"
+          class="sc-bczRLJ Row-sc-u7azg8-0 Row__AutoRow-sc-u7azg8-3 cYXLjH ivqEIR bzmsdm"
           style="justify-content: space-evenly; z-index: 2;"
           width="100%"
         >
@@ -156,7 +156,7 @@ exports[`renders single route 1`] = `
 exports[`renders when no routes are provided 1`] = `
 <DocumentFragment>
   <div
-    class="RoutingDiagram__Wrapper-sc-i2tbb-0 ivndgC css-vurnku"
+    class="RoutingDiagram__Wrapper-sc-i2tbb-0 jRJomr css-vurnku"
   />
 </DocumentFragment>
 `;
diff --git a/src/components/SearchModal/CurrencyList/__snapshots__/index.test.tsx.snap b/src/components/SearchModal/CurrencyList/__snapshots__/index.test.tsx.snap
index 3ccc9a7a26..4f80bfb994 100644
--- a/src/components/SearchModal/CurrencyList/__snapshots__/index.test.tsx.snap
+++ b/src/components/SearchModal/CurrencyList/__snapshots__/index.test.tsx.snap
@@ -9,13 +9,13 @@ exports[`renders currency rows correctly when currencies list is non-empty 1`] =
       style="height: 168px; width: 100%;"
     >
       <div
-        class="sc-bdnxRM Row-sc-u7azg8-0 Row__RowBetween-sc-u7azg8-1 styleds__MenuItem-sc-muzgnq-3 lmTMKd hLLNig hzJkYd firMKT token-item-0x6B175474E89094C44Da98b954EedeAC495271d0F"
+        class="sc-bczRLJ Row-sc-u7azg8-0 Row__RowBetween-sc-u7azg8-1 styleds__MenuItem-sc-muzgnq-3 jITePI ivqEIR ggnFPk eWoDRm token-item-0x6B175474E89094C44Da98b954EedeAC495271d0F"
         style="position: absolute; left: 0px; top: 0px; height: 56px; width: 100%;"
         tabindex="0"
       >
         CurrencyLogo currency=DAI
         <div
-          class="Column-sc-1r2yyln-0 cYEAJI"
+          class="Column-sc-1r2yyln-0 fYuTXx"
         >
           <div
             class="css-8mokm4"
@@ -24,7 +24,7 @@ exports[`renders currency rows correctly when currencies list is non-empty 1`] =
             DAI
           </div>
           <div
-            class="theme__TextWrapper-sc-5lu8um-0 gVIOIC css-165qfk5"
+            class="theme__TextWrapper-sc-5lu8um-0 kXbKKr css-165qfk5"
           >
             Dai Stablecoin
           </div>
@@ -32,13 +32,13 @@ exports[`renders currency rows correctly when currencies list is non-empty 1`] =
         <span />
       </div>
       <div
-        class="sc-bdnxRM Row-sc-u7azg8-0 Row__RowBetween-sc-u7azg8-1 styleds__MenuItem-sc-muzgnq-3 lmTMKd hLLNig hzJkYd firMKT token-item-0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48"
+        class="sc-bczRLJ Row-sc-u7azg8-0 Row__RowBetween-sc-u7azg8-1 styleds__MenuItem-sc-muzgnq-3 jITePI ivqEIR ggnFPk eWoDRm token-item-0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48"
         style="position: absolute; left: 0px; top: 56px; height: 56px; width: 100%;"
         tabindex="0"
       >
         CurrencyLogo currency=USDC
         <div
-          class="Column-sc-1r2yyln-0 cYEAJI"
+          class="Column-sc-1r2yyln-0 fYuTXx"
         >
           <div
             class="css-8mokm4"
@@ -47,7 +47,7 @@ exports[`renders currency rows correctly when currencies list is non-empty 1`] =
             USDC
           </div>
           <div
-            class="theme__TextWrapper-sc-5lu8um-0 gVIOIC css-165qfk5"
+            class="theme__TextWrapper-sc-5lu8um-0 kXbKKr css-165qfk5"
           >
             USD//C
           </div>
@@ -55,13 +55,13 @@ exports[`renders currency rows correctly when currencies list is non-empty 1`] =
         <span />
       </div>
       <div
-        class="sc-bdnxRM Row-sc-u7azg8-0 Row__RowBetween-sc-u7azg8-1 styleds__MenuItem-sc-muzgnq-3 lmTMKd hLLNig hzJkYd firMKT token-item-0x2260FAC5E5542a773Aa44fBCfeDf7C193bc2C599"
+        class="sc-bczRLJ Row-sc-u7azg8-0 Row__RowBetween-sc-u7azg8-1 styleds__MenuItem-sc-muzgnq-3 jITePI ivqEIR ggnFPk eWoDRm token-item-0x2260FAC5E5542a773Aa44fBCfeDf7C193bc2C599"
         style="position: absolute; left: 0px; top: 112px; height: 56px; width: 100%;"
         tabindex="0"
       >
         CurrencyLogo currency=WBTC
         <div
-          class="Column-sc-1r2yyln-0 cYEAJI"
+          class="Column-sc-1r2yyln-0 fYuTXx"
         >
           <div
             class="css-8mokm4"
@@ -70,7 +70,7 @@ exports[`renders currency rows correctly when currencies list is non-empty 1`] =
             WBTC
           </div>
           <div
-            class="theme__TextWrapper-sc-5lu8um-0 gVIOIC css-165qfk5"
+            class="theme__TextWrapper-sc-5lu8um-0 kXbKKr css-165qfk5"
           >
             Wrapped BTC
           </div>
diff --git a/yarn.lock b/yarn.lock
index 0e08018a4e..b55282ff1e 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1201,14 +1201,14 @@
   resolved "https://registry.npmjs.org/@emotion/hash/-/hash-0.8.0.tgz"
   integrity sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow==
 
-"@emotion/is-prop-valid@0.8.8", "@emotion/is-prop-valid@^0.8.1", "@emotion/is-prop-valid@^0.8.8":
+"@emotion/is-prop-valid@0.8.8":
   version "0.8.8"
   resolved "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz"
   integrity sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==
   dependencies:
     "@emotion/memoize" "0.7.4"
 
-"@emotion/memoize@0.7.4", "@emotion/memoize@^0.7.1":
+"@emotion/memoize@0.7.4":
   version "0.7.4"
   resolved "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.4.tgz"
   integrity sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==
@@ -3198,8 +3198,8 @@
   resolved "https://registry.npmjs.org/@styled-system/should-forward-prop/-/should-forward-prop-5.1.5.tgz"
   integrity sha512-+rPRomgCGYnUIaFabDoOgpSDc4UUJ1KsmlnzcEp0tu5lFrBQKgZclSo18Z1URhaZm7a6agGtS5Xif7tuC2s52Q==
   dependencies:
-    "@emotion/is-prop-valid" "^0.8.1"
-    "@emotion/memoize" "^0.7.1"
+    "@emotion/is-prop-valid" "^0.8.8"
+    "@emotion/memoize" "^0.7.4"
     styled-system "^5.1.5"
 
 "@styled-system/space@^5.1.2":
@@ -4026,10 +4026,10 @@
   resolved "https://registry.yarnpkg.com/@types/stats-lite/-/stats-lite-2.2.0.tgz#bc8190bf9dfa1e16b89eaa2b433c99dff0804de9"
   integrity sha512-YV6SS4QC+pbzqjMIV8qVSTDOOazgKBLTVaN+7PfuxELjz/eyzc20KwDVGPrbHt2OcYMA7K2ezLB45Cp6DpNOSQ==
 
-"@types/styled-components@*", "@types/styled-components@^5.1.0":
-  version "5.1.13"
-  resolved "https://registry.yarnpkg.com/@types/styled-components/-/styled-components-5.1.13.tgz#a2906b68c2c6c811996216983b74ca02e22c6c34"
-  integrity sha512-nIIsiQ+Ag/4xnYf9mhzO3zIZ/zOmKN6HImEZifKh2TLibYz8OudzJbvzDu1uvMfX/+bs0B0RDPB2OIcbrrptVQ==
+"@types/styled-components@*", "@types/styled-components@^5.1.25":
+  version "5.1.25"
+  resolved "https://registry.yarnpkg.com/@types/styled-components/-/styled-components-5.1.25.tgz#0177c4ab5fa7c6ed0565d36f597393dae3f380ad"
+  integrity sha512-fgwl+0Pa8pdkwXRoVPP9JbqF0Ivo9llnmsm+7TCI330kbPIFd9qv1Lrhr37shf4tnxCOSu+/IgqM7uJXLWZZNQ==
   dependencies:
     "@types/hoist-non-react-statics" "*"
     "@types/react" "*"
@@ -16832,10 +16832,10 @@ style-loader@1.3.0:
     loader-utils "^2.0.0"
     schema-utils "^2.7.0"
 
-styled-components@^5.3.0:
-  version "5.3.0"
-  resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-5.3.0.tgz#e47c3d3e9ddfff539f118a3dd0fd4f8f4fb25727"
-  integrity sha512-bPJKwZCHjJPf/hwTJl6TbkSZg/3evha+XPEizrZUGb535jLImwDUdjTNxXqjjaASt2M4qO4AVfoHJNe3XB/tpQ==
+styled-components@^5.3.5:
+  version "5.3.5"
+  resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-5.3.5.tgz#a750a398d01f1ca73af16a241dec3da6deae5ec4"
+  integrity sha512-ndETJ9RKaaL6q41B69WudeqLzOpY1A/ET/glXkNZ2T7dPjPqpPCXXQjDFYZWwNnE5co0wX+gTCqx9mfxTmSIPg==
   dependencies:
     "@babel/helper-module-imports" "^7.0.0"
     "@babel/traverse" "^7.4.5"