@b3dotfun/sdk 0.0.74-alpha.0 → 0.0.75-alpha.0

package/src/global-account/react/components/ManageAccount/SettingsContent.tsx

@@ -65,7 +65,7 @@ const SettingsContent = ({
 
       {/* Profile Section */}
       <div className="p-5">
-        <div className="b3-modal-settings-profile-card flex items-center rounded-xl border border-[#e4e4e7] bg-[#f4f4f5] p-4">
+        <div className="b3-modal-settings-profile-card dark:border-b3-line dark:bg-b3-background flex items-center rounded-xl border border-[#e4e4e7] bg-[#f4f4f5] p-4">
           <SettingsProfileCard />
         </div>
       </div>

package/src/global-account/react/components/ManageAccount/SettingsMenuItem.tsx

@@ -12,14 +12,14 @@ const SettingsMenuItem = ({ icon, title, subtitle, onClick }: SettingsMenuItemPr
   return (
     <button
       onClick={onClick}
-      className="b3-modal-settings-menu-item flex w-full items-center gap-2 rounded-xl px-3 py-2 transition-colors hover:bg-[#f4f4f5]"
+      className="b3-modal-settings-menu-item dark:hover:bg-b3-line/50 flex w-full items-center gap-2 rounded-xl px-3 py-2 transition-colors hover:bg-[#f4f4f5]"
     >
-      <div className="flex size-10 items-center justify-center rounded-full bg-[#f4f4f5]">{icon}</div>
-      <div className="flex flex-1 flex-col items-start gap-1 text-left">
-        <span className="font-neue-montreal-semibold text-[14px] leading-none tracking-[-0.28px] text-[#3f3f46]">
+      <div className="dark:bg-b3-line flex size-10 items-center justify-center rounded-full bg-[#f4f4f5]">{icon}</div>
+      <div className="flex flex-1 flex-col items-start gap-1 text-left dark:text-white">
+        <span className="font-neue-montreal-semibold text-[14px] leading-none tracking-[-0.28px] text-[#3f3f46] dark:text-white">
           {title}
         </span>
-        <span className="font-neue-montreal-medium text-[14px] leading-none tracking-[-0.28px] text-[#70707b]">
+        <span className="dark:text-b3-foreground-muted font-neue-montreal-medium text-[14px] leading-none tracking-[-0.28px] text-[#70707b]">
           {subtitle}
         </span>
       </div>

package/src/global-account/react/components/ManageAccount/SettingsProfileCard.tsx

@@ -128,11 +128,11 @@ const SettingsProfileCard = () => {
         <IPFSMediaRenderer
           src={avatarSrc}
           alt="Profile"
-          className="border-black/8 size-14 rounded-full border object-cover"
+          className="border-b3-line dark:border-white/8 size-14 rounded-full border object-cover"
         />
         <button
           onClick={handleEditAvatar}
-          className="absolute -bottom-0.5 -right-0.5 flex size-[18px] items-center justify-center rounded-full border-[1.5px] border-white bg-[#a0a0ab] transition-colors hover:bg-[#a0a0ab]/80"
+          className="border-b3-line absolute -bottom-0.5 -right-0.5 flex size-[18px] items-center justify-center rounded-full border-[1.5px] bg-[#a0a0ab] transition-colors hover:bg-[#a0a0ab]/80 dark:border-white"
           aria-label="Edit avatar"
         >
           <Pencil size={10} className="text-white" strokeWidth={2.5} />
@@ -185,7 +185,7 @@ const SettingsProfileCard = () => {
               onClick={handleEditUsername}
               className="flex items-center justify-center gap-1 text-left transition-opacity hover:opacity-80"
             >
-              <p className="font-inter text-sm font-semibold leading-5 text-[#51525C]">Edit Username</p>
+              <p className="font-inter text-sm font-semibold leading-5 text-[#51525C] dark:text-white">Edit Username</p>
             </button>
           </>
         )}

package/src/global-account/react/components/ManageAccount/channels/DiscordChannel.tsx

@@ -30,6 +30,7 @@ export const DiscordChannel = ({
 
   const [discordId, setDiscordId] = useState("");
   const [isConnecting, setIsConnecting] = useState(false);
+  const [showInput, setShowInput] = useState(false);
 
   // Detect if we're disconnecting
   const isDisconnecting = isConnected && !isOptimisticallyConnected;
@@ -43,6 +44,7 @@ export const DiscordChannel = ({
       await notificationsAPI.ensureNotificationSettings(userId, partnerId, "general", jwtToken);
 
       setDiscordId("");
+      setShowInput(false);
       toast.success("Discord connected successfully!");
       onConnectionChange();
     } catch (err: any) {
@@ -54,6 +56,9 @@ export const DiscordChannel = ({
   };
 
   const handleToggle = () => {
+    if (isConnected) {
+      setShowInput(false);
+    }
     onToggle(isConnected);
   };
 
@@ -67,7 +72,24 @@ export const DiscordChannel = ({
     </svg>
   );
 
-  const inputSection = (
+  const addButtonSection = (
+    <button onClick={() => setShowInput(true)} className="mt-1 flex items-center gap-1">
+      <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+        <path
+          d="M8 3.33333V12.6667M3.33333 8H12.6667"
+          stroke="#0c68e9"
+          strokeWidth="1.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </svg>
+      <span className="font-['Inter',sans-serif] text-[11px] font-semibold leading-[16px] text-[#0b57c2]">
+        Add Discord
+      </span>
+    </button>
+  );
+
+  const inputSection = showInput ? (
     <div className="mt-1 space-y-2">
       <input
         type="text"
@@ -100,7 +122,7 @@ export const DiscordChannel = ({
         </span>
       </button>
     </div>
-  );
+  ) : null;
 
   return (
     <NotificationChannel
@@ -112,6 +134,7 @@ export const DiscordChannel = ({
       isDisconnecting={isDisconnecting}
       connectedInfo={discordChannel?.channel_identifier}
       inputSection={inputSection}
+      addButtonSection={addButtonSection}
       onToggle={handleToggle}
       showBorder={false}
     />

package/src/global-account/react/components/ManageAccount/channels/EmailChannel.tsx

@@ -121,7 +121,7 @@ export const EmailChannel = ({
             }
           }}
           placeholder="your@email.com"
-          className={`w-full rounded-lg border px-2 py-1.5 font-['Inter',sans-serif] text-sm focus:outline-none ${
+          className={`dark:border-b3-line dark:bg-b3-background w-full rounded-lg border px-2 py-1.5 font-['Inter',sans-serif] text-sm focus:outline-none dark:text-white ${
             emailError ? "border-red-500 focus:border-red-500" : "border-gray-300 focus:border-blue-500"
           }`}
         />

package/src/global-account/react/components/ManageAccount/channels/PhoneChannel.tsx

@@ -148,7 +148,7 @@ export const PhoneChannel = ({
           }
         }}
         placeholder="+1 (555) 123-4567"
-        className="w-full rounded-lg border border-gray-300 px-2 py-1.5 font-['Inter',sans-serif] text-sm focus:border-blue-500 focus:outline-none"
+        className="dark:border-b3-line dark:bg-b3-background w-full rounded-lg border border-gray-300 px-2 py-1.5 font-['Inter',sans-serif] text-sm focus:border-blue-500 focus:outline-none dark:text-white"
       />
       <div className="flex gap-2">
         <button
@@ -165,7 +165,7 @@ export const PhoneChannel = ({
               strokeLinejoin="round"
             />
           </svg>
-          <span className="font-['Inter',sans-serif] text-[11px] font-semibold leading-[16px] text-[#0b57c2]">
+          <span className="font-['Inter',sans-serif] text-[11px] font-semibold leading-[16px] text-[#0b57c2] dark:text-white">
             {isConnectingSMS ? "Connecting..." : "Add SMS"}
           </span>
         </button>
@@ -195,12 +195,12 @@ export const PhoneChannel = ({
   const connectedInfo = (
     <>
       {isSMSConnected && (
-        <p className="font-['PP_Neue_Montreal','PP_Neue_Montreal_Fallback',sans-serif] text-[14px] leading-[20px] text-[#51525c]">
+        <p className="font-['PP_Neue_Montreal','PP_Neue_Montreal_Fallback',sans-serif] text-[14px] leading-[20px] text-[#51525c] dark:text-white">
           {smsChannel?.channel_identifier}
         </p>
       )}
       {isWhatsAppConnected && (
-        <p className="font-['PP_Neue_Montreal','PP_Neue_Montreal_Fallback',sans-serif] text-[14px] leading-[20px] text-[#51525c]">
+        <p className="font-['PP_Neue_Montreal','PP_Neue_Montreal_Fallback',sans-serif] text-[14px] leading-[20px] text-[#51525c] dark:text-white">
           {whatsappChannel?.channel_identifier}
         </p>
       )}

package/src/global-account/react/components/ManageAccount/channels/TelegramChannel.tsx

@@ -106,10 +106,10 @@ export const TelegramChannel = ({
   const inputSection =
     status === "pending" ? (
       <div className="mt-1">
-        <p className="font-['PP_Neue_Montreal','PP_Neue_Montreal_Fallback',sans-serif] text-[14px] leading-[20px] text-yellow-700">
+        <p className="font-['PP_Neue_Montreal','PP_Neue_Montreal_Fallback',sans-serif] text-[14px] leading-[20px] text-yellow-700 dark:text-white">
           Waiting for connection...
         </p>
-        <p className="font-['PP_Neue_Montreal','PP_Neue_Montreal_Fallback',sans-serif] text-[12px] text-yellow-600">
+        <p className="font-['PP_Neue_Montreal','PP_Neue_Montreal_Fallback',sans-serif] text-[12px] text-yellow-600 dark:text-white">
           Send /start to @b3_notifications_bot
         </p>
       </div>

package/src/global-account/react/components/ModalHeader/ModalHeader.tsx

@@ -36,19 +36,19 @@ const ModalHeader = ({
           onClick={handleBack || navigateBack}
           className="flex h-6 w-6 items-center justify-center transition-opacity hover:opacity-70"
         >
-          <ChevronLeft className="h-6 w-6 text-[#51525c]" />
+          <ChevronLeft className="h-6 w-6 text-[#51525c] dark:text-white" />
           {showBackWord && <span className="text-sm font-medium">Back</span>}
         </button>
       ) : (
         <div className="w-2" />
       )}
-      <p className="font-inter text-lg font-semibold leading-7 text-[#18181b]">{title}</p>
+      <p className="font-inter text-lg font-semibold leading-7 text-[#18181b] dark:text-white">{title}</p>
       {showCloseButton ? (
         <button
           onClick={handleClose || (() => setB3ModalOpen(false))}
           className="flex h-6 w-6 items-center justify-center transition-opacity hover:opacity-70"
         >
-          <X className="h-6 w-6 text-[#51525c]" />
+          <X className="h-6 w-6 text-[#51525c] dark:text-white" />
         </button>
       ) : !children ? (
         <div className="w-2" />

package/src/global-account/react/components/Send/Send.tsx

@@ -240,7 +240,7 @@ export function Send({ recipientAddress: initialRecipient, onSuccess }: SendModa
   };
 
   return (
-    <div className="flex h-[600px] w-full flex-col bg-white">
+    <div className="dark:bg-b3-background flex h-[600px] w-full flex-col bg-white">
       <ModalHeader handleBack={handleBack} title={getStepTitle()} />
 
       {/* Content - 20px padding */}
@@ -248,10 +248,10 @@ export function Send({ recipientAddress: initialRecipient, onSuccess }: SendModa
         {step === "recipient" && (
           <div className="flex flex-col gap-6 p-5">
             {/* Input field - 48px height */}
-            <div className="flex h-12 w-full items-stretch overflow-hidden rounded-lg border border-[#d1d1d6] bg-white">
+            <div className="dark:border-b3-line dark:bg-b3-background flex h-12 w-full items-stretch overflow-hidden rounded-lg border border-[#d1d1d6] bg-white">
               {/* "To" addon - 48px width */}
               <div className="flex w-12 items-center justify-center bg-transparent px-3 py-2">
-                <span className="font-neue-montreal-medium text-base text-[#3f3f46]">To</span>
+                <span className="font-neue-montreal-medium text-base text-[#3f3f46] dark:text-white">To</span>
               </div>
               {/* Input */}
               <div className="flex flex-1 items-center border-l border-[#d1d1d6] px-3 py-2">
@@ -260,7 +260,7 @@ export function Send({ recipientAddress: initialRecipient, onSuccess }: SendModa
                   value={recipientAddress}
                   onChange={e => handleRecipientAddressChange(e.target.value)}
                   placeholder="ENS or Address"
-                  className="font-neue-montreal-medium flex-1 text-base text-[#70707b] outline-none placeholder:text-[#70707b]"
+                  className="font-neue-montreal-medium dark:bg-b3-background flex-1 text-base text-[#70707b] outline-none placeholder:text-[#70707b] dark:text-white dark:placeholder:text-white"
                 />
                 {/* Paste badge */}
                 <button
@@ -287,7 +287,7 @@ export function Send({ recipientAddress: initialRecipient, onSuccess }: SendModa
                 {/* Validated Address Card */}
                 <button
                   onClick={handleSelectValidatedAddress}
-                  className="flex items-center gap-2 rounded-xl bg-[#f4f4f5] px-3 py-2 transition-colors hover:bg-[#e4e4e7]"
+                  className="dark:bg-b3-background dark:border-b3-line flex items-center gap-2 rounded-xl bg-[#f4f4f5] px-3 py-2 transition-colors hover:bg-[#e4e4e7]"
                 >
                   {/* Avatar */}
                   {validatedProfileData?.avatar ? (
@@ -297,12 +297,12 @@ export function Send({ recipientAddress: initialRecipient, onSuccess }: SendModa
                       className="h-10 w-10 rounded-full"
                     />
                   ) : (
-                    <div className="flex h-10 w-10 items-center justify-center rounded-full border border-[#e4e4e7] bg-[#f4f4f5]">
-                      <Wallet className="h-5 w-5 text-[#a0a0ab]" />
+                    <div className="dark:border-b3-line dark:bg-b3-background flex h-10 w-10 items-center justify-center rounded-full border border-[#e4e4e7] bg-[#f4f4f5]">
+                      <Wallet className="h-5 w-5 text-[#a0a0ab] dark:text-white" />
                     </div>
                   )}
                   {/* Address and Name */}
-                  <span className="font-neue-montreal-medium text-base tracking-[-0.32px] text-[#70707b]">
+                  <span className="font-neue-montreal-medium text-base tracking-[-0.32px] text-[#70707b] dark:text-white">
                     {recipientAddress.slice(0, 6)}...{recipientAddress.slice(-4)}
                     {validatedProfileData?.name && ` (${validatedProfileData.name})`}
                   </span>
@@ -420,7 +420,7 @@ export function Send({ recipientAddress: initialRecipient, onSuccess }: SendModa
         {step === "amount" && selectedToken && (
           <div className="flex flex-col gap-6 p-5">
             {/* Selected Token Display */}
-            <div className="flex items-center justify-between rounded-xl border border-[#d1d1d6] bg-[#fafafa] p-3">
+            <div className="dark:border-b3-line dark:bg-b3-background flex items-center justify-between rounded-xl border border-[#d1d1d6] bg-[#fafafa] p-3">
               <div className="flex items-center gap-3">
                 <div className="flex h-10 w-10 items-center justify-center">
                   {ALL_CHAINS[selectedToken.chain_id]?.logoUrl ? (
@@ -434,15 +434,17 @@ export function Send({ recipientAddress: initialRecipient, onSuccess }: SendModa
                   )}
                 </div>
                 <div>
-                  <div className="font-neue-montreal-semibold text-base text-[#18181b]">{selectedToken.symbol}</div>
-                  <div className="font-neue-montreal-medium text-sm text-[#70707b]">
+                  <div className="font-neue-montreal-semibold text-base text-[#18181b] dark:text-white">
+                    {selectedToken.symbol}
+                  </div>
+                  <div className="font-neue-montreal-medium text-sm text-[#70707b] dark:text-white">
                     {formatTokenAmount(BigInt(selectedToken.amount), selectedToken.decimals)}
                   </div>
                 </div>
               </div>
               <button
                 onClick={() => setStep("token")}
-                className="text-b3-primary-blue font-neue-montreal-semibold hover:text-b3-primary-blue/80 text-sm transition-colors"
+                className="text-b3-primary-blue font-neue-montreal-semibold hover:text-b3-primary-blue/80 text-sm transition-colors dark:text-white"
               >
                 Change
               </button>
@@ -462,7 +464,7 @@ export function Send({ recipientAddress: initialRecipient, onSuccess }: SendModa
                 minLength={1}
                 maxLength={30}
                 spellCheck="false"
-                className="font-neue-montreal-medium placeholder:text-b3-foreground-muted w-full rounded-lg border border-[#d1d1d6] bg-white px-3 py-2 text-base text-[#18181b] outline-none focus:border-[#0c68e9]"
+                className="font-neue-montreal-medium placeholder:text-b3-foreground-muted dark:border-b3-line dark:bg-b3-background w-full rounded-lg border border-[#d1d1d6] bg-white px-3 py-2 text-base text-[#18181b] outline-none focus:border-[#0c68e9] dark:text-white"
                 pattern="^[0-9]*[.,]?[0-9]*$"
                 disabled={isSending}
                 value={sendAmount}
@@ -477,7 +479,7 @@ export function Send({ recipientAddress: initialRecipient, onSuccess }: SendModa
                     key={percentage}
                     variant="outline"
                     onClick={() => handlePercentageClick(percentage)}
-                    className="font-neue-montreal-medium border-[#d1d1d6] text-sm text-[#18181b] hover:bg-[#fafafa]"
+                    className="font-neue-montreal-medium dark:border-b3-line dark:bg-b3-background border-[#d1d1d6] text-sm text-[#18181b] hover:bg-[#fafafa] dark:text-white"
                     disabled={isSending}
                   >
                     {percentage}%
@@ -508,16 +510,16 @@ export function Send({ recipientAddress: initialRecipient, onSuccess }: SendModa
             {/* Top section with icon and amount */}
             <div className="flex flex-col items-center gap-4 px-5 pb-0 pt-6">
               {/* Send icon */}
-              <div className="flex h-14 w-14 items-center justify-center rounded-full bg-[#d5e5fd]">
+              <div className="dark:bg-b3-line flex h-14 w-14 items-center justify-center rounded-full bg-[#d5e5fd]">
                 <SendIcon className="h-7 w-7 text-[#0c68e9]" />
               </div>
 
               {/* Amount */}
               <div className="flex items-center gap-1">
-                <span className="font-neue-montreal-semibold text-[30px] leading-[38px] text-[#18181b]">
+                <span className="font-neue-montreal-semibold text-[30px] leading-[38px] text-[#18181b] dark:text-white">
                   {sendAmount}
                 </span>
-                <span className="font-neue-montreal-semibold text-[30px] leading-[38px] text-[#70707b]">
+                <span className="font-neue-montreal-semibold text-[30px] leading-[38px] text-[#70707b] dark:text-white">
                   {selectedToken.symbol}
                 </span>
               </div>
@@ -528,21 +530,23 @@ export function Send({ recipientAddress: initialRecipient, onSuccess }: SendModa
 
             {/* Transaction details */}
             <div className="flex flex-col gap-3 px-5">
-              <div className="rounded-xl border border-[#e4e4e7] bg-[#fafafa] p-4">
+              <div className="dark:border-b3-line dark:bg-b3-background rounded-xl border border-[#e4e4e7] bg-[#fafafa] p-4">
                 <div className="flex flex-col gap-3">
                   {/* To */}
-                  <div className="flex items-center justify-between border-b border-[#e4e4e7] pb-3">
-                    <span className="font-inter text-sm font-normal leading-5 text-[#51525c]">To</span>
-                    <span className="font-inter text-sm font-normal leading-5 text-[#18181b]">
+                  <div className="dark:border-b3-line flex items-center justify-between border-b border-[#e4e4e7] pb-3">
+                    <span className="font-inter text-sm font-normal leading-5 text-[#51525c] dark:text-white">To</span>
+                    <span className="font-inter text-sm font-normal leading-5 text-[#18181b] dark:text-white">
                       Wallet ({recipientAddress.slice(0, 6)}...{recipientAddress.slice(-4)})
                     </span>
                   </div>
 
                   {/* Network */}
-                  <div className="flex items-center justify-between border-b border-[#e4e4e7] pb-3">
-                    <span className="font-inter text-sm font-normal leading-5 text-[#51525c]">Network</span>
+                  <div className="dark:border-b3-line flex items-center justify-between border-b border-[#e4e4e7] pb-3">
+                    <span className="font-inter text-sm font-normal leading-5 text-[#51525c] dark:text-white">
+                      Network
+                    </span>
                     <div className="flex items-center gap-1.5">
-                      <span className="font-inter text-sm font-normal leading-5 text-[#51525c]">
+                      <span className="font-inter text-sm font-normal leading-5 text-[#51525c] dark:text-white">
                         {ALL_CHAINS[selectedToken.chain_id]?.name || "Unknown"}
                       </span>
                       {ALL_CHAINS[selectedToken.chain_id]?.logoUrl && (
@@ -557,8 +561,12 @@ export function Send({ recipientAddress: initialRecipient, onSuccess }: SendModa
 
                   {/* Network fee */}
                   <div className="flex items-center justify-between">
-                    <span className="font-inter text-sm font-normal leading-5 text-[#51525c]">Network fee</span>
-                    <span className="font-inter text-sm font-normal leading-5 text-[#18181b]">$0.1</span>
+                    <span className="font-inter text-sm font-normal leading-5 text-[#51525c] dark:text-white">
+                      Network fee
+                    </span>
+                    <span className="font-inter text-sm font-normal leading-5 text-[#18181b] dark:text-white">
+                      $0.1
+                    </span>
                   </div>
                 </div>
               </div>
@@ -568,7 +576,7 @@ export function Send({ recipientAddress: initialRecipient, onSuccess }: SendModa
             <div className="flex-1" />
 
             {/* Bottom buttons */}
-            <div className="flex gap-4 border-t border-[#e4e4e7] bg-[#fafafa] p-4">
+            <div className="dark:border-b3-line dark:bg-b3-background flex gap-4 border-t border-[#e4e4e7] bg-[#fafafa] p-4">
               <Button
                 onClick={handleBack}
                 disabled={isSending}

package/src/global-account/react/hooks/useSimBalance.ts

@@ -31,8 +31,8 @@ async function fetchSimBalance(address: string, chainIdsParam: number[]): Promis
 
   const chainIds = chainIdsParam.length === 0 ? "mainnet" : chainIdsParam.join(",");
   let url = `https://simdune-api.sean-430.workers.dev/?url=https://api.sim.dune.com/v1/evm/balances/${address}?metadata=logo&chain_ids=${chainIds}&exclude_spam_tokens=true`;
-  if (process.env.NEXT_PUBLIC_SIMDUNE_LOCAL_KEY) {
-    url += `&localkey=${process.env.NEXT_PUBLIC_SIMDUNE_LOCAL_KEY}`;
+  if (process.env.NEXT_PUBLIC_DEVMODE_SHARED_SECRET) {
+    url += `&localkey=${process.env.NEXT_PUBLIC_DEVMODE_SHARED_SECRET}`;
   }
 
   const response = await fetch(url);

package/src/styles/index.css

@@ -289,6 +289,31 @@ html[data-theme="dark"] .b3-root,
   }
 }
 
+.b3-root[data-theme="dark"] .b3-modal {
+  @media (min-width: 768px) {
+    background: hsl(var(--b3-react-background));
+  }
+
+  .modal-inner-content {
+    background: hsl(var(--b3-background));
+    border: 1px solid hsl(var(--b3-line));
+  }
+
+  .b3-modal-home-actions > button {
+    background: hsl(var(--b3-background));
+  }
+
+  .b3-modal-bottom-navigation {
+    background: hsl(var(--b3-background));
+    border-top: 1px solid hsl(var(--b3-line));
+  }
+  .b3-modal-header {
+    background: hsl(var(--b3-background));
+    border-bottom: 1px solid hsl(var(--b3-line));
+    color: white;
+  }
+}
+
 .b3-modal-freestyle {
   background: transparent !important;
   padding: 0 !important;