feat(widget): encapsulate skip-go-widget

.changeset/seven-wasps-push.md

@@ -0,0 +1,5 @@
+---
+'@skip-go/widget': patch
+---
+
+prefixwrap css styles

package.json

@@ -72,6 +72,7 @@
     "minimatch": "^9.0.3",
     "msw": "^1.2.3",
     "p-map": "^7.0.2",
+    "postcss-prefixwrap": "^1.49.0",
     "proxy-from-env": "^1.1.0",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",

packages/widget/package.json

@@ -47,6 +47,7 @@
     "@types/styled-components": "^5.1.25",
     "autoprefixer": "^10.4.19",
     "postcss": "^8.4.38",
+    "postcss-prefixwrap": "^1.49.0",
     "tailwindcss": "^3.4.3",
     "tailwindcss-animate": "^1.0.7",
     "typed-query-selector": "^2.11.2",

packages/widget/postcss.config.cjs

@@ -1,6 +1,9 @@
+/** @type {import('tailwindcss').Config} */
 module.exports = {
-  plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
-  },
+  important: true,
+  plugins: [
+    require('tailwindcss'),
+    require('autoprefixer'),
+    require('postcss-prefixwrap')('.skip-go-widget'),
+  ],
 };

packages/widget/src/provider/index.tsx

@@ -62,14 +62,16 @@ export const SwapWidgetProvider: React.FC<SwapWidgetProviderProps> = ({
   ...skipApiProviderProps
 }) => {
   return (
-    <WalletProvider>
-      <SkipAPIProvider {...skipApiProviderProps}>{children}</SkipAPIProvider>
-      <Toaster
-        position={'top-right'}
-        containerClassName="font-jost"
-        toastOptions={{ duration: 1000 * 10 }}
-        {...toasterProps}
-      />
-    </WalletProvider>
+    <div className="skip-go-widget">
+      <WalletProvider>
+        <SkipAPIProvider {...skipApiProviderProps}>{children}</SkipAPIProvider>
+        <Toaster
+          position={'top-right'}
+          containerClassName="font-jost"
+          toastOptions={{ duration: 1000 * 10 }}
+          {...toasterProps}
+        />
+      </WalletProvider>
+    </div>
   );
 };

packages/widget/src/ui/AssetInput.tsx

@@ -236,7 +236,7 @@ function AssetInput({
                   'disabled:opacity-75',
                   css`
                     background-color: ${useSwapWidgetUIStore.getState().colors
-                      .primary};
+                      .primary} !important;
                   `
                 )}
                 disabled={maxButtonDisabled}

packages/widget/src/ui/Dialog/DialogContent.tsx

@@ -16,17 +16,19 @@ export function DialogContent({ children, onInteractOutside }: Props) {
 
   return (
     <Dialog.Portal>
-      <Dialog.Overlay className="bg-blackA6 data-[state=open]:animate-overlayShow fixed inset-0 font-jost" />
-      <Dialog.Content
-        className={cn(
-          'data-[state=open]:animate-contentShow fixed top-[50%] left-[50%]',
-          'w-[90vw] max-w-[450px] max-h-[820px] h-[90vh] rounded-xl',
-          'translate-x-[-50%] translate-y-[-50%] bg-white shadow-[hsl(206_22%_7%_/_35%)_0px_10px_38px_-10px,_hsl(206_22%_7%_/_20%)_0px_10px_20px_-15px]'
-        )}
-        onInteractOutside={onInteractOutside}
-      >
-        {children}
-      </Dialog.Content>
+      <div className="skip-go-widget">
+        <Dialog.Overlay className="bg-blackA6 data-[state=open]:animate-overlayShow fixed inset-0 font-jost" />
+        <Dialog.Content
+          className={cn(
+            'data-[state=open]:animate-contentShow fixed top-[50%] left-[50%]',
+            'w-[90vw] max-w-[450px] max-h-[820px] h-[90vh] rounded-xl',
+            'translate-x-[-50%] translate-y-[-50%] bg-white shadow-[hsl(206_22%_7%_/_35%)_0px_10px_38px_-10px,_hsl(206_22%_7%_/_20%)_0px_10px_20px_-15px]'
+          )}
+          onInteractOutside={onInteractOutside}
+        >
+          {children}
+        </Dialog.Content>
+      </div>
     </Dialog.Portal>
   );
 }

packages/widget/src/ui/HistoryDialog/HistoryClearButton.tsx

@@ -4,8 +4,6 @@ import { ComponentProps } from 'react';
 import { SimpleTooltip } from '../SimpleTooltip';
 import { txHistory, useTxHistory } from '../../store/tx-history';
 import { cn } from '../../utils/ui';
-import { useSwapWidgetUIStore } from '../../store/swap-widget';
-import { css } from '@emotion/css';
 
 type Props = ComponentProps<'button'>;
 
@@ -15,18 +13,15 @@ export const HistoryClearButton = ({ className, ...props }: Props) => {
   if (!hasHistory) return null;
 
   return (
-    <SimpleTooltip label="Clear transaction history" type="warning">
+    <SimpleTooltip label="Clear transaction history">
       <button
         className={cn(
           'text-xs font-semibold',
           'rounded-lg p-2',
           'flex items-center gap-1',
           'transition-colors focus:outline-none',
           `opacity-80 hover:opacity-90`,
-          css`
-            color: ${useSwapWidgetUIStore.getState().colors.primary};
-            background-color: ${useSwapWidgetUIStore.getState().colors.primary};
-          `,
+          'text-red-500 bg-red-100',
           className
         )}
         onClick={() => txHistory.clear()}

packages/widget/src/ui/HistoryDialog/HistoryList.tsx

@@ -254,24 +254,9 @@ export const Item = forwardRef<HTMLDivElement, ItemProps>(function Item(
             onClick={() => {
               disclosure.openJson({ title: 'Tx History JSON', data });
             }}
-          >
-            <EyeIcon className="h-3 w-3" />
-            <span>View Raw Route</span>
-          </button>
-          <button
-            className={cn(
-              'rounded-md px-2 py-1 text-xs transition-colors',
-              'flex items-center justify-center space-x-1',
-              `opacity-80 hover:opacity-90`,
-              css`
-                color: ${useSwapWidgetUIStore.getState().colors.primary};
-                background-color: ${useSwapWidgetUIStore.getState().colors
-                  .primary};
-              `
-            )}
-            onClick={() => txHistory.remove(id)}
           >
             <TrashIcon className="h-3 w-3" />
+            <span>Delete</span>
           </button>
         </div>
       </Accordion.Content>

packages/widget/src/ui/HistoryDialog/index.tsx

@@ -25,61 +25,63 @@ export const HistoryDialog = () => {
 
   return (
     <Dialog.Root modal open={isOpen}>
-      <Dialog.Overlay className="bg-blackA6 data-[state=open]:animate-overlayShow fixed inset-0" />
-      <Dialog.Content
-        className={cn(
-          'font-jost data-[state=open]:animate-contentShow fixed top-[50%] left-[50%]',
-          'w-[90vw] max-w-[450px] max-h-[820px] h-[90vh] rounded-xl',
-          'translate-x-[-50%] translate-y-[-50%] bg-white shadow-[hsl(206_22%_7%_/_35%)_0px_10px_38px_-10px,_hsl(206_22%_7%_/_20%)_0px_10px_20px_-15px]'
-        )}
-        onInteractOutside={close}
-      >
-        <div className="flex h-full flex-col space-y-2 px-4 py-6">
-          <div className="flex items-center gap-4 pb-2">
-            <button
-              className="flex h-8 w-8 items-center justify-center rounded-full transition-colors hover:bg-neutral-100"
-              onClick={close}
+      <div className="skip-go-widget">
+        <Dialog.Overlay className="bg-blackA6 data-[state=open]:animate-overlayShow fixed inset-0" />
+        <Dialog.Content
+          className={cn(
+            'font-jost data-[state=open]:animate-contentShow fixed top-[50%] left-[50%]',
+            'w-[90vw] max-w-[450px] max-h-[820px] h-[90vh] rounded-xl',
+            'translate-x-[-50%] translate-y-[-50%] bg-white shadow-[hsl(206_22%_7%_/_35%)_0px_10px_38px_-10px,_hsl(206_22%_7%_/_20%)_0px_10px_20px_-15px]'
+          )}
+          onInteractOutside={close}
+        >
+          <div className="flex h-full flex-col space-y-2 px-4 py-6">
+            <div className="flex items-center gap-4 pb-2">
+              <button
+                className="flex h-8 w-8 items-center justify-center rounded-full transition-colors hover:bg-neutral-100"
+                onClick={close}
+              >
+                <ArrowLeftIcon className="h-6 w-6" />
+              </button>
+              <h3 className="text-xl font-bold">Transaction History</h3>
+              <div className="flex-grow" />
+              <HistoryClearButton />
+            </div>
+            <ScrollArea.Root
+              className={cn(
+                'relative isolate -mx-4 overflow-hidden',
+                'before:absolute before:inset-x-0 before:bottom-0 before:z-10 before:h-2',
+                'before:bg-gradient-to-t before:from-white before:to-transparent'
+              )}
             >
-              <ArrowLeftIcon className="h-6 w-6" />
-            </button>
-            <h3 className="text-xl font-bold">Transaction History</h3>
-            <div className="flex-grow" />
-            <HistoryClearButton />
+              <ScrollArea.Viewport className="h-full w-full px-4">
+                <HistoryList.Root>
+                  {entries && entries.length < 1 && (
+                    <span className="p-2 text-center text-sm opacity-60">
+                      No recent transactions.
+                    </span>
+                  )}
+                  {entries?.map(([id, data]) => (
+                    <HistoryList.Item key={id} id={id} data={data} />
+                  ))}
+                  {!isReady && (
+                    <div className="p-4 text-center opacity-60">
+                      Loading transaction history...
+                    </div>
+                  )}
+                </HistoryList.Root>
+              </ScrollArea.Viewport>
+              <ScrollArea.Scrollbar
+                className="z-20 flex touch-none select-none transition-colors ease-out data-[orientation=horizontal]:h-2 data-[orientation=vertical]:w-2 data-[orientation=horizontal]:flex-col"
+                orientation="vertical"
+              >
+                <ScrollArea.Thumb className="relative flex-1 rounded-[10px] bg-neutral-500/50 transition-colors before:absolute before:left-1/2 before:top-1/2 before:h-2 before:w-2 before:-translate-x-1/2 before:-translate-y-1/2 before:content-[''] hover:bg-neutral-500" />
+              </ScrollArea.Scrollbar>
+              <ScrollArea.Corner />
+            </ScrollArea.Root>
           </div>
-          <ScrollArea.Root
-            className={cn(
-              'relative isolate -mx-4 overflow-hidden',
-              'before:absolute before:inset-x-0 before:bottom-0 before:z-10 before:h-2',
-              'before:bg-gradient-to-t before:from-white before:to-transparent'
-            )}
-          >
-            <ScrollArea.Viewport className="h-full w-full px-4">
-              <HistoryList.Root>
-                {entries && entries.length < 1 && (
-                  <span className="p-2 text-center text-sm opacity-60">
-                    No recent transactions.
-                  </span>
-                )}
-                {entries?.map(([id, data]) => (
-                  <HistoryList.Item key={id} id={id} data={data} />
-                ))}
-                {!isReady && (
-                  <div className="p-4 text-center opacity-60">
-                    Loading transaction history...
-                  </div>
-                )}
-              </HistoryList.Root>
-            </ScrollArea.Viewport>
-            <ScrollArea.Scrollbar
-              className="z-20 flex touch-none select-none transition-colors ease-out data-[orientation=horizontal]:h-2 data-[orientation=vertical]:w-2 data-[orientation=horizontal]:flex-col"
-              orientation="vertical"
-            >
-              <ScrollArea.Thumb className="relative flex-1 rounded-[10px] bg-neutral-500/50 transition-colors before:absolute before:left-1/2 before:top-1/2 before:h-2 before:w-2 before:-translate-x-1/2 before:-translate-y-1/2 before:content-[''] hover:bg-neutral-500" />
-            </ScrollArea.Scrollbar>
-            <ScrollArea.Corner />
-          </ScrollArea.Root>
-        </div>
-      </Dialog.Content>
+        </Dialog.Content>
+      </div>
     </Dialog.Root>
   );
 };

packages/widget/src/ui/PreviewRoute/ChainStep.tsx

@@ -399,7 +399,8 @@ export const ChainStep = ({
                 className={cn(
                   'flex flex-row items-center text-sm font-semibold underline',
                   css`
-                    color: ${useSwapWidgetUIStore.getState().colors.primary};
+                    color: ${useSwapWidgetUIStore.getState().colors
+                      .primary} !important;
                   `
                 )}
                 href={stepState.explorerLink.link}
@@ -483,7 +484,7 @@ export const ChainStep = ({
                       !isNotFocused
                         ? css`
                             color: ${useSwapWidgetUIStore.getState().colors
-                              .primary};
+                              .primary} !important;
                           `
                         : 'text-neutral-400'
                     )}

packages/widget/src/ui/PreviewRoute/SetAddressDialog.tsx

@@ -163,7 +163,7 @@ export const SetAddressDialog = ({
                           //   css`
                           //     border: 1px solid
                           //       ${useSwapWidgetUIStore.getState().colors
-                          //         .primary};
+                          //         .primary} !important;
                           //   `
                         )}
                         onClick={async () => {
@@ -237,9 +237,9 @@ export const SetAddressDialog = ({
 
                           css`
                             border-color: ${useSwapWidgetUIStore.getState()
-                              .colors.primary};
+                              .colors.primary} !important;
                             background-color: ${useSwapWidgetUIStore.getState()
-                              .colors.primary};
+                              .colors.primary} !important;
                           `
                         )}
                         onClick={() => save()}
@@ -252,9 +252,9 @@ export const SetAddressDialog = ({
                           'flex w-12 items-center justify-center rounded-md border-2',
                           css`
                             border-color: ${useSwapWidgetUIStore.getState()
-                              .colors.primary};
+                              .colors.primary} !important;
                             color: ${useSwapWidgetUIStore.getState().colors
-                              .primary};
+                              .primary} !important;
                           `
                         )}
                         onClick={() => cancel()}

packages/widget/src/ui/PreviewRoute/index.tsx

@@ -305,7 +305,7 @@ export const PreviewRoute = ({
             'disabled:cursor-not-allowed disabled:opacity-75',
             css`
               background-color: ${useSwapWidgetUIStore.getState().colors
-                .primary};
+                .primary} !important;
             `
           )}
           onClick={() => submitMutation.mutate()}
@@ -328,7 +328,8 @@ export const PreviewRoute = ({
           'outline-none transition-transform',
           'disabled:cursor-not-allowed disabled:opacity-75',
           css`
-            background-color: ${useSwapWidgetUIStore.getState().colors.primary};
+            background-color: ${useSwapWidgetUIStore.getState().colors
+              .primary} !important;
           `
         )}
         onClick={async () => {
@@ -416,7 +417,8 @@ export const PreviewRoute = ({
                 className={cn(
                   'right-7 text-xs font-medium',
                   css`
-                    color: ${useSwapWidgetUIStore.getState().colors.primary};
+                    color: ${useSwapWidgetUIStore.getState().colors
+                      .primary} !important;
                   `
                 )}
                 onClick={() => setIsExpanded(false)}
@@ -579,7 +581,7 @@ export const PreviewRoute = ({
                 'disabled:cursor-not-allowed disabled:opacity-75',
                 css`
                   background-color: ${useSwapWidgetUIStore.getState().colors
-                    .primary};
+                    .primary} !important;
                 `
               )}
               onClick={control.close}

packages/widget/src/ui/PriceImpactWarning.tsx

@@ -45,7 +45,7 @@ export const PriceImpactWarning = ({
             `hover:opacity-90`,
             css`
               background-color: ${useSwapWidgetUIStore.getState().colors
-                .primary};
+                .primary} !important;
             `
           )}
           onClick={() => {