Add animation on the Smart Transaction status page

MetaMask · May 6, 2024 · 1e16638 · 1e16638
1 parent ba1e55b
commit 1e16638
Show file tree

Hide file tree

Showing 3 changed files with 87 additions and 7 deletions.
diff --git a/...s/smart-transaction-status-page/__snapshots__/smart-transactions-status-page.test.js.snap b/...s/smart-transaction-status-page/__snapshots__/smart-transactions-status-page.test.js.snap
@@ -10,8 +10,11 @@ exports[`SmartTransactionStatusPage renders the "Sorry for the wait" pending sta
       style="flex-grow: 1;"
     >
       <div
-        class="mm-box mm-box--padding-right-6 mm-box--padding-left-6 mm-box--display-flex mm-box--flex-direction-column mm-box--align-items-center"
+        class="mm-box mm-box--padding-right-6 mm-box--padding-left-6 mm-box--display-flex mm-box--flex-direction-column mm-box--align-items-center mm-box--width-full"
       >
+        <div
+          class="mm-box smart-transaction-status-page__background-animation smart-transaction-status-page__background-animation--top mm-box--margin-top-3"
+        />
         <div
           class="mm-box mm-box--display-flex"
           style="font-size: 48px;"
@@ -58,6 +61,9 @@ exports[`SmartTransactionStatusPage renders the "Sorry for the wait" pending sta
           </p>
         </div>
       </div>
+      <div
+        class="mm-box smart-transaction-status-page__background-animation smart-transaction-status-page__background-animation--bottom mm-box--margin-top-3"
+      />
     </div>
     <div
       class="mm-box smart-transaction-status-page__footer mm-box--padding-4 mm-box--padding-bottom-0 mm-box--display-flex mm-box--flex-direction-column mm-box--width-full"
@@ -83,8 +89,11 @@ exports[`SmartTransactionStatusPage renders the "cancelled" STX status 1`] = `
       style="flex-grow: 1;"
     >
       <div
-        class="mm-box mm-box--padding-right-6 mm-box--padding-left-6 mm-box--display-flex mm-box--flex-direction-column mm-box--align-items-center"
+        class="mm-box mm-box--padding-right-6 mm-box--padding-left-6 mm-box--display-flex mm-box--flex-direction-column mm-box--align-items-center mm-box--width-full"
       >
+        <div
+          class="mm-box smart-transaction-status-page__background-animation smart-transaction-status-page__background-animation--top mm-box--margin-top-3"
+        />
         <div
           class="mm-box mm-box--display-flex"
           style="font-size: 48px;"
@@ -119,6 +128,9 @@ exports[`SmartTransactionStatusPage renders the "cancelled" STX status 1`] = `
           </button>
         </div>
       </div>
+      <div
+        class="mm-box smart-transaction-status-page__background-animation smart-transaction-status-page__background-animation--bottom mm-box--margin-top-3"
+      />
     </div>
     <div
       class="mm-box smart-transaction-status-page__footer mm-box--padding-4 mm-box--padding-bottom-0 mm-box--display-flex mm-box--flex-direction-column mm-box--width-full"
@@ -144,8 +156,11 @@ exports[`SmartTransactionStatusPage renders the "deadline_missed" STX status 1`]
       style="flex-grow: 1;"
     >
       <div
-        class="mm-box mm-box--padding-right-6 mm-box--padding-left-6 mm-box--display-flex mm-box--flex-direction-column mm-box--align-items-center"
+        class="mm-box mm-box--padding-right-6 mm-box--padding-left-6 mm-box--display-flex mm-box--flex-direction-column mm-box--align-items-center mm-box--width-full"
       >
+        <div
+          class="mm-box smart-transaction-status-page__background-animation smart-transaction-status-page__background-animation--top mm-box--margin-top-3"
+        />
         <div
           class="mm-box mm-box--display-flex"
           style="font-size: 48px;"
@@ -180,6 +195,9 @@ exports[`SmartTransactionStatusPage renders the "deadline_missed" STX status 1`]
           </button>
         </div>
       </div>
+      <div
+        class="mm-box smart-transaction-status-page__background-animation smart-transaction-status-page__background-animation--bottom mm-box--margin-top-3"
+      />
     </div>
     <div
       class="mm-box smart-transaction-status-page__footer mm-box--padding-4 mm-box--padding-bottom-0 mm-box--display-flex mm-box--flex-direction-column mm-box--width-full"
@@ -205,8 +223,11 @@ exports[`SmartTransactionStatusPage renders the "reverted" STX status 1`] = `
       style="flex-grow: 1;"
     >
       <div
-        class="mm-box mm-box--padding-right-6 mm-box--padding-left-6 mm-box--display-flex mm-box--flex-direction-column mm-box--align-items-center"
+        class="mm-box mm-box--padding-right-6 mm-box--padding-left-6 mm-box--display-flex mm-box--flex-direction-column mm-box--align-items-center mm-box--width-full"
       >
+        <div
+          class="mm-box smart-transaction-status-page__background-animation smart-transaction-status-page__background-animation--top mm-box--margin-top-3"
+        />
         <div
           class="mm-box mm-box--display-flex"
           style="font-size: 48px;"
@@ -241,6 +262,9 @@ exports[`SmartTransactionStatusPage renders the "reverted" STX status 1`] = `
           </button>
         </div>
       </div>
+      <div
+        class="mm-box smart-transaction-status-page__background-animation smart-transaction-status-page__background-animation--bottom mm-box--margin-top-3"
+      />
     </div>
     <div
       class="mm-box smart-transaction-status-page__footer mm-box--padding-4 mm-box--padding-bottom-0 mm-box--display-flex mm-box--flex-direction-column mm-box--width-full"
@@ -266,8 +290,11 @@ exports[`SmartTransactionStatusPage renders the "success" STX status 1`] = `
       style="flex-grow: 1;"
     >
       <div
-        class="mm-box mm-box--padding-right-6 mm-box--padding-left-6 mm-box--display-flex mm-box--flex-direction-column mm-box--align-items-center"
+        class="mm-box mm-box--padding-right-6 mm-box--padding-left-6 mm-box--display-flex mm-box--flex-direction-column mm-box--align-items-center mm-box--width-full"
       >
+        <div
+          class="mm-box smart-transaction-status-page__background-animation smart-transaction-status-page__background-animation--top mm-box--margin-top-3"
+        />
         <div
           class="mm-box mm-box--display-flex"
           style="font-size: 48px;"
@@ -293,6 +320,9 @@ exports[`SmartTransactionStatusPage renders the "success" STX status 1`] = `
           </button>
         </div>
       </div>
+      <div
+        class="mm-box smart-transaction-status-page__background-animation smart-transaction-status-page__background-animation--bottom mm-box--margin-top-3"
+      />
     </div>
     <div
       class="mm-box smart-transaction-status-page__footer mm-box--padding-4 mm-box--padding-bottom-0 mm-box--display-flex mm-box--flex-direction-column mm-box--width-full"
@@ -318,8 +348,11 @@ exports[`SmartTransactionStatusPage renders the "unknown" STX status 1`] = `
       style="flex-grow: 1;"
     >
       <div
-        class="mm-box mm-box--padding-right-6 mm-box--padding-left-6 mm-box--display-flex mm-box--flex-direction-column mm-box--align-items-center"
+        class="mm-box mm-box--padding-right-6 mm-box--padding-left-6 mm-box--display-flex mm-box--flex-direction-column mm-box--align-items-center mm-box--width-full"
       >
+        <div
+          class="mm-box smart-transaction-status-page__background-animation smart-transaction-status-page__background-animation--top mm-box--margin-top-3"
+        />
         <div
           class="mm-box mm-box--display-flex"
           style="font-size: 48px;"
@@ -354,6 +387,9 @@ exports[`SmartTransactionStatusPage renders the "unknown" STX status 1`] = `
           </button>
         </div>
       </div>
+      <div
+        class="mm-box smart-transaction-status-page__background-animation smart-transaction-status-page__background-animation--bottom mm-box--margin-top-3"
+      />
     </div>
     <div
       class="mm-box smart-transaction-status-page__footer mm-box--padding-4 mm-box--padding-bottom-0 mm-box--display-flex mm-box--flex-direction-column mm-box--width-full"
@@ -379,8 +415,11 @@ exports[`SmartTransactionStatusPage renders the component with initial props 1`]
       style="flex-grow: 1;"
     >
       <div
-        class="mm-box mm-box--padding-right-6 mm-box--padding-left-6 mm-box--display-flex mm-box--flex-direction-column mm-box--align-items-center"
+        class="mm-box mm-box--padding-right-6 mm-box--padding-left-6 mm-box--display-flex mm-box--flex-direction-column mm-box--align-items-center mm-box--width-full"
       >
+        <div
+          class="mm-box smart-transaction-status-page__background-animation smart-transaction-status-page__background-animation--top mm-box--margin-top-3"
+        />
         <div
           class="mm-box mm-box--display-flex"
           style="font-size: 48px;"
@@ -427,6 +466,9 @@ exports[`SmartTransactionStatusPage renders the component with initial props 1`]
           </p>
         </div>
       </div>
+      <div
+        class="mm-box smart-transaction-status-page__background-animation smart-transaction-status-page__background-animation--bottom mm-box--margin-top-3"
+      />
     </div>
     <div
       class="mm-box smart-transaction-status-page__footer mm-box--padding-4 mm-box--padding-bottom-0 mm-box--display-flex mm-box--flex-direction-column mm-box--width-full"

diff --git a/ui/pages/smart-transactions/smart-transaction-status-page/index.scss b/ui/pages/smart-transactions/smart-transaction-status-page/index.scss
@@ -1,4 +1,10 @@
 
+@keyframes shift {
+  to {
+    background-position: 100% 0;
+  }
+}
+
 .smart-transaction-status-page {
   text-align: center;
 
@@ -31,4 +37,27 @@
     width: 100%;
     text-align: left;
   }
+
+  &__background-animation {
+    position: relative;
+    left: -88px;
+    background-repeat: repeat;
+    background-position: 0 0;
+
+    &--top {
+      width: 1634px;
+      height: 54px;
+      background-size: 817px 54px;
+      background-image: url('/images/transaction-background-top.svg');
+      animation: shift 19s linear infinite;
+    }
+
+    &--bottom {
+      width: 1600px;
+      height: 62px;
+      background-size: 800px 62px;
+      background-image: url('/images/transaction-background-bottom.svg');
+      animation: shift 22s linear infinite;
+    }
+  }
 }
diff --git a/ui/pages/smart-transactions/smart-transaction-status-page/smart-transaction-status-page.tsx b/ui/pages/smart-transactions/smart-transaction-status-page/smart-transaction-status-page.tsx
@@ -491,7 +491,12 @@ export const SmartTransactionStatusPage = ({
           alignItems={AlignItems.center}
           paddingLeft={6}
           paddingRight={6}
+          width={BlockSize.Full}
         >
+          <Box
+            marginTop={3}
+            className="smart-transaction-status-page__background-animation smart-transaction-status-page__background-animation--top"
+          />
           <SmartTransactionsStatusIcon
             iconName={iconName}
             iconColor={iconColor}
@@ -517,6 +522,10 @@ export const SmartTransactionStatusPage = ({
             transactionId={fullTxData.id}
           />
         )}
+        <Box
+          marginTop={3}
+          className="smart-transaction-status-page__background-animation smart-transaction-status-page__background-animation--bottom"
+        />
       </Box>
       <SmartTransactionsStatusPageFooter
         isDapp={isDapp}