Merge pull request #680 from skip-mev/sync-main-with-staging

Sync main with staging
skip-mev · Jan 17, 2025 · d7e5520 · d7e5520
2 parents b61812f + e083990
commit d7e5520
Show file tree

Hide file tree

Showing 7 changed files with 43 additions and 34 deletions.
diff --git a/.changeset/eighty-rocks-melt.md b/.changeset/eighty-rocks-melt.md
@@ -0,0 +1,5 @@
+---
+"@skip-go/widget": patch
+---
+
+Proxy sentry requests to /api/sentry
diff --git a/.changeset/neat-seals-breathe.md b/.changeset/neat-seals-breathe.md
@@ -0,0 +1,5 @@
+---
+"@skip-go/widget": patch
+---
+
+Settings wheel size increased and opacity fix, plus settings bar css fixes
diff --git a/packages/widget/src/components/Button.tsx b/packages/widget/src/components/Button.tsx
@@ -5,14 +5,15 @@ import { removeButtonStyles, SmallText } from "@/components/Typography";
 export type GhostButtonProps = {
   secondary?: boolean;
   alwaysShowBackground?: boolean;
+  height?: number;
 } & FlexProps;
 
 export const GhostButton = styled(SmallText).attrs({
   as: "button",
 })<GhostButtonProps>`
   ${removeButtonStyles};
   line-height: 13px;
-  height: 30px;
+  height: ${({ height }) => height || 30}px;
 
   ${({ alwaysShowBackground, theme, secondary }) => {
     if (alwaysShowBackground) {

diff --git a/packages/widget/src/icons/CogIcon.tsx b/packages/widget/src/icons/CogIcon.tsx
@@ -5,24 +5,17 @@ type IconProps = {
 };
 
 export const CogIcon = ({ color = "currentColor", ...props }: IconProps) => (
-  <svg
-    width="10"
-    height="10"
-    viewBox="0 0 10 10"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-    {...props}
-  >
-    <g opacity="0.5">
-      <path
-        d="M4.96253 7.13619C3.78268 7.13619 2.82646 6.17997 2.82646 5.00012C2.82646 3.82027 3.78268 2.86405 4.96253 2.86405C6.14238 2.86405 7.0986 3.82027 7.0986 5.00012C7.0986 6.17997 6.14238 7.13619 4.96253 7.13619ZM7.67865 5.79097C7.74234 5.5703 7.97633 5.44639 8.19404 5.52044L8.91626 5.7653V4.23495L8.18811 4.48178C7.97189 4.55534 7.73789 4.4334 7.67322 4.21422C7.61448 4.01478 7.53401 3.82422 7.43429 3.64552C7.32223 3.44361 7.39924 3.18937 7.60608 3.08719L8.29869 2.74508L7.21659 1.66297L6.8725 2.36002C6.77081 2.56637 6.51756 2.64388 6.31615 2.5333C6.13744 2.43506 5.9464 2.35558 5.74696 2.29782C5.52679 2.23414 5.40386 1.99965 5.47742 1.78244L5.72721 1.0459H4.19686L4.44665 1.78244C4.52021 2.00015 4.3968 2.23365 4.17662 2.29782C3.98015 2.35509 3.79255 2.43259 3.61582 2.52886C3.41638 2.63746 3.16659 2.56242 3.06341 2.36002L2.70699 1.66297L1.62489 2.74508L2.31749 3.09903C2.52039 3.2027 2.59543 3.45348 2.48534 3.65292C2.38759 3.83064 2.30811 4.01971 2.24986 4.21767C2.18519 4.43834 1.94972 4.56077 1.73251 4.48573L1.00781 4.23495V5.7653L1.72708 5.51649C1.94528 5.44096 2.18174 5.56487 2.24542 5.78702C2.30367 5.99041 2.38364 6.18442 2.48336 6.36658C2.59444 6.56898 2.51545 6.82272 2.30811 6.92392L1.62489 7.25566L2.70699 8.33777L3.03676 7.65898C3.13796 7.45066 3.39318 7.37217 3.59608 7.48472C3.77774 7.58543 3.97175 7.66688 4.17514 7.72612C4.3963 7.7903 4.51823 8.02627 4.4432 8.24348L4.19686 8.95484H5.72721L5.48087 8.24348C5.40534 8.02577 5.52827 7.7903 5.74943 7.72612C5.95133 7.66737 6.14386 7.58641 6.32454 7.48669C6.52645 7.37513 6.7797 7.45263 6.88188 7.65898L7.21708 8.33777L8.29918 7.25566L7.61695 6.91898C7.41109 6.81729 7.33309 6.56503 7.44367 6.36312C7.54191 6.18343 7.62139 5.99238 7.67865 5.79146"
-        fill={color}
-      />
-      <path
-        d="M7.67865 5.79097C7.74234 5.5703 7.97633 5.44639 8.19404 5.52044L8.91626 5.7653V4.23495L8.18811 4.48178C7.97189 4.55534 7.73789 4.4334 7.67322 4.21422C7.61448 4.01478 7.53401 3.82422 7.43429 3.64552C7.32223 3.44361 7.39924 3.18938 7.60608 3.08719L8.29869 2.74508L7.21659 1.66297L6.8725 2.36002C6.77081 2.56637 6.51756 2.64388 6.31615 2.5333C6.13744 2.43506 5.9464 2.35558 5.74696 2.29782C5.52679 2.23414 5.40386 1.99965 5.47742 1.78244L5.72721 1.0459H4.19686L4.44665 1.78244C4.52021 2.00015 4.3968 2.23365 4.17662 2.29782C3.98015 2.35509 3.79255 2.43259 3.61582 2.52886C3.41638 2.63746 3.16659 2.56242 3.06341 2.36002L2.70699 1.66297L1.62489 2.74508L2.31749 3.09903C2.52039 3.2027 2.59543 3.45348 2.48534 3.65292C2.38759 3.83064 2.30811 4.01971 2.24986 4.21767C2.18519 4.43834 1.94972 4.56077 1.73251 4.48573L1.00781 4.23495V5.7653L1.72708 5.51649C1.94528 5.44096 2.18174 5.56487 2.24542 5.78702C2.30367 5.99041 2.38364 6.18442 2.48336 6.36658C2.59444 6.56898 2.51545 6.82272 2.30811 6.92392L1.62489 7.25566L2.70699 8.33777L3.03676 7.65898C3.13796 7.45066 3.39318 7.37217 3.59608 7.48472C3.77774 7.58543 3.97175 7.66688 4.17514 7.72612C4.3963 7.7903 4.51823 8.02627 4.4432 8.24348L4.19686 8.95484H5.72721L5.48087 8.24348C5.40534 8.02577 5.52827 7.7903 5.74943 7.72612C5.95133 7.66737 6.14386 7.58641 6.32454 7.48669C6.52645 7.37513 6.7797 7.45263 6.88188 7.65898L7.21708 8.33777L8.29918 7.25566L7.61695 6.91898C7.41109 6.81729 7.33309 6.56503 7.44367 6.36312C7.54191 6.18343 7.62139 5.99238 7.67865 5.79146M4.96253 7.13619C3.78268 7.13619 2.82646 6.17997 2.82646 5.00012C2.82646 3.82027 3.78268 2.86405 4.96253 2.86405C6.14238 2.86405 7.0986 3.82027 7.0986 5.00012C7.0986 6.17997 6.14238 7.13619 4.96253 7.13619Z"
-        stroke={color}
-        strokeWidth="0.3"
-      />
-    </g>
-  </svg>
+<svg 
+  width="15" 
+  height="15" 
+  viewBox="0 0 15 15" 
+  fill="none" 
+  xmlns="http://www.w3.org/2000/svg" 
+  {...props}
+>
+<path d="M12.6905 9.0162C12.7367 8.86574 12.8407 8.73843 12.9792 8.66898C13.1178 8.59954 13.2795 8.58796 13.4296 8.63426L15 9.16667V5.84491L13.418 6.37731C13.2679 6.42361 13.1062 6.41204 12.9677 6.34259C12.8291 6.27315 12.7252 6.14583 12.679 5.99537C12.5635 5.61343 12.4134 5.25463 12.2171 4.90741C12.1363 4.76852 12.1247 4.60648 12.1709 4.45602C12.2171 4.30556 12.321 4.18981 12.4596 4.12037L13.9608 3.37963L11.6166 1.03009L10.8776 2.5463C10.8083 2.68519 10.6929 2.78935 10.5427 2.83565C10.3926 2.88194 10.231 2.87037 10.0924 2.78935C9.74599 2.60417 9.37645 2.4537 9.00693 2.33796C8.85682 2.29167 8.7298 2.1875 8.66051 2.04861C8.59123 1.90972 8.57968 1.74769 8.62587 1.59722L9.16859 0H5.85451L6.39723 1.59722C6.44342 1.74769 6.43187 1.90972 6.36259 2.04861C6.29331 2.1875 6.16629 2.29167 6.01617 2.33796C5.64665 2.44213 5.28869 2.59259 4.94227 2.77778C4.8037 2.8588 4.64204 2.87037 4.49192 2.82407C4.3418 2.77778 4.22633 2.67361 4.15705 2.53472L3.38338 1.03009L1.02772 3.35648L2.51732 4.12037C2.65589 4.18981 2.75982 4.31713 2.80601 4.45602C2.8522 4.60648 2.84065 4.76852 2.75982 4.90741C2.57506 5.25463 2.4134 5.61343 2.30947 5.99537C2.26328 6.14583 2.15936 6.27315 2.02079 6.34259C1.88222 6.41204 1.72056 6.42361 1.57044 6.37731L0 5.83333V9.16667L1.55889 8.62268C1.70901 8.57639 1.87067 8.58796 2.00924 8.65741C2.14781 8.72685 2.25174 8.85417 2.29792 9.00463C2.40185 9.38657 2.56351 9.76852 2.74827 10.1157C2.8291 10.2546 2.84065 10.4167 2.79446 10.5671C2.74827 10.7176 2.64435 10.8333 2.50578 10.9028L1.01617 11.6204L3.36028 13.9699L4.07622 12.4884C4.1455 12.3495 4.26097 12.2454 4.41109 12.1991C4.5612 12.1528 4.72287 12.1644 4.86144 12.2454C5.20786 12.4421 5.57737 12.5926 5.96998 12.7083C6.1201 12.7546 6.24712 12.8472 6.3164 12.9977C6.38568 13.1366 6.39723 13.2986 6.35104 13.4491L5.81986 15H9.1455L8.61432 13.4491C8.56813 13.2986 8.57968 13.1366 8.64896 12.9977C8.71825 12.8588 8.84527 12.7546 8.99538 12.7083C9.37645 12.5926 9.74599 12.4421 10.0924 12.2454C10.231 12.1644 10.3926 12.1528 10.5427 12.1991C10.6929 12.2454 10.8083 12.3495 10.8776 12.4884L11.6051 13.9699L13.9492 11.6204L12.4711 10.8912C12.3326 10.8218 12.2287 10.706 12.1825 10.5556C12.1363 10.4051 12.1478 10.2431 12.2287 10.1042C12.425 9.75694 12.5866 9.39814 12.6905 9.0162ZM11.2818 7.5C11.2818 9.59491 9.58429 11.2847 7.50578 11.2847C5.42726 11.2847 3.71825 9.58333 3.71825 7.5C3.71825 5.41667 5.41571 3.7037 7.50578 3.7037C9.59589 3.7037 11.2818 5.40509 11.2818 7.5Z" 
+  fill={color}
+/>
+
+</svg>
 );
diff --git a/packages/widget/src/index.tsx b/packages/widget/src/index.tsx
@@ -16,6 +16,7 @@ import {
 
 init({
   dsn: "https://10ce608bdd1c68a13d3849d6b242333c@o4504768725909504.ingest.us.sentry.io/4508485201231872",
+  tunnel: "https://go.skip.build/api/sentry",
   defaultIntegrations: false,
   denyUrls: [/^https?:\/\/localhost:.*/],
   integrations: [

diff --git a/packages/widget/src/modals/SwapSettingsDrawer/SwapSettingsDrawer.tsx b/packages/widget/src/modals/SwapSettingsDrawer/SwapSettingsDrawer.tsx
@@ -119,16 +119,16 @@ export const SwapSettingsDrawer = createModal(() => {
   }, [transferOperations, route]);
 
   return (
-    <StyledSwapPageSettings gap={20}>
+    <StyledSwapPageSettings gap={15}>
       <Column gap={10}>
-        <Row justify="space-between">
+        <Row justify="space-between" align="center">
           <SwapDetailText>Route</SwapDetailText>
           <Row align="center" gap={5}>
             {chainsRoute?.map((chain, index) => (
               <Fragment key={index}>
                 <img
-                  width="20"
-                  height="20"
+                  width="25"
+                  height="25"
                   src={chain?.logoURI}
                   alt={chain?.prettyName}
                   title={chain?.prettyName}
@@ -141,9 +141,9 @@ export const SwapSettingsDrawer = createModal(() => {
           </Row>
         </Row>
         {Boolean(route?.swapPriceImpactPercent) && (
-          <Row justify="space-between">
+          <Row justify="space-between" align="center">
             <SwapDetailText>Price Impact</SwapDetailText>
-            <Row align="center" gap={5}>
+            <Row align="center" gap={5} height={25}>
               <SwapDetailText monospace>{route?.swapPriceImpactPercent}%</SwapDetailText>
             </Row>
           </Row>
@@ -152,7 +152,7 @@ export const SwapSettingsDrawer = createModal(() => {
       {fees.length > 0 && (
         <Column gap={10}>
           {fees.map(({ label, fee }, index) => (
-            <Row justify="space-between" key={index}>
+            <Row justify="space-between" align="center" key={index} height={25}>
               <SwapDetailText>{label}</SwapDetailText>
               <SwapDetailText monospace>
                 {fee.formattedAssetAmount} ({fee.formattedUsdAmount})

diff --git a/packages/widget/src/pages/SwapPage/SwapPageFooter.tsx b/packages/widget/src/pages/SwapPage/SwapPageFooter.tsx
@@ -72,7 +72,7 @@ export const SwapPageFooterItems = ({
                 <SpeedometerIcon />
                 {estimatedTime}
                 <CogIconWrapper>
-                  <CogIcon height={13} width={13} />
+                  <CogIcon height={14} width={14} />
                   {settingsChanged && <SettingsChangedIndicator />}
                 </CogIconWrapper>
               </Row>
@@ -112,7 +112,7 @@ export const SwapPageFooterItems = ({
                 <SpeedometerIcon />
                 {estimatedTime}
                 <CogIconWrapper>
-                  <CogIcon height={13} width={13} />
+                  <CogIcon height={14} width={14} />
                   {settingsChanged && <SettingsChangedIndicator />}
                 </CogIconWrapper>
               </Row>
@@ -160,7 +160,7 @@ export const SwapPageFooter = ({
 } & SwapPageFooterItemsProps &
   React.ButtonHTMLAttributes<HTMLButtonElement>) => {
   return (
-    <GhostButton gap={5} justify="space-between" onClick={onClick} {...props}>
+    <GhostButton gap={5} justify="space-between" align="center" onClick={onClick} height={35} {...props}>
       <SwapPageFooterItems
         rightContent={rightContent}
         showRouteInfo={showRouteInfo}
@@ -177,14 +177,18 @@ export const StyledSignatureRequiredContainer = styled(Row)`
 const CogIconWrapper = styled.div`
   position: relative;
   display: inline-block;
+
+  svg {
+    display: block;
+  }
 `;
 
 const SettingsChangedIndicator = styled.div`
   position: absolute;
-  top: -2px;
-  right: -2px;
+  top: -3px;
+  right: -3px;
   width: 4px;
   height: 4px;
-  background-color: white;
+  background-color: ${({ theme }) => theme.primary.text.normal};
   border-radius: 50%;
 `;