fix: use submitted icon on mainnet (#7055)

* fix: use submitted icon on mainnet

* fix: e2e test

* fix: some cleanup

cypress/e2e/permit2.test.ts

@@ -75,8 +75,9 @@ describe('Permit2', () => {
       cy.contains('Allow DAI to be used for swapping')
       cy.wait('@eth_signTypedData_v4')
       cy.wait('@eth_sendRawTransaction')
+      cy.contains('Swap submitted')
       cy.hardhat().then((hardhat) => hardhat.mine())
-      cy.contains('Success')
+      cy.contains('Swap success!')
       cy.get(getTestSelector('popups')).contains('Swapped')
       expectPermit2AllowanceForUniversalRouterToBeMax(DAI)
     })
@@ -99,7 +100,7 @@ describe('Permit2', () => {
       // Verify transaction
       cy.wait('@eth_sendRawTransaction')
       cy.hardhat().then((hardhat) => hardhat.mine())
-      cy.contains('Success')
+      cy.contains('Swap success!')
       cy.get(getTestSelector('popups')).contains('Swapped')
     })
 
@@ -142,7 +143,7 @@ describe('Permit2', () => {
       // Verify transaction
       cy.wait('@eth_sendRawTransaction')
       cy.hardhat().then((hardhat) => hardhat.mine())
-      cy.contains('Success')
+      cy.contains('Swap success!')
       cy.get(getTestSelector('popups')).contains('Swapped')
     })
   })
@@ -158,7 +159,7 @@ describe('Permit2', () => {
     initiateSwap()
 
     // Verify transaction
-    cy.contains('Success')
+    cy.contains('Swap success!')
     cy.get(getTestSelector('popups')).contains('Swapped')
   })
 
@@ -197,7 +198,7 @@ describe('Permit2', () => {
       cy.contains('Confirm swap').click()
 
       // Verify permit2 approval
-      cy.contains('Success')
+      cy.contains('Swap success!')
       cy.get(getTestSelector('popups')).contains('Swapped')
       expectPermit2AllowanceForUniversalRouterToBeMax(DAI)
     })
@@ -231,7 +232,7 @@ describe('Permit2', () => {
 
     // Verify permit2 approval
     cy.wait('@eth_signTypedData_v4')
-    cy.contains('Success')
+    cy.contains('Swap success!')
     cy.get(getTestSelector('popups')).contains('Swapped')
     expectPermit2AllowanceForUniversalRouterToBeMax(DAI)
   })
@@ -249,7 +250,7 @@ describe('Permit2', () => {
 
     // Verify permit2 approval
     cy.wait('@eth_signTypedData_v4')
-    cy.contains('Success')
+    cy.contains('Swap success!')
     cy.get(getTestSelector('popups')).contains('Swapped')
     expectPermit2AllowanceForUniversalRouterToBeMax(DAI)
   })

src/components/swap/PendingModalContent/Logos.tsx

@@ -162,7 +162,38 @@ function ConfirmedIcon({ className }: { className?: string }) {
   )
 }
 
-export const AnimatedEntranceConfirmationIcon = styled(ConfirmedIcon)`
+function SubmittedIcon({ className }: { className?: string }) {
+  const theme = useTheme()
+  return (
+    <FadePresence $scale>
+      <svg
+        data-testid="submitted-icon"
+        width="54"
+        height="54"
+        viewBox="0 0 54 54"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+        className={className}
+      >
+        <path
+          d="M26.9997 0.333496C12.2717 0.333496 0.333008 12.2722 0.333008 27.0002C0.333008 41.7282 12.2717 53.6668 26.9997 53.6668C41.7277 53.6668 53.6663 41.7282 53.6663 27.0002C53.6663 12.2722 41.7277 0.333496 26.9997 0.333496ZM36.4131 25.7469C36.0238 26.1362 35.5117 26.3335 34.9997 26.3335C34.4877 26.3335 33.9756 26.1389 33.5863 25.7469L28.9997 21.1603V37.6668C28.9997 38.7708 28.1037 39.6668 26.9997 39.6668C25.8957 39.6668 24.9997 38.7708 24.9997 37.6668V21.1629L20.4131 25.7495C19.6318 26.5308 18.365 26.5308 17.5837 25.7495C16.8023 24.9682 16.8023 23.7014 17.5837 22.9201L25.5837 14.9201C25.7677 14.7361 25.9887 14.5898 26.2341 14.4884C26.722 14.2858 27.274 14.2858 27.762 14.4884C28.0074 14.5898 28.2291 14.7361 28.4131 14.9201L36.4131 22.9201C37.1944 23.7014 37.1944 24.9656 36.4131 25.7469Z"
+          fill={theme.accentActive}
+        />
+      </svg>
+    </FadePresence>
+  )
+}
+
+const IconCss = css`
+  position: absolute;
   height: 48px;
   width: 48px;
 `
+
+export const AnimatedEntranceConfirmationIcon = styled(ConfirmedIcon)`
+  ${IconCss}
+`
+
+export const AnimatedEntranceSubmittedIcon = styled(SubmittedIcon)`
+  ${IconCss}
+`

src/components/swap/PendingModalContent/PendingModalContent.test.tsx

@@ -128,6 +128,38 @@ describe('PendingModalContent', () => {
       expect(screen.queryByTestId('pending-modal-currency-logo-loader')).toBeNull()
     })
 
+    it('renders the submitted icon instead of the given logo on mainnet when the transaction is submitted', () => {
+      mocked(useSwapTransactionStatus).mockReturnValue(TransactionStatus.Pending)
+
+      render(
+        <PendingModalContent
+          steps={[
+            ConfirmModalState.APPROVING_TOKEN,
+            ConfirmModalState.PERMITTING,
+            ConfirmModalState.PENDING_CONFIRMATION,
+          ]}
+          currentStep={ConfirmModalState.PENDING_CONFIRMATION}
+          swapResult={{
+            type: TradeFillType.Classic,
+            response: {
+              hash: '',
+              confirmations: 0,
+              from: '',
+              wait: jest.fn(),
+              nonce: 0,
+              gasLimit: BigNumber.from(0),
+              data: '',
+              value: BigNumber.from(0),
+              chainId: 0,
+            },
+          }}
+        />
+      )
+      expect(screen.queryByTestId('pending-modal-failure-icon')).toBeNull()
+      expect(screen.queryByTestId('pending-modal-currency-logo-loader')).toBeNull()
+      expect(screen.getByTestId('submitted-icon')).toBeInTheDocument()
+    })
+
     it('renders the success icon instead of the given logo when confirmed and successful', () => {
       mocked(useSwapTransactionStatus).mockReturnValue(TransactionStatus.Confirmed)