diff --git a/initia-registry b/initia-registry
index e7bed2386..b82033705 160000
--- a/initia-registry
+++ b/initia-registry
@@ -1 +1 @@
-Subproject commit e7bed2386e33fa555951d8481f8c3e39ad67b7ce
+Subproject commit b82033705c2c5af5e8ddb9e73decca2a1afa25c8
diff --git a/package.json b/package.json
index e3d369317..e43c4d7bc 100644
--- a/package.json
+++ b/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",
diff --git a/packages/widget/package.json b/packages/widget/package.json
index 0e52bd691..398682949 100644
--- a/packages/widget/package.json
+++ b/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",
diff --git a/packages/widget/postcss.config.cjs b/packages/widget/postcss.config.cjs
index 12a703d90..a6c51947a 100644
--- a/packages/widget/postcss.config.cjs
+++ b/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'),
+ ],
};
diff --git a/packages/widget/src/provider/index.tsx b/packages/widget/src/provider/index.tsx
index 11e41cfea..89f5b7204 100644
--- a/packages/widget/src/provider/index.tsx
+++ b/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>
);
};
diff --git a/packages/widget/src/ui/AssetInput.tsx b/packages/widget/src/ui/AssetInput.tsx
index 47fa37c67..f78ff1643 100644
--- a/packages/widget/src/ui/AssetInput.tsx
+++ b/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}
diff --git a/packages/widget/src/ui/Dialog/DialogContent.tsx b/packages/widget/src/ui/Dialog/DialogContent.tsx
index 506ba84f4..e150fc0c1 100644
--- a/packages/widget/src/ui/Dialog/DialogContent.tsx
+++ b/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>
);
}
diff --git a/packages/widget/src/ui/HistoryDialog/HistoryClearButton.tsx b/packages/widget/src/ui/HistoryDialog/HistoryClearButton.tsx
index 8b2b1451a..1e0fd916b 100644
--- a/packages/widget/src/ui/HistoryDialog/HistoryClearButton.tsx
+++ b/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,7 +13,7 @@ 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',
@@ -23,10 +21,7 @@ export const HistoryClearButton = ({ className, ...props }: Props) => {
'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()}
diff --git a/packages/widget/src/ui/HistoryDialog/HistoryList.tsx b/packages/widget/src/ui/HistoryDialog/HistoryList.tsx
index 18b698eee..55af1fe10 100644
--- a/packages/widget/src/ui/HistoryDialog/HistoryList.tsx
+++ b/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>
diff --git a/packages/widget/src/ui/HistoryDialog/index.tsx b/packages/widget/src/ui/HistoryDialog/index.tsx
index 814cf39ca..fe26557a6 100644
--- a/packages/widget/src/ui/HistoryDialog/index.tsx
+++ b/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>
);
};
diff --git a/packages/widget/src/ui/PreviewRoute/ChainStep.tsx b/packages/widget/src/ui/PreviewRoute/ChainStep.tsx
index b482675e7..182d04433 100644
--- a/packages/widget/src/ui/PreviewRoute/ChainStep.tsx
+++ b/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'
)}
diff --git a/packages/widget/src/ui/PreviewRoute/SetAddressDialog.tsx b/packages/widget/src/ui/PreviewRoute/SetAddressDialog.tsx
index dd4843b38..5e68be3ee 100644
--- a/packages/widget/src/ui/PreviewRoute/SetAddressDialog.tsx
+++ b/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()}
diff --git a/packages/widget/src/ui/PreviewRoute/index.tsx b/packages/widget/src/ui/PreviewRoute/index.tsx
index fbe55235a..1bc552315 100644
--- a/packages/widget/src/ui/PreviewRoute/index.tsx
+++ b/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}
diff --git a/packages/widget/src/ui/PriceImpactWarning.tsx b/packages/widget/src/ui/PriceImpactWarning.tsx
index aebc70207..d9d00c9d3 100644
--- a/packages/widget/src/ui/PriceImpactWarning.tsx
+++ b/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={() => {
diff --git a/packages/widget/src/ui/SettingsDialog/index.tsx b/packages/widget/src/ui/SettingsDialog/index.tsx
index 0c2e69024..ab767a4ca 100644
--- a/packages/widget/src/ui/SettingsDialog/index.tsx
+++ b/packages/widget/src/ui/SettingsDialog/index.tsx
@@ -13,54 +13,56 @@ export const SettingsDialog = () => {
const [isOpen, { close }] = useDisclosureKey('settingsDialog');
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="h-full overflow-y-auto px-4 py-6 scrollbar-hide">
- <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">Swap Settings</h3>
- <div className="flex-grow" />
- <SaveIndicator />
- </div>
- <GasSetting />
- <p className="text-balance p-2 text-sm text-neutral-500 [&_a:hover]:underline [&_a]:text-red-500">
- Gas is used to meter transactions and allocate resources fairly
- among users. Users must pay a gas fee, usually in the native token,
- to have their transactions processed by the network.
- <br />
- <AdaptiveLink href="https://docs.cosmos.network/main/glossary#gas">
- Learn more
- </AdaptiveLink>
- </p>
- <SlippageSetting />
- <p className="text-balance p-2 text-sm text-neutral-500 [&_a:hover]:underline [&_a]:text-red-500">
- Slippage is how much price movement you can tolerate between the
- time you send out a transaction and the time it's executed.
- <br />
- <AdaptiveLink href="https://medium.com/onomy-protocol/what-is-slippage-in-defi-62a0d068feb3">
- Learn more
- </AdaptiveLink>
- </p>
- {/* <PurgeSetting />
+ <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="h-full overflow-y-auto px-4 py-6 scrollbar-hide">
+ <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">Swap Settings</h3>
+ <div className="flex-grow" />
+ <SaveIndicator />
+ </div>
+ <GasSetting />
+ <p className="text-balance p-2 text-sm text-neutral-500 [&_a:hover]:underline [&_a]:text-red-500">
+ Gas is used to meter transactions and allocate resources fairly
+ among users. Users must pay a gas fee, usually in the native
+ token, to have their transactions processed by the network.
+ <br />
+ <AdaptiveLink href="https://docs.cosmos.network/main/glossary#gas">
+ Learn more
+ </AdaptiveLink>
+ </p>
+ <SlippageSetting />
+ <p className="text-balance p-2 text-sm text-neutral-500 [&_a:hover]:underline [&_a]:text-red-500">
+ Slippage is how much price movement you can tolerate between the
+ time you send out a transaction and the time it's executed.
+ <br />
+ <AdaptiveLink href="https://medium.com/onomy-protocol/what-is-slippage-in-defi-62a0d068feb3">
+ Learn more
+ </AdaptiveLink>
+ </p>
+ {/* <PurgeSetting />
<p className="text-balance p-2 text-sm text-neutral-500 [&_a:hover]:underline [&_a]:text-red-500">
Removes all of your data from the app, which includes connected
wallets state, transaction history, and settings.
</p> */}
- </div>
- </Dialog.Content>
+ </div>
+ </Dialog.Content>
+ </div>
</Dialog.Root>
);
};
diff --git a/packages/widget/src/ui/SimpleTooltip.tsx b/packages/widget/src/ui/SimpleTooltip.tsx
index e394b8973..5145b44b3 100644
--- a/packages/widget/src/ui/SimpleTooltip.tsx
+++ b/packages/widget/src/ui/SimpleTooltip.tsx
@@ -28,41 +28,45 @@ export const SimpleTooltip = (props: Props) => {
<Tooltip.Root {...tooltipProps}>
<Tooltip.Trigger asChild>{children}</Tooltip.Trigger>
<Tooltip.Portal>
- <Tooltip.Content
- sideOffset={4}
- {..._content}
- className={cn(
- 'rounded-md bg-white px-4 py-2 leading-none',
- 'select-none shadow shadow-neutral-500/50',
- 'text-sm font-jost',
- 'animate-slide-up-and-fade',
- type === 'warning' && `bg-[#fbeef1]`,
- type === 'warning' &&
- css`
- color: ${useSwapWidgetUIStore.getState().colors.primary};
- `,
- type === 'warning' && 'font-medium',
- type === 'brand' && `text-white`,
- type === 'brand' &&
- css`
- background-color: ${useSwapWidgetUIStore.getState().colors
- .primary};
- `,
- _content?.className
- )}
- >
- {label}
- <Tooltip.Arrow
+ <div className="skip-go-widget">
+ <Tooltip.Content
+ sideOffset={4}
+ {..._content}
className={cn(
- 'fill-white drop-shadow',
- type === 'warning' && 'fill-[#fbeef1]',
+ 'rounded-md bg-white px-4 py-2 leading-none',
+ 'select-none shadow shadow-neutral-500/50',
+ 'text-sm font-jost',
+ 'animate-slide-up-and-fade',
+ type === 'warning' && `bg-[#fbeef1]`,
+ type === 'warning' &&
+ css`
+ color: ${useSwapWidgetUIStore.getState().colors
+ .primary} !important;
+ `,
+ type === 'warning' && 'font-medium',
+ type === 'brand' && `text-white`,
type === 'brand' &&
css`
- fill: ${useSwapWidgetUIStore.getState().colors.primary};
- `
+ background-color: ${useSwapWidgetUIStore.getState().colors
+ .primary} !important;
+ `,
+ _content?.className
)}
- />
- </Tooltip.Content>
+ >
+ {label}
+ <Tooltip.Arrow
+ className={cn(
+ 'fill-white drop-shadow',
+ type === 'warning' && 'fill-[#fbeef1]',
+ type === 'brand' &&
+ css`
+ fill: ${useSwapWidgetUIStore.getState().colors
+ .primary} !important;
+ `
+ )}
+ />
+ </Tooltip.Content>
+ </div>
</Tooltip.Portal>
</Tooltip.Root>
);
diff --git a/packages/widget/src/ui/TransactionDialog.tsx b/packages/widget/src/ui/TransactionDialog.tsx
index 8d88697d8..267e10c2e 100644
--- a/packages/widget/src/ui/TransactionDialog.tsx
+++ b/packages/widget/src/ui/TransactionDialog.tsx
@@ -75,7 +75,7 @@ function TransactionDialog({
'enabled:hover:rotate-1 enabled:hover:scale-102',
css`
background-color: ${useSwapWidgetUIStore.getState().colors
- .primary};
+ .primary} !important;
`
)}
disabled={!route || (typeof isLoading === 'boolean' && isLoading)}
diff --git a/packages/widget/src/ui/Widget.tsx b/packages/widget/src/ui/Widget.tsx
index 8039aab91..0767f9b96 100644
--- a/packages/widget/src/ui/Widget.tsx
+++ b/packages/widget/src/ui/Widget.tsx
@@ -209,7 +209,7 @@ export const SwapWidgetUI = ({
'relative rounded-full p-[4px]',
css`
background-color: ${useSwapWidgetUIStore.getState().colors
- .primary};
+ .primary} !important;
`
)}
>
@@ -218,7 +218,7 @@ export const SwapWidgetUI = ({
'absolute h-6 w-6 animate-ping rounded-full',
css`
background-color: ${useSwapWidgetUIStore.getState().colors
- .primary};
+ .primary} !important;
`
)}
/>
@@ -252,7 +252,7 @@ export const SwapWidgetUI = ({
'enabled:hover:rotate-1 enabled:hover:scale-105',
css`
background-color: ${useSwapWidgetUIStore.getState().colors
- .primary};
+ .primary} !important;
`
)}
disabled={!sourceChain}
diff --git a/yarn.lock b/yarn.lock
index 5c3680058..ec92b71cb 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -7910,6 +7910,7 @@ __metadata:
clsx: ^2.1.1
match-sorter: ^6.3.4
postcss: ^8.4.38
+ postcss-prefixwrap: ^1.49.0
react-hot-toast: ^2.4.1
react-icons: ^5.2.1
tailwind-merge: ^2.3.0
@@ -20220,6 +20221,15 @@ __metadata:
languageName: node
linkType: hard
+"postcss-prefixwrap@npm:^1.49.0":
+ version: 1.49.0
+ resolution: "postcss-prefixwrap@npm:1.49.0"
+ peerDependencies:
+ postcss: "*"
+ checksum: 29a0e5dfa28aee072a62737f9e7e9af0631ea9a2eb956c6c6bf1717969468c1267ccdac1614386af83c43773429c8830b942be979ab82c4099d7726ce9fc3a35
+ languageName: node
+ linkType: hard
+
"postcss-reduce-initial@npm:^5.1.2":
version: 5.1.2
resolution: "postcss-reduce-initial@npm:5.1.2"
@@ -22108,6 +22118,7 @@ __metadata:
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