Merge branch 'releases/v1.44.0'

shapeshift · Jul 20, 2022 · a90d156 · a90d156
2 parents 42896e5 + 843c5c4
commit a90d156
Show file tree

Hide file tree

Showing 101 changed files with 2,349 additions and 2,529 deletions.
diff --git a/.storybook/main.js b/.storybook/main.js
@@ -10,7 +10,6 @@ module.exports = {
     "@storybook/addon-links",
     "@storybook/addon-essentials",
     "@storybook/preset-create-react-app",
-    "@snek-at/storybook-addon-chakra-ui",
     "storybook-dark-mode",
   ],
   webpackFinal: (config) => {

diff --git a/cypress/e2e/login_spec.ts b/cypress/e2e/login_spec.ts
@@ -64,7 +64,7 @@ describe('The Dashboard', () => {
     cy.getBySel('native-saved-wallet').should('have.length', 1)
     cy.getBySel('native-saved-wallet-name').contains('cypress-test')
     cy.getBySel('native-saved-wallet-button').click()
-    cy.getBySel('wallet-password-input').type(password)
+    cy.getBySel('wallet-password-input').should('be.visible').type(password)
     cy.getBySel('wallet-password-submit-button').click()
     cy.url().should('equal', `${baseUrl}dashboard`)
   })

diff --git a/docs/testing.md b/docs/testing.md
@@ -5,7 +5,7 @@ Bug fixes and features should always come with tests.
 ### Testing Tools
 
 - Unit - test both frontend code in isolation
-  - [jest](https://jestjs.io/docs/getting-started), [react testing library](https://testing-library.com/docs/react-testing-library/intro/), [react testing library hooks](https://github.com/testing-library/react-hooks-testing-library#example)
+  - [jest](https://jestjs.io/docs/getting-started), [react testing library](https://testing-library.com/docs/react-testing-library/intro/), [react testing library](https://testing-library.com/docs/react-testing-library/api/#renderhook)
 - E2E - to test the full stack completely on critical flows
   - [cypress](https://docs.cypress.io/guides/core-concepts/writing-and-organizing-tests)
     - When selecting DOM elements [use `data-test-*` instead of using a `class` or `id`](https://docs.cypress.io/guides/references/best-practices#Selecting-Elements).
@@ -52,7 +52,7 @@ describe('isLoggedIn', () => {
 This is an example of how we structure our hook tests.
 
 ```js
-import { renderHook } from '@testing-library/react-hooks'
+import { renderHook } from '@testing-library/react'
 import { useIsComponentMounted } from './useIsComponentMounted'
 
 const setup = () => {

diff --git a/package.json b/package.json
@@ -74,18 +74,20 @@
     }
   },
   "dependencies": {
-    "@chakra-ui/icons": "^1.1.7",
-    "@chakra-ui/react": "^1.8.8",
+    "@chakra-ui/icons": "^2.0.2",
+    "@chakra-ui/react": "^2.2.1",
+    "@chakra-ui/system": "^2.1.3",
+    "@chakra-ui/tag": "^2.0.2",
     "@coinbase/cbpay-js": "^1.0.1",
-    "@emotion/react": "^11.8.2",
-    "@emotion/styled": "^11.8.1",
+    "@emotion/react": "^11.9.3",
+    "@emotion/styled": "^11.9.3",
     "@ensdomains/ensjs": "^2.1.0",
     "@formatjs/intl-getcanonicallocales": "^2.0.2",
     "@formatjs/intl-locale": "^3.0.2",
     "@formatjs/intl-numberformat": "^8.0.2",
     "@formatjs/intl-pluralrules": "^5.0.2",
     "@metamask/detect-provider": "^1.2.0",
-    "@reduxjs/toolkit": "^1.8.0",
+    "@reduxjs/toolkit": "^1.8.2",
     "@shapeshiftoss/asset-service": "^6.4.0",
     "@shapeshiftoss/caip": "^6.3.0",
     "@shapeshiftoss/chain-adapters": "^7.7.0",
@@ -128,10 +130,12 @@
     "dayjs": "^1.11.3",
     "dompurify": "^2.3.8",
     "envalid": "^7.3.1",
-    "framer-motion": "^4.1.16",
+    "framer-motion": "^6.3.11",
     "friendly-challenge": "0.9.2",
     "html-react-parser": "^1.4.14",
+    "html5-qrcode": "^2.2.1",
     "https-browserify": "^1.0.0",
+    "js-file-download": "^0.4.12",
     "lit-html": "^2.2.5",
     "localforage": "^1.10.0",
     "lodash": "^4.17.21",
@@ -142,18 +146,16 @@
     "qr-image": "^3.2.0",
     "qs": "^6.10.5",
     "re-reselect": "^4.0.0",
-    "react": "^17.0.2",
-    "react-countdown-circle-timer": "^2.5.4",
+    "react": "^18.2.0",
+    "react-countdown-circle-timer": "^3.0.9",
     "react-datepicker": "^4.8.0",
     "react-device-detect": "^2.2.2",
-    "react-dom": "^17.0.2",
-    "react-hook-form": "7.31.3",
+    "react-dom": "^18.2.0",
+    "react-hook-form": "^7.33.1",
     "react-icons": "^4.4.0",
     "react-infinite-scroller": "^1.2.6",
-    "react-json-csv": "^2.0.0",
     "react-number-format": "^4.9.3",
     "react-polyglot": "^0.7.2",
-    "react-qr-reader": "^2.2.1",
     "react-redux": "^7.2.8",
     "react-router": "^5.3.3",
     "react-router-breadcrumbs-hoc": "^4.1.0",
@@ -177,19 +179,17 @@
     "@commitlint/config-conventional": "^15.0.0",
     "@keplr-wallet/types": "^0.10.5",
     "@peculiar/webcrypto": "^1.3.3",
-    "@snek-at/storybook-addon-chakra-ui": "^1.0.0",
-    "@storybook/addon-actions": "^6.4.19",
-    "@storybook/addon-essentials": "^6.4.19",
-    "@storybook/addon-links": "^6.4.19",
-    "@storybook/builder-webpack5": "^6.4.19",
-    "@storybook/manager-webpack5": "^6.4.19",
-    "@storybook/node-logger": "^6.4.19",
+    "@storybook/addon-actions": "^6.5.9",
+    "@storybook/addon-essentials": "^6.5.9",
+    "@storybook/addon-links": "^6.5.9",
+    "@storybook/builder-webpack5": "^6.5.9",
+    "@storybook/manager-webpack5": "^6.5.9",
+    "@storybook/node-logger": "^6.5.9",
     "@storybook/preset-create-react-app": "^4.0.1",
-    "@storybook/react": "^6.4.19",
-    "@testing-library/jest-dom": "^5.9.0",
-    "@testing-library/react": "^12.0.0",
-    "@testing-library/react-hooks": "^7.0.1",
-    "@testing-library/user-event": "^13.2.1",
+    "@storybook/react": "^6.5.9",
+    "@testing-library/jest-dom": "^5.16.4",
+    "@testing-library/react": "^13.3.0",
+    "@testing-library/user-event": "^14.2.1",
     "@types/bignumber.js": "^5.0.0",
     "@types/circular-dependency-plugin": "^5.0.5",
     "@types/crypto-js": "^4.0.2",
@@ -203,13 +203,13 @@
     "@types/node-polyglot": "^2.4.2",
     "@types/numeral": "^2.0.1",
     "@types/qr-image": "^3.2.5",
-    "@types/react": "^17.0.37",
-    "@types/react-datepicker": "^4.3.4",
-    "@types/react-dom": "^17.0.11",
-    "@types/react-infinite-scroller": "^1.2.2",
-    "@types/react-redux": "^7.1.22",
+    "@types/react": "^18.0.14",
+    "@types/react-datepicker": "^4.4.2",
+    "@types/react-dom": "^18.0.5",
+    "@types/react-infinite-scroller": "^1.2.3",
+    "@types/react-redux": "^7.1.24",
     "@types/react-router-dom": "^5.3.2",
-    "@types/react-table": "^7.7.9",
+    "@types/react-table": "^7.7.12",
     "@types/react-virtualized-auto-sizer": "^1.0.1",
     "@types/react-window": "^1.8.5",
     "@types/redux-logger": "^3.0.9",
@@ -236,7 +236,7 @@
     "storybook-dark-mode": "^1.0.9",
     "ts-jest": "^27.1.5",
     "ts-node": "^10.8.0",
-    "typescript": "^4.6.2",
+    "typescript": "^4.7.0",
     "val-loader": "^4.0.0",
     "web3-utils": "^1.5.2",
     "webpack": "5.72.1",

diff --git a/src/AppProviders.tsx b/src/AppProviders.tsx
@@ -1,4 +1,9 @@
-import { ChakraProvider, ColorModeScript } from '@chakra-ui/react'
+import {
+  ChakraProvider,
+  ColorModeScript,
+  createLocalStorageManager,
+  createStandaloneToast,
+} from '@chakra-ui/react'
 import { DefiManagerProvider } from 'features/defi/contexts/DefiManagerProvider/DefiManagerProvider'
 import React from 'react'
 import { Provider as ReduxProvider } from 'react-redux'
@@ -21,12 +26,15 @@ type ProvidersProps = {
   children: React.ReactNode
 }
 
+const manager = createLocalStorageManager('ss-theme')
+
 export function AppProviders({ children }: ProvidersProps) {
+  const { ToastContainer } = createStandaloneToast()
   return (
     <ReduxProvider store={store}>
       <PluginProvider>
-        <ChakraProvider theme={theme}>
-          <ColorModeScript />
+        <ColorModeScript storageKey='ss-theme' />
+        <ChakraProvider theme={theme} colorModeManager={manager} cssVarsRoot='body'>
           <PersistGate loading={<SplashScreen />} persistor={persistor}>
             <HashRouter basename='/'>
               <ScrollToTop />
@@ -37,6 +45,7 @@ export function AppProviders({ children }: ProvidersProps) {
                       <ModalProvider>
                         <TransactionsProvider>
                           <AppProvider>
+                            <ToastContainer />
                             <DefiManagerProvider>{children}</DefiManagerProvider>
                           </AppProvider>
                         </TransactionsProvider>

diff --git a/src/components/AccountAssets/AccountAssetsList.tsx b/src/components/AccountAssets/AccountAssetsList.tsx
@@ -73,7 +73,7 @@ export const AccountAssetsList = ({ assetIds, accountId, limit }: AccountAssetLi
               borderTopRadius='none'
               colorScheme='blue'
               onClick={onToggle}
-              isFullWidth
+              width='full'
               rightIcon={isOpen ? <FaArrowCircleUp /> : <FaArrowCircleDown />}
             >
               {translate(`assets.assetCards.${isOpen ? 'hideTokens' : 'showTokens'}`, {

diff --git a/src/components/AccountCard.tsx b/src/components/AccountCard.tsx
@@ -30,7 +30,7 @@ export const AccountCard = ({
   return (
     <Button
       onClick={onClick}
-      isFullWidth
+      width='full'
       justifyContent='flex-start'
       py={4}
       height='auto'

diff --git a/src/components/Approval/Approval.tsx b/src/components/Approval/Approval.tsx
@@ -122,24 +122,21 @@ export const Approval = () => {
             onSubmit={handleSubmit(approve)}
           >
             <CountdownCircleTimer
-              isPlaying={!!approvalTxId || !!isSubmitting}
+              isPlaying={!!approvalTxId || isSubmitting}
               size={90}
               strokeWidth={6}
               trailColor={theme.colors.whiteAlpha[500]}
               duration={60}
-              colors={[
-                [theme.colors.blue[500], 0.4],
-                [theme.colors.blue[500], 0.4],
-              ]}
-              onComplete={() => {
-                return [true, 0]
-              }}
+              colors={theme.colors.blue[500]}
+              onComplete={() => ({ shouldRepeat: true })}
             >
-              <Image
-                src={quote?.sellAsset?.icon}
-                boxSize='60px'
-                fallback={<SkeletonCircle boxSize='60px' />}
-              />
+              {() => (
+                <Image
+                  src={quote?.sellAsset?.icon}
+                  boxSize='60px'
+                  fallback={<SkeletonCircle boxSize='60px' />}
+                />
+              )}
             </CountdownCircleTimer>
             <Text
               my={2}

diff --git a/src/components/AssetAccounts/AssetAccountRow.tsx b/src/components/AssetAccounts/AssetAccountRow.tsx
@@ -46,7 +46,7 @@ export const AssetAccountRow = ({
   ...rest
 }: AssetAccountRowProps) => {
   const rowHover = useColorModeValue('gray.100', 'gray.750')
-  const [isLargerThanMd] = useMediaQuery(`(min-width: ${breakpoints['md']})`)
+  const [isLargerThanMd] = useMediaQuery(`(min-width: ${breakpoints['md']})`, { ssr: false })
   const feeAssetId = accountIdToFeeAssetId(accountId)
   const rowAssetId = assetId ? assetId : feeAssetId
   const asset = useAppSelector(state => selectAssetById(state, rowAssetId))

diff --git a/src/components/AssetHeader/AssetMarketData.tsx b/src/components/AssetHeader/AssetMarketData.tsx
@@ -1,6 +1,6 @@
 import { BoxProps, SimpleGrid, TextProps } from '@chakra-ui/layout'
 import { Skeleton } from '@chakra-ui/skeleton'
-import { StatArrow } from '@chakra-ui/stat'
+import { Stat, StatArrow } from '@chakra-ui/stat'
 import { AssetId } from '@shapeshiftoss/caip'
 import { Amount } from 'components/Amount/Amount'
 import { Card } from 'components/Card/Card'
@@ -17,7 +17,7 @@ type AssetMarketDataProps = {
 
 type StatProps = TextProps & { isLoaded?: boolean }
 
-const Stat = (props: BoxProps) => (
+const StatRow = (props: BoxProps) => (
   <Row
     alignItems='center'
     width='full'
@@ -58,63 +58,65 @@ export const AssetMarketData: React.FC<AssetMarketDataProps> = ({ assetId }) =>
       </Card.Header>
       <Card.Body>
         <SimpleGrid gridTemplateColumns={{ base: '1fr', md: '1fr' }} gridGap={6} width='full'>
-          <Stat>
+          <StatRow>
             <StatLabel isLoaded={isLoaded}>
               <Text translation='assets.assetDetails.assetHeader.price' />
             </StatLabel>
             <StatValue isLoaded={isLoaded}>
               <Amount.Fiat value={marketData?.price ?? 0} />
             </StatValue>
-          </Stat>
-          <Stat>
+          </StatRow>
+          <StatRow>
             <StatLabel isLoaded={isLoaded}>
               <Text translation='assets.assetDetails.assetHeader.marketCap' />
             </StatLabel>
             <StatValue isLoaded={isLoaded}>
               <Amount.Fiat value={marketData?.marketCap ?? 0} />
             </StatValue>
-          </Stat>
-          <Stat>
+          </StatRow>
+          <StatRow>
             <StatLabel isLoaded={isLoaded}>
               <Text translation='assets.assetDetails.assetHeader.24HrVolume' />
             </StatLabel>
             <StatValue isLoaded={isLoaded}>
               <Amount.Fiat value={marketData?.volume ?? 0} />
             </StatValue>
-          </Stat>
-          <Stat>
+          </StatRow>
+          <StatRow>
             <StatLabel isLoaded={isLoaded}>
               <Text translation='assets.assetDetails.assetHeader.dayChange' />
             </StatLabel>
             <StatValue isLoaded={isLoaded}>
-              <StatArrow
-                fontSize='sm'
-                mr={1}
-                type={percentChange.gt(0) ? 'increase' : 'decrease'}
-              />
+              <Stat>
+                <StatArrow
+                  fontSize='sm'
+                  mr={1}
+                  type={percentChange.gt(0) ? 'increase' : 'decrease'}
+                />
+              </Stat>
               <Amount.Percent value={percentChange.div(100).toNumber() ?? 0} />
             </StatValue>
-          </Stat>
+          </StatRow>
 
           {marketData?.maxSupply && (
-            <Stat>
+            <StatRow>
               <StatLabel isLoaded={isLoaded}>
                 <Text translation='assets.assetDetails.assetHeader.maxTotalSupply' />
               </StatLabel>
               <StatValue isLoaded={isLoaded}>
                 <Amount.Supply value={marketData?.maxSupply ?? 0} />
               </StatValue>
-            </Stat>
+            </StatRow>
           )}
           {marketData?.supply && (
-            <Stat>
+            <StatRow>
               <StatLabel isLoaded={isLoaded}>
                 <Text translation='assets.assetDetails.assetHeader.availableSupply' />
               </StatLabel>
               <StatValue isLoaded={isLoaded}>
                 <Amount.Supply value={marketData?.supply} />
               </StatValue>
-            </Stat>
+            </StatRow>
           )}
         </SimpleGrid>
       </Card.Body>