Merge pull request #21 from babylonlabs-io/tw-prefixes

feat: tw prefixes

package.json

@@ -30,7 +30,7 @@
     "release": "npm run build && changeset publish"
   },
   "dependencies": {
-    "@babylonlabs-io/bbn-core-ui": "^0.0.4",
+    "@babylonlabs-io/bbn-core-ui": "^0.0.9",
     "react-icons": "^5.3.0"
   },
   "files": [

src/components/ChainButton/index.stories.tsx

@@ -27,7 +27,7 @@ export const Connected: Story = {
     children: (
       <ConnectedWallet
         chainId="BTC"
-        className="cursor-default"
+        className="b-cursor-default"
         logo="/images/wallets/okx.png"
         name="OKX"
         address="bc1pnT..e4Vtc"

src/components/ChainButton/index.tsx

@@ -19,14 +19,14 @@ export function ChainButton({ className, disabled, alt, logo, title, children, o
       disabled={disabled}
       as={disabled ? "div" : "button"}
       className={twMerge(
-        "flex w-full flex-col gap-2.5 rounded border border-primary-main/30 p-4",
-        disabled ? "pointer-events-none" : "pointer-events-auto",
-        disabled ? "cursor-default" : "cursor-pointer",
+        "b-flex b-w-full b-flex-col b-gap-2.5 b-rounded b-border b-border-primary-main/30 b-p-4",
+        disabled ? "b-pointer-events-none" : "b-pointer-events-auto",
+        disabled ? "b-cursor-default" : "b-cursor-pointer",
         className,
       )}
       onClick={onClick}
     >
-      <div className="flex w-full items-center gap-2.5">
+      <div className="b-flex b-w-full b-items-center b-gap-2.5">
         {avatar}
         {title}
 
@@ -37,7 +37,7 @@ export function ChainButton({ className, disabled, alt, logo, title, children, o
             height="24"
             viewBox="0 0 24 24"
             fill="none"
-            className="ml-auto block"
+            className="b-ml-auto b-block"
           >
             <path
               d="M8.58984 16.59L13.1698 12L8.58984 7.41L9.99984 6L15.9998 12L9.99984 18L8.58984 16.59Z"
@@ -48,7 +48,7 @@ export function ChainButton({ className, disabled, alt, logo, title, children, o
       </div>
 
       {children && (
-        <div className="pointer-events-auto w-full" onClick={(e) => e.stopPropagation()}>
+        <div className="b-pointer-events-auto b-w-full" onClick={(e) => e.stopPropagation()}>
           {children}
         </div>
       )}

src/components/Chains/index.stories.ts

@@ -43,7 +43,7 @@ export const Default: Story = {
         account: null,
       },
     },
-    className: "h-[600px]",
+    className: "b-h-[600px]",
     onSelectChain: console.log,
   },
 };

src/components/Chains/index.tsx

@@ -23,12 +23,12 @@ export function Chains({ chains, selectedWallets = {}, className, onClose, onSel
   const activeChains = useMemo(() => chains.filter((chain) => chain.wallets.length > 0), [chains]);
 
   return (
-    <div className={twMerge("flex flex-1 flex-col", className)}>
-      <DialogHeader className="mb-10" title="Connect Wallets" onClose={onClose}>
+    <div className={twMerge("b-flex b-flex-1 b-flex-col", className)}>
+      <DialogHeader className="b-mb-10" title="Connect Wallets" onClose={onClose}>
         <Text>Connect to both Bitcoin and Babylon Chain Wallets</Text>
       </DialogHeader>
 
-      <DialogBody className="flex flex-col gap-6">
+      <DialogBody className="b-flex b-flex-col b-gap-6">
         {activeChains.map((chain) => {
           const selectedWallet = selectedWallets[chain.id];
 
@@ -54,10 +54,11 @@ export function Chains({ chains, selectedWallets = {}, className, onClose, onSel
         })}
       </DialogBody>
 
-      <DialogFooter className="mt-auto flex gap-4 pt-10">
+      <DialogFooter className="b-mt-auto b-flex b-gap-4 b-pt-10">
         <Button variant="outlined" fluid onClick={onClose}>
           Cancel
         </Button>
+
         <Button disabled={countOfSelectedWallets < activeChains.length} fluid onClick={onClose}>
           Done
         </Button>

src/components/ConnectedWallet/index.tsx

@@ -15,28 +15,31 @@ interface ConnectedWalletProps {
 export function ConnectedWallet({ className, chainId, logo, name, address, onDisconnect }: ConnectedWalletProps) {
   return (
     <div
-      className={twMerge("flex shrink-0 items-center gap-2.5 rounded border border-secondary-main/30 p-2", className)}
+      className={twMerge(
+        "b-flex b-shrink-0 b-items-center b-gap-2.5 b-rounded b-border b-border-secondary-main/30 b-p-2",
+        className,
+      )}
     >
       <Avatar variant="rounded" size="medium" url={logo} />
 
-      <div className="flex flex-1 flex-col items-start">
-        <Text as="div" variant="body2" className="leading-4">
+      <div className="b-flex b-flex-1 b-flex-col b-items-start">
+        <Text as="div" variant="body2" className="b-leading-4">
           {name}
         </Text>
         {Boolean(address) && (
-          <Text as="div" variant="caption" className="leading-4 text-primary-light">
+          <Text as="div" variant="caption" className="b-leading-4 b-text-primary-light">
             {address}
           </Text>
         )}
       </div>
 
-      <button className="shrink-0 cursor-pointer" onClick={() => void onDisconnect?.(chainId)}>
+      <button className="b-shrink-0 b-cursor-pointer" onClick={() => void onDisconnect?.(chainId)}>
         <svg
           xmlns="http://www.w3.org/2000/svg"
           width="24"
           height="24"
           viewBox="0 0 24 24"
-          className="text-secondary-main"
+          className="b-text-secondary-main"
           fill="none"
         >
           <path

src/components/FieldControl/index.tsx

@@ -8,7 +8,12 @@ interface FieldControl {
 
 export function FieldControl({ label, className, children }: PropsWithChildren<FieldControl>) {
   return (
-    <label className={twMerge("flex cursor-pointer gap-4 rounded border border-primary-main/30 p-4", className)}>
+    <label
+      className={twMerge(
+        "b-flex b-cursor-pointer b-gap-4 b-rounded b-border b-border-primary-main/30 b-p-4",
+        className,
+      )}
+    >
       {children}
       {label}
     </label>

src/components/Inscriptions/index.stories.tsx

@@ -13,6 +13,6 @@ type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
   args: {
-    className: "h-[600px]",
+    className: "b-h-[600px]",
   },
 };

src/components/Inscriptions/index.tsx

@@ -14,9 +14,9 @@ export function Inscriptions({ className, onSubmit }: Props) {
   const [showAgain = true, toggleShowAgain] = useState<boolean | undefined>();
 
   return (
-    <div className={twMerge("mb-8 flex flex-1 flex-col", className)}>
-      <DialogHeader title="Bitcoin Inscriptions" className="mb-8">
-        <Text className="mb-6">
+    <div className={twMerge("b-mb-8 b-flex b-flex-1 b-flex-col", className)}>
+      <DialogHeader title="Bitcoin Inscriptions" className="b-mb-8">
+        <Text className="b-mb-6">
           This staking interface attempts to detect bitcoin ordinals, NFTs, Ruins, and other inscriptions
           (“Inscriptions”) within the Unspent Transaction Outputs (“UTXOs”) in your wallet. If you stake bitcoin with
           Inscriptions, those UTXOs may be spent on staking, unbonding, or withdrawal fees, which will cause you to lose
@@ -30,25 +30,25 @@ export function Inscriptions({ className, onSubmit }: Props) {
         <form action="">
           <FieldControl
             label="Lock bitcoin UTXOs with detected Inscriptions so they will not be spent."
-            className="mb-8"
+            className="b-mb-8"
           >
             <Radio name="inscriptions" checked={lockInscriptions} onChange={() => toggleInscriptions(true)} />
           </FieldControl>
 
           <FieldControl
             label="Unlock bitcoin UTXOs with detected Inscriptions in my stakable balance. I understand and agree that doing so can cause the complete and permanent loss of Inscriptions and that I am solely liable and responsible for their loss."
-            className="mb-8"
+            className="b-mb-8"
           >
             <Radio name="inscriptions" checked={!lockInscriptions} onChange={() => toggleInscriptions(false)} />
           </FieldControl>
         </form>
       </DialogBody>
 
-      <DialogFooter className="mt-auto pt-10">
+      <DialogFooter className="b-mt-auto b-pt-10">
         <Checkbox
           checked={!showAgain}
           label="Do not show again"
-          labelClassName="mb-6"
+          labelClassName="b-mb-6"
           onChange={(value) => toggleShowAgain(!value)}
         />
         <Button fluid onClick={() => void onSubmit?.(lockInscriptions, showAgain)}>

src/components/TermsOfService/index.stories.tsx

@@ -14,6 +14,6 @@ type Story = StoryObj<typeof meta>;
 export const Default: Story = {
   args: {
     onClose: console.log,
-    className: "h-[600px]",
+    className: "b-h-[600px]",
   },
 };

src/components/TermsOfService/index.tsx

@@ -29,22 +29,22 @@ export function TermsOfService({ className, onClose, onSubmit }: Props) {
   );
 
   return (
-    <div className={twMerge("flex flex-1 flex-col", className)}>
-      <DialogHeader className="mb-10" title="Connect Wallets" onClose={onClose}>
+    <div className={twMerge("b-flex b-flex-1 b-flex-col", className)}>
+      <DialogHeader className="b-mb-10" title="Connect Wallets" onClose={onClose}>
         <Text>Accept our terms of service to proceed</Text>
       </DialogHeader>
 
       <DialogBody>
         <FieldControl
           label="I certify that I have read and accept the updated Terms of Use and Privacy Policy."
-          className="mb-8"
+          className="b-mb-8"
         >
           <Checkbox checked={state["termsOfUse"]} onChange={handleChange("termsOfUse")} />
         </FieldControl>
 
         <FieldControl
           label="I certify that I wish to stake bitcoin and agree that doing so may cause some or all of the bitcoin ordinals, NFTs, Ruins, and other inscriptions in the connected bitcoin wallet to be lost. I acknowledge that this interface will not detect all Inscriptions."
-          className="mb-8"
+          className="b-mb-8"
         >
           <Checkbox checked={state["inscriptions"]} onChange={handleChange("inscriptions")} />
         </FieldControl>
@@ -54,7 +54,7 @@ export function TermsOfService({ className, onClose, onSubmit }: Props) {
         </FieldControl>
       </DialogBody>
 
-      <DialogFooter className="mt-auto pt-10">
+      <DialogFooter className="b-mt-auto b-pt-10">
         <Button disabled={!valid} fluid onClick={onSubmit}>
           Next
         </Button>

src/components/WalletButton/index.tsx

@@ -16,16 +16,16 @@ export function WalletButton({ className, disabled = false, name, logo, label, o
       disabled={disabled}
       as="button"
       className={twMerge(
-        "flex h-14 w-full cursor-pointer items-center gap-2.5 rounded border border-primary-main/30 px-2",
-        disabled ? "cursor-default" : "cursor-pointer",
+        "b-flex b-h-14 b-w-full b-cursor-pointer b-items-center b-gap-2.5 b-rounded b-border b-border-primary-main/30 b-px-2",
+        disabled ? "b-cursor-default" : "b-cursor-pointer",
         className,
       )}
       onClick={onClick}
     >
-      <Avatar variant="rounded" className="shrink-0" alt={name} url={logo} />
+      <Avatar variant="rounded" className="b-shrink-0" alt={name} url={logo} />
       {name}
 
-      {label && <Chip className="ml-auto shrink-0">{label}</Chip>}
+      {label && <Chip className="b-ml-auto b-shrink-0">{label}</Chip>}
     </Text>
   );
 }

src/components/WalletProvider/components/WalletDialog.tsx

@@ -54,7 +54,7 @@ export function WalletDialog({ onError }: WalletDialogProps) {
     <Dialog open={visible}>
       <Screen
         current={screen}
-        className="size-[600px]"
+        className="b-size-[600px]"
         onClose={close}
         onSelectWallet={handleSelectWallet}
         onAccepTermsOfService={displayChains}

src/components/Wallets/index.stories.tsx

@@ -45,11 +45,11 @@ const wallets = [
 
 export const Default: Story = {
   args: {
-    className: "h-[600px]",
+    className: "b-h-[600px]",
     chain: { id: "BTC", name: "Bitcoin", icon: "/images/chains/bitcoin.png", wallets },
     append: (
-      <div className="sticky inset-x-0 bottom-0 bg-[#ffffff] pt-10">
-        <Text className="mb-4">More wallets with Tomo Connect</Text>
+      <div className="b-sticky b-inset-x-0 b-bottom-0 b-bg-[#ffffff] b-pt-10">
+        <Text className="b-mb-4">More wallets with Tomo Connect</Text>
         <WalletButton logo="/images/wallets/tomo.png" name="Tomo Connect" />
       </div>
     ),

src/components/Wallets/index.tsx

@@ -27,13 +27,13 @@ export function Wallets({ chain, className, append, onClose, onBack, onSelectWal
   const wallets = useMemo(() => chain.wallets.filter((wallet) => wallet.id !== "injectable"), [chain]);
 
   return (
-    <div className={twMerge("flex flex-1 flex-col", className)}>
-      <DialogHeader className="mb-10" title="Select Wallet" onClose={onClose}>
+    <div className={twMerge("b-flex b-flex-1 b-flex-col", className)}>
+      <DialogHeader className="b-mb-10" title="Select Wallet" onClose={onClose}>
         <Text>Connect a {chain.name} Wallet</Text>
       </DialogHeader>
 
       <DialogBody>
-        <div className={twMerge("grid gap-6", countOfVisibleWallets === 1 ? "grid-cols-1" : "grid-cols-2")}>
+        <div className={twMerge("b-grid b-gap-6", countOfVisibleWallets === 1 ? "b-grid-cols-1" : "b-grid-cols-2")}>
           {injectableWallet && (
             <WalletButton
               name={injectableWallet.name}
@@ -57,7 +57,7 @@ export function Wallets({ chain, className, append, onClose, onBack, onSelectWal
         {append}
       </DialogBody>
 
-      <DialogFooter className="mt-auto pt-10">
+      <DialogFooter className="b-mt-auto b-pt-10">
         <Button variant="outlined" fluid onClick={onBack}>
           Back
         </Button>

src/index.css

@@ -104,7 +104,7 @@
 }
 
 body {
-  @apply font-sans text-base font-normal leading-normal tracking-normal text-primary-dark;
+  @apply b-font-sans b-text-base b-font-normal b-leading-normal b-tracking-normal b-text-primary-dark;
 
   font-feature-settings:
     "liga" off,

tailwind.config.js

@@ -140,4 +140,5 @@ export default {
     },
   },
   plugins: [],
+  prefix: "b-",
 };