bluxcc · ceydae · Sep 11, 2025 · Aug 6, 2025 · Aug 7, 2025 · Aug 7, 2025
diff --git a/package.json b/package.json
@@ -73,6 +73,7 @@
     "*.css"
   ],
   "dependencies": {
-    "@hot-wallet/sdk": "^1.0.11"
+    "@hot-wallet/sdk": "^1.0.11",
+    "qrcode.react": "^4.2.0"
   }
 }
diff --git a/src/assets/Icons.tsx b/src/assets/Icons.tsx
@@ -215,30 +215,57 @@ export const LogOut = ({ fill = '#666666' }: { fill?: string }) => (
 );
 export const Copy = ({ fill = '#4D4D4D' }: { fill?: string }) => (
   <svg
-    width="24"
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <mask
+      id="mask0_3052_13468"
+      maskUnits="userSpaceOnUse"
+      x="0"
+      y="0"
+      width="16"
+      height="16"
+    >
+      <rect width="16" height="16" fill="#D9D9D9" />
+    </mask>
+    <g mask="url(#mask0_3052_13468)">
+      <path
+        d="M4.83333 11.666V1.66602H12.8333V11.666H4.83333ZM5.83333 10.666H11.8333V2.66602H5.83333V10.666ZM2.5 13.9993V4.20452H3.5V12.9993H10.2948V13.9993H2.5Z"
+        fill={fill}
+      />
+    </g>
+  </svg>
+);
+export const LargeCopy = ({ fill = '#0C1083' }: { fill?: string }) => (
+  <svg
+    width="25"
     height="24"
-    viewBox="0 0 24 24"
+    viewBox="0 0 25 24"
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
   >
     <mask
-      id="mask0_2054_791"
+      id="mask0_3063_3055"
       maskUnits="userSpaceOnUse"
       x="0"
       y="0"
-      width="24"
+      width="25"
       height="24"
     >
-      <rect width="24" height="24" fill="#D9D9D9" />
+      <rect x="0.5" width="24" height="24" fill="#D9D9D9" />
     </mask>
-    <g mask="url(#mask0_2054_791)">
+    <g mask="url(#mask0_3063_3055)">
       <path
-        d="M7.25 17.5V2.5H19.25V17.5H7.25ZM8.75 16H17.75V4H8.75V16ZM3.75 21V6.30775H5.25V19.5H15.4423V21H3.75Z"
+        d="M7.75 17.5V2.5H19.75V17.5H7.75ZM9.25 16H18.25V4H9.25V16ZM4.25 21V6.30775H5.75V19.5H15.9423V21H4.25Z"
         fill={fill}
       />
     </g>
   </svg>
 );
+
 export const History = ({ fill = '#0C1083' }: { fill?: string }) => (
   <svg
     width="24"
@@ -317,6 +344,34 @@ export const ArrowDropUp = ({ fill = '#0C1083' }: { fill?: string }) => (
     </g>
   </svg>
 );
+
+export const ArrowDropDown = ({ fill = '#0C1083' }: { fill?: string }) => (
+  <svg
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <mask
+      id="mask0_1816_18902"
+      maskUnits="userSpaceOnUse"
+      x="0"
+      y="0"
+      width="24"
+      height="24"
+    >
+      <rect width="24" height="24" fill="#D9D9D9" />
+    </mask>
+    <g mask="url(#mask0_1816_18902)">
+      <path
+        d="M11.9999 14.6537L7.59619 10.25H16.4037L11.9999 14.6537Z"
+        fill={fill}
+      />
+    </g>
+  </svg>
+);
+
 export const RedAlert = () => (
   <svg
     width="40"
@@ -564,3 +619,108 @@ export const RedExclamation = () => (
     </g>
   </svg>
 );
+export const SwapIcon = ({ fill = '#0C1083' }: { fill?: string }) => (
+  <svg
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <mask
+      id="mask0_3052_2991"
+      maskUnits="userSpaceOnUse"
+      x="0"
+      y="0"
+      width="24"
+      height="24"
+    >
+      <rect width="24" height="24" fill="#D9D9D9" />
+    </mask>
+    <g mask="url(#mask0_3052_2991)">
+      <path
+        d="M12.05 19.75C9.88717 19.75 8.0465 18.9974 6.528 17.4923C5.00934 15.9871 4.25 14.1563 4.25 12V11.2192L2.4 13.0693L1.34625 12.0155L5 8.3615L8.65375 12.0155L7.6 13.0693L5.75 11.2192V12C5.75 13.7372 6.3615 15.2132 7.5845 16.428C8.80767 17.6427 10.2962 18.25 12.05 18.25C12.4642 18.25 12.8779 18.2048 13.2913 18.1145C13.7048 18.024 14.1083 17.8884 14.502 17.7078L15.627 18.8328C15.0642 19.1353 14.4831 19.3637 13.8838 19.5182C13.2843 19.6727 12.673 19.75 12.05 19.75ZM19 15.6385L15.3463 11.9845L16.4 10.9307L18.25 12.7808V12C18.25 10.2628 17.6385 8.78683 16.4155 7.572C15.1923 6.35733 13.7038 5.75 11.95 5.75C11.5358 5.75 11.1221 5.79517 10.7088 5.8855C10.2953 5.976 9.89167 6.11158 9.498 6.29225L8.373 5.16725C8.93584 4.86475 9.51692 4.63625 10.1163 4.48175C10.7158 4.32725 11.327 4.25 11.95 4.25C14.1128 4.25 15.9535 5.00258 17.472 6.50775C18.9907 8.01292 19.75 9.84367 19.75 12V12.7808L21.6 10.9307L22.6538 11.9845L19 15.6385Z"
+        fill={fill}
+      />
+    </g>
+  </svg>
+);
+export const ReceiveIcon = ({ fill = '#0C1083' }: { fill?: string }) => (
+  <svg
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <mask
+      id="mask0_3052_13246"
+      maskUnits="userSpaceOnUse"
+      x="0"
+      y="0"
+      width="24"
+      height="24"
+    >
+      <rect width="24" height="24" fill="#D9D9D9" />
+    </mask>
+    <g mask="url(#mask0_3052_13246)">
+      <path
+        d="M3.5 11V3.5H11V11H3.5ZM5 9.5H9.5V5H5V9.5ZM3.5 20.5V13H11V20.5H3.5ZM5 19H9.5V14.5H5V19ZM13 11V3.5H20.5V11H13ZM14.5 9.5H19V5H14.5V9.5ZM18.625 20.5V18.625H20.5V20.5H18.625ZM13 14.875V13H14.875V14.875H13ZM14.875 16.75V14.875H16.75V16.75H14.875ZM13 18.625V16.75H14.875V18.625H13ZM14.875 20.5V18.625H16.75V20.5H14.875ZM16.75 18.625V16.75H18.625V18.625H16.75ZM16.75 14.875V13H18.625V14.875H16.75ZM18.625 16.75V14.875H20.5V16.75H18.625Z"
+        fill={fill}
+      />
+    </g>
+  </svg>
+);
+export const BalancesIcon = ({ fill = '#0C1083' }: { fill?: string }) => (
+  <svg
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <mask
+      id="mask0_3052_12050"
+      maskUnits="userSpaceOnUse"
+      x="0"
+      y="0"
+      width="24"
+      height="24"
+    >
+      <rect width="24" height="24" fill="#D9D9D9" />
+    </mask>
+    <g mask="url(#mask0_3052_12050)">
+      <path
+        d="M20.5 8.029H19V5H5V19H19V15.971H20.5V20.5H3.5V3.5H20.5V8.029ZM11.5 16.5V7.5H21.5V16.5H11.5ZM16 13.5C16.4167 13.5 16.7708 13.3542 17.0625 13.0625C17.3542 12.7708 17.5 12.4167 17.5 12C17.5 11.5833 17.3542 11.2292 17.0625 10.9375C16.7708 10.6458 16.4167 10.5 16 10.5C15.5833 10.5 15.2292 10.6458 14.9375 10.9375C14.6458 11.2292 14.5 11.5833 14.5 12C14.5 12.4167 14.6458 12.7708 14.9375 13.0625C15.2292 13.3542 15.5833 13.5 16 13.5ZM20 15V9H13V15H20Z"
+        fill={fill}
+      />
+    </g>
+  </svg>
+);
+
+export const TokenIcon = ({ fill = '#0C1083' }: { fill?: string }) => (
+  <svg
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <mask
+      id="mask0_1909_18872"
+      maskUnits="userSpaceOnUse"
+      x="0"
+      y="0"
+      width="24"
+      height="24"
+    >
+      <rect width="24" height="24" fill="#D9D9D9" />
+    </mask>
+    <g mask="url(#mask0_1909_18872)">
+      <path
+        d="M12 21.5C10.6872 21.5 9.45292 21.2503 8.29725 20.751C7.14142 20.2517 6.13592 19.5744 5.28075 18.7193C4.42558 17.8641 3.74833 16.8586 3.249 15.7028C2.74967 14.5471 2.5 13.3128 2.5 12C2.5 10.6872 2.74967 9.45292 3.249 8.29725C3.74833 7.14142 4.42558 6.13592 5.28075 5.28075C6.13592 4.42558 7.14142 3.74833 8.29725 3.249C9.45292 2.74967 10.6872 2.5 12 2.5C13.3128 2.5 14.5471 2.74967 15.7028 3.249C16.8586 3.74833 17.8641 4.42558 18.7193 5.28075C19.5744 6.13592 20.2517 7.14142 20.751 8.29725C21.2503 9.45292 21.5 10.6872 21.5 12C21.5 13.3128 21.2503 14.5471 20.751 15.7028C20.2517 16.8586 19.5744 17.8641 18.7193 18.7193C17.8641 19.5744 16.8586 20.2517 15.7028 20.751C14.5471 21.2503 13.3128 21.5 12 21.5ZM11.25 19.9538V18.5308C10.6218 18.4666 10.0257 18.3131 9.4615 18.0703C8.8975 17.8273 8.37892 17.5198 7.90575 17.148L6.898 18.1615C7.49933 18.6653 8.16767 19.074 8.903 19.3875C9.63817 19.701 10.4205 19.8898 11.25 19.9538ZM12.75 19.9538C13.5795 19.8898 14.3602 19.701 15.0922 19.3875C15.8244 19.074 16.4911 18.6653 17.0922 18.1615L16.0943 17.148C15.6211 17.5198 15.1025 17.8273 14.5385 18.0703C13.9743 18.3131 13.3782 18.4666 12.75 18.5308V19.9538ZM12 17.0865C13.409 17.0865 14.609 16.591 15.6 15.6C16.591 14.609 17.0865 13.409 17.0865 12C17.0865 10.591 16.591 9.391 15.6 8.4C14.609 7.409 13.409 6.9135 12 6.9135C10.591 6.9135 9.391 7.409 8.4 8.4C7.409 9.391 6.9135 10.591 6.9135 12C6.9135 13.409 7.409 14.609 8.4 15.6C9.391 16.591 10.591 17.0865 12 17.0865ZM18.1615 17.102C18.6653 16.5007 19.074 15.8323 19.3875 15.097C19.701 14.3618 19.8898 13.5795 19.9538 12.75H18.5308C18.4666 13.3782 18.3131 13.9743 18.0703 14.5385C17.8273 15.1025 17.5198 15.6211 17.148 16.0943L18.1615 17.102ZM5.8385 17.102L6.852 16.0788C6.48017 15.6058 6.17275 15.0898 5.92975 14.5308C5.68692 13.9718 5.53342 13.3782 5.46925 12.75H4.04625C4.11025 13.5795 4.299 14.3618 4.6125 15.097C4.926 15.8323 5.33467 16.5007 5.8385 17.102ZM4.04625 11.25H5.46925C5.53342 10.6218 5.68692 10.0283 5.92975 9.46925C6.17275 8.91025 6.48017 8.39425 6.852 7.92125L5.8385 6.90775C5.33467 7.50892 4.926 8.17558 4.6125 8.90775C4.299 9.63975 4.11025 10.4205 4.04625 11.25ZM18.5308 11.25H19.9538C19.8898 10.4205 19.6984 9.63975 19.3798 8.90775C19.0613 8.17558 18.6501 7.50892 18.1462 6.90775L17.148 7.90575C17.5198 8.37892 17.8273 8.8975 18.0703 9.4615C18.3131 10.0257 18.4666 10.6218 18.5308 11.25ZM7.92125 6.852C8.39425 6.48017 8.91025 6.17275 9.46925 5.92975C10.0282 5.68692 10.6218 5.53342 11.25 5.46925V4.04625C10.4205 4.11025 9.63817 4.299 8.903 4.6125C8.16767 4.926 7.49933 5.33467 6.898 5.8385L7.92125 6.852ZM16.0943 6.852L17.0922 5.85375C16.4911 5.34992 15.8244 4.93875 15.0922 4.62025C14.3602 4.30158 13.5795 4.11025 12.75 4.04625V5.46925C13.3782 5.53342 13.9743 5.68692 14.5385 5.92975C15.1025 6.17275 15.6211 6.48017 16.0943 6.852Z"
+        fill={fill}
+      />
+    </g>
+  </svg>
+);
diff --git a/src/assets/bluxLogo.tsx b/src/assets/bluxLogo.tsx
@@ -71,3 +71,28 @@ const BluxLogo = ({ fill = 'black' }: { fill?: string }) => (
   </svg>
 );
 export default BluxLogo;
+
+export const SmallBlux = ({
+  fill = 'black',
+  background = 'transparent',
+}: {
+  fill?: string;
+  background?: string;
+}) => (
+  <svg
+    width="52"
+    height="52"
+    viewBox="0 0 52 52"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <rect width="52" height="52" fill={background} />
+    <path d="M39.4391 8H8V12.4539H39.4391V8Z" fill={fill} />
+    <path
+      d="M12.4906 22.1818V8H8V22.1818V23.7749V28.2655V39.495V43.9856V44H12.4906V43.9856H39.3882V39.495H12.4906V28.2655H39.3882V23.7749H12.4906V22.1818Z"
+      fill={fill}
+    />
+    <path d="M43.8933 12.4541H39.4395V23.7198H43.8933V12.4541Z" fill={fill} />
+    <path d="M43.8933 28.1729H39.4395V39.4385H43.8933V28.1729Z" fill={fill} />
+  </svg>
+);
diff --git a/src/components/Button/index.tsx b/src/components/Button/index.tsx
@@ -2,9 +2,10 @@ import React from 'react';
 
 import { useProvider } from '../../context/provider';
 import getContrastColor from '../../utils/getContrastColor';
+import hexToRgba from '../../utils/hexToRgba';
 
 type ButtonSize = 'small' | 'medium' | 'large';
-type ButtonVariant = 'outline' | 'text' | 'fill';
+type ButtonVariant = 'outline' | 'text' | 'fill' | 'tonal';
 type ButtonState = 'enabled' | 'disabled' | 'selected';
 
 interface ButtonProps {
@@ -68,6 +69,11 @@ const Button = ({
       color: appearance.accent,
       backgroundColor: 'transparent',
     });
+  } else if (variant === 'tonal') {
+    Object.assign(baseStyle, {
+      color: appearance.accent,
+      backgroundColor: hexToRgba(appearance.accent, 0.1),
+    });
   }
 
   if (state === 'selected') {

diff --git a/src/components/CardItem/index.tsx b/src/components/CardItem/index.tsx
@@ -6,6 +6,7 @@ import { useLang } from '../../hooks/useLang';
 
 type CardItemProps = {
   variant?: 'social' | 'default' | 'input';
+  size?: 'small' | 'medium';
   startIcon: React.ReactNode;
   endArrow?: boolean;
   isRecent?: boolean;
@@ -19,6 +20,7 @@ type CardItemProps = {
 
 const CardItem = ({
   variant = 'default',
+  size = 'medium',
   startIcon,
   endArrow,
   isRecent,
@@ -72,8 +74,12 @@ const CardItem = ({
   return (
     <div
       onClick={variant === 'input' ? undefined : onClick}
-      className={`bluxcc:flex bluxcc:!h-14 bluxcc:w-full bluxcc:items-center bluxcc:border bluxcc:py-2 bluxcc:pr-3.5 bluxcc:pl-[10px] ${
+      className={`bluxcc:flex ${
         variant === 'input' ? 'bluxcc:cursor-text' : 'bluxcc:cursor-pointer'
+      } ${
+        size === 'small'
+          ? 'bluxcc:size-[96px] bluxcc:flex-col bluxcc:items-center bluxcc:justify-center bluxcc:py-4'
+          : 'bluxcc:!h-14 bluxcc:w-full bluxcc:items-center bluxcc:py-2 bluxcc:pr-3.5 bluxcc:pl-[10px]'
       }`}
       style={{
         borderRadius: appearance.borderRadius,
@@ -94,12 +100,16 @@ const CardItem = ({
             ? appearance.borderWidth
             : '1px',
         }}
-        className="bluxcc:flex bluxcc:size-10 bluxcc:shrink-0 bluxcc:items-center bluxcc:justify-center bluxcc:overflow-hidden bluxcc:border bluxcc:transition-[border-radius] bluxcc:duration-300"
+        className="bluxcc:flex bluxcc:size-10 bluxcc:shrink-0 bluxcc:items-center bluxcc:justify-center bluxcc:overflow-hidden bluxcc:transition-[border-radius] bluxcc:duration-300"
       >
         {startIcon}
       </span>
 
-      <div className="bluxcc:relative bluxcc:ml-4 bluxcc:flex bluxcc:h-full bluxcc:flex-1 bluxcc:items-center">
+      <div
+        className={`${
+          size === 'small' ? 'bluxcc:mt-[3px]' : 'bluxcc:ml-4'
+        } bluxcc:relative bluxcc:flex bluxcc:h-full bluxcc:flex-1 bluxcc:items-center`}
+      >
         {variant === 'input' ? (
           <>
             <input
@@ -141,7 +151,13 @@ const CardItem = ({
             </div>
           </>
         ) : (
-          <span className="bluxcc:font-medium bluxcc:select-none">{label}</span>
+          <span
+            className={`${
+              size === 'small' ? 'bluxcc:text-sm' : 'bluxcc:text-base'
+            } bluxcc:font-medium bluxcc:select-none`}
+          >
+            {label}
+          </span>
         )}
       </div>
       {isRecent && (
@@ -157,7 +173,7 @@ const CardItem = ({
         </div>
       )}
 
-      {endArrow && (
+      {endArrow && size === 'medium' && (
         <span className="bluxcc:ml-auto bluxcc:flex bluxcc:items-center">
           <ArrowRight fill={`${hexToRgba(appearance.textColor, 0.7)}`} />
         </span>

diff --git a/src/components/QRCode/index.tsx b/src/components/QRCode/index.tsx
@@ -0,0 +1,48 @@
+import React from 'react';
+import { QRCodeCanvas } from 'qrcode.react';
+
+interface QRCodeCanvasProps {
+  value: string;
+  title?: string;
+  size?: number;
+  bgColor?: string;
+  fgColor?: string;
+  level?: 'L' | 'M' | 'Q' | 'H';
+}
+
+const QRCode = ({
+  value,
+  title = '',
+  size = 184,
+  bgColor = '#ffffff',
+  fgColor = '#00020f',
+  level = 'Q',
+  ...rest
+}: QRCodeCanvasProps) => {
+  return (
+    <div>
+      <QRCodeCanvas
+        className="bluxcc:z-10"
+        value={value}
+        title={title}
+        size={size}
+        bgColor={bgColor}
+        fgColor={fgColor}
+        level={level}
+        marginSize={1}
+        imageSettings={{
+          src: 'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBw8NDQ8NDQ0PDQ0PDw4NDw0NDQ8PDQ0NFREWFhURExUYHSggGBolGxUVITEhJSkrLi4uFx8zODMsNygtLisBCgoKDQ0OFQ4PFSsdExkrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrK//AABEIAKwBJgMBIgACEQEDEQH/xAAXAAEBAQEAAAAAAAAAAAAAAAAAAQIH/8QAIRABAQABBAAHAAAAAAAAAAAAAAERAiFhgSIxQVFxsfD/xAAUAQEAAAAAAAAAAAAAAAAAAAAA/8QAFBEBAAAAAAAAAAAAAAAAAAAAAP/aAAwDAQACEQMRAD8A7iAAACW8d+ygAAACSAoAAAAAAAAAAAAAAADOrVZZJptluLczwzFub9dtAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAmd/LtQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABLwoAAAAAQAAAAAAAAAAAAAAAAAABL+5UAAAAAAAAAAAEUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAoAAAAAAAAAJYCgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQAAAAAAAAARQAAAAAAAAAAAAEwoAAAACSqAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAS59NvmZ2yoAAAAAAAAAAAAACAomFAAAAAAAABKoAAAAA//2Q==',
+          x: undefined,
+          y: undefined,
+          height: 52,
+          width: 52,
+          opacity: 1,
+          excavate: true,
+        }}
+        {...rest}
+      />
+    </div>
+  );
+};
+
+export default QRCode;