Alert message iteration.

src/custom/components/AccountDetails/Transaction/index.tsx

@@ -93,8 +93,9 @@ function ActivitySummary(params: {
  activityData: ReturnType<typeof useActivityDescriptors>
  isCancelled?: boolean
  isExpired?: boolean
+ isUnfillable?: boolean
 }) {
- const { id, activityData, isCancelled, isExpired } = params
+ const { id, activityData, isCancelled, isExpired, isUnfillable } = params
 
  if (!activityData) return null
 
@@ -185,6 +186,7 @@ function ActivitySummary(params: {
  </>
  )}
  </SummaryInnerRow>
+ {!isUnfillable && unfillableAlert()}
  <SummaryInnerRow isCancelled={isCancelled} isExpired={isExpired}>
  {fulfillmentTime ? (
  <>
@@ -302,6 +304,21 @@ function CancellationModal(props: CancellationModalProps): JSX.Element | null {
  )
 }
 
+function unfillableAlert(): JSX.Element {
+ return (
+ <>
+ <TransactionAlertMessage>
+ <p>
+ <span role="img" aria-label="alert">
+ 🚨
+ </span>{' '}
+ Limit price out of range. Wait for a matching price or cancel your order.
+ </p>
+ </TransactionAlertMessage>
+ </>
+ )
+}
+
 export default function Transaction({ hash: id }: { hash: string }) {
  const { chainId } = useActiveWeb3React()
  // Return info necessary for rendering order/transaction info from the incoming id
@@ -352,7 +369,13 @@ export default function Transaction({ hash: id }: { hash: string }) {
  </IconType>
  )}
  <TransactionStatusText>
- <ActivitySummary activityData={activityData} id={id} isCancelled={isCancelled} isExpired={isExpired} />
+ <ActivitySummary
+ activityData={activityData}
+ id={id}
+ isCancelled={isCancelled}
+ isExpired={isExpired}
+ isUnfillable={isUnfillable}
+ />
  </TransactionStatusText>
  </RowFixed>
  </TransactionState>
@@ -398,21 +421,6 @@ export default function Transaction({ hash: id }: { hash: string }) {
  )}
  </StatusLabelWrapper>
  </TransactionWrapper>
-
- {isUnfillable && (
- <TransactionAlertMessage>
- <p>
- <span role="img" aria-label="alert">
- 🚨
- </span>{' '}
- Price out of range.{' '}
- <a href="#/faq" target="_blank" rel="noopener ">
- Read more
- </a>
- .
- </p>
- </TransactionAlertMessage>
- )}
  </Wrapper>
  )
 }

src/custom/components/AccountDetails/Transaction/styled.ts

@@ -282,19 +282,29 @@ export const CancellationSummary = styled.span`
 export const TransactionAlertMessage = styled.div`
  width: 100%;
  padding: 0;
- background: ${({ theme }) => theme.yellow};
- color: black;
- font-size: 13px;
+ color: ${({ theme }) => theme.text2};
  display: flex;
  justify-content: center;
+ margin: 0;
+ font-size: 12px;
 
  > p {
+ margin: 6px 20px 6px 0;
  padding: 10px;
- margin: 0;
- margin: 0 auto;
+ border-radius: 6px;
+ display: flex;
+ align-items: center;
+ line-height: 1.4;
+ background: ${({ theme }) => theme.yellow};
+ width: 100%;
+ height: 100%;
  }
 
  > p > a {
  color: ${({ theme }) => theme.primary1};
  }
+
+ > p > span {
+ margin: 0 6px 0 0;
+ }
 `