From 5223d990c9472258b46b76ec795a87fa3784b7a8 Mon Sep 17 00:00:00 2001 From: Daniel Szczepanik Date: Mon, 17 Nov 2025 14:42:58 +0100 Subject: [PATCH 1/4] feat: update variables and tailwind config to use prefix --- packages/ui/src/swapkit.css | 50 +++++++++++++++++----------------- packages/ui/tailwind.config.ts | 2 +- 2 files changed, 26 insertions(+), 26 deletions(-) diff --git a/packages/ui/src/swapkit.css b/packages/ui/src/swapkit.css index f0bdcfd325..881e5299c9 100644 --- a/packages/ui/src/swapkit.css +++ b/packages/ui/src/swapkit.css @@ -4,46 +4,46 @@ @layer base { :root { - --white: 0 0% 100%; - --black: 0 0% 0%; + --sk-ui-white: 0 0% 100%; + --sk-ui-black: 0 0% 0%; - --background: var(--primary); - --foreground: var(--primary-foreground); + --sk-ui-background: var(--primary); + --sk-ui-foreground: var(--primary-foreground); - --card: var(--secondary); - --card-foreground: var(--secondary-foreground); + --sk-ui-card: var(--secondary); + --sk-ui-card-foreground: var(--secondary-foreground); - --popover: 20 14.3% 4.1%; - --popover-foreground: 60 9.1% 97.8%; + --sk-ui-popover: 20 14.3% 4.1%; + --sk-ui-popover-foreground: 60 9.1% 97.8%; - --primary: 140 6% 8%; - --primary-foreground: var(--white) / 92%; + --sk-ui-primary: 140 6% 8%; + --sk-ui-primary-foreground: var(--sk-ui-white) / 92%; - --secondary: 120 3% 13%; - --secondary-foreground: var(--white) / 0.92; + --sk-ui-secondary: 120 3% 13%; + --sk-ui-secondary-foreground: var(--sk-ui-white) / 0.92; - --tertiary: var(--white) / 0.92; - --tertiary-foreground: 120 3% 13%; + --sk-ui-tertiary: var(--sk-ui-white) / 0.92; + --sk-ui-tertiary-foreground: 120 3% 13%; - --muted: var(--secondary); - --muted-foreground: var(--white) / 0.64; + --sk-ui-muted: var(--sk-ui-secondary); + --sk-ui-muted-foreground: var(--sk-ui-white) / 0.64; - --accent: 140 87% 79%; - --accent-foreground: 60 9.1% 97.8%; + --sk-ui-accent: 140 87% 79%; + --sk-ui-accent-foreground: 60 9.1% 97.8%; - --destructive: 0 62.8% 30.6%; - --destructive-foreground: 60 9.1% 97.8%; + --sk-ui-destructive: 0 62.8% 30.6%; + --sk-ui-destructive-foreground: 60 9.1% 97.8%; - --border: var(--white) / 0.12; - --input: var(--white) / 0.32; - --ring: 24 5.7% 82.9%; + --sk-ui-border: var(--sk-ui-white) / 0.12; + --sk-ui-input: var(--sk-ui-white) / 0.32; + --sk-ui-ring: 24 5.7% 82.9%; } * { - @apply border-border antialiased; + @apply sk-ui-border-border sk-ui-antialiased; } body { - @apply bg-background text-foreground; + @apply sk-ui-bg-background sk-ui-text-foreground; } } diff --git a/packages/ui/tailwind.config.ts b/packages/ui/tailwind.config.ts index fa0f202023..da9fe5c757 100644 --- a/packages/ui/tailwind.config.ts +++ b/packages/ui/tailwind.config.ts @@ -4,7 +4,7 @@ const config = { content: ["./pages/**/*.{ts,tsx}", "./components/**/*.{ts,tsx}", "./app/**/*.{ts,tsx}", "./src/**/*.{ts,tsx}"], darkMode: "class", plugins: [require("tailwindcss-animate")], - prefix: "", + prefix: "sk-ui-", theme: { container: { center: true, padding: "2rem", screens: { "2xl": "1400px" } }, extend: { From dee765d19697b07a76efade409bfdccdfec4478c Mon Sep 17 00:00:00 2001 From: Daniel Szczepanik Date: Mon, 17 Nov 2025 14:53:27 +0100 Subject: [PATCH 2/4] chore: replace tailwind classes in @swapkit/ui to match prefix --- .../ui/src/react/components/asset-icon.tsx | 6 +- .../ui/src/react/components/chain-icon.tsx | 4 +- .../composable/swap-amount-input.tsx | 10 +-- .../components/composable/swap-asset-item.tsx | 8 +-- .../composable/swap-asset-select.tsx | 54 +++++++-------- .../composable/swap-input-chain-selector.tsx | 6 +- .../composable/swap-quote-preview.tsx | 68 +++++++++---------- .../dialogs/swap-confirm-dialog.tsx | 42 ++++++------ .../swap-quote-route-select-dialog.tsx | 28 ++++---- .../dialogs/wallet-connect-dialog.tsx | 34 +++++----- .../wallet-keystore-connect-dialog.tsx | 65 +++++++++--------- .../ui/src/react/components/ui/accordion.tsx | 12 ++-- .../ui/src/react/components/ui/button.tsx | 40 +++++------ packages/ui/src/react/components/ui/card.tsx | 12 ++-- .../ui/src/react/components/ui/dialog.tsx | 18 ++--- packages/ui/src/react/components/ui/form.tsx | 8 +-- packages/ui/src/react/components/ui/input.tsx | 2 +- packages/ui/src/react/components/ui/label.tsx | 2 +- packages/ui/src/react/components/ui/tabs.tsx | 8 +-- .../ui/src/react/components/wallet-icon.tsx | 2 +- packages/ui/src/react/swapkit-context.tsx | 3 +- packages/ui/src/react/swapkit-widget.tsx | 24 +++---- 22 files changed, 228 insertions(+), 228 deletions(-) diff --git a/packages/ui/src/react/components/asset-icon.tsx b/packages/ui/src/react/components/asset-icon.tsx index d3f4962307..62384b2d58 100644 --- a/packages/ui/src/react/components/asset-icon.tsx +++ b/packages/ui/src/react/components/asset-icon.tsx @@ -20,10 +20,10 @@ export function AssetIcon({ asset, className }: AssetIconProps) { const assetValue = AssetValue.from({ asset }); return ( -
+
{assetValue?.ticker} +
{chain?.slice(0, 2)}
); } return ( - {chain} + {chain} ); } diff --git a/packages/ui/src/react/components/composable/swap-amount-input.tsx b/packages/ui/src/react/components/composable/swap-amount-input.tsx index 03866d36e6..d63bb51bae 100644 --- a/packages/ui/src/react/components/composable/swap-amount-input.tsx +++ b/packages/ui/src/react/components/composable/swap-amount-input.tsx @@ -18,9 +18,9 @@ export function SwapAmountInput({ setAmount?: (amount: string) => void; }) { return ( -
+
setAmount?.(e.target.value)} placeholder="0.00" @@ -28,10 +28,10 @@ export function SwapAmountInput({ value={amount ?? "0.00"} /> -
- {isLoading && } +
+ {isLoading && } - {formattedAmountUSD} + {formattedAmountUSD}
); diff --git a/packages/ui/src/react/components/composable/swap-asset-item.tsx b/packages/ui/src/react/components/composable/swap-asset-item.tsx index 1e0aea4395..103ec692e2 100644 --- a/packages/ui/src/react/components/composable/swap-asset-item.tsx +++ b/packages/ui/src/react/components/composable/swap-asset-item.tsx @@ -9,13 +9,13 @@ export function SwapAssetItem({ asset }: { asset: string | null | undefined }) { const assetValue = AssetValue.from({ asset }); return ( -
+
-
- {assetValue?.ticker} +
+ {assetValue?.ticker} - {assetValue?.chain} + {assetValue?.chain}
); diff --git a/packages/ui/src/react/components/composable/swap-asset-select.tsx b/packages/ui/src/react/components/composable/swap-asset-select.tsx index a0c5e323e6..4a5b973eec 100644 --- a/packages/ui/src/react/components/composable/swap-asset-select.tsx +++ b/packages/ui/src/react/components/composable/swap-asset-select.tsx @@ -63,40 +63,40 @@ export function SwapAssetSelect({ return ( - + Select Token -
+
setFilters({ searchQuery: e.target.value })} placeholder="Search token name" value={filters?.searchQuery ?? ""} /> - +
-
- +
+ Network:{" "} - + {selectedNetworks?.length ? selectedNetworks?.map((network) => network.toString()).join(", ") : "All"} -
+
); })} {canShowMore && ( @@ -136,35 +136,35 @@ export function SwapAssetSelect({
- + {match({ assets, isWalletConnected }) .with({ isWalletConnected: false }, () => ( -
-
Connect your wallet
+
+
Connect your wallet
-

Please connect your wallet to see your assets

+

Please connect your wallet to see your assets

)) .when( ({ assets }) => assets?.length <= 0, () => ( -
-
No assets found
+
+
No assets found
-

+

Try changing the selected networks or the search query

), ) .otherwise(() => ( -
+
{assets?.slice(0, 100)?.map((asset) => { const assetIdentifier = asset.toString(); return ( - - - + + + - + 1 {selectedRoute?.inputAssetTicker} ≈ {selectedRoute?.expectedBuyAmountFor1Input.toFixed(6)}{" "} {selectedRoute?.outputAssetTicker} - Fees: {selectedRoute?.formattedTotalFeesUSD} + Fees: {selectedRoute?.formattedTotalFeesUSD} - -
    -
  • + +
      +
    • Minimum received after slippage ({selectedRoute?.formattedMaxSlippagePercentage}) - + - + {selectedRoute?.expectedBuyAmountMaxSlippage} {selectedRoute?.outputAssetTicker}
      • -
    • +
    • Liquidity fee - + {selectedRoute?.formattedLiquidityFeeUSD === "$0.00" ? ( - FREE + FREE ) : ( - + {selectedRoute?.formattedLiquidityFeeUSD} )}
      • -
    • +
    • Exchange fee - + {selectedRoute?.formattedExchangeFeeUSD === "$0.00" ? ( - FREE + FREE ) : ( - + {selectedRoute?.formattedExchangeFeeUSD} )}
      • -
    • +
    • Inbound network fee - + {selectedRoute?.formattedInboundNetworkFeeUSD === "$0.00" ? ( - FREE + FREE ) : ( - + {selectedRoute?.formattedInboundNetworkFeeUSD} )} diff --git a/packages/ui/src/react/components/dialogs/swap-confirm-dialog.tsx b/packages/ui/src/react/components/dialogs/swap-confirm-dialog.tsx index 7d65eb5e1a..25cb75f11b 100644 --- a/packages/ui/src/react/components/dialogs/swap-confirm-dialog.tsx +++ b/packages/ui/src/react/components/dialogs/swap-confirm-dialog.tsx @@ -39,8 +39,8 @@ export const SwapConfirmDialog = ({ Confirm swap -
      -
      +
      +
      -
      -
      +
      +
      - + -
      +
      -
      +
      -
      +
      - Total fee + Total fee - + - {swapRoute?.formattedTotalFeesUSD} + {swapRoute?.formattedTotalFeesUSD} - -
        + +
          {totalFeesListItems.map((item) => ( -
        • - {item.title} +
        • + {item.title} - {item.value} + {item.value}
          • ))}
        -
          +
            {swapSummaryListItems.map((item) => ( -
          • - {item.title} +
          • + {item.title} - {item.value} + {item.value}
            • ))}
          diff --git a/packages/ui/src/react/components/dialogs/swap-quote-route-select-dialog.tsx b/packages/ui/src/react/components/dialogs/swap-quote-route-select-dialog.tsx index ac3bba5e28..9f6333212f 100644 --- a/packages/ui/src/react/components/dialogs/swap-quote-route-select-dialog.tsx +++ b/packages/ui/src/react/components/dialogs/swap-quote-route-select-dialog.tsx @@ -23,29 +23,29 @@ export const SwapQuoteRouteSelectDialog = ({ Select provider -
          +
          {routes?.map((route) => ( -

          +

          By connecting your wallet, you agree to our{" "} - + Terms of Service {" "} and{" "} - + Privacy Policy

          @@ -332,13 +332,13 @@ function WalletConnectButton({ wallet }: { wallet: WalletOption }) { return ( ); } diff --git a/packages/ui/src/react/components/dialogs/wallet-keystore-connect-dialog.tsx b/packages/ui/src/react/components/dialogs/wallet-keystore-connect-dialog.tsx index 986317fd53..01231513cf 100644 --- a/packages/ui/src/react/components/dialogs/wallet-keystore-connect-dialog.tsx +++ b/packages/ui/src/react/components/dialogs/wallet-keystore-connect-dialog.tsx @@ -82,8 +82,7 @@ export function WalletKeystoreConnectDialog() { { shouldValidate: true }, ); } catch (error) { - console.error("Error parsing keystore file:", error); - toast.error("Something went wrong while parsing the keystore file", { + console.error("Error parsing keystore file:", error); toast.error("Something went wrong while parsing the keystore file", { description: "Please check if the file is a valid keystore file", }); } @@ -103,9 +102,9 @@ export function WalletKeystoreConnectDialog() { form.setValue("currentStep", Number.parseInt(newValue, 10) as 1 | 2 | 3)} value={currentStep.toString()}> - - 1 && "bg-accent")} value="1" variant="stepper" /> - 2 && "bg-accent")} value="2" variant="stepper" /> + + 1 && "sk-ui-bg-accent")} value="1" variant="stepper" /> + 2 && "sk-ui-bg-accent")} value="2" variant="stepper" /> = 3 && "!bg-accent")} value="3" variant="stepper" /> @@ -114,28 +113,28 @@ export function WalletKeystoreConnectDialog() { onSubmit={form.handleSubmit(() => { form.setValue("currentStep", 2); })}> -
          - +
          + Upload your keystore file to connect your wallet -
          - Keystore file +
          + Keystore file