chore: delay isAuthenticated

src/assets/Icons.tsx

@@ -930,7 +930,7 @@ export const ErrorIcon = () => (
     </g>
   </svg>
 );
-export const InfoIcon = () => (
+export const CopyIcon = () => (
   <svg
     width="20"
     height="20"
@@ -939,7 +939,7 @@ export const InfoIcon = () => (
     xmlns="http://www.w3.org/2000/svg"
   >
     <mask
-      id="mask0_2175_4860"
+      id="mask0_3685_15679"
       maskUnits="userSpaceOnUse"
       x="0"
       y="0"
@@ -948,9 +948,9 @@ export const InfoIcon = () => (
     >
       <rect width="20" height="20" fill="#D9D9D9" />
     </mask>
-    <g mask="url(#mask0_2175_4860)">
+    <g mask="url(#mask0_3685_15679)">
       <path
-        d="M10 13.5833C10.1181 13.5833 10.217 13.5434 10.2969 13.4635C10.3767 13.3837 10.4167 13.2847 10.4167 13.1667C10.4167 13.0486 10.3767 12.9497 10.2969 12.8698C10.217 12.7899 10.1181 12.75 10 12.75C9.88194 12.75 9.78299 12.7899 9.70312 12.8698C9.62326 12.9497 9.58333 13.0486 9.58333 13.1667C9.58333 13.2847 9.62326 13.3837 9.70312 13.4635C9.78299 13.5434 9.88194 13.5833 10 13.5833ZM9.70833 11H10.2917V6H9.70833V11ZM10.0035 17.25C9.00118 17.25 8.05861 17.0598 7.17583 16.6794C6.29306 16.299 5.52521 15.7826 4.87229 15.1304C4.21924 14.4782 3.70229 13.7113 3.32146 12.8298C2.94049 11.9481 2.75 11.006 2.75 10.0035C2.75 9.00118 2.94021 8.05861 3.32063 7.17583C3.70104 6.29306 4.21736 5.52521 4.86958 4.87229C5.52181 4.21924 6.28868 3.70229 7.17021 3.32146C8.05188 2.94049 8.99396 2.75 9.99646 2.75C10.9988 2.75 11.9414 2.94021 12.8242 3.32063C13.7069 3.70104 14.4748 4.21736 15.1277 4.86958C15.7808 5.52181 16.2977 6.28868 16.6785 7.17021C17.0595 8.05187 17.25 8.99396 17.25 9.99646C17.25 10.9988 17.0598 11.9414 16.6794 12.8242C16.299 13.7069 15.7826 14.4748 15.1304 15.1277C14.4782 15.7808 13.7113 16.2977 12.8298 16.6785C11.9481 17.0595 11.006 17.25 10.0035 17.25Z"
+        d="M6.04167 14.584V2.08398H16.0417V14.584H6.04167ZM7.29167 13.334H14.7917V3.33398H7.29167V13.334ZM3.125 17.5007V5.25711H4.375V16.2507H12.8685V17.5007H3.125Z"
         fill="#5093FF"
       />
     </g>

src/components/Alert/index.tsx

@@ -1,6 +1,7 @@
-import React from "react";
-import { ErrorIcon, InfoIcon, SuccessIcon, WarnIcon } from "../../assets/Icons";
-import { AlertType, useAppStore } from "../../store";
+import React from 'react';
+import { CopyIcon, ErrorIcon, SuccessIcon, WarnIcon } from '../../assets/Icons';
+import { AlertType, useAppStore } from '../../store';
+import { isBackgroundDark } from '../../utils/helpers';
 
 interface AlertProps {
   type: AlertType;
@@ -10,43 +11,69 @@ interface AlertProps {
 
 const variantStyles: Record<
   AlertType,
-  { container: string; text: string; icon: React.ReactNode }
+  {
+    baseBg: string;
+    darkBg: string;
+    container: string;
+    text: string;
+    icon: React.ReactNode;
+  }
 > = {
   error: {
-    container: "bluxcc:bg-light-red-50 bluxcc:border bluxcc:border-alert-error",
-    text: "bluxcc:text-alert-error",
+    baseBg: 'bluxcc:bg-light-red-50',
+    darkBg: 'bluxcc:bg-[#D6000033]',
+    container: 'bluxcc:border bluxcc:border-alert-error',
+    text: 'bluxcc:text-alert-error',
     icon: <ErrorIcon />,
   },
   success: {
-    container: "bluxcc:bg-white bluxcc:border bluxcc:border-alert-success",
-    text: "bluxcc:text-alert-success",
+    baseBg: 'bluxcc:bg-white',
+    darkBg: 'bluxcc:bg-[#00D66E33]',
+    container: 'bluxcc:border bluxcc:border-alert-success',
+    text: 'bluxcc:text-alert-success',
     icon: <SuccessIcon />,
   },
-  info: {
-    container: "bluxcc:bg-light-blue-50 bluxcc:border bluxcc:border-alert-info",
-    text: "bluxcc:text-alert-info",
-    icon: <InfoIcon />,
+  copy: {
+    baseBg: 'bluxcc:bg-light-blue-50',
+    darkBg: 'bluxcc:bg-[#005DF333]',
+    container: 'bluxcc:border bluxcc:border-alert-info',
+    text: 'bluxcc:text-alert-info',
+    icon: <CopyIcon />,
   },
   warn: {
-    container: "bluxcc:bg-white bluxcc:border bluxcc:border-alert-warning",
-    text: "bluxcc:text-alert-warning",
+    baseBg: 'bluxcc:bg-white',
+    darkBg: 'bluxcc:bg-[#FA8F0233]',
+    container: 'bluxcc:border bluxcc:border-alert-warning',
+    text: 'bluxcc:text-alert-warning',
     icon: <WarnIcon />,
   },
   none: {
-    container: "",
-    text: "",
+    baseBg: '',
+    darkBg: '',
+    container: '',
+    text: '',
     icon: null,
   },
 };
 
-const Alert: React.FC<AlertProps> = ({ type, message, className = "" }) => {
-  const { container, text, icon } = variantStyles[type];
+const Alert: React.FC<AlertProps> = ({ type, message, className = '' }) => {
   const appearance = useAppStore((store) => store.config.appearance);
+  const isDarkBg = isBackgroundDark(appearance.background);
+
+  const { baseBg, darkBg, container, text, icon } = variantStyles[type];
+  const backgroundClass = isDarkBg ? darkBg : baseBg;
 
   return (
     <div
       style={{ borderRadius: appearance.borderRadius }}
-      className={`bluxcc:flex bluxcc:items-center bluxcc:gap-2 bluxcc:px-3 bluxcc:h-10 bluxcc:max-w-[184px] ${container} ${text} ${className}`}
+      className={`
+        bluxcc:flex bluxcc:items-center bluxcc:gap-2
+        bluxcc:px-3 bluxcc:h-10 bluxcc:max-w-46
+        ${backgroundClass}
+        ${container}
+        ${text}
+        ${className}
+      `}
     >
       {icon}
       <span className="bluxcc:text-sm bluxcc:font-medium bluxcc:select-none">

src/components/Transaction/Summary/index.tsx

@@ -38,7 +38,7 @@ const Summary = ({
 
   const handleCopyText = (address: string) => {
     copyText(address);
-    setAlert('info', 'Address Copied');
+    setAlert('copy', 'Address Copied');
     setTimeout(() => {
       setAlert('none', '');
     }, 1000);

src/pages/Profile/Receive/index.tsx

@@ -1,11 +1,11 @@
-import { useAppStore } from "../../../store";
-import Button from "../../../components/Button";
-import QRCode from "../../../components/QRCode";
-import { LargeCopy } from "../../../assets/Icons";
-import Divider from "../../../components/Divider";
-import { copyText, hexToRgba } from "../../../utils/helpers";
-import { SmallBlux } from "../../../assets/bluxLogo";
-import { useLang } from "../../../hooks/useLang";
+import { useAppStore } from '../../../store';
+import Button from '../../../components/Button';
+import QRCode from '../../../components/QRCode';
+import { LargeCopy } from '../../../assets/Icons';
+import Divider from '../../../components/Divider';
+import { copyText, hexToRgba } from '../../../utils/helpers';
+import { SmallBlux } from '../../../assets/bluxLogo';
+import { useLang } from '../../../hooks/useLang';
 
 const Receive = () => {
   const t = useLang();
@@ -16,18 +16,18 @@ const Receive = () => {
 
   const handleCopyAddress = () => {
     copyText(address);
-    setAlert("info", t("address_copied"));
+    setAlert('copy', t('address_copied'));
     setTimeout(() => {
-      setAlert("none", "");
+      setAlert('none', '');
     }, 1000);
   };
 
   return (
     <div className="bluxcc:flex bluxcc:w-full bluxcc:flex-col bluxcc:items-center bluxcc:justify-center bluxcc:text-center">
       <div
-        className={`bluxcc:mt-4 bluxcc:flex bluxcc:size-[208px] bluxcc:items-center bluxcc:justify-center`}
+        className={`bluxcc:mt-4 bluxcc:flex bluxcc:size-52 bluxcc:items-center bluxcc:justify-center`}
         style={{
-          position: "relative",
+          position: 'relative',
           borderRadius: appearance.borderRadius,
           color: appearance.textColor,
           borderColor: appearance.borderColor,
@@ -45,10 +45,10 @@ const Receive = () => {
         <div
           className="bluxcc:z-20"
           style={{
-            position: "absolute",
-            top: "50%",
-            left: "50%",
-            transform: "translate(-50%, -50%)",
+            position: 'absolute',
+            top: '50%',
+            left: '50%',
+            transform: 'translate(-50%, -50%)',
             background: appearance.background,
           }}
         >
@@ -72,7 +72,7 @@ const Receive = () => {
           }}
         >
           <p
-            className="bluxcc:w-[292px] bluxcc:text-sm bluxcc:!leading-[16px] bluxcc:break-all"
+            className="bluxcc:w-73 bluxcc:text-sm bluxcc:leading-4! bluxcc:break-all"
             style={{
               color: hexToRgba(appearance.textColor, 0.7),
             }}
@@ -94,7 +94,7 @@ const Receive = () => {
         onClick={handleCopyAddress}
         endIcon={<LargeCopy fill={appearance.accentColor} />}
       >
-        {t("copy_address")}
+        {t('copy_address')}
       </Button>
     </div>
   );

src/pages/Profile/index.tsx

@@ -41,7 +41,7 @@ const Profile = () => {
     copyText(address)
       .then(() => {
         copyText(address);
-        setAlert('info', 'Address Copied');
+        setAlert('copy', 'Address Copied');
         setTimeout(() => {
           setAlert('none', '');
         }, 1000);

src/pages/Successful/index.tsx

@@ -79,7 +79,7 @@ const Successful = () => {
     <div className="bluxcc:mt-4 bluxcc:flex bluxcc:w-full bluxcc:flex-col bluxcc:items-center bluxcc:justify-center bluxcc:select-none">
       <div
         style={{ background: hexToRgba(appearance.accentColor, 0.1) }}
-        className="bluxcc:mb-6 bluxcc:flex bluxcc:size-[68px] bluxcc:items-center bluxcc:justify-center bluxcc:overflow-hidden bluxcc:rounded-full"
+        className="bluxcc:mb-6 bluxcc:flex bluxcc:size-17 bluxcc:items-center bluxcc:justify-center bluxcc:overflow-hidden bluxcc:rounded-full"
       >
         <GreenCheck fill={appearance.accentColor} />
       </div>
@@ -116,10 +116,7 @@ const Successful = () => {
       <Divider />
 
       {waitingStatus === 'login' ? (
-        <Button
-          state="disabled"
-          variant="outline"
-        >
+        <Button state="disabled" variant="outline">
           {t('loggingIn')}
         </Button>
       ) : (

src/pages/WalletConnect/index.tsx

@@ -28,7 +28,7 @@ const WalletConnect = () => {
   const handleCopyURI = (uri: string) => {
     copyText(uri);
 
-    store.setAlert('info', t('address_copied'));
+    store.setAlert('copy', t('address_copied'));
 
     setTimeout(() => {
       store.setAlert('none', '');
@@ -48,7 +48,7 @@ const WalletConnect = () => {
   return (
     <div className="bluxcc:flex bluxcc:w-full bluxcc:flex-col bluxcc:items-center bluxcc:justify-center bluxcc:text-center">
       <div
-        className={`bluxcc:mt-4 bluxcc:flex bluxcc:size-[208px] bluxcc:items-center bluxcc:justify-center`}
+        className={`bluxcc:mt-4 bluxcc:flex bluxcc:size-52 bluxcc:items-center bluxcc:justify-center`}
         style={{
           position: 'relative',
           borderRadius: appearance.borderRadius,

src/stellar/processes/connectWalletProcess.ts

@@ -15,12 +15,14 @@ const connectWalletProcess = async (store: IStore, wallet: IWallet) => {
     if (publicKey && publicKey.trim() !== '') {
       const passphrase = await getWalletNetwork(wallet);
 
-      store.connectWalletSuccessful(publicKey, passphrase);
-
       setRecentConnectionMethod(wallet.name);
 
       setTimeout(() => {
         store.setRoute(Route.SUCCESSFUL);
+
+        setTimeout(() => {
+          store.connectWalletSuccessful(publicKey, passphrase);
+        }, 1000);
       }, 500);
     }
   } catch {

src/store.ts

@@ -20,7 +20,7 @@ import {
 } from './types';
 
 export type WaitingStatus = 'login' | 'sendTransaction' | 'signMessage';
-export type AlertType = 'error' | 'success' | 'info' | 'warn' | 'none';
+export type AlertType = 'error' | 'success' | 'warn' | 'none' | 'copy';
 
 export interface IUser {
   address: string;
@@ -119,7 +119,7 @@ export interface IStoreMethods {
   setAuth: (a: IAuth) => void;
 }
 
-export interface IStore extends IStoreProperties, IStoreMethods { }
+export interface IStore extends IStoreProperties, IStoreMethods {}
 
 export const store = createStore<IStore>((set) => ({
   auth: undefined,

src/utils/helpers.ts

@@ -319,11 +319,22 @@ export const handleLoadWallets = (
     }
   });
 
-export const hexToRgba = (hex: string, alpha: number) => {
-  const bigint = parseInt(hex.replace('#', ''), 16);
-  const r = (bigint >> 16) & 255;
-  const g = (bigint >> 8) & 255;
-  const b = bigint & 255;
+export const hexToRgba = (hex: string, alpha: number = 1) => {
+  hex = hex.replace(/^#/, '');
+  let r: number, g: number, b: number;  
+
+  if (hex.length === 3) {
+    r = parseInt(hex[0] + hex[0], 16);
+    g = parseInt(hex[1] + hex[1], 16);
+    b = parseInt(hex[2] + hex[2], 16);
+  } else if (hex.length === 6 || hex.length === 8) {
+    r = parseInt(hex.substring(0, 2), 16);
+    g = parseInt(hex.substring(2, 4), 16);
+    b = parseInt(hex.substring(4, 6), 16);
+  } else {
+    throw new Error(`Invalid hex color: ${hex}`);
+  }
+
   return `rgba(${r}, ${g}, ${b}, ${alpha})`;
 };