Merge branch 'main' into chore/upd-smart-swap-docs

skip-mev · Sep 23, 2024 · 6096c69 · 6096c69
2 parents 7c0f060 + daf3781
commit 6096c69
Show file tree

Hide file tree

Showing 17 changed files with 491 additions and 171 deletions.
diff --git a/packages/widget-v2/src/components/AssetChainInput.tsx b/packages/widget-v2/src/components/AssetChainInput.tsx
@@ -23,6 +23,7 @@ export type AssetChainInputProps = {
   selectedAsset?: AssetAtom;
   priceChangePercentage?: number;
   isWaitingToUpdateInputValue?: boolean;
+  badPriceWarning?: boolean;
 };
 
 export const AssetChainInput = ({
@@ -33,10 +34,13 @@ export const AssetChainInput = ({
   handleChangeChain,
   priceChangePercentage,
   isWaitingToUpdateInputValue,
+  badPriceWarning,
 }: AssetChainInputProps) => {
   const theme = useTheme();
-  const [showPriceChangePercentage, setShowPriceChangePercentage] =
+  const [_showPriceChangePercentage, setShowPriceChangePercentage] =
     useState(false);
+
+  const showPriceChangePercentage = _showPriceChangePercentage || badPriceWarning;
   const assetDetails = useGetAssetDetails({
     assetDenom: selectedAsset?.denom,
     amount: value,
@@ -170,6 +174,7 @@ export const AssetChainInput = ({
         {priceChangePercentage ? (
           <Row align="center" gap={6}>
             <SmallTextButton
+              color={badPriceWarning ? theme.error.text : undefined}
               onMouseEnter={() => setShowPriceChangePercentage(true)}
               onMouseLeave={() => setShowPriceChangePercentage(false)}
             >
@@ -180,14 +185,16 @@ export const AssetChainInput = ({
               direction={(priceChangePercentage ?? 0) > 0 ? "up" : "down"}
               style={{ scale: showPriceChangePercentage ? "1" : "0.7" }}
             />
-            {showPriceChangePercentage && (
+            {(showPriceChangePercentage) && (
               <SmallText color={priceChangeColor}>
                 {priceChangePercentage}%
               </SmallText>
             )}
           </Row>
         ) : (
-          <SmallText>{assetDetails.formattedUsdAmount ?? 0}</SmallText>
+          <SmallText color={badPriceWarning ? theme.error.text : undefined}>
+            {assetDetails.formattedUsdAmount ?? 0}
+          </SmallText>
         )}
         {assetDetails?.chainName ? (
           <GhostButton
@@ -213,15 +220,17 @@ const StyledAssetChainInputWrapper = styled(Column)`
   background-color: ${(props) => props.theme.primary.background.normal};
 `;
 
-const StyledInput = styled.input <{ isWaitingToUpdateInputValue?: boolean }>`
+const StyledInput = styled.input<{ isWaitingToUpdateInputValue?: boolean }>`
   all: unset;
   font-size: 38px;
   font-weight: 300;
   width: 100%;
   color: ${(props) => props.theme.primary.text.normal};
   background-color: ${(props) => props.theme.primary.background.normal};
 
-  ${(props) => props.isWaitingToUpdateInputValue && "animation: pulse 2s cubic-bezier(.4,0,.6,1) infinite;"}
+  ${(props) =>
+    props.isWaitingToUpdateInputValue &&
+    "animation: pulse 2s cubic-bezier(.4,0,.6,1) infinite;"}
   @keyframes pulse {
     0% {
       opacity: 0.5;

diff --git a/packages/widget-v2/src/components/Modal.tsx b/packages/widget-v2/src/components/Modal.tsx
@@ -9,6 +9,7 @@ import { ErrorBoundary } from "react-error-boundary";
 import { useAtom } from "jotai";
 import { errorAtom, ErrorType } from "@/state/errorPage";
 import { numberOfModalsOpenAtom } from "@/state/modal";
+import { themeAtom } from "@/state/skipClient";
 
 export type ModalProps = {
   children: React.ReactNode;
@@ -73,6 +74,7 @@ export const useModal = <T extends ModalProps>(
   modal?: FC<T>,
   initialArgs?: Partial<T>
 ) => {
+  const [theme] = useAtom(themeAtom);
   const [numberOfModalsOpen, setNumberOfModalsOpen] = useAtom(
     numberOfModalsOpenAtom
   );
@@ -86,6 +88,7 @@ export const useModal = <T extends ModalProps>(
         modalInstance.show({
           stackedModal: numberOfModalsOpen > 0,
           ...showArgs,
+          theme,
         } as Partial<T>);
         setNumberOfModalsOpen((prev) => prev + 1);
       },
@@ -98,7 +101,7 @@ export const useModal = <T extends ModalProps>(
         modalInstance.hide();
       },
     }),
-    [modalInstance, setNumberOfModalsOpen, numberOfModalsOpen]
+    [modalInstance, theme, numberOfModalsOpen, setNumberOfModalsOpen]
   );
 };
 

diff --git a/packages/widget-v2/src/components/Typography.tsx b/packages/widget-v2/src/components/Typography.tsx
@@ -39,6 +39,7 @@ export const SmallText = styled.p<TextProps>`
   color: ${({ theme }) => theme.primary.text.lowContrast};
   margin: 0;
   font-size: 13px;
+  line-height: 13px;
   ${textProps}
 `;
 
@@ -50,6 +51,7 @@ export const SmallTextButton = styled(SmallText).attrs({ as: "button" })`
 export const Text = styled(SmallText)`
   color: ${(props) => props.theme.primary.text.normal};
   font-size: 20px;
+  line-height: 20px;
   font-weight: 500;
   ${textProps}
 `;

diff --git a/packages/widget-v2/src/constants/skipClientDefault.ts b/packages/widget-v2/src/constants/skipClientDefault.ts
@@ -9,4 +9,6 @@ export const endpointOptions = {
   },
 };
 
-export const apiURL = `${appUrl}/api/widget/skip`;
+export const devApiUrl = "https://api.dev.skip.build";
+
+export const prodApiUrl = `${appUrl}/api/widget/skip`;
diff --git a/packages/widget-v2/src/icons/QuestionMarkIcon.tsx b/packages/widget-v2/src/icons/QuestionMarkIcon.tsx
@@ -0,0 +1,21 @@
+type IconProps = {
+  color?: string;
+};
+
+export const QuestionMarkIcon = ({ color = "currentColor", ...props }: IconProps & React.SVGProps<SVGSVGElement>) => (
+  <svg
+    width="15"
+    height="15"
+    viewBox="0 0 15 15"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M7.06616 14.199C10.9322 14.199 14.0662 11.065 14.0662 7.19897C14.0662 3.33298 10.9322 0.198975 7.06616 0.198975C3.20017 0.198975 0.0661621 3.33298 0.0661621 7.19897C0.0661621 11.065 3.20017 14.199 7.06616 14.199ZM7.22184 6.66477C6.5255 7.20041 6.2791 7.66107 6.2791 8.71094H7.54323C7.54323 8.07887 7.6825 7.78962 8.15387 7.42538L8.56096 7.12542C9.02162 6.78261 9.5037 6.11841 9.5037 5.34707C9.5037 4.07224 8.49668 3.27948 7.15757 3.27948C5.53991 3.27948 4.51147 4.26507 4.51147 5.83987H5.93629C5.93629 4.88642 6.38623 4.42576 7.13614 4.42576C7.75749 4.42576 8.14316 4.79 8.14316 5.38993C8.14316 5.74345 7.98246 6.07555 7.5968 6.37552L7.22184 6.66477ZM6.1077 9.37514V10.9714H7.72535V9.37514H6.1077Z"
+      fill={color}
+    />
+  </svg>
+);
diff --git a/packages/widget-v2/src/pages/SwapExecutionPage/SwapExecutionPageRouteDetailed.tsx b/packages/widget-v2/src/pages/SwapExecutionPage/SwapExecutionPageRouteDetailed.tsx
@@ -114,7 +114,7 @@ export const SwapExecutionPageRouteDetailed = ({
 
         return (
           <>
-            <Row key={`tooltip-${asset?.denom}-${index}`} style={{ height: "25px" }} align="center">
+            <StyledOperationTypeAndTooltipContainer key={`tooltip-${asset?.denom}-${index}`} style={{ height: "25px", position: "relative" }} align="center">
               <OperationTypeIconContainer
                 onMouseEnter={() => handleMouseEnterOperationType(index)}
                 onMouseLeave={() => handleMouseLeaveOperationType(index)}
@@ -129,7 +129,7 @@ export const SwapExecutionPageRouteDetailed = ({
                   <StyledSwapVenueOrBridgeImage width="10" height="10" src={bridgeOrSwapVenue.image} />
                 </Tooltip>
               )}
-            </Row>
+            </StyledOperationTypeAndTooltipContainer>
             <SwapExecutionPageRouteDetailedRow
               {...asset}
               index={index}
@@ -153,11 +153,14 @@ export const SwapExecutionPageRouteDetailed = ({
 const Tooltip = styled(SmallText).attrs({
   normalTextColor: true,
 })`
+  position: absolute;
+  left: 30px;
   padding: 10px;
   border-radius: 13px;
   border: 1px solid ${({ theme }) => theme.primary.text.ultraLowContrast};
   background-color: ${({ theme }) => theme.secondary.background.normal};
   box-sizing: border-box;
+  z-index: 1;
 `;
 
 const OperationTypeIconContainer = styled(Column).attrs({
@@ -182,3 +185,8 @@ const StyledSwapVenueOrBridgeImage = styled.img`
   width: 10px;
   height: 10px;
 `;
+
+const StyledOperationTypeAndTooltipContainer = styled(Row)`
+  position: relative;
+  height: 25px;
+`;