From c5335d9c5df1afb8dc54c0b9640f70c2cce404d6 Mon Sep 17 00:00:00 2001
From: Daniel <80175477+dan437@users.noreply.github.com>
Date: Tue, 7 May 2024 03:12:01 +0200
Subject: [PATCH] feat: Add animation on the Smart Transaction status page
 (#24389)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## **Description**
Add animation on the Smart Transaction status page. We reused the
animation from Smart Swaps.

## **Related issues**

Fixes:

## **Manual testing steps**

1. Turn on Smart Transactions in Advanced Settings
2. Use the Sepolia test network
3. Submit a Send transaction
4. You will see the animation on the Smart Transaction status page

## **Screenshots/Recordings**


## **Pre-merge author checklist**

- [ ] I’ve followed [MetaMask Coding
Standards](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/CODING_GUIDELINES.md).
- [ ] I've completed the PR template to the best of my ability
- [ ] I’ve included tests if applicable
- [ ] I’ve documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [ ] I’ve applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/LABELING_GUIDELINES.md)).
Not required for external contributors.

## **Pre-merge reviewer checklist**

- [ ] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [ ] I confirm that this PR addresses all acceptance criteria described
in the ticket it closes and includes the necessary testing evidence such
as recordings and or screenshots.
---
 ...mart-transactions-status-page.test.js.snap | 56 ++++++++++++++++---
 .../smart-transaction-status-page/index.scss  | 29 ++++++++++
 .../smart-transaction-status-page.tsx         |  9 +++
 3 files changed, 87 insertions(+), 7 deletions(-)

diff --git a/ui/pages/smart-transactions/smart-transaction-status-page/__snapshots__/smart-transactions-status-page.test.js.snap b/ui/pages/smart-transactions/smart-transaction-status-page/__snapshots__/smart-transactions-status-page.test.js.snap
index bc3eeec5262f..e4cb60c2585b 100644
--- a/ui/pages/smart-transactions/smart-transaction-status-page/__snapshots__/smart-transactions-status-page.test.js.snap
+++ b/ui/pages/smart-transactions/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
index 13a3517940f3..d64e57f75209 100644
--- 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
index 691142c76712..19322a42a754 100644
--- 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}