From be33537e2a1c0a5afe7cb508b8cba5a11974d81c Mon Sep 17 00:00:00 2001
From: David Totraev <totraev@gmail.com>
Date: Fri, 22 Nov 2024 23:26:38 +0500
Subject: [PATCH] feat: tw prefixes

---
 package-lock.json                                 | 12 ++++++------
 package.json                                      |  2 +-
 src/components/ChainButton/index.stories.tsx      |  2 +-
 src/components/ChainButton/index.tsx              | 12 ++++++------
 src/components/Chains/index.stories.ts            |  2 +-
 src/components/Chains/index.tsx                   |  9 +++++----
 src/components/ConnectedWallet/index.tsx          | 15 +++++++++------
 src/components/FieldControl/index.tsx             |  7 ++++++-
 src/components/Inscriptions/index.stories.tsx     |  2 +-
 src/components/Inscriptions/index.tsx             | 14 +++++++-------
 src/components/TermsOfService/index.stories.tsx   |  2 +-
 src/components/TermsOfService/index.tsx           | 10 +++++-----
 src/components/WalletButton/index.tsx             |  8 ++++----
 .../WalletProvider/components/WalletDialog.tsx    |  2 +-
 src/components/Wallets/index.stories.tsx          |  6 +++---
 src/components/Wallets/index.tsx                  |  8 ++++----
 src/index.css                                     |  2 +-
 tailwind.config.js                                |  1 +
 18 files changed, 63 insertions(+), 53 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 0dce9e8..144e1b9 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,14 +1,14 @@
 {
   "name": "@babylonlabs-io/bbn-wallet-connect",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@babylonlabs-io/bbn-wallet-connect",
-      "version": "0.0.1",
+      "version": "0.0.2",
       "dependencies": {
-        "@babylonlabs-io/bbn-core-ui": "^0.0.4",
+        "@babylonlabs-io/bbn-core-ui": "^0.0.9",
         "react-icons": "^5.3.0"
       },
       "devDependencies": {
@@ -360,9 +360,9 @@
       }
     },
     "node_modules/@babylonlabs-io/bbn-core-ui": {
-      "version": "0.0.4",
-      "resolved": "https://registry.npmjs.org/@babylonlabs-io/bbn-core-ui/-/bbn-core-ui-0.0.4.tgz",
-      "integrity": "sha512-1UwG60/4czDvM8SqmlHWAF5h5Mg1PCzohN5XXbkADZp//5Lr7hs5tA0v11XKKGjN3BEOILs0A8qYLT5y2EK4Ag==",
+      "version": "0.0.9",
+      "resolved": "https://registry.npmjs.org/@babylonlabs-io/bbn-core-ui/-/bbn-core-ui-0.0.9.tgz",
+      "integrity": "sha512-SF41ESMuNTF1OZEAhtybIh+aOepY7VuQIyysukbSyb4ZHXWZNpxorclJu8JjGrCEIev0Ui8C9mEECZ0Slw88fA==",
       "peerDependencies": {
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
diff --git a/package.json b/package.json
index faf6b64..e57c248 100644
--- a/package.json
+++ b/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": [
diff --git a/src/components/ChainButton/index.stories.tsx b/src/components/ChainButton/index.stories.tsx
index 8dc0f47..067d1b4 100644
--- a/src/components/ChainButton/index.stories.tsx
+++ b/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"
diff --git a/src/components/ChainButton/index.tsx b/src/components/ChainButton/index.tsx
index ee93569..9ea0c41 100644
--- a/src/components/ChainButton/index.tsx
+++ b/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>
       )}
diff --git a/src/components/Chains/index.stories.ts b/src/components/Chains/index.stories.ts
index 1654fc9..637ba32 100644
--- a/src/components/Chains/index.stories.ts
+++ b/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,
   },
 };
diff --git a/src/components/Chains/index.tsx b/src/components/Chains/index.tsx
index 378cc85..c482861 100644
--- a/src/components/Chains/index.tsx
+++ b/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>
diff --git a/src/components/ConnectedWallet/index.tsx b/src/components/ConnectedWallet/index.tsx
index 0cdb03b..ffac17e 100644
--- a/src/components/ConnectedWallet/index.tsx
+++ b/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
diff --git a/src/components/FieldControl/index.tsx b/src/components/FieldControl/index.tsx
index bc2d73e..de64235 100644
--- a/src/components/FieldControl/index.tsx
+++ b/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>
diff --git a/src/components/Inscriptions/index.stories.tsx b/src/components/Inscriptions/index.stories.tsx
index f59ff7f..6507aaa 100644
--- a/src/components/Inscriptions/index.stories.tsx
+++ b/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]",
   },
 };
diff --git a/src/components/Inscriptions/index.tsx b/src/components/Inscriptions/index.tsx
index 5efeb8a..d4c28f8 100644
--- a/src/components/Inscriptions/index.tsx
+++ b/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)}>
diff --git a/src/components/TermsOfService/index.stories.tsx b/src/components/TermsOfService/index.stories.tsx
index be69bbe..9b3f404 100644
--- a/src/components/TermsOfService/index.stories.tsx
+++ b/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]",
   },
 };
diff --git a/src/components/TermsOfService/index.tsx b/src/components/TermsOfService/index.tsx
index e1cf3d1..c5727f0 100644
--- a/src/components/TermsOfService/index.tsx
+++ b/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>
diff --git a/src/components/WalletButton/index.tsx b/src/components/WalletButton/index.tsx
index e399ed2..ec762a5 100644
--- a/src/components/WalletButton/index.tsx
+++ b/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>
   );
 }
diff --git a/src/components/WalletProvider/components/WalletDialog.tsx b/src/components/WalletProvider/components/WalletDialog.tsx
index d50930e..a62c8de 100644
--- a/src/components/WalletProvider/components/WalletDialog.tsx
+++ b/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}
diff --git a/src/components/Wallets/index.stories.tsx b/src/components/Wallets/index.stories.tsx
index fb4e107..349d0ff 100644
--- a/src/components/Wallets/index.stories.tsx
+++ b/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>
     ),
diff --git a/src/components/Wallets/index.tsx b/src/components/Wallets/index.tsx
index d172ca0..342cd70 100644
--- a/src/components/Wallets/index.tsx
+++ b/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>
diff --git a/src/index.css b/src/index.css
index 5b34fb4..1afef37 100644
--- a/src/index.css
+++ b/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,
diff --git a/tailwind.config.js b/tailwind.config.js
index 5e31958..c7b3925 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -140,4 +140,5 @@ export default {
     },
   },
   plugins: [],
+  prefix: "b-",
 };