release/5.12.0 (#1065)

* Fix accounts dropdown scrolling (#1064) * fix some broken tests and disable some flaky ones (#1067) * Fix more flaky tests (#1068) * fix some broken tests and disable some flaky ones * Fix more flaky tests --------- Co-authored-by: Piyal Basu <pbasu235@gmail.com> * upgrade sdk to 11.1.0 (#1066) --------- Co-authored-by: Iveta <quietbits@users.noreply.github.com>
stellar · Dec 19, 2023 · 883e25f · 883e25f
1 parent 36addb0
commit 883e25f
Show file tree

Hide file tree

Showing 20 changed files with 247 additions and 183 deletions.
diff --git a/@shared/api/package.json b/@shared/api/package.json
@@ -7,7 +7,7 @@
     "@stellar/wallet-sdk": "v0.11.0-beta.1",
     "bignumber.js": "^9.1.1",
     "prettier": "^2.0.5",
-    "stellar-sdk": "^11.0.1",
+    "stellar-sdk": "^11.1.0",
     "typescript": "~3.7.2",
     "webextension-polyfill": "^0.10.0"
   },

diff --git a/@shared/constants/package.json b/@shared/constants/package.json
@@ -3,7 +3,7 @@
   "prettier": "@stellar/prettier-config",
   "version": "1.0.0",
   "dependencies": {
-    "stellar-sdk": "^11.0.1",
+    "stellar-sdk": "^11.1.0",
     "typescript": "~3.7.2"
   },
   "devDependencies": {

diff --git a/@shared/helpers/package.json b/@shared/helpers/package.json
@@ -4,7 +4,7 @@
   "version": "1.0.0",
   "dependencies": {
     "bignumber.js": "^9.1.1",
-    "stellar-sdk": "^11.0.1",
+    "stellar-sdk": "^11.1.0",
     "typescript": "~3.7.2"
   },
   "devDependencies": {

diff --git a/extension/package.json b/extension/package.json
@@ -75,7 +75,7 @@
     "ses": "^0.18.5",
     "stellar-hd-wallet": "^0.0.10",
     "stellar-identicon-js": "^1.0.0",
-    "stellar-sdk": "^11.0.1",
+    "stellar-sdk": "^11.1.0",
     "svg-url-loader": "^5.0.0",
     "tsconfig-paths-webpack-plugin": "^3.2.0",
     "tslib": "2.0.0",

diff --git a/extension/src/popup/basics/layout/View/styles.scss b/extension/src/popup/basics/layout/View/styles.scss
@@ -86,52 +86,6 @@
       padding-top: var(--View-inset-padding-top);
       padding-bottom: 1.5rem;
 
-      // TODO: update styling
-      &--scroll-shadows {
-        // https://css-tricks.com/books/greatest-css-tricks/scroll-shadows/
-        --bgRGB: 0, 0, 0;
-        --bg: rgb(var(--bgRGB));
-        --bgTrans: rgba(var(--bgRGB), 0);
-        --shadow: rgba(255, 255, 255, 0.2);
-
-        background:
-            /* Shadow Cover TOP */ linear-gradient(
-              var(--bg) 30%,
-              var(--bgTrans)
-            )
-            center top,
-          /* Shadow Cover BOTTOM */
-            linear-gradient(var(--bgTrans), var(--bg) 70%) center bottom,
-          /* Shadow TOP */
-            radial-gradient(
-              farthest-side at 50% 0,
-              var(--shadow),
-              rgba(0, 0, 0, 0.1)
-            )
-            center top,
-          /* Shadow BOTTOM */
-            radial-gradient(
-              farthest-side at 50% 100%,
-              var(--shadow),
-              rgba(0, 0, 0, 0.1)
-            )
-            center bottom;
-
-        background-repeat: no-repeat;
-        background-size: 100% 40px, 100% 40px, 100% 14px, 100% 14px;
-        background-attachment: local, local, scroll, scroll;
-
-        // Hide scrollbar
-        &::-webkit-scrollbar {
-          // Chrome, Edge, Brave, etc
-          display: none;
-          // Firefox
-          scrollbar-width: none;
-          // Old Microsoft browsers
-          -ms-overflow-style: none;
-        }
-      }
-
       &__footer {
         flex: none;
         padding-bottom: var(--View-footer-padding-bottom);
@@ -213,4 +167,50 @@
       border-top: 1px solid var(--color-gray-40);
     }
   }
+
+  &__inset--scroll-shadows {
+    // https://css-tricks.com/books/greatest-css-tricks/scroll-shadows/
+    --bgRGB: 0, 0, 0;
+    --bg: rgb(var(--bgRGB));
+    --bgTrans: rgba(var(--bgRGB), 0);
+    --shadow: rgba(255, 255, 255, 0.2);
+
+    overflow: auto;
+    background:
+        /* Shadow Cover TOP */ linear-gradient(
+          var(--bg) 30%,
+          var(--bgTrans)
+        )
+        center top,
+      /* Shadow Cover BOTTOM */ linear-gradient(var(--bgTrans), var(--bg) 70%)
+        center bottom,
+      /* Shadow TOP */
+        radial-gradient(
+          farthest-side at 50% 0,
+          var(--shadow),
+          rgba(0, 0, 0, 0.1)
+        )
+        center top,
+      /* Shadow BOTTOM */
+        radial-gradient(
+          farthest-side at 50% 100%,
+          var(--shadow),
+          rgba(0, 0, 0, 0.1)
+        )
+        center bottom;
+
+    background-repeat: no-repeat;
+    background-size: 100% 40px, 100% 40px, 100% 14px, 100% 14px;
+    background-attachment: local, local, scroll, scroll;
+
+    // Hide scrollbar
+    &::-webkit-scrollbar {
+      // Chrome, Edge, Brave, etc
+      display: none;
+      // Firefox
+      scrollbar-width: none;
+      // Old Microsoft browsers
+      -ms-overflow-style: none;
+    }
+  }
 }
diff --git a/extension/src/popup/components/account/AccountHeader/index.tsx b/extension/src/popup/components/account/AccountHeader/index.tsx
@@ -44,16 +44,11 @@ export const AccountHeader = ({
   const [isDropdownOpen, setIsDropdownOpen] = useState(false);
   const [isNetworkSelectorOpen, setIsNetworkSelectorOpen] = useState(false);
 
-  const accountsModalHeight = useRef(0);
   const networksModalHeight = useRef(0);
   const activeNetworkIndex = useRef<number | null>(null);
 
   const calculateModalHeight = (listLength: number) => (listLength + 2) * 6;
 
-  useEffect(() => {
-    accountsModalHeight.current = calculateModalHeight(allAccounts.length);
-  }, [allAccounts]);
-
   useEffect(() => {
     networksModalHeight.current = calculateModalHeight(networksList.length);
   }, [networksList]);
@@ -92,72 +87,68 @@ export const AccountHeader = ({
         </div>
       }
     >
-      <AccountHeaderModal
-        isDropdownOpen={isDropdownOpen}
-        maxHeight={accountsModalHeight.current}
-      >
+      <AccountHeaderModal isDropdownOpen={isDropdownOpen}>
         <ul className="AccountHeader__account-dropdown">
           <AccountList
             allAccounts={allAccounts}
             publicKey={publicKey}
             setIsDropdownOpen={setIsDropdownOpen}
           />
-          <hr className="AccountHeader__list-divider" />
-          <li className="AccountHeader__account-list-item">
-            <Link
-              className="AccountHeader__account-list-item__link"
-              to={{
-                pathname: ROUTES.addAccount,
-                state: {
-                  header: t("Create a new Stellar address"),
-                  cta: t("Add address"),
-                },
-              }}
-            >
-              <div className="AccountHeader__account-list-item__icon">
-                <Icon.AddCircle />
-              </div>
-              <span className="AccountHeader__account-list-item__link-copy">
-                {t("Create a new Stellar address")}
-              </span>
-            </Link>
-          </li>
-          <li className="AccountHeader__account-list-item">
-            <Link
-              className="AccountHeader__account-list-item__link"
-              to={ROUTES.importAccount}
-            >
-              <div className="AccountHeader__account-list-item__icon">
-                <Icon.Download />
-              </div>
-              <span className="AccountHeader__account-list-item__link-copy">
-                {t("Import a Stellar secret key")}
-              </span>
-            </Link>
-          </li>
-          <li className="AccountHeader__account-list-item">
-            <Link
-              className="AccountHeader__account-list-item__link"
-              to={ROUTES.connectWallet}
-            >
-              <div className="AccountHeader__account-list-item__icon">
-                <img
-                  className="AccountHeader__img-cube-icon"
-                  src={IconCube}
-                  alt=""
-                />
-              </div>
-              <span className="AccountHeader__account-list-item__link-copy">
-                Connect a hardware wallet
-              </span>
-            </Link>
-          </li>
+          <div className="AccountList__footer">
+            <hr className="AccountHeader__list-divider" />
+            <li className="AccountHeader__account-list-item">
+              <Link
+                className="AccountHeader__account-list-item__link"
+                to={{
+                  pathname: ROUTES.addAccount,
+                  state: {
+                    header: t("Create a new Stellar address"),
+                    cta: t("Add address"),
+                  },
+                }}
+              >
+                <div className="AccountHeader__account-list-item__icon">
+                  <Icon.AddCircle />
+                </div>
+                <span className="AccountHeader__account-list-item__link-copy">
+                  {t("Create a new Stellar address")}
+                </span>
+              </Link>
+            </li>
+            <li className="AccountHeader__account-list-item">
+              <Link
+                className="AccountHeader__account-list-item__link"
+                to={ROUTES.importAccount}
+              >
+                <div className="AccountHeader__account-list-item__icon">
+                  <Icon.Download />
+                </div>
+                <span className="AccountHeader__account-list-item__link-copy">
+                  {t("Import a Stellar secret key")}
+                </span>
+              </Link>
+            </li>
+            <li className="AccountHeader__account-list-item">
+              <Link
+                className="AccountHeader__account-list-item__link"
+                to={ROUTES.connectWallet}
+              >
+                <div className="AccountHeader__account-list-item__icon">
+                  <img
+                    className="AccountHeader__img-cube-icon"
+                    src={IconCube}
+                    alt=""
+                  />
+                </div>
+                <span className="AccountHeader__account-list-item__link-copy">
+                  Connect a hardware wallet
+                </span>
+              </Link>
+            </li>
+          </div>
         </ul>
       </AccountHeaderModal>
-      <AccountHeaderModal
-        isDropdownOpen={isNetworkSelectorOpen}
-        maxHeight={networksModalHeight.current}
-      >
+      <AccountHeaderModal isDropdownOpen={isNetworkSelectorOpen}>
         <>
           <div className="AccountHeader__network-selector">
             {networksList.map((n, i) => (

diff --git a/extension/src/popup/components/account/AccountHeader/styles.scss b/extension/src/popup/components/account/AccountHeader/styles.scss
@@ -51,10 +51,18 @@
 
   &__account-dropdown {
     padding: 0;
+    display: flex;
+    flex-direction: column;
+    max-height: calc(100vh - 1.5rem);
+    overflow: hidden;
 
     li::before {
       content: none !important;
     }
+
+    .View__inset--scroll-shadows {
+      --bgRGB: 22, 22, 24;
+    }
   }
 
   &__account-list-item {
@@ -92,6 +100,7 @@
     height: 1px;
     background: var(--color-gray-30);
     border-radius: 1rem;
-    margin: 1.2rem 0;
+    margin-top: 0;
+    margin-bottom: 1.2rem;
   }
 }
diff --git a/extension/src/popup/components/account/AccountHeaderModal/index.tsx b/extension/src/popup/components/account/AccountHeaderModal/index.tsx
@@ -5,23 +5,21 @@ import "./styles.scss";
 interface AccountHeaderModalProps {
   children: React.ReactElement;
   isDropdownOpen: boolean;
-  maxHeight: number;
 }
 
 export const AccountHeaderModal = ({
   children,
   isDropdownOpen,
-  maxHeight,
 }: AccountHeaderModalProps) => {
   const dropdownRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
     if (dropdownRef.current != null) {
       dropdownRef.current.style.maxHeight = isDropdownOpen
-        ? `${maxHeight}rem`
+        ? `calc(100vh - 1rem)`
         : "0";
     }
-  }, [maxHeight, isDropdownOpen]);
+  }, [isDropdownOpen]);
 
   return (
     <div ref={dropdownRef} className="AccountHeaderModal">

diff --git a/extension/src/popup/components/account/AccountHeaderModal/styles.scss b/extension/src/popup/components/account/AccountHeaderModal/styles.scss
@@ -15,5 +15,6 @@
 
   &__content {
     padding: 0.25rem 1rem;
+    max-height: calc(100vh - 1rem);
   }
 }
diff --git a/extension/src/popup/components/account/AccountList/index.tsx b/extension/src/popup/components/account/AccountList/index.tsx
@@ -70,7 +70,7 @@ export const AccountList = ({
   publicKey,
   setIsDropdownOpen,
 }: AccounsListProps) => (
-  <>
+  <div className="AccountList__accountsWrapper View__inset--scroll-shadows">
     {allAccounts.map(
       ({
         publicKey: accountPublicKey,
@@ -93,5 +93,5 @@ export const AccountList = ({
         );
       },
     )}
-  </>
+  </div>
 );
diff --git a/extension/src/popup/components/account/AccountList/styles.scss b/extension/src/popup/components/account/AccountList/styles.scss
@@ -34,4 +34,12 @@
     line-height: 1.375rem;
     padding-top: 1.1875rem;
   }
+
+  &__accountsWrapper {
+    flex: 1;
+  }
+
+  &__footer {
+    flex-shrink: 0;
+  }
 }