Merge pull request #691 from reservoirprotocol/ted/fe-7681-add-general-warning-for-missing-token-price-detection

Add warning for missing token price detection + add stroke to all alerts

Author: ted-palmer

.changeset/chubby-peaches-try.md

@@ -0,0 +1,5 @@
+---
+'@reservoir0x/relay-kit-ui': patch
+---
+
+Add warning for missing token price detection + add stroke to all alerts

packages/ui/panda.config.ts

@@ -37,6 +37,7 @@ export const Colors = {
   // Red
   red2: { value: '{colors.red.2}' },
   red3: { value: '{colors.red.3}' },
+  red4: { value: '{colors.red.4}' },
   red5: { value: '{colors.red.5}' },
   red6: { value: '{colors.red.6}' },
   red9: { value: '{colors.red.9}' },

packages/ui/src/components/widgets/SwapWidget/index.tsx

@@ -1558,8 +1558,9 @@ const SwapWidget: FC<SwapWidgetProps> = ({
                           {!isUsdInputMode &&
                           toToken &&
                           quote?.details?.currencyOut?.amountUsd &&
+                          quote?.details?.currencyOut?.amountUsd !== '0' &&
                           !isFetchingQuote &&
-                          quote.details.totalImpact?.percent ? (
+                          quote?.details?.totalImpact?.percent ? (
                             <Text
                               style="subtitle3"
                               color={feeBreakdown?.totalFees.priceImpactColor}

packages/ui/src/components/widgets/WidgetErrorWell.tsx

@@ -60,6 +60,10 @@ export const WidgetErrorWell: FC<Props> = ({
     isHighPriceImpact && totalImpactUsd && Number(totalImpactUsd) <= -10
   const isInsufficientLiquidityError =
     fetchQuoteErrorMessage?.includes('No quotes found')
+  const isMissingUsdTokenPrice =
+    quote?.details?.currencyOut &&
+    (quote?.details?.currencyOut?.amountUsd === undefined ||
+      quote?.details?.currencyOut?.amountUsd === '0')
 
   if (isInsufficientLiquidityError) {
     return null
@@ -87,6 +91,8 @@ export const WidgetErrorWell: FC<Props> = ({
           gap: '2',
           p: '3',
           backgroundColor: 'amber2',
+          '--borderColor': 'colors.amber4',
+          border: '1px solid var(--borderColor)',
           borderRadius: 12,
           mb: '3',
           ...containerCss
@@ -113,6 +119,8 @@ export const WidgetErrorWell: FC<Props> = ({
             gap: '2',
             p: '3',
             backgroundColor: 'amber2',
+            '--borderColor': 'colors.amber4',
+            border: '1px solid var(--borderColor)',
             borderRadius: 12,
             mb: '3',
             ...containerCss
@@ -141,6 +149,8 @@ export const WidgetErrorWell: FC<Props> = ({
             gap: '2',
             p: '3',
             backgroundColor: 'red2',
+            '--borderColor': 'colors.red4',
+            border: '1px solid var(--borderColor)',
             borderRadius: 12,
             mb: '3',
             ...containerCss
@@ -163,6 +173,8 @@ export const WidgetErrorWell: FC<Props> = ({
             gap: '2',
             p: '3',
             backgroundColor: 'red2',
+            '--borderColor': 'colors.red4',
+            border: '1px solid var(--borderColor)',
             borderRadius: 12,
             mb: '3',
             ...containerCss
@@ -205,6 +217,8 @@ export const WidgetErrorWell: FC<Props> = ({
             py: '3',
             px: '3',
             backgroundColor: 'amber2',
+            '--borderColor': 'colors.amber4',
+            border: '1px solid var(--borderColor)',
             borderRadius: 12,
             mb: '3',
             ...containerCss
@@ -230,14 +244,16 @@ export const WidgetErrorWell: FC<Props> = ({
           gap: '2',
           py: '2',
           px: '3',
-          backgroundColor: 'red2',
+          backgroundColor: 'amber2',
+          '--borderColor': 'colors.amber4',
+          border: '1px solid var(--borderColor)',
           borderRadius: 12,
           mb: '3',
           ...containerCss
         }}
         id={'widget-error-well-section'}
       >
-        <Box css={{ color: 'red9' }}>
+        <Box css={{ color: 'amber10' }}>
           <FontAwesomeIcon icon={faExclamationCircle} width={16} />
         </Box>
         <Text style="subtitle3" css={{ color: 'amber12' }}>
@@ -248,6 +264,34 @@ export const WidgetErrorWell: FC<Props> = ({
     )
   }
 
+  if (isMissingUsdTokenPrice) {
+    return (
+      <Flex
+        align="center"
+        css={{
+          gap: '2',
+          py: '2',
+          px: '3',
+          backgroundColor: 'amber2',
+          '--borderColor': 'colors.amber4',
+          border: '1px solid var(--borderColor)',
+          borderRadius: 12,
+          mb: '3',
+          ...containerCss
+        }}
+        id={'widget-error-well-section'}
+      >
+        <Box css={{ color: 'amber10' }}>
+          <FontAwesomeIcon icon={faExclamationCircle} width={16} />
+        </Box>
+        <Text style="subtitle3" css={{ color: 'amber12' }}>
+          Unable to detect token price. Please confirm expected output before
+          submitting.
+        </Text>
+      </Flex>
+    )
+  }
+
   if (isHighRelayerServiceFee) {
     return (
       <Flex
@@ -257,6 +301,8 @@ export const WidgetErrorWell: FC<Props> = ({
           py: '3',
           px: '3',
           backgroundColor: 'amber2',
+          '--borderColor': 'colors.amber4',
+          border: '1px solid var(--borderColor)',
           borderRadius: 12,
           mb: '3',
           ...containerCss