Merge branch 'release/5.16.0' into feature/token-allowlist

# Conflicts: # extension/src/popup/components/WarningMessages/index.tsx
stellar · Feb 14, 2024 · 3d5a128 · 3d5a128
2 parents a1ae7e4 + c1b9030
commit 3d5a128
Show file tree

Hide file tree

Showing 36 changed files with 1,309 additions and 468 deletions.
diff --git a/extension/package.json b/extension/package.json
@@ -43,6 +43,7 @@
     "@types/yup": "^0.29.2",
     "bignumber.js": "^9.1.1",
     "buffer": "^6.0.3",
+    "classnames": "^2.5.1",
     "concurrently": "^5.1.0",
     "copy-webpack-plugin": "^5.1.1",
     "css-loader": "^5.0.0",

diff --git a/extension/src/popup/Router.tsx b/extension/src/popup/Router.tsx
@@ -69,6 +69,7 @@ import { AccountMigration } from "popup/views/AccountMigration";
 import "popup/metrics/views";
 import { DEV_SERVER } from "@shared/constants/services";
 import { SignBlob } from "./views/SignBlob";
+import { ReviewAuth } from "./views/ReviewAuth";
 
 export const PublicKeyRoute = (props: RouteProps) => {
   const location = useLocation();
@@ -274,6 +275,9 @@ export const Router = () => {
         <PublicKeyRoute path={ROUTES.signTransaction}>
           <SignTransaction />
         </PublicKeyRoute>
+        <PublicKeyRoute path={ROUTES.reviewAuthorization}>
+          <ReviewAuth />
+        </PublicKeyRoute>
         <PublicKeyRoute path={ROUTES.signAuthEntry}>
           <SignAuthEntry />
         </PublicKeyRoute>

diff --git a/extension/src/popup/basics/Modal/styles.scss b/extension/src/popup/basics/Modal/styles.scss
@@ -1,13 +1,16 @@
 :root {
-  --buttons-container-height: 5.5rem;
+  --buttons-container-height: 3rem;
 }
 
 .ModalWrapper {
   padding: 2rem 1.5rem 1rem 1.5rem;
   box-sizing: border-box;
 
   &__scrollbar {
-    height: calc(var(--popup--height) - var(--buttons-container-height));
+    height: 100vh;
+    display: flex;
+    align-items: end;
+    justify-content: center;
   }
 
   &__disable-scroll-x {
@@ -21,9 +24,8 @@
 
   &__buttons-container {
     display: flex;
-    gap: 0.75rem;
+    gap: 0.5rem;
     height: var(--buttons-container-height);
-    justify-content: space-around;
-    padding: 1rem 1.5rem;
+    padding: 0.5rem 0;
   }
 }
diff --git a/extension/src/popup/components/ModalInfo/index.tsx b/extension/src/popup/components/ModalInfo/index.tsx
@@ -1,7 +1,8 @@
 import React from "react";
 
-import { Card } from "@stellar/design-system";
+import { Card, Icon } from "@stellar/design-system";
 import { PunycodedDomain } from "popup/components/PunycodedDomain";
+import { FirstTimeWarningMessage } from "popup/components/WarningMessages";
 
 import "./styles.scss";
 
@@ -22,6 +23,13 @@ export const ModalInfo = ({
     <div className="ModalInfo--card">
       <Card variant="secondary">
         <PunycodedDomain domain={domain} domainTitle={domainTitle} />
+        <div className="ModalInfo--connection-request">
+          <div className="ModalInfo--connection-request-pill">
+            <Icon.Link />
+            <p>Connection Request</p>
+          </div>
+        </div>
+        <FirstTimeWarningMessage />
         <div className="ModalInfo--subject">{subject}</div>
         {children}
       </Card>

diff --git a/extension/src/popup/components/ModalInfo/styles.scss b/extension/src/popup/components/ModalInfo/styles.scss
@@ -1,14 +1,36 @@
 .ModalInfo {
+  &--connection-request {
+    display: flex;
+    justify-content: center;
+    margin-bottom: 0.75rem;
+  }
+
+  &--connection-request-pill {
+    display: flex;
+    align-items: center;
+    padding: 0 0.5rem;
+    background-color: var(--color-gray-20);
+    color: var(--color-gray-70);
+    border: 1px solid var(--color-gray-30);
+    border-radius: 6px;
+    margin-bottom: 0.5rem;
+    line-height: 1.25rem;
+
+    p {
+      font-size: 0.75rem;
+      margin-left: 0.25rem;
+    }
+  }
+
   &--subject {
-    border-bottom: 1px solid var(--color-gray-30);
-    color: var(--color-gray-90);
+    font-size: 0.75rem;
+    color: var(--color-gray-70);
+    background-color: var(--color-gray-30);
+    border-radius: 6px;
     line-height: 1.5rem;
     margin-bottom: 1.5rem;
     padding-bottom: 1.5rem;
+    padding: 0.5rem;
     text-align: center;
   }
-
-  &--card {
-    margin-bottom: 2rem;
-  }
 }
diff --git a/extension/src/popup/components/PunycodedDomain/styles.scss b/extension/src/popup/components/PunycodedDomain/styles.scss
@@ -3,7 +3,6 @@
   display: flex;
   flex-direction: column;
   justify-content: center;
-  margin-bottom: 0.5rem;
 
   &--row {
     flex-direction: row;
@@ -23,9 +22,10 @@
   &__title {
     color: var(--color-gray-60);
     font-size: 0.875rem;
+    overflow-wrap: anywhere;
   }
 
   div {
-    margin-bottom: 1rem;
+    margin-bottom: 0.25rem;
   }
 }
diff --git a/extension/src/popup/components/Tabs/index.tsx b/extension/src/popup/components/Tabs/index.tsx
@@ -0,0 +1,32 @@
+import React, { ReactNode } from "react";
+import classnames from "classnames";
+
+import "./styles.scss";
+
+interface TabsProps {
+  tabs: string[];
+  renderTab: (tab: string) => ReactNode;
+}
+
+export const Tabs = (props: TabsProps) => {
+  const [activeTab, setActiveTab] = React.useState(props.tabs[0]);
+  return (
+    <div className="Tabs">
+      <div className="Tabs__Selectors">
+        {props.tabs.map((tab) => {
+          const classes = classnames("Tab", { Active: activeTab === tab });
+          return (
+            <div
+              className={classes}
+              key={tab}
+              onClick={() => setActiveTab(tab)}
+            >
+              {tab}
+            </div>
+          );
+        })}
+      </div>
+      <div className="Tabs__Body">{props.renderTab(activeTab)}</div>
+    </div>
+  );
+};
diff --git a/extension/src/popup/components/Tabs/styles.scss b/extension/src/popup/components/Tabs/styles.scss
@@ -0,0 +1,44 @@
+.Tabs {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+
+  &__Selectors {
+    display: flex;
+    height: 25px;
+    border: 1px solid var(--color-gray-40);
+    border-radius: 4px;
+    font-size: 0.8rem;
+    font-weight: 600;
+    margin-bottom: 1rem;
+
+    .Tab {
+      flex: 1;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: 0.25rem;
+      cursor: pointer;
+
+      &.Active {
+        background-color: var(--color-gray-40);
+      }
+
+      &:first-child {
+        border-right: 1px solid var(--color-gray-40);
+      }
+
+      &:last-child {
+        border-left: 1px solid var(--color-gray-40);
+      }
+    }
+  }
+
+  &__Body {
+    display: flex;
+    flex-grow: 1;
+    margin-bottom: 10px;
+    height: 230px;
+    overflow-y: auto;
+  }
+}
diff --git a/extension/src/popup/components/WarningMessages/index.tsx b/extension/src/popup/components/WarningMessages/index.tsx
@@ -11,6 +11,7 @@ import {
   Horizon,
   TransactionBuilder,
   Networks,
+  xdr,
 } from "stellar-sdk";
 
 import { ActionStatus } from "@shared/api/types";
@@ -803,21 +804,16 @@ export const UnverifiedTokenWarning = ({
 };
 
 export const TransferWarning = ({
-  operation,
+  authEntry,
 }: {
-  operation: Operation.InvokeHostFunction;
+  authEntry: xdr.SorobanAuthorizationEntry;
 }) => {
   const { t } = useTranslation();
 
-  const authEntries = operation.auth || [];
-  const transfers = authEntries
-    .map((entry) => {
-      const rootInvocation = entry.rootInvocation();
-      const rootJson = buildInvocationTree(rootInvocation);
-      const isInvokeContract = rootInvocation.function().switch().value === 0;
-      return isInvokeContract ? pickTransfers(rootJson) : [];
-    })
-    .flat();
+  const rootInvocation = authEntry.rootInvocation();
+  const rootJson = buildInvocationTree(rootInvocation);
+  const isInvokeContract = rootInvocation.function().switch().value === 0;
+  const transfers = isInvokeContract ? pickTransfers(rootJson) : [];
 
   if (!transfers.length) {
     return null;
@@ -826,7 +822,7 @@ export const TransferWarning = ({
   return (
     <WarningMessage
       header="Authorizes Token Transfer"
-      variant={WarningMessageVariant.highAlert}
+      variant={WarningMessageVariant.warning}
     >
       <div className="TokenTransferWarning">
         <p>
@@ -902,9 +898,11 @@ const WarningMessageTokenDetails = ({
       ) : tokenDetails[transfer.contractId] ? (
         <p>
           <span className="InlineLabel">Token:</span>{" "}
-          {`(${tokenDetails[transfer.contractId].symbol}) ${
-            tokenDetails[transfer.contractId].name
-          }`}
+          {`(${
+            tokenDetails[transfer.contractId].name === "native"
+              ? "XLM"
+              : tokenDetails[transfer.contractId].symbol
+          }) ${tokenDetails[transfer.contractId].name}`}
         </p>
       ) : (
         <p>

diff --git a/extension/src/popup/components/WarningMessages/styles.scss b/extension/src/popup/components/WarningMessages/styles.scss
@@ -15,8 +15,9 @@
       var(--popup--side-padding);
     position: absolute;
     top: 0;
-    width: var(--popup--width);
-    height: var(--popup--height);
+    width: 100vw;
+    height: 100vh;
+    overflow-y: auto;
   }
 
   &__activate-button {
@@ -32,12 +33,12 @@
 
   &__infoBlock {
     background: #32275f;
-    border: none;
+    border: 1px solid;
     border-radius: 0.5rem;
     color: var(--color-white) !important;
     font-size: 0.875rem;
     margin-bottom: 1rem;
-    padding: 0.875rem;
+    padding: 0.5rem;
 
     &--high-alert {
       background: rgba(241, 50, 50, 0.32);
@@ -48,7 +49,8 @@
     }
 
     &--warning {
-      background: rgba(241, 165, 50, 0.32);
+      border-color: rgba(241, 165, 50, 0.32);
+      background-color: rgba(94, 58, 4, 0.32);
 
       .WarningMessage__icon {
         color: rgba(241, 165, 50, 1);

diff --git a/extension/src/popup/components/identicons/KeyIdenticon/styles.scss b/extension/src/popup/components/identicons/KeyIdenticon/styles.scss
@@ -1,6 +1,6 @@
 .KeyIdenticon {
   --Icon-padding: 0.25rem;
-  --Icon-dimension: 2rem;
+  --Icon-dimension: 1.5rem;
 
   align-items: center;
   display: flex;