Dependency updates 2022-01 (#265)

* Minor upgrades * Non-breaking major upgrades * marked upgraded to v4 * Upgraded stellar-sdk to v10 * Upgraded react-router-dom to v6 * Fix generate new keypair navigation * Stellar design system upgraded to v0.5.0 * Bump version to v2.0.0
stellar · Jan 18, 2022 · c855167 · c855167
1 parent 5207162
commit c855167
Show file tree

Hide file tree

Showing 26 changed files with 800 additions and 610 deletions.
diff --git a/package.json b/package.json
@@ -16,6 +16,6 @@
   "dependencies": {
     "demo-wallet-shared": "^1.0.0",
     "npm-run-all": "^4.1.5",
-    "stellar-sdk": "^9.1.0"
+    "stellar-sdk": "^10.0.0"
   }
 }
diff --git a/packages/demo-wallet-client/package.json b/packages/demo-wallet-client/package.json
@@ -1,6 +1,6 @@
 {
   "name": "demo-wallet-client",
-  "version": "1.2.4",
+  "version": "2.0.0",
   "description": "Stellar Demo Wallet client",
   "repository": {
     "type": "git",
@@ -17,36 +17,36 @@
     ]
   },
   "dependencies": {
-    "@reduxjs/toolkit": "^1.6.2",
-    "@stellar/design-system": "^0.4.1",
+    "@reduxjs/toolkit": "^1.7.1",
+    "@stellar/design-system": "^0.5.0",
     "@stellar/frontend-helpers": "^2.1.3",
     "@stellar/prettier-config": "^1.0.1",
-    "@stellar/wallet-sdk": "^0.5.0-rc.0",
-    "@testing-library/jest-dom": "^5.14.1",
+    "@stellar/wallet-sdk": "^0.6.0-rc.1",
+    "@testing-library/jest-dom": "^5.16.1",
     "@testing-library/react": "^12.1.2",
-    "@testing-library/user-event": "^13.2.1",
-    "bignumber.js": "^9.0.1",
+    "@testing-library/user-event": "^13.5.0",
+    "bignumber.js": "^9.0.2",
     "crypto": "^1.0.1",
-    "dompurify": "^2.3.3",
+    "dompurify": "^2.3.4",
     "env-cmd": "^10.1.0",
     "find-config": "^1.0.0",
-    "html-react-parser": "^1.4.0",
+    "html-react-parser": "^1.4.5",
     "lodash": "^4.17.21",
-    "marked": "^3.0.4",
+    "marked": "^4.0.9",
     "node-sass": "^6.0.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-json-view": "^1.21.3",
-    "react-redux": "^7.2.5",
-    "react-router-dom": "^5.3.0",
+    "react-redux": "^7.2.6",
+    "react-router-dom": "^6.2.1",
     "react-scripts": "4.0.3",
-    "redux": "^4.1.1",
-    "stellar-sdk": "^9.1.0",
-    "styled-components": "^5.3.1",
+    "redux": "^4.1.2",
+    "stellar-sdk": "^10.0.0",
+    "styled-components": "^5.3.3",
     "toml": "^3.0.0",
     "tslib": "^2.3.1",
-    "typescript": "~4.4.3",
-    "web-vitals": "^2.1.0"
+    "typescript": "~4.5.4",
+    "web-vitals": "^2.1.3"
   },
   "scripts": {
     "install-if-package-changed": "git diff-tree -r --name-only --no-commit-id ORIG_HEAD HEAD | grep --quiet yarn.lock && yarn install || exit 0",
@@ -76,36 +76,36 @@
     ]
   },
   "devDependencies": {
-    "@stellar/eslint-config": "^2.1.1",
+    "@stellar/eslint-config": "^2.1.2",
     "@stellar/tsconfig": "^1.0.2",
-    "@types/jest": "^27.0.2",
-    "@types/lodash": "^4.14.175",
-    "@types/marked": "^3.0.1",
+    "@types/jest": "^27.4.0",
+    "@types/lodash": "^4.14.178",
+    "@types/marked": "^4.0.1",
     "@types/node": "^16.10.3",
-    "@types/react": "^17.0.27",
-    "@types/react-copy-to-clipboard": "^5.0.1",
-    "@types/react-dom": "^17.0.9",
-    "@types/react-redux": "^7.1.18",
-    "@types/react-router-dom": "^5.1.9",
+    "@types/react": "^17.0.38",
+    "@types/react-copy-to-clipboard": "^5.0.2",
+    "@types/react-dom": "^17.0.11",
+    "@types/react-redux": "^7.1.21",
+    "@types/react-router-dom": "^5.3.2",
     "@types/redux": "^3.6.0",
-    "@types/styled-components": "^5.1.14",
+    "@types/styled-components": "^5.1.19",
     "@typescript-eslint/eslint-plugin": "^4.33.0",
     "@typescript-eslint/parser": "^4.33.0",
-    "concurrently": "^6.3.0",
+    "concurrently": "^7.0.0",
     "eslint": "^7.32.0",
     "eslint-config-prettier": "^8.3.0",
     "eslint-config-react": "^1.1.7",
     "eslint-config-react-app": "^6.0.0",
     "eslint-plugin-flowtype": "^6.1.0",
-    "eslint-plugin-import": "^2.24.2",
+    "eslint-plugin-import": "^2.25.4",
     "eslint-plugin-jsdoc": "^36.1.0",
-    "eslint-plugin-jsx-a11y": "^6.4.1",
+    "eslint-plugin-jsx-a11y": "^6.5.1",
     "eslint-plugin-prefer-arrow": "^1.2.3",
-    "eslint-plugin-react": "^7.26.1",
-    "eslint-plugin-react-hooks": "^4.2.0",
-    "husky": "^7.0.2",
-    "lint-staged": "^11.2.0",
-    "prettier": "^2.4.1",
-    "pretty-quick": "^3.1.1"
+    "eslint-plugin-react": "^7.28.0",
+    "eslint-plugin-react-hooks": "^4.3.0",
+    "husky": "^7.0.4",
+    "lint-staged": "^12.1.7",
+    "prettier": "^2.5.1",
+    "pretty-quick": "^3.1.3"
   }
 }
diff --git a/packages/demo-wallet-client/src/App.scss b/packages/demo-wallet-client/src/App.scss
@@ -298,6 +298,10 @@
       }
     }
 
+    &.RegulatedAsset {
+      display: flex;
+    }
+
     &.BalanceActions {
       .CustomCell {
         display: flex;

diff --git a/packages/demo-wallet-client/src/App.tsx b/packages/demo-wallet-client/src/App.tsx
@@ -1,4 +1,4 @@
-import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
+import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
 import { Provider } from "react-redux";
 import { Layout, TextLink } from "@stellar/design-system";
 import { errorReporting } from "@stellar/frontend-helpers";
@@ -60,17 +60,20 @@ export const App = () => (
                   </p>
                 </Layout.Inset>
 
-                <Switch>
-                  <Route exact path="/">
-                    <Landing />
-                  </Route>
+                <Routes>
+                  <Route path="/" element={<Landing />} />
 
-                  <PrivateRoute exact path="/account">
-                    <Account />
-                  </PrivateRoute>
+                  <Route
+                    path="/account"
+                    element={
+                      <PrivateRoute>
+                        <Account />
+                      </PrivateRoute>
+                    }
+                  />
 
-                  <Route component={NotFound} />
-                </Switch>
+                  <Route element={NotFound} />
+                </Routes>
               </Layout.Content>
 
               <Footer />

diff --git a/packages/demo-wallet-client/src/components/AddAsset.tsx b/packages/demo-wallet-client/src/components/AddAsset.tsx
@@ -1,5 +1,5 @@
 import { useEffect, useState } from "react";
-import { useHistory } from "react-router-dom";
+import { useNavigate } from "react-router-dom";
 import {
   Button,
   InfoBlock,
@@ -30,7 +30,7 @@ export const AddAsset = ({ onClose }: { onClose: () => void }) => {
   const [issuerPublicKey, setIssuerPublicKey] = useState("");
   const [errorMessage, setErrorMessage] = useState("");
 
-  const history = useHistory();
+  const navigate = useNavigate();
 
   const resetState = () => {
     setAssetCode("");
@@ -89,7 +89,7 @@ export const AddAsset = ({ onClose }: { onClose: () => void }) => {
         });
       }
 
-      history.push(search);
+      navigate(search);
       setIsValidating(false);
     } catch (e) {
       const errorMsg = getErrorMessage(e);
@@ -126,7 +126,7 @@ export const AddAsset = ({ onClose }: { onClose: () => void }) => {
                 </>
               }
               isInline
-              tooltipPosition={DetailsTooltip.tooltipPosition.left}
+              tooltipPosition={DetailsTooltip.tooltipPosition.BOTTOM}
             >
               <>Asset code</>
             </DetailsTooltip>
@@ -155,7 +155,7 @@ export const AddAsset = ({ onClose }: { onClose: () => void }) => {
                 </>
               }
               isInline
-              tooltipPosition={DetailsTooltip.tooltipPosition.left}
+              tooltipPosition={DetailsTooltip.tooltipPosition.BOTTOM}
             >
               <>Anchor home domain</>
             </DetailsTooltip>
@@ -183,7 +183,7 @@ export const AddAsset = ({ onClose }: { onClose: () => void }) => {
                 </>
               }
               isInline
-              tooltipPosition={DetailsTooltip.tooltipPosition.left}
+              tooltipPosition={DetailsTooltip.tooltipPosition.BOTTOM}
             >
               <>Issuer public key</>
             </DetailsTooltip>

diff --git a/packages/demo-wallet-client/src/components/AddPresetAsset.tsx b/packages/demo-wallet-client/src/components/AddPresetAsset.tsx
@@ -1,5 +1,5 @@
 import { useEffect, useState } from "react";
-import { useHistory } from "react-router-dom";
+import { useNavigate } from "react-router-dom";
 import {
   Button,
   Checkbox,
@@ -31,7 +31,7 @@ export const AddPresetAsset = ({ onClose }: { onClose: () => void }) => {
   const [isValidating, setIsValidating] = useState(false);
   const [errorMessage, setErrorMessage] = useState("");
 
-  const history = useHistory();
+  const navigate = useNavigate();
 
   useEffect(() => {
     setPresetAssets(getPresetAssets(allAssets.data));
@@ -83,7 +83,7 @@ export const AddPresetAsset = ({ onClose }: { onClose: () => void }) => {
         SearchParams.UNTRUSTED_ASSETS,
         validatedAssetValues.join(","),
       );
-      history.push(newSearchQ);
+      navigate(newSearchQ);
     } catch (e) {
       const errorMsg = getErrorMessage(e);
       log.error({ title: errorMsg });

diff --git a/packages/demo-wallet-client/src/components/Assets.tsx b/packages/demo-wallet-client/src/components/Assets.tsx
@@ -1,6 +1,6 @@
 import React, { useCallback, useEffect, useState } from "react";
 import { useDispatch } from "react-redux";
-import { useHistory } from "react-router-dom";
+import { useNavigate } from "react-router-dom";
 import {
   Button,
   Heading2,
@@ -93,7 +93,7 @@ export const Assets = ({
   const [toastMessage, setToastMessage] = useState<string | React.ReactNode>();
 
   const dispatch = useDispatch();
-  const history = useHistory();
+  const navigate = useNavigate();
 
   enum ModalType {
     ADD_ASSET = "ADD_ASSET",
@@ -104,13 +104,13 @@ export const Assets = ({
   const handleRemoveUntrustedAsset = useCallback(
     (removeAsset?: string) => {
       if (removeAsset) {
-        history.push(
+        navigate(
           searchParam.remove(SearchParams.UNTRUSTED_ASSETS, removeAsset),
         );
         dispatch(removeUntrustedAssetAction(removeAsset));
       }
     },
-    [history, dispatch],
+    [dispatch, navigate],
   );
 
   const handleRefreshAccount = useCallback(() => {
@@ -218,7 +218,7 @@ export const Assets = ({
   // Trust asset
   useEffect(() => {
     if (trustAsset.status === ActionStatus.SUCCESS) {
-      history.push(
+      navigate(
         searchParam.remove(
           SearchParams.UNTRUSTED_ASSETS,
           trustAsset.assetString,
@@ -239,7 +239,7 @@ export const Assets = ({
     handleRefreshAccount,
     setActiveAssetStatusAndToastMessage,
     dispatch,
-    history,
+    navigate,
   ]);
 
   // SEP-6 Deposit asset
@@ -320,7 +320,6 @@ export const Assets = ({
     handleRemoveUntrustedAsset,
     setActiveAssetStatusAndToastMessage,
     dispatch,
-    history,
   ]);
 
   // SEP-24 Withdraw asset
@@ -345,7 +344,6 @@ export const Assets = ({
     handleRefreshAccount,
     setActiveAssetStatusAndToastMessage,
     dispatch,
-    history,
   ]);
 
   // Claim asset

diff --git a/packages/demo-wallet-client/src/components/BalanceRow.tsx b/packages/demo-wallet-client/src/components/BalanceRow.tsx
@@ -164,21 +164,23 @@ export const BalanceRow = ({
       </div>
 
       {supportedActions?.sep8 && (
-        <DetailsTooltip
-          details={
-            <>
-              {
-                "Payments with regulated assets need to be approved by the asset issuer. For more information please refer to "
-              }
-              <TextLink href="https://github.com/stellar/stellar-protocol/blob/master/ecosystem/sep-0008.md">
-                SEP-8
-              </TextLink>
-              .
-            </>
-          }
-        >
-          <span>Regulated</span>
-        </DetailsTooltip>
+        <div className="BalanceCell RegulatedAsset">
+          <DetailsTooltip
+            details={
+              <>
+                {
+                  "Payments with regulated assets need to be approved by the asset issuer. For more information please refer to "
+                }
+                <TextLink href="https://github.com/stellar/stellar-protocol/blob/master/ecosystem/sep-0008.md">
+                  SEP-8
+                </TextLink>
+                .
+              </>
+            }
+          >
+            <span>Regulated</span>
+          </DetailsTooltip>
+        </div>
       )}
 
       <div className="BalanceCell BalanceActions">

diff --git a/packages/demo-wallet-client/src/components/ConfigurationModal.tsx b/packages/demo-wallet-client/src/components/ConfigurationModal.tsx
@@ -1,15 +1,15 @@
-import { useHistory } from "react-router-dom";
+import { useNavigate } from "react-router-dom";
 import { Button, Modal, Toggle } from "@stellar/design-system";
 import { searchParam } from "demo-wallet-shared/build/helpers/searchParam";
 import { useRedux } from "hooks/useRedux";
 import { SearchParams } from "types/types.d";
 
 export const ConfigurationModal = ({ onClose }: { onClose: () => void }) => {
   const { settings } = useRedux("settings");
-  const history = useHistory();
+  const navigate = useNavigate();
 
   const handleClaimableBalanceSupported = () => {
-    history.push(
+    navigate(
       searchParam.update(
         SearchParams.CLAIMABLE_BALANCE_SUPPORTED,
         (!settings.claimableBalanceSupported).toString(),

diff --git a/packages/demo-wallet-client/src/components/ConnectAccount.tsx b/packages/demo-wallet-client/src/components/ConnectAccount.tsx
@@ -1,21 +1,21 @@
 import { useState } from "react";
 import { Button, Checkbox, Input, Modal } from "@stellar/design-system";
-import { useHistory } from "react-router-dom";
+import { useNavigate } from "react-router-dom";
 import { searchParam } from "demo-wallet-shared/build/helpers/searchParam";
 import { useRedux } from "hooks/useRedux";
 import { ActionStatus, SearchParams } from "types/types.d";
 
 export const ConnectAccount = () => {
   const { account, settings } = useRedux("account", "settings");
   const [secretKey, setSecretKey] = useState("");
-  const history = useHistory();
+  const navigate = useNavigate();
 
   const handleSetSecretKey = () => {
-    history.push(searchParam.update(SearchParams.SECRET_KEY, secretKey));
+    navigate(searchParam.update(SearchParams.SECRET_KEY, secretKey));
   };
 
   const handleSwitchNetwork = () => {
-    history.push(
+    navigate(
       searchParam.update(SearchParams.PUBNET, (!settings.pubnet).toString()),
     );
   };