Skip to content

Commit 886d352

Browse files
DrakeoonDrakeoon
committed
feat: convert missing classNames to prefixed ones
1 parent 1eedf4a commit 886d352

File tree

9 files changed

+76
-38
lines changed

9 files changed

+76
-38
lines changed

‎packages/ui/src/react/components/composable/swap-amount-input.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ export function SwapAmountInput({
2020
return (
2121
<div className={cn("sk-ui-flex sk-ui-flex-col sk-ui-items-end", className)}>
2222
<Input
23-
className="sk-ui--mr-3 !shadow-none !border-0 !ring-0 !ring-offset-0 sk-ui-bg-transparent sk-ui-text-end sk-ui-font-medium sk-ui-text-2xl"
23+
className="sk-ui--mr-3 !sk-ui-shadow-none !sk-ui-border-0 !sk-ui-ring-0 !sk-ui-ring-offset-0 sk-ui-bg-transparent sk-ui-text-end sk-ui-font-medium sk-ui-text-2xl"
2424
disabled={disabled}
2525
onChange={(e) => setAmount?.(e.target.value)}
2626
placeholder="0.00"

‎packages/ui/src/react/components/composable/swap-asset-select.tsx‎

Lines changed: 11 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -95,7 +95,7 @@ export function SwapAssetSelect({
9595
<div className="sk-ui-grid sk-ui-grid-cols-8 sk-ui-gap-2">
9696
<Button
9797
className={cn(
98-
"aspect-[1.3/1] sk-ui-h-auto sk-ui-border sk-ui-border-transparent",
98+
"sk-ui-h-auto sk-ui-border sk-ui-border-transparent sk-ui-aspect-[1.3/1]",
9999
selectedNetworks?.length === 0 && "sk-ui-border-foreground sk-ui-text-foreground",
100100
)}
101101
onClick={() => setSelectedNetworks([])}>
@@ -108,7 +108,7 @@ export function SwapAssetSelect({
108108
return (
109109
<Button
110110
className={cn(
111-
"aspect-[1.3/1] sk-ui-h-auto sk-ui-border sk-ui-border-transparent sk-ui-p-0",
111+
"sk-ui-h-auto sk-ui-border sk-ui-border-transparent sk-ui-p-0 sk-ui-aspect-[1.3/1]",
112112
isSelected && "sk-ui-border-foreground sk-ui-text-foreground",
113113
)}
114114
key={`swap-asset-network-${chain}`}
@@ -136,13 +136,15 @@ export function SwapAssetSelect({
136136
</div>
137137
</div>
138138

139-
<DialogFooter className="sk-ui-mt-2 max-h-[clamp(16rem,50svh,32rem)] sk-ui-overflow-y-auto sk-ui-overflow-x-hidden">
139+
<DialogFooter className="sk-ui-mt-2 sk-ui-overflow-y-auto sk-ui-overflow-x-hidden sk-ui-max-h-[clamp(16rem,50svh,32rem)]">
140140
{match({ assets, isWalletConnected })
141141
.with({ isWalletConnected: false }, () => (
142142
<div className="sk-ui-flex sk-ui-h-40 sk-ui-flex-col sk-ui-items-center sk-ui-justify-center sk-ui-gap-1">
143143
<header className="sk-ui-font-medium">Connect your wallet</header>
144144

145-
<p className="sk-ui-text-muted-foreground sk-ui-text-sm">Please connect your wallet to see your assets</p>
145+
<p className="sk-ui-text-muted-foreground sk-ui-text-sm">
146+
Please connect your wallet to see your assets
147+
</p>
146148
</div>
147149
))
148150
.when(
@@ -173,7 +175,11 @@ export function SwapAssetSelect({
173175
variant="ghost">
174176
<SwapAssetItem asset={assetIdentifier} />
175177

176-
<div className={cn("sk-ui-flex sk-ui-flex-col sk-ui-items-end", asset?.getValue("number") <= 0 && "opacity-50")}>
178+
<div
179+
className={cn(
180+
"sk-ui-flex sk-ui-flex-col sk-ui-items-end",
181+
asset?.getValue("number") <= 0 && "sk-ui-opacity-50",
182+
)}>
177183
<span className="sk-ui-font-medium sk-ui-text-base sk-ui-text-foreground">
178184
{asset?.getValue("number")?.toFixed(6) || "0.00"}
179185
</span>

‎packages/ui/src/react/components/composable/swap-quote-preview.tsx‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -74,7 +74,7 @@ export function SwapQuotePreview({
7474
)}
7575
</div>
7676

77-
<div className="!ml-auto sk-ui-mr-4 sk-ui-flex sk-ui-items-center sk-ui-gap-1 sk-ui-text-muted-foreground sk-ui-text-sm">
77+
<div className="!sk-ui-ml-auto sk-ui-mr-4 sk-ui-flex sk-ui-items-center sk-ui-gap-1 sk-ui-text-muted-foreground sk-ui-text-sm">
7878
<TimerIcon className="sk-ui-size-4" />
7979

8080
<span className="sk-ui-font-normal">{selectedRoute?.formattedEstimatedTime}</span>
@@ -98,7 +98,9 @@ export function SwapQuotePreview({
9898
{selectedRoute?.outputAssetTicker}
9999
</span>
100100

101-
<span className="sk-ui-mr-2 sk-ui-ml-auto sk-ui-font-medium">Fees: {selectedRoute?.formattedTotalFeesUSD}</span>
101+
<span className="sk-ui-mr-2 sk-ui-ml-auto sk-ui-font-medium">
102+
Fees: {selectedRoute?.formattedTotalFeesUSD}
103+
</span>
102104
</AccordionTrigger>
103105

104106
<AccordionContent className="sk-ui-rounded-b-lg sk-ui-border-card sk-ui-border-r sk-ui-border-b sk-ui-border-l sk-ui-bg-background sk-ui-px-4 sk-ui-pb-4 sk-ui-duration-150">

‎packages/ui/src/react/components/dialogs/swap-confirm-dialog.tsx‎

Lines changed: 21 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,7 @@ export const SwapConfirmDialog = ({
4444

4545
<SwapAmountInput
4646
amount={swapRoute.amount}
47-
className="[&_input]:!opacity-100 [&_input]:!cursor-text"
47+
className="[&_input]:!sk-ui-opacity-100 [&_input]:!sk-ui-cursor-text"
4848
disabled
4949
formattedAmountUSD={swapRoute.formattedInputAssetPriceUSD}
5050
/>
@@ -53,7 +53,7 @@ export const SwapConfirmDialog = ({
5353
<div className="sk-ui-flex sk-ui-items-center sk-ui-gap-2">
5454
<div className="sk-ui-h-px sk-ui-w-full sk-ui-bg-border" />
5555

56-
<MoveDownIcon className="sk-ui-size-4 sk-ui-shrink-0 stroke-[2.5] sk-ui-font-bold text-[#8b8c8b]" />
56+
<MoveDownIcon className="sk-ui-size-4 sk-ui-shrink-0 sk-ui-font-bold sk-ui-stroke-[2.5] sk-ui-text-[#8b8c8b]" />
5757

5858
<div className="sk-ui-h-px sk-ui-w-full sk-ui-bg-border" />
5959
</div>
@@ -63,7 +63,7 @@ export const SwapConfirmDialog = ({
6363

6464
<SwapAmountInput
6565
amount={swapRoute?.expectedBuyAmount?.toString()}
66-
className="[&_input]:!opacity-100 [&_input]:!cursor-text"
66+
className="[&_input]:!sk-ui-opacity-100 [&_input]:!sk-ui-cursor-text"
6767
disabled
6868
formattedAmountUSD={swapRoute?.formattedOutputAssetPriceUSD}
6969
/>
@@ -80,35 +80,47 @@ export const SwapConfirmDialog = ({
8080

8181
<ChevronDown className="sk-ui-mt-px sk-ui-ml-1 sk-ui-size-4" />
8282

83-
<span className="sk-ui-ml-auto sk-ui-font-medium sk-ui-text-foreground">{swapRoute?.formattedTotalFeesUSD}</span>
83+
<span className="sk-ui-ml-auto sk-ui-font-medium sk-ui-text-foreground">
84+
{swapRoute?.formattedTotalFeesUSD}
85+
</span>
8486
</AccordionTrigger>
8587

8688
<AccordionContent className="sk-ui-mt-3 sk-ui-pb-0">
8789
<ul className="sk-ui-flex sk-ui-flex-col sk-ui-gap-3 sk-ui-border-b sk-ui-pb-3">
8890
{totalFeesListItems.map((item) => (
89-
<li className="sk-ui-flex sk-ui-items-start sk-ui-justify-between sk-ui-gap-1" key={`total-fee-list-item-${item.title}`}>
91+
<li
92+
className="sk-ui-flex sk-ui-items-start sk-ui-justify-between sk-ui-gap-1"
93+
key={`total-fee-list-item-${item.title}`}>
9094
<span className="sk-ui-text-muted-foreground">{item.title}</span>
9195

92-
<span className="sk-ui-max-w-[60%] sk-ui-break-all sk-ui-text-right sk-ui-font-medium">{item.value}</span>
96+
<span className="sk-ui-max-w-[60%] sk-ui-break-all sk-ui-text-right sk-ui-font-medium">
97+
{item.value}
98+
</span>
9399
</li>
94100
))}
95101
</ul>
96102
</AccordionContent>
97103

98104
<ul className="sk-ui-mt-3 sk-ui-flex sk-ui-flex-col sk-ui-gap-3">
99105
{swapSummaryListItems.map((item) => (
100-
<li className="sk-ui-flex sk-ui-items-start sk-ui-justify-between sk-ui-gap-1" key={`swap-list-item-${item.title}`}>
106+
<li
107+
className="sk-ui-flex sk-ui-items-start sk-ui-justify-between sk-ui-gap-1"
108+
key={`swap-list-item-${item.title}`}>
101109
<span className="sk-ui-text-muted-foreground">{item.title}</span>
102110

103-
<span className="sk-ui-max-w-[60%] sk-ui-break-all sk-ui-text-right sk-ui-font-medium">{item.value}</span>
111+
<span className="sk-ui-max-w-[60%] sk-ui-break-all sk-ui-text-right sk-ui-font-medium">
112+
{item.value}
113+
</span>
104114
</li>
105115
))}
106116
</ul>
107117
</AccordionItem>
108118
</Accordion>
109119
</div>
110120

111-
<Button variant="primary">Confirm swap</Button>
121+
<Button onClick={() => modal.resolve({ confirmed: true, data: undefined })} variant="primary">
122+
Confirm swap
123+
</Button>
112124
</DialogContent>
113125
</Dialog>
114126
);

‎packages/ui/src/react/components/dialogs/wallet-connect-dialog.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -259,7 +259,7 @@ export function WalletConnectDialog() {
259259
))}
260260
</div>
261261

262-
<DialogFooter className="sk-ui-items-center sk-ui-justify-center">
262+
<DialogFooter className="sk-ui-items-center sk-ui-justify-center sm:sk-ui-flex-col">
263263
<Button
264264
className="sk-ui--mt-1 sk-ui-w-auto sk-ui-text-foreground"
265265
onClick={() => {
@@ -332,7 +332,7 @@ function WalletConnectButton({ wallet }: { wallet: WalletOption }) {
332332

333333
return (
334334
<Button
335-
className="sk-ui-flex aspect-[1.525/1] sk-ui-h-full sk-ui-w-full sk-ui-flex-col sk-ui-items-center sk-ui-justify-center sk-ui-gap-1"
335+
className="sk-ui-flex sk-ui-h-full sk-ui-w-full sk-ui-flex-col sk-ui-items-center sk-ui-justify-center sk-ui-gap-1 sk-ui-aspect-[1.525/1]"
336336
isLoading={isConnectingWallet && walletType === wallet}
337337
key={`wallet-connect-button-${wallet}`}
338338
onClick={handleWalletClick}>

‎packages/ui/src/react/components/dialogs/wallet-keystore-connect-dialog.tsx‎

Lines changed: 22 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -82,7 +82,8 @@ export function WalletKeystoreConnectDialog() {
8282
{ shouldValidate: true },
8383
);
8484
} catch (error) {
85-
console.error("Error parsing keystore file:", error); toast.error("Something went wrong while parsing the keystore file", {
85+
console.error("Error parsing keystore file:", error);
86+
toast.error("Something went wrong while parsing the keystore file", {
8687
description: "Please check if the file is a valid keystore file",
8788
});
8889
}
@@ -102,10 +103,10 @@ export function WalletKeystoreConnectDialog() {
102103
<Tabs
103104
onValueChange={(newValue) => form.setValue("currentStep", Number.parseInt(newValue, 10) as 1 | 2 | 3)}
104105
value={currentStep.toString()}>
105-
<TabsList className="sk-ui-h-fit sk-ui-w-full sk-ui-gap-2 sk-ui-bg-transparent sk-ui-p-0">
106-
<TabsTrigger className={cn(currentStep > 1 && "sk-ui-bg-accent")} value="1" variant="stepper" />
107-
<TabsTrigger className={cn(currentStep > 2 && "sk-ui-bg-accent")} value="2" variant="stepper" />
108-
<TabsTrigger className={cn(currentStep >= 3 && "!bg-accent")} value="3" variant="stepper" />
106+
<TabsList className="sk-ui-w-full sk-ui-gap-2 sk-ui-h-auto sk-ui-p-0">
107+
<TabsTrigger className={cn(currentStep > 1 && "!sk-ui-bg-accent")} value="1" variant="stepper" />
108+
<TabsTrigger className={cn(currentStep > 2 && "!sk-ui-bg-accent")} value="2" variant="stepper" />
109+
<TabsTrigger className={cn(currentStep >= 3 && "!sk-ui-bg-accent")} value="3" variant="stepper" />
109110
</TabsList>
110111

111112
<TabsContent value="1">
@@ -121,14 +122,21 @@ export function WalletKeystoreConnectDialog() {
121122
<div className="sk-ui-flex sk-ui-flex-col sk-ui-gap-2">
122123
<span className="sk-ui-font-medium sk-ui-text-secondary-hover-text sk-ui-text-sm">Keystore file</span>
123124
<label
124-
className={`sk-ui-flex sk-ui-h-24 sk-ui-w-full sk-ui-cursor-pointer sk-ui-flex-col sk-ui-items-center sk-ui-justify-center sk-ui-rounded-md sk-ui-border-2 sk-ui-border-white sk-ui-border-dashed sk-ui-border-opacity-25 sk-ui-transition-colors hover:sk-ui-border-opacity-40 ${keystoreFile?.file ? "border-green-500 sk-ui-border-opacity-50 bg-green-500/5" : ""} `}
125+
className={cn(
126+
"sk-ui-flex sk-ui-h-24 sk-ui-w-full sk-ui-cursor-pointer sk-ui-flex-col sk-ui-items-center sk-ui-justify-center sk-ui-rounded-md sk-ui-border-2 sk-ui-border-white sk-ui-border-dashed sk-ui-border-opacity-25 sk-ui-transition-colors hover:sk-ui-border-opacity-40",
127+
keystoreFile?.file && "sk-ui-border-opacity-50 sk-ui-bg-green-500/5 sk-ui-border-green-500",
128+
)}
125129
htmlFor={fileInputId}>
126130
<div className="sk-ui-flex sk-ui-flex-col sk-ui-items-center sk-ui-gap-2">
127131
{keystoreFile?.file ? (
128132
<>
129133
<CheckIcon className="sk-ui-h-6 sk-ui-w-6 sk-ui-text-green-500" />
130-
<span className="sk-ui-font-medium sk-ui-text-green-400 sk-ui-text-sm">{keystoreFile?.file?.name}</span>
131-
<span className="sk-ui-text-muted-foreground sk-ui-text-xs">Click to select a different file</span>
134+
<span className="sk-ui-font-medium sk-ui-text-green-400 sk-ui-text-sm">
135+
{keystoreFile?.file?.name}
136+
</span>
137+
<span className="sk-ui-text-muted-foreground sk-ui-text-xs">
138+
Click to select a different file
139+
</span>
132140
</>
133141
) : (
134142
<>
@@ -175,13 +183,17 @@ export function WalletKeystoreConnectDialog() {
175183
<TabsContent value="2">
176184
<form onSubmit={handleConnectWallet}>
177185
<div className="sk-ui-mt-4 sk-ui-flex sk-ui-flex-col sk-ui-gap-4">
178-
<span className="sk-ui-text-sm sk-ui-text-white sk-ui-text-opacity-65">Enter the password for your keystore file</span>
186+
<span className="sk-ui-text-sm sk-ui-text-white sk-ui-text-opacity-65">
187+
Enter the password for your keystore file
188+
</span>
179189

180190
{keystoreFile?.file && (
181191
<div className="sk-ui-rounded-md sk-ui-border sk-ui-border-blue-500/20 sk-ui-bg-blue-500/10 sk-ui-p-3">
182192
<div className="sk-ui-flex sk-ui-items-center sk-ui-gap-2">
183193
<CheckIcon className="sk-ui-h-4 sk-ui-w-4 sk-ui-text-blue-400" />
184-
<span className="sk-ui-text-blue-300 sk-ui-text-sm">Keystore file: {keystoreFile?.file?.name}</span>
194+
<span className="sk-ui-text-blue-300 sk-ui-text-sm">
195+
Keystore file: {keystoreFile?.file?.name}
196+
</span>
185197
</div>
186198
</div>
187199
)}

‎packages/ui/src/react/components/ui/button.tsx‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import * as React from "react";
77
import { cn } from "../../../lib/utils";
88

99
const buttonVariants = cva(
10-
"sk-ui-inline-flex sk-ui-items-center sk-ui-justify-center sk-ui-whitespace-nowrap sk-ui-rounded-md sk-ui-text-sm sk-ui-font-medium sk-ui-ring-offset-background sk-ui-transition-colors sk-ui-focus-visible:outline-none sk-ui-focus-visible:ring-2 sk-ui-focus-visible:ring-ring sk-ui-focus-visible:ring-offset-0 disabled:sk-ui-pointer-events-none disabled:sk-ui-opacity-50",
10+
"sk-ui-inline-flex sk-ui-items-center sk-ui-justify-center sk-ui-whitespace-nowrap sk-ui-rounded-md sk-ui-text-sm sk-ui-font-medium sk-ui-ring-offset-background sk-ui-transition-colors focus-visible:outline-none focus-visible:sk-ui-ring-2 focus-visible:sk-ui-ring-ring focus-visible:ring-offset-0 disabled:sk-ui-pointer-events-none disabled:sk-ui-opacity-50",
1111
{
1212
defaultVariants: { size: "default", variant: "default" },
1313
variants: {
@@ -23,9 +23,11 @@ const buttonVariants = cva(
2323
// biome-ignore assist/source/useSortedKeys: sort by role, not alphabetically
2424
variant: {
2525
default: "sk-ui-bg-white/[0.08] sk-ui-text-muted-foreground hover:sk-ui-bg-white/[0.12]",
26-
ghost: "hover:sk-ui-bg-white/[0.08] sk-ui-bg-transparent hover:sk-ui-text-foreground sk-ui-text-muted-foreground",
26+
ghost:
27+
"hover:sk-ui-bg-white/[0.08] sk-ui-bg-transparent hover:sk-ui-text-foreground sk-ui-text-muted-foreground",
2728
link: "sk-ui-text-primary sk-ui-underline-offset-4 hover:sk-ui-underline",
28-
outline: "sk-ui-border sk-ui-border-input sk-ui-bg-background hover:sk-ui-bg-accent hover:sk-ui-text-accent-foreground",
29+
outline:
30+
"sk-ui-border sk-ui-border-input sk-ui-bg-background hover:sk-ui-bg-accent hover:sk-ui-text-accent-foreground",
2931

3032
primary: "sk-ui-bg-primary-foreground sk-ui-text-primary hover:sk-ui-opacity-80 sk-ui-transition-opacity",
3133
secondary: "sk-ui-bg-secondary sk-ui-text-secondary-foreground hover:sk-ui-opacity-80 sk-ui-transition-opacity",

‎packages/ui/src/react/components/ui/input.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(({ className, type,
1010
return (
1111
<input
1212
className={cn(
13-
"sk-ui-flex sk-ui-h-10 sk-ui-w-full sk-ui-rounded-md sk-ui-border sk-ui-border-input sk-ui-bg-background sk-ui-px-3 sk-ui-py-2 sk-ui-text-sm sk-ui-ring-offset-background file:sk-ui-border-0 file:sk-ui-bg-transparent file:sk-ui-font-medium file:sk-ui-text-sm placeholder:sk-ui-text-muted-foreground sk-ui-focus-visible:outline-none sk-ui-focus-visible:ring-2 sk-ui-focus-visible:ring-ring sk-ui-focus-visible:ring-offset-2 disabled:sk-ui-cursor-not-allowed disabled:sk-ui-opacity-50",
13+
"sk-ui-flex sk-ui-h-10 sk-ui-w-full sk-ui-rounded-md sk-ui-border sk-ui-border-input sk-ui-bg-background sk-ui-px-3 sk-ui-py-2 sk-ui-text-sm sk-ui-ring-offset-background file:sk-ui-border-0 file:sk-ui-bg-transparent file:sk-ui-font-medium file:sk-ui-text-sm placeholder:sk-ui-text-muted-foreground disabled:sk-ui-cursor-not-allowed disabled:sk-ui-opacity-50 focus-visible:sk-ui-ring-2 focus-visible:sk-ui-ring-ring focus-visible:sk-ui-ring-offset-2 focus-visible:sk-ui-outline-none",
1414
className,
1515
)}
1616
ref={ref}

0 commit comments

Comments
 (0)