@aurora-is-near/intents-swap-widget 3.18.1 → 3.18.2

package/src/components/Button.tsx

@@ -1,6 +1,9 @@
 import { Button as UIButton } from '@headlessui/react';
-import type { LucideIcon, LucideProps } from 'lucide-react';
-import * as Icons from 'lucide-react';
+import { ProgressActivityW700 as ProgressActivity } from '@material-symbols-svg/react-rounded/icons/progress-activity';
+import type {
+  IconProps,
+  MaterialSymbolsComponent,
+} from '@material-symbols-svg/react';
 
 import { cn as clsx } from '@/utils/cn';
 
@@ -17,7 +20,7 @@ type Props = {
   onClick?: () => void;
   fluid?: boolean;
 } & (
-  | { icon: LucideIcon; iconPosition?: 'head' | 'tail' }
+  | { icon: MaterialSymbolsComponent; iconPosition?: 'head' | 'tail' }
   | { icon?: never; iconPosition?: never }
 );
 
@@ -50,10 +53,10 @@ const ButtonChildren = ({
   const Icon =
     hasIcon && state !== 'loading'
       ? (icon ?? (() => <span />))
-      : ({ className, ...lucidProps }: LucideProps) => (
-          <Icons.Loader
+      : ({ className, ...iconProps }: IconProps) => (
+          <ProgressActivity
             className={clsx(styles.icon, 'animate-spin', className)}
-            {...lucidProps}
+            {...iconProps}
           />
         );
 

package/src/components/CloseButton.tsx

@@ -1,4 +1,4 @@
-import * as Icons from 'lucide-react';
+import { CloseW700 as Close } from '@material-symbols-svg/react-rounded/icons/close';
 
 import { cn } from '@/utils';
 
@@ -16,7 +16,7 @@ export const CloseButton = ({ className, onClick }: Props) => {
         className,
       )}
       onClick={onClick}>
-      <Icons.X size={18} strokeWidth={3} />
+      <Close size={18} />
     </button>
   );
 };

package/src/components/CopyButton.tsx

@@ -1,11 +1,11 @@
 import copy from 'copy-text-to-clipboard';
-import * as Icons from 'lucide-react';
+import { ContentCopyW700 as ContentCopy } from '@material-symbols-svg/react-rounded/icons/content-copy';
 
 export const CopyButton = ({ value }: { value: string }) => (
   <button
     type="button"
     onClick={() => copy(value)}
     className="text-sw-gray-200 hover:text-sw-gray-50 cursor-pointer transition-all duration-300 [transition-timing-function:cubic-bezier(0.175,0.885,0.32,1.275)] active:-translate-y-1 active:scale-x-90 active:scale-y-110">
-    <Icons.Copy size={16} />
+    <ContentCopy size={16} />
   </button>
 );

package/src/components/DirectionSwitcher.tsx

@@ -1,5 +1,5 @@
-import * as Icons from 'lucide-react';
-
+import { ArrowDownwardW700 as ArrowDownward } from '@material-symbols-svg/react-rounded/icons/arrow-downward';
+import { ProgressActivityW700 as ProgressActivity } from '@material-symbols-svg/react-rounded/icons/progress-activity';
 import { cn } from '@/utils/cn';
 
 type Props = {
@@ -25,11 +25,11 @@ export const DirectionSwitcher = ({
       )}>
       {isLoading ? (
         <div className="group relative inline-block">
-          <Icons.RefreshCw className="h-sw-2xl w-sw-2xl animate-spin opacity-50 text-sw-accent-500" />
+          <ProgressActivity className="h-sw-2xl w-sw-2xl animate-spin opacity-50 text-sw-accent-500" />
         </div>
       ) : (
         <div className="group relative inline-block">
-          <Icons.ArrowDown
+          <ArrowDownward
             className={cn(
               'h-sw-2xl w-sw-2xl transition-transform duration-300',
               {

package/src/components/Input.tsx

@@ -7,19 +7,20 @@ import {
   useState,
 } from 'react';
 import { Input as UIInput } from '@headlessui/react';
+import { CloseW700 as Close } from '@material-symbols-svg/react-rounded/icons/close';
+import type { MaterialSymbolsComponent } from '@material-symbols-svg/react';
 import type { InputProps } from '@headlessui/react';
 import type { PropsWithChildren } from 'react';
-import type { LucideIcon } from 'lucide-react';
-import * as Icons from 'lucide-react';
 
 import { cn } from '@/utils/cn';
 
 type State = 'default' | 'disabled' | 'error' | 'fixed';
 
 export type Props = Omit<InputProps, 'size'> & {
-  icon?: LucideIcon;
+  icon?: MaterialSymbolsComponent;
   defaultValue?: string;
   focusOnMount?: boolean;
+  fontSize?: 'sm' | 'md';
   state?: State;
 };
 
@@ -121,7 +122,7 @@ export const Input = forwardRef<HTMLInputElement, PropsWithChildren<Props>>(
                       },
                     )}
                     onClick={handleClear}>
-                    <Icons.X className="h-sw-xl w-sw-xl" />
+                    <Close className="h-sw-xl w-sw-xl" />
                   </button>
                 ) : null}
               </div>

package/src/components/StatusWidget.tsx

@@ -1,23 +1,16 @@
-import * as Icons from 'lucide-react';
+import { CloseW700 as Close } from '@material-symbols-svg/react-rounded/icons/close';
+import { CheckCircleFillW700 as CheckCircleFill } from '@material-symbols-svg/react-rounded/icons/check-circle';
 
 const Error = ({ message }: { message: string }) => (
   <div className="flex flex-col gap-sw-lg py-sw-6xl items-center justify-center">
-    <Icons.CircleX
-      size={36}
-      strokeWidth={1.5}
-      className="text-sw-status-error"
-    />
+    <Close size={36} className="text-sw-status-error" />
     <span className="text-sw-label-sm text-sw-status-error">{message}</span>
   </div>
 );
 
 const Success = () => (
   <div className="flex flex-col gap-sw-lg py-sw-6xl items-center justify-center">
-    <Icons.CheckCircle2
-      size={36}
-      strokeWidth={1.5}
-      className="text-sw-status-success"
-    />
+    <CheckCircleFill size={36} className="text-sw-status-success" />
     <span className="text-sw-label-sm text-sw-status-success text-center">
       Transaction detected
     </span>

package/src/features/ChainsDropdown/AllNetworksIcon.tsx

@@ -1,7 +1,7 @@
-import * as Icons from 'lucide-react';
+import { TargetW700 as Target } from '@material-symbols-svg/react-rounded/icons/target';
 
 export const AllNetworksIcon = () => (
   <div className="bg-sw-accent-500 flex h-[28px] w-[28px] items-center justify-center">
-    <Icons.Target size={16} className="text-sw-accent-950" />
+    <Target size={16} className="text-sw-accent-950" />
   </div>
 );

package/src/features/ChainsDropdown/ChainItem.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import * as Icons from 'lucide-react';
+import { CheckW700 as Check } from '@material-symbols-svg/react-rounded/icons/check';
 
 import { cn } from '@/utils/cn';
 import { Icon } from '@/components/Icon';
@@ -34,7 +34,7 @@ export const ChainItem = React.forwardRef<HTMLButtonElement, Props>(
       )}>
       <Icon radius={10} label={label} icon={icon} />
       <span className="text-sw-label-md mr-auto">{label}</span>
-      {isSelected && <Icons.Check size={16} />}
+      {isSelected && <Check size={16} />}
     </button>
   ),
 );

package/src/features/ChainsDropdown/index.tsx

@@ -1,7 +1,7 @@
 import { Fragment, useMemo } from 'react';
 import { Menu, MenuButton, MenuItem, MenuItems } from '@headlessui/react';
+import { ChevronLeftW700 as ChevronLeft } from '@material-symbols-svg/react-rounded/icons/chevron-left';
 import { AnimatePresence, motion } from 'framer-motion';
-import * as Icons from 'lucide-react';
 
 import { ChainItem } from './ChainItem';
 import { AllNetworksIcon } from './AllNetworksIcon';
@@ -79,9 +79,15 @@ export const ChainsDropdown = ({
                 })()}
 
                 {isOpen ? (
-                  <Icons.ChevronUp size={18} className="text-sw-gray-50" />
+                  <ChevronLeft
+                    size={18}
+                    className="text-sw-gray-50 rotate-90"
+                  />
                 ) : (
-                  <Icons.ChevronDown size={18} className="text-sw-gray-50" />
+                  <ChevronLeft
+                    size={18}
+                    className="text-sw-gray-50 -rotate-90"
+                  />
                 )}
               </div>
             )}

package/src/features/DepositMethodSwitcher.tsx

@@ -1,4 +1,5 @@
-import * as Icons from 'lucide-react';
+import { QrCodeW700 as QrCode } from '@material-symbols-svg/react-rounded/icons/qr-code';
+import { WalletW700 as Wallet } from '@material-symbols-svg/react-rounded/icons/wallet';
 
 import { cn } from '@/utils/cn';
 import { Card } from '@/components/Card';
@@ -26,7 +27,7 @@ export const DepositMethodSwitcher = ({ children, className }: Props) => {
       <div className="flex gap-sw-lg">
         <Button
           size="md"
-          icon={Icons.Wallet2}
+          icon={Wallet}
           state={ctx.isDepositFromExternalWallet ? 'default' : 'active'}
           variant={ctx.isDepositFromExternalWallet ? 'outlined' : 'primary'}
           onClick={() => onToggle(false)}>
@@ -34,7 +35,7 @@ export const DepositMethodSwitcher = ({ children, className }: Props) => {
         </Button>
         <Button
           size="md"
-          icon={Icons.QrCode}
+          icon={QrCode}
           state={ctx.isDepositFromExternalWallet ? 'active' : 'default'}
           variant={ctx.isDepositFromExternalWallet ? 'primary' : 'outlined'}
           onClick={() => onToggle(true)}>

package/src/features/ExternalDeposit.tsx

@@ -1,7 +1,7 @@
 import { useEffect } from 'react';
 import { QRCodeSVG } from 'qrcode.react';
 import { GetExecutionStatusResponse } from '@defuse-protocol/one-click-sdk-typescript';
-import * as Icons from 'lucide-react';
+import { ProgressActivityW700 as ProgressActivity } from '@material-symbols-svg/react-rounded/icons/progress-activity';
 
 import { notReachable } from '@/utils';
 import { CHAIN_IDS_MAP } from '@/constants/chains';
@@ -50,7 +50,7 @@ const Skeleton = () => {
     <div className="flex flex-col gap-sw-2xl items-center">
       <div className="bg-sw-gray-800 h-[180px] w-[180px] animate-pulse rounded-sw-md" />
       <div className="bg-sw-gray-800 h-[44px] w-full animate-pulse rounded-sw-md flex items-center justify-center gap-sw-sm">
-        <Icons.Loader className="animate-spin text-sw-gray-100 h-sw-lg w-sw-lg" />
+        <ProgressActivity className="animate-spin text-sw-gray-100 h-sw-lg w-sw-lg" />
         <span className="text-sw-gray-100 text-sw-label-sm">
           {!isNotEmptyAmount(ctx.sourceTokenAmount)
             ? t('deposit.external.loading.waiting', 'Waiting for token amount')

package/src/features/SendAddress/index.tsx

@@ -1,7 +1,7 @@
-import * as Icons from 'lucide-react';
 import { Button } from '@headlessui/react';
 import { useEffect, useMemo, useState } from 'react';
 import { useDebounce } from 'use-debounce';
+import { WandShineW700 as WandShine } from '@material-symbols-svg/react-rounded/icons/wand-shine';
 import type { ChangeEvent } from 'react';
 
 import { useNotification } from './useNotification';
@@ -76,6 +76,7 @@ export const SendAddress = ({ error, className, onMsg }: Props) => {
         {t('sendAddress.label', 'Send to')}
       </h5>
       <Input
+        fontSize="sm"
         defaultValue={ctx.sendAddress}
         state={inputState}
         className="mb-sw-xl"
@@ -88,7 +89,7 @@ export const SendAddress = ({ error, className, onMsg }: Props) => {
           <Button
             className="absolute right-0 flex items-center gap-sw-md min-w-max cursor-pointer"
             onClick={() => fireEvent('addressSet', ctx.walletAddress ?? '')}>
-            <Icons.Wand2 size={14} />
+            <WandShine size={14} />
             <span className="text-sw-label-md">
               {t('sendAddress.button.magic.label', 'My wallet')}
             </span>

package/src/features/SuccessScreen/CheckIcon.tsx

@@ -1,7 +1,7 @@
-import * as Icons from 'lucide-react';
+import { CheckW700 as Check } from '@material-symbols-svg/react-rounded/icons/check';
 
 export const CheckIcon = () => (
   <div className="mb-sw-xl bg-sw-status-success text-sw-gray-950 flex h-[44px] w-[44px] items-center justify-center rounded-full">
-    <Icons.Check size={24} />
+    <Check size={24} />
   </div>
 );

package/src/features/SuccessScreen/ExternalAction.tsx

@@ -1,4 +1,4 @@
-import * as Icons from 'lucide-react';
+import { OpenInNewW700 as OpenInNew } from '@material-symbols-svg/react-rounded/icons/open-in-new';
 
 type Props = {
   url: string;
@@ -10,6 +10,6 @@ export const ExternalAction = ({ url }: Props) => (
     href={url}
     className="text-sw-accent-300 hover:text-sw-accent-50 cursor-pointer"
     rel="noreferrer">
-    <Icons.ExternalLink size={16} />
+    <OpenInNew size={16} />
   </a>
 );

package/src/features/TokensModal.tsx

@@ -1,5 +1,5 @@
+import { SearchW700 as Search } from '@material-symbols-svg/react-rounded/icons/search';
 import { useRef, useState } from 'react';
-import * as Icons from 'lucide-react';
 
 import { TokensList } from './TokensList';
 import { ChainsDropdown } from './ChainsDropdown';
@@ -99,7 +99,7 @@ export const TokensModal = ({
       <div className="gap-sw-xl flex items-center">
         <Input
           focusOnMount
-          icon={Icons.Search}
+          icon={Search}
           ref={searchInputRef}
           defaultValue={search}
           className="w-full"

package/src/features/WalletCompatibilityCheck/WalletCompatibilityModal.tsx

@@ -1,12 +1,11 @@
-import {
-  AccountBalanceWalletFill,
-  ArmingCountdownFill,
-  BeenhereFill,
-  CheckCircleFill,
-  EncryptedFill,
-  GppBadFill,
-  type MaterialSymbolsComponent,
-} from '@material-symbols-svg/react-rounded';
+import { AccountBalanceWalletFillW700 as AccountBalanceWalletFill } from '@material-symbols-svg/react-rounded/icons/account-balance-wallet';
+import { ArmingCountdownFillW700 as ArmingCountdownFill } from '@material-symbols-svg/react-rounded/icons/arming-countdown';
+import { BeenhereFillW700 as BeenhereFill } from '@material-symbols-svg/react-rounded/icons/beenhere';
+import { CheckCircleFillW700 as CheckCircleFill } from '@material-symbols-svg/react-rounded/icons/check-circle';
+import { EncryptedFillW700 as EncryptedFill } from '@material-symbols-svg/react-rounded/icons/encrypted';
+import { GppBadFillW700 as GppBadFill } from '@material-symbols-svg/react-rounded/icons/gpp-bad';
+import type { MaterialSymbolsComponent } from '@material-symbols-svg/react-rounded';
+
 import { useTimer } from 'use-timer';
 import { useEffect } from 'react';
 

package/src/tailwind.css

@@ -102,6 +102,15 @@
 	}
 }
 
+@utility text-sw-label-2sm {
+	@layer components {
+		@apply font-semibold;
+		font-size: 0.825rem;
+		line-height: 0.875rem;
+		letter-spacing: -0.01875rem;
+	}
+}
+
 @utility text-sw-label-sm {
 	@layer components {
 		@apply font-semibold;