@hot-labs/kit 1.2.0-alpha.2 → 1.2.1

package/src/ui/{payment → bridge}/SelectRecipient.tsx

@@ -3,16 +3,17 @@ import styled from "styled-components";
 import { useState } from "react";
 
 import { ArrowRightIcon } from "../icons/arrow-right";
+
+import { ImageView } from "../uikit/image";
 import { PopupOption, PopupOptionInfo } from "../styles";
 import { ConnectorType, OmniConnector } from "../../OmniConnector";
 import { HotConnector } from "../../HotConnector";
-import { Recipient } from "../../core/recipient";
-import { WalletType } from "../../core/chains";
 import { openWalletPicker } from "../router";
-import { formatter } from "../../core/utils";
 import Popup from "../Popup";
 
-import { ImageView } from "./TokenCard";
+import { Recipient } from "../../core/recipient";
+import { WalletType } from "../../core/chains";
+import { formatter } from "../../core/utils";
 
 interface SelectRecipientProps {
   recipient?: Recipient;

package/src/ui/{payment → bridge}/SelectSender.tsx

@@ -5,20 +5,20 @@ import { ArrowRightIcon } from "../icons/arrow-right";
 import { PopupOption, PopupOptionInfo } from "../styles";
 
 import { ConnectorType, OmniConnector } from "../../OmniConnector";
+import { HotConnector } from "../../HotConnector";
 import { OmniWallet } from "../../OmniWallet";
+import { ImageView } from "../uikit/image";
+
 import { WalletType } from "../../core/chains";
-import { HotConnector } from "../../HotConnector";
-import { openWalletPicker } from "../router";
 import { formatter } from "../../core/utils";
+import { openWalletPicker } from "../router";
 import Popup from "../Popup";
 
-import { ImageView } from "./TokenCard";
-
 interface SelectSenderProps {
   type: WalletType;
-  onSelect: (wallet?: OmniWallet | "qr") => void;
   hot: HotConnector;
   onClose: () => void;
+  onSelect: (wallet?: OmniWallet | "qr") => void;
 }
 
 export const SelectSender = observer(({ hot, type, onSelect, onClose }: SelectSenderProps) => {

package/src/ui/{payment → bridge}/SelectToken.tsx

@@ -2,16 +2,18 @@ import { useState } from "react";
 import { observer } from "mobx-react-lite";
 import styled from "styled-components";
 
-import { formatter } from "../../core/utils";
-import { Token } from "../../core/token";
 import { HotConnector } from "../../HotConnector";
 import { OmniWallet } from "../../OmniWallet";
+
 import { Network, OmniToken } from "../../core/chains";
+import { formatter } from "../../core/utils";
+import { Token } from "../../core/token";
+import { tokens } from "../../core/tokens";
 import { PopupOption } from "../styles";
 import Popup from "../Popup";
 
-import { TokenCard, ImageView } from "./TokenCard";
-import { tokens } from "../../core/tokens";
+import { ImageView } from "../uikit/image";
+import { TokenCard } from "./TokenCard";
 
 interface SelectTokenPopupProps {
   hot: HotConnector;

package/src/ui/bridge/TokenCard.tsx

@@ -0,0 +1,99 @@
+import { observer } from "mobx-react-lite";
+import styled from "styled-components";
+
+import { chains } from "../../core/chains";
+import { formatter } from "../../core/utils";
+import { Token } from "../../core/token";
+
+import { HotConnector } from "../../HotConnector";
+import { OmniWallet } from "../../OmniWallet";
+import { ImageView } from "../uikit/image";
+
+export const TokenIcon = observer(({ token, wallet, withoutChain, size = 40 }: { token: Token; wallet?: OmniWallet; withoutChain?: boolean; size?: number }) => {
+  return (
+    <div style={{ position: "relative", width: size, height: size, flexShrink: 0 }}>
+      <ImageView src={token.icon} alt={token.symbol} size={size} />
+      {!withoutChain && <ImageView src={token.chainIcon} alt={token.symbol} size={size / 2 - 6} style={{ position: "absolute", bottom: 0, right: 0 }} />}
+      {token.chain === -4 && wallet?.type && <ImageView src={wallet.icon} alt={chains.getByType(wallet.type)?.[0]?.name || ""} size={size / 2 - 6} style={{ position: "absolute", bottom: 0, left: 0 }} />}
+    </div>
+  );
+});
+
+export const TokenCard = observer(
+  ({ token, onSelect, amount, hot, wallet, rightControl }: { rightControl?: React.ReactNode; token: Token; onSelect?: (token: Token, wallet?: OmniWallet) => void; amount?: bigint; hot: HotConnector; wallet?: OmniWallet }) => {
+    const balance = amount || hot.balance(wallet, token);
+    const symbol = token.chain === -4 && !token.isMainOmni ? `${token.symbol} (${token.originalChainSymbol})` : token.symbol;
+
+    return (
+      <Card key={token.id} onClick={() => onSelect?.(token, wallet)}>
+        <TokenIcon token={token} wallet={wallet} />
+
+        <TokenWrap>
+          <Text style={{ textAlign: "left" }}>{symbol}</Text>
+          <PSmall style={{ textAlign: "left" }}>${formatter.amount(token.usd)}</PSmall>
+        </TokenWrap>
+
+        {rightControl || (
+          <TokenWrap style={{ textAlign: "right", paddingRight: 4, marginLeft: "auto", alignItems: "flex-end" }}>
+            <Text>{token.readable(balance)}</Text>
+            <PSmall>${token.readable(balance, token.usd)}</PSmall>
+          </TokenWrap>
+        )}
+      </Card>
+    );
+  }
+);
+
+const Card = styled.div`
+  display: flex;
+  padding: 12px;
+  padding-bottom: 10px;
+  gap: 10px;
+  border-radius: 16px;
+  border: 1px solid #323232;
+  background: #272727;
+  cursor: pointer;
+  transition: background 0.2s ease-in-out;
+  width: 100%;
+  align-items: center;
+
+  &:hover {
+    background: rgba(255, 255, 255, 0.04);
+  }
+`;
+
+const PSmall = styled.p`
+  color: #bfbfbf;
+  font-family: "Golos Text";
+  font-size: 12px;
+  font-style: normal;
+  line-height: 16px;
+  letter-spacing: -0.12px;
+  text-align: left;
+  font-weight: bold;
+`;
+
+const Text = styled.p`
+  color: #fff;
+  text-align: right;
+  font-family: "Golos Text";
+  font-size: 16px;
+  font-style: normal;
+  line-height: 22px;
+  letter-spacing: -0.16px;
+  font-weight: bold;
+`;
+
+const TokenWrap = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  margin-top: -1px;
+
+  &,
+  p {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+`;

package/src/ui/connect/AuthPopup.tsx

@@ -34,7 +34,7 @@ const AuthIntentPopupComponent: React.FC<AuthIntentPopupProps> = ({ wallet, onAp
   };
 
   return (
-    <Popup header={<p>Authorize {wallet.connector?.name}</p>} onClose={onReject}>
+    <Popup header={<p>Authorize wallet</p>} onClose={onReject}>
       <p style={{ textAlign: "center", color: "#fff" }}>To verify your account, you need to sign a message, this action is safe, the platform does not have access to your assets.</p>
       <PopupButton
         disabled={loading}

package/src/ui/connect/ConnectWallet.tsx

@@ -1,32 +1,38 @@
 import { observer } from "mobx-react-lite";
 
+import { OmniWallet } from "../../OmniWallet";
 import { HotConnector } from "../../HotConnector";
 import { ConnectorType, OmniConnector } from "../../OmniConnector";
+
 import { formatter } from "../../core/utils";
+import { WalletType } from "../../core";
 
-import { ImageView } from "../payment/TokenCard";
-import { PopupOption, PopupOptionInfo } from "../styles";
 import { openWalletPicker } from "../router";
+import { PopupOption, PopupOptionInfo } from "../styles";
 import { LogoutIcon } from "../icons/logout";
+import { ImageView } from "../uikit/image";
 import Popup from "../Popup";
 
 interface MultichainPopupProps {
   hot: HotConnector;
-  onClose: () => void;
+  onClose: (wallet?: OmniWallet) => void;
+  title?: string;
+  walletType?: WalletType;
+  widget?: boolean;
 }
 
-export const Connector = observer(({ hot, onClose }: MultichainPopupProps) => {
-  const onechain = hot.connectors.filter((t) => t.type === ConnectorType.WALLET);
-  const social = hot.connectors.filter((t) => t.type === ConnectorType.SOCIAL);
+export const Connector = observer(({ hot, onClose, title, walletType, widget }: MultichainPopupProps) => {
+  const onechain = hot.connectors.filter((t) => t.type === ConnectorType.WALLET && (walletType == null || t.walletTypes.includes(walletType as WalletType)));
+  const social = hot.connectors.filter((t) => t.type === ConnectorType.SOCIAL && (walletType == null || t.walletTypes.includes(walletType as WalletType)));
 
   const selectConnector = async (t: OmniConnector) => {
     if (t.wallets[0]) return t.disconnect();
-    if (t.options.length > 0) return [openWalletPicker(t), onClose()];
+    if (t.options.length > 0) return openWalletPicker(t, (w) => onClose(w));
     await t.connect().finally(() => onClose());
   };
 
   return (
-    <Popup header={<p>Select network</p>} onClose={onClose}>
+    <Popup header={<p>{title || "Connect wallet"}</p>} onClose={onClose} widget={widget}>
       {onechain.map((t) => (
         <PopupOption key={t.id} onClick={() => selectConnector(t)}>
           <ImageView src={t.icon} alt={t.name} size={44} />
@@ -34,7 +40,7 @@ export const Connector = observer(({ hot, onClose }: MultichainPopupProps) => {
             <p>{t.name}</p>
             {t.wallets[0]?.address && <span className="wallet-address">{formatter.truncateAddress(t.wallets[0].address, 24)}</span>}
           </PopupOptionInfo>
-          {t.wallets[0]?.address && <LogoutIcon />}
+          {t.wallets[0]?.address && <LogoutIcon width={32} height={32} />}
         </PopupOption>
       ))}
 
@@ -53,7 +59,7 @@ export const Connector = observer(({ hot, onClose }: MultichainPopupProps) => {
                 <p>{t.name}</p>
                 {t.wallets[0]?.address && <span className="wallet-address">Multichain connected</span>}
               </PopupOptionInfo>
-              {t.wallets[0]?.address && <LogoutIcon />}
+              {t.wallets[0]?.address && <LogoutIcon width={32} height={32} />}
             </PopupOption>
           ))}
         </>

package/src/ui/connect/PrimaryWallet.tsx

@@ -0,0 +1,65 @@
+import { useState } from "react";
+import Popup from "../Popup";
+import { PopupButton } from "../styles";
+import { Connector } from "./ConnectWallet";
+import { HotConnector } from "../../HotConnector";
+import { chains, WalletType } from "../../core";
+
+const ConnectPrimaryWallet = ({ hot, onClose }: { hot: HotConnector; onClose: () => void }) => {
+  const [openConnect, setOpenConnect] = useState(false);
+
+  return (
+    <Popup onClose={onClose} header={<p>Connect main wallet</p>}>
+      {openConnect ? (
+        <Connector widget={true} walletType={WalletType.OMNI} hot={hot} onClose={onClose} />
+      ) : (
+        <div style={{ display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", width: "100%", height: 300 }}>
+          <div style={{ display: "flex", alignItems: "center", justifyContent: "center", gap: 24, marginTop: 48 }}>
+            <WalletIcon />
+            <BindIcon />
+            <img src={chains.get(-4).logo} style={{ marginLeft: -4, width: 64, height: 64, borderRadius: "50%" }} />
+          </div>
+
+          <p style={{ marginTop: 24, fontSize: 20, fontWeight: "bold" }}>Connect your primary wallet</p>
+          <p style={{ marginTop: 8, fontSize: 16, color: "#c6c6c6" }}>Your HEX Balance will be tied to this wallet.</p>
+
+          <PopupButton style={{ marginTop: "auto" }} onClick={() => setOpenConnect(true)}>
+            Connect wallet
+          </PopupButton>
+        </div>
+      )}
+    </Popup>
+  );
+};
+
+const WalletIcon = () => {
+  return (
+    <svg width="56" height="56" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M45.333 6C48.6467 6 51.333 8.68629 51.333 12V15.333H52C55.3136 15.333 57.9998 18.0195 58 21.333V30.1826C60.191 31.2759 62 33.3016 62 35.5244V39.333C62 41.9566 60.3157 44.1858 57.9697 45.001C57.9878 45.1091 58 45.2197 58 45.333V53.333C58 56.6467 55.3137 59.333 52 59.333H12C8.68629 59.333 6 56.6467 6 53.333V12C6 8.68629 8.68629 6 12 6H45.333ZM10 53.333C10 54.4376 10.8954 55.333 12 55.333H52C53.1046 55.333 54 54.4376 54 53.333V45.333C54 45.2208 54.0115 45.1111 54.0293 45.0039L48 44C43.9499 44 41.333 42.0501 41.333 38C41.333 33.9499 43.9499 30.667 48 30.667L54 29.4658V21.333C53.9998 20.2286 53.1045 19.333 52 19.333H10V53.333ZM48 33.333C46.159 33.333 44 36.1591 44 38C44 39.8409 46.159 41.333 48 41.333H56C57.1046 41.333 58 40.4376 58 39.333V36.667C58 35.9442 57.0444 34.7412 56.0752 33.9951C56.0502 33.996 56.0252 34 56 34C55.4082 34 54.8779 33.7416 54.5117 33.333H48ZM12 10C10.8954 10 10 10.8954 10 12V15.333H47.333V12C47.333 10.8954 46.4376 10 45.333 10H12Z"
+        fill="#EBDEDC"
+      />
+      <path
+        d="M42.9756 6.00781C46.1457 6.16859 48.667 8.7899 48.667 12V15.333H49.333C52.6466 15.333 55.3328 18.0195 55.333 21.333V30.0371C58.3331 30.3686 60.667 32.9115 60.667 36V38.667C60.6668 41.7553 58.3329 44.2973 55.333 44.6289V50.667C55.3328 53.9806 52.6466 56.667 49.333 56.667H12C8.6864 56.667 6.00018 53.9805 6 50.667V12C6 8.68629 8.6863 6 12 6H42.667L42.9756 6.00781ZM10 50.667C10.0002 51.7714 10.8955 52.667 12 52.667H49.333C50.4375 52.667 51.3328 51.7714 51.333 50.667V44.667H48C43.9501 44.6668 40.667 41.383 40.667 37.333C40.6672 33.2832 43.9502 30.0002 48 30H51.333V21.333C51.3328 20.2286 50.4375 19.333 49.333 19.333H10V50.667ZM48 34C46.1593 34.0002 44.6672 35.4923 44.667 37.333C44.667 39.1738 46.1592 40.6668 48 40.667H54.667C55.7713 40.6668 56.6668 39.7713 56.667 38.667V36C56.667 34.8955 55.7714 34.0002 54.667 34H48ZM12 10C10.8954 10 10 10.8954 10 12V15.333H44.667V12C44.667 10.9645 43.8796 10.1132 42.8711 10.0107L42.667 10H12Z"
+        fill="#EBDEDC"
+      />
+    </svg>
+  );
+};
+
+const BindIcon = () => {
+  return (
+    <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M10.5552 12.5981C12.2474 10.9059 14.9908 10.9059 16.6831 12.5981L17.6597 13.5737C18.0501 13.9641 18.0499 14.5972 17.6597 14.9878C17.2691 15.3778 16.636 15.3781 16.2456 14.9878L15.269 14.0122C14.3578 13.101 12.8805 13.101 11.9692 14.0122L5.3501 20.6313C4.43935 21.5426 4.43903 23.0201 5.3501 23.9312L7.30225 25.8833C8.21331 26.7944 9.69079 26.794 10.6021 25.8833L13.5786 22.9077C13.9691 22.5172 14.6022 22.5172 14.9927 22.9077C15.383 23.2983 15.3831 23.9313 14.9927 24.3218L12.0161 27.2974C10.3238 28.9892 7.5803 28.9895 5.88818 27.2974L3.93604 25.3452C2.24392 23.6531 2.24424 20.9096 3.93604 19.2173L10.5552 12.5981ZM19.2153 3.97217C20.9038 2.25827 23.6655 2.24848 25.3667 3.94971L27.3013 5.88428C28.9935 7.57655 28.9935 10.3199 27.3013 12.0122L20.6821 18.6313C18.9898 20.3231 16.2463 20.3235 14.5542 18.6313L13.5776 17.6558C13.1874 17.2655 13.1879 16.6323 13.5776 16.2417C13.9682 15.8512 14.6012 15.8512 14.9917 16.2417L15.9683 17.2173C16.8793 18.1283 18.3568 18.128 19.2681 17.2173L25.8872 10.5981C26.7984 9.68692 26.7984 8.20956 25.8872 7.29834L23.9526 5.36377C23.0366 4.44774 21.5493 4.45268 20.6401 5.37549L16.7114 9.36377C16.3238 9.75672 15.6906 9.76194 15.2974 9.37451C14.9042 8.98707 14.8995 8.35389 15.2866 7.96045L19.2153 3.97217Z"
+        fill="#EBDEDC"
+      />
+      <path
+        d="M10.5571 12.6016C12.2494 10.9094 14.9928 10.9093 16.6851 12.6016L17.6616 13.5771C18.0517 13.9675 18.0516 14.6008 17.6616 14.9912C17.2712 15.3816 16.6381 15.3814 16.2476 14.9912L15.271 14.0156C14.3598 13.1044 12.8824 13.1045 11.9712 14.0156L5.35205 20.6348C4.44083 21.546 4.44083 23.0233 5.35205 23.9346L8.03174 26.6143C8.9261 27.5083 10.3702 27.5276 11.2876 26.6572L13.6665 24.3984C13.637 24.375 13.6079 24.3505 13.5806 24.3232C13.1901 23.9327 13.1901 23.2997 13.5806 22.9092C14.1232 22.3666 14.8184 22.1462 15.4761 22.332C16.0272 22.488 16.6206 22.997 16.6206 23.7529C16.6206 23.7809 16.618 23.8085 16.6157 23.8359C16.6413 24.1291 16.539 24.4311 16.3091 24.6494L12.6646 28.1084C10.9608 29.7249 8.27866 29.6897 6.61768 28.0293L3.93799 25.3486C2.24572 23.6564 2.24572 20.913 3.93799 19.2207L10.5571 12.6016ZM19.2183 3.97266C20.9066 2.25916 23.6684 2.24938 25.3696 3.9502L28.1753 6.75586C29.8672 8.44789 29.868 11.1914 28.1763 12.8838L21.5581 19.5039C19.8663 21.1962 17.1218 21.1964 15.4292 19.5049L13.9614 18.0371C13.5709 17.6467 13.571 17.0136 13.9614 16.623C14.3519 16.2329 14.985 16.2327 15.3755 16.623L16.8433 18.0908C17.7547 19.0015 19.2321 19.001 20.1431 18.0898L26.7622 11.4697C27.6729 10.5585 27.6721 9.08097 26.7612 8.16992L23.9556 5.36426C23.0395 4.44844 21.5522 4.45431 20.6431 5.37695L16.7134 9.36523C16.3259 9.75836 15.6927 9.76319 15.2993 9.37598C14.906 8.98837 14.902 8.35531 15.2896 7.96191L19.2183 3.97266Z"
+        fill="#EBDEDC"
+      />
+    </svg>
+  );
+};
+
+export default ConnectPrimaryWallet;

package/src/ui/connect/WCRequest.tsx

@@ -1,7 +1,7 @@
 import { observer } from "mobx-react-lite";
 import { useEffect } from "react";
 
-import { ImageView } from "../payment/TokenCard";
+import { ImageView } from "../uikit/image";
 import { PopupButton } from "../styles";
 import Popup from "../Popup";
 

package/src/ui/connect/WalletPicker.tsx

@@ -1,7 +1,7 @@
 import { useState } from "react";
 import { observer } from "mobx-react-lite";
 
-import { ImageView } from "../payment/TokenCard";
+import { ImageView } from "../uikit/image";
 import { OmniWallet } from "../../OmniWallet";
 import { OmniConnector, OmniConnectorOption } from "../../OmniConnector";
 import { PopupButton, PopupOption, PopupOptionInfo } from "../styles";

package/src/ui/icons/arrow-right.tsx

@@ -1,8 +1,7 @@
-export const ArrowRightIcon = (props: React.SVGProps<SVGSVGElement>) => {
+export const ArrowRightIcon = ({ color = "#fff", ...props }: { color?: string } & React.SVGProps<SVGSVGElement>) => {
   return (
-    <svg xmlns="http://www.w3.org/2000/svg" width={24} height={24} viewBox="0 0 16 16" fill="none" {...props}>
-      <path d="M10.6667 8C10.1282 8 6.66669 8.56 6.66669 12.6667" stroke="#eaeaea" stroke-width="1.2" stroke-linecap="round" />
-      <path d="M10.6667 8.00001C10.1282 8.00001 6.66669 7.44001 6.66669 3.33334" stroke="#eaeaea" stroke-width="1.2" stroke-linecap="round" />
+    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <path d="M14 12.5878L10.7071 15.8807C10.0771 16.5107 9 16.0645 9 15.1736L9 10.002C9 9.1111 10.0771 8.66493 10.7071 9.2949L14 12.5878Z" fill={color} />
     </svg>
   );
 };

package/src/ui/icons/close.tsx

@@ -1,7 +1,7 @@
 export const CloseIcon = (props: React.SVGProps<SVGSVGElement>) => {
   return (
     <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
-      <path d="M5 19L19 5M5 5L19 19" stroke="#dddddd" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" />
+      <path d="M5 19L19 5M5 5L19 19" stroke="#dddddd" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" />
     </svg>
   );
 };

package/src/ui/icons/exchange.tsx

@@ -1,15 +1,8 @@
-const ExchangeIcon = ({ size, color, strokeColor }: { size?: number; color?: string; strokeColor?: string }) => {
+const ExchangeIcon = ({ color = "#121212", ...props }: { color?: string; style?: React.CSSProperties } & React.SVGProps<SVGSVGElement>) => {
   return (
-    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-      <path fill-rule="evenodd" clip-rule="evenodd" d="M14 3.5H9C5.41015 3.5 2.5 6.41015 2.5 10V14C2.5 17.5899 5.41015 20.5 9 20.5H14C17.5899 20.5 20.5 17.5899 20.5 14V10C20.5 6.41015 17.5899 3.5 14 3.5Z" fill={color} />
-      <path d="M9 3.5H14C17.5899 3.5 20.5 6.41015 20.5 10V14C20.5 17.5899 17.5899 20.5 14 20.5H9C5.41015 20.5 2.5 17.5899 2.5 14V10C2.5 6.41015 5.41015 3.5 9 3.5Z" fill={color} />
-      <path d="M9 2.75H15C19.0041 2.75 22.25 5.99594 22.25 10V15C22.25 19.0041 19.0041 22.25 15 22.25H9C4.99594 22.25 1.75 19.0041 1.75 15V10C1.75 5.99594 4.99594 2.75 9 2.75Z" stroke={strokeColor} stroke-width="1.5" />
-      <path
-        fill-rule="evenodd"
-        clip-rule="evenodd"
-        d="M14 3.5H9C5.41015 3.5 2.5 6.41015 2.5 10V14C2.5 17.5899 5.41015 20.5 9 20.5H14C17.5899 20.5 20.5 17.5899 20.5 14V10C20.5 6.41015 17.5899 3.5 14 3.5ZM9 2C4.58172 2 1 5.58172 1 10V14C1 18.4183 4.58172 22 9 22H14C18.4183 22 22 18.4183 22 14V10C22 5.58172 18.4183 2 14 2H9ZM9.43398 6.25678C9.84444 6.31237 10.1321 6.69018 10.0765 7.10064C9.88688 8.5013 9.31567 9.52614 8.588 10.25H18C18.4142 10.25 18.75 10.5858 18.75 11C18.75 11.4142 18.4142 11.75 18 11.75H5C4.58579 11.75 4.25 11.4142 4.25 11C4.25 10.5858 4.58579 10.25 5 10.25C5.50127 10.25 6.3231 10.0848 7.05272 9.58232C7.75624 9.09779 8.40283 8.28236 8.59012 6.89936C8.6457 6.48889 9.02351 6.2012 9.43398 6.25678ZM12.9235 17.8994C12.8679 18.3098 13.1556 18.6876 13.566 18.7432C13.9765 18.7988 14.3543 18.5111 14.4099 18.1006C14.5972 16.7176 15.2438 15.9022 15.9473 15.4177C16.6769 14.9152 17.4987 14.75 18 14.75C18.4142 14.75 18.75 14.4142 18.75 14C18.75 13.5858 18.4142 13.25 18 13.25H5C4.58579 13.25 4.25 13.5858 4.25 14C4.25 14.4142 4.58579 14.75 5 14.75H14.412C13.6843 15.4739 13.1131 16.4987 12.9235 17.8994Z"
-        fill={strokeColor}
-      />
+    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <path d="M14 5.5L19 10.5H5" stroke={color} stroke-width="1.5" stroke-linecap="round" />
+      <path d="M11 19L6 14H20" stroke={color} stroke-width="1.5" stroke-linecap="round" />
     </svg>
   );
 };

package/src/ui/icons/logout.tsx

@@ -1,18 +1,9 @@
 export const LogoutIcon = (props: React.SVGProps<SVGSVGElement>) => (
-  <svg xmlns="http://www.w3.org/2000/svg" width={24} height={24} viewBox="0 0 12 12" fill="none" {...props}>
+  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
     <path
-      d="M7.125 4.12506V3.12506C7.125 2.71085 6.78921 2.37506 6.375 2.37506H2.625C2.21079 2.37506 1.875 2.71085 1.875 3.12506V8.94997C1.875 9.36418 2.21079 9.69997 2.625 9.69997H6.375C6.78921 9.69997 7.125 9.36418 7.125 8.94997V8.62506"
-      stroke="#b8b8b8"
-      stroke-width="0.75"
-      stroke-linecap="round"
-      stroke-linejoin="round"
+      d="M15.1123 8.78076C15.4052 8.48821 15.8801 8.488 16.1729 8.78076L19.6113 12.2202L20.1416 12.7505L16.1729 16.7192C15.88 17.012 15.4052 17.0119 15.1123 16.7192C14.8194 16.4264 14.8195 15.9516 15.1123 15.6587L17.2705 13.5005H11.5156C11.1016 13.5004 10.7659 13.1644 10.7656 12.7505C10.7656 12.3363 11.1015 12.0006 11.5156 12.0005H17.2715L15.1123 9.84131C14.8195 9.54845 14.8195 9.07366 15.1123 8.78076Z"
+      fill="#BFBFBF"
     />
-    <path
-      fill-rule="evenodd"
-      clip-rule="evenodd"
-      d="M2.625 2.00006C2.00368 2.00006 1.5 2.50374 1.5 3.12506V8.62506C1.5 9.24638 2.00368 9.75006 2.625 9.75006H6.125C6.6513 9.75006 7.09319 9.38866 7.21604 8.90049C7.21979 8.89938 7.22349 8.89811 7.22714 8.89665C7.43737 8.81297 7.62507 8.62509 7.37504 8.12509C7.28246 7.9399 7.18987 7.8576 7.10907 7.83207C7.04492 7.78075 6.96354 7.75006 6.875 7.75006C6.66789 7.75006 6.5 7.91795 6.5 8.12506V8.62506C6.5 8.83217 6.33211 9.00006 6.125 9.00006H2.625C2.41789 9.00006 2.25 8.83217 2.25 8.62506V3.12506C2.25 2.91795 2.41789 2.75006 2.625 2.75006H6.125C6.33211 2.75006 6.5 2.91795 6.5 3.12506V3.62506C6.5 3.64361 6.50135 3.66184 6.50395 3.67966C6.50066 3.78168 6.54545 3.90373 6.58628 4.015C6.60039 4.05343 6.61402 4.09059 6.62504 4.12518C6.7401 4.4039 7.12503 4.62518 7.16669 4.40389C7.29825 4.362 7.33697 4.11473 7.25318 3.85161C7.24388 3.8224 7.23346 3.79422 7.2221 3.76726C7.24008 3.72341 7.25 3.67539 7.25 3.62506V3.12506C7.25 2.50374 6.74632 2.00006 6.125 2.00006H2.625Z"
-      fill="#b8b8b8"
-    />
-    <path d="M4.62499 6L10.1383 6M10.1383 6C9.4301 5.99403 8.10413 6.45886 8.37868 7.5M10.1383 6C9.46912 6.03371 8.18027 5.6316 8.37868 4.5" stroke="#b8b8b8" stroke-width="0.75" stroke-linecap="round" stroke-linejoin="round" />
+    <path d="M12.5 6H8C7.17157 6 6.5 6.67157 6.5 7.5V17.5C6.5 18.3284 7.17157 19 8 19H12.5" stroke="#BFBFBF" strokeWidth="1.5" strokeLinecap="round" />
   </svg>
 );

package/src/ui/icons/pending.tsx

@@ -2,14 +2,12 @@ export const PendingIcon = (props: React.SVGProps<SVGSVGElement>) => {
   return (
     <svg xmlns="http://www.w3.org/2000/svg" width="11" height="11" viewBox="0 0 11 11" fill="none" {...props}>
       <path
-        fill-rule="evenodd"
-        clip-rule="evenodd"
+        clipRule="evenodd"
         d="M5.00001 2.49994C5.20712 2.49994 5.37501 2.66783 5.37501 2.87494V5.3534C5.37501 5.61658 5.28274 5.87143 5.11426 6.07361L4.03809 7.36501C3.90551 7.52411 3.66904 7.54561 3.50994 7.41302C3.35084 7.28044 3.32934 7.04397 3.46193 6.88487L4.53809 5.59347C4.59425 5.52608 4.62501 5.44113 4.62501 5.3534V2.87494C4.62501 2.66783 4.7929 2.49994 5.00001 2.49994Z"
         fill="#2C3034"
       />
       <path
-        fill-rule="evenodd"
-        clip-rule="evenodd"
+        clipRule="evenodd"
         d="M2.11248 8.11847C2.87055 8.82074 3.88514 9.25 5 9.25C7.34721 9.25 9.25 7.34721 9.25 5C9.25 3.88514 8.82073 2.87054 8.11847 2.11248C7.21578 1.26718 6.08279 0.75 5 0.75C2.65279 0.75 0.75 2.65279 0.75 5C0.75 6.08279 1.26718 7.21578 2.11248 8.11847ZM10.5 5.5C10.5 8.26142 8.26142 10.5 5.5 10.5C4.0598 10.5 2.62582 9.75509 1.58332 8.65054C0.608904 7.73817 0 6.4402 0 5C0 2.23858 2.23858 0 5 0C6.44019 0 7.73817 0.608903 8.65054 1.58331C9.75509 2.62582 10.5 4.0598 10.5 5.5Z"
         fill="#2C3034"
       />

package/src/ui/icons/plus.tsx

@@ -0,0 +1,12 @@
+const PlusIcon = (props: React.SVGProps<SVGSVGElement>) => {
+  return (
+    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <path
+        d="M5.33293 4.54688C9.44921 0.864805 15.7709 1.21678 19.453 5.33301C22.6199 8.87326 22.8004 14.043 20.1708 17.7637L15.9999 16.4717L16.8212 20.7588C12.8316 22.9594 7.71375 22.2074 4.5468 18.667C0.864783 14.5508 1.21682 8.229 5.33293 4.54688ZM11.8339 6.62305C11.4197 6.62305 11.0839 6.95883 11.0839 7.37305V11.123H7.33391C6.91969 11.123 6.58391 11.4588 6.58391 11.873C6.58417 12.287 6.91986 12.623 7.33391 12.623H11.0839V16.373C11.0842 16.787 11.4199 17.123 11.8339 17.123C12.2477 17.1228 12.5836 16.7869 12.5839 16.373V12.623H16.3339C16.7477 12.6228 17.0836 12.2869 17.0839 11.873C17.0839 11.459 16.7479 11.1233 16.3339 11.123H12.5839V7.37305C12.5839 6.95899 12.2479 6.6233 11.8339 6.62305Z"
+        fill="#BFBFBF"
+      />
+    </svg>
+  );
+};
+
+export default PlusIcon;

package/src/ui/icons/qr.tsx

@@ -2,8 +2,7 @@ export const QRIcon = (props: any) => {
   return (
     <svg xmlns="http://www.w3.org/2000/svg" width={24} height={24} viewBox="0 0 12 12" fill="none" {...props}>
       <path
-        fill-rule="evenodd"
-        clip-rule="evenodd"
+        clipRule="evenodd"
         d="M1.75412 1.95569C1.93703 1.68471 2.21228 1.5 2.55882 1.5H2.69118H5.47059L5.73529 1.92507V5.60294H2.02941L1.5 5.20588V2.82353V2.69118C1.5 2.4136 1.59494 2.15821 1.75412 1.95569ZM2.82353 2.42647C2.60424 2.42647 2.42647 2.60424 2.42647 2.82353V4.41176H4.67647V2.42647H2.82353ZM6.26468 1.5H6.26474H9.04409H9.17651C9.83438 1.5 10.5 2.16566 10.5 2.82353V5.60294H10.103H6.6618L6.26474 5.20588H6.26468V1.5ZM9.44115 2.69118C9.44115 2.59011 9.40339 2.49786 9.3412 2.42777C9.33054 2.42691 9.31975 2.42647 9.30886 2.42647H7.32357V4.41176H9.44115V2.69118ZM5.20588 6.26477L5.20598 6.26487H5.33824L5.73529 6.66193V9.94274V10.3678H2.82353C2.16566 10.3678 1.5 9.70215 1.5 9.04428V8.77948V6.26487V6.26477H5.20588ZM2.5758 9.15951C2.61231 9.17058 2.65105 9.17654 2.69118 9.17654H4.67647V7.05899H2.55882V9.04428C2.55882 9.08435 2.56476 9.12304 2.5758 9.15951ZM6.26468 6.26477H8.38233V7.32359H6.52938L6.26468 7.05889V6.26477ZM9.44121 7.32359H10.5V6.52948L10.2353 6.26477H9.44119V7.32349H8.38239V8.38231H9.44121V7.32359ZM7.3235 8.38239H6.26468V9.44121V10.2353L6.49183 10.3702H7.3235V9.44121H8.38233V8.38239H7.3235ZM10.2353 8.38239L10.5 8.64709V9.44121V9.61103C10.5 10.0252 10.1642 10.361 9.75003 10.361H8.62347L8.38239 10.2353V9.44121H9.44121V8.38239H10.2353Z"
         fill="#ececec"
       />

package/src/ui/icons/refresh.tsx

@@ -0,0 +1,20 @@
+const RefreshIcon = (props: React.SVGProps<SVGSVGElement>) => {
+  return (
+    <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M7.93617 10.654C7.32687 10.9064 6.67383 11.0363 6.01433 11.0363C5.35483 11.0363 4.70178 10.9064 4.09248 10.654C3.48318 10.4016 2.92956 10.0317 2.46322 9.56539C1.99688 9.09905 1.62696 8.54543 1.37458 7.93613C1.1222 7.32683 0.992299 6.67378 0.992299 6.01428C0.992299 5.77266 1.18817 5.57678 1.4298 5.57678C1.67142 5.57678 1.8673 5.77266 1.8673 6.01428C1.8673 6.55888 1.97457 7.09814 2.18297 7.60128C2.39138 8.10442 2.69685 8.56159 3.08194 8.94667C3.46702 9.33176 3.92419 9.63723 4.42733 9.84564C4.93047 10.054 5.46973 10.1613 6.01433 10.1613C6.55892 10.1613 7.09818 10.054 7.60133 9.84564C8.10447 9.63723 8.56163 9.33176 8.94672 8.94667C8.97457 8.91882 9.002 8.8906 9.02901 8.862C9.00348 8.86522 8.97815 8.86811 8.95305 8.8707C8.66125 8.90069 8.38121 8.89126 8.14434 8.86036C7.91718 8.83073 7.69621 8.77703 7.53786 8.69786C7.32175 8.5898 7.23415 8.32701 7.34221 8.11089C7.45027 7.89478 7.71306 7.80718 7.92918 7.91524C7.96186 7.93158 8.07278 7.96861 8.25751 7.99271C8.43254 8.01554 8.64438 8.02282 8.86356 8.00028C9.24654 7.96091 9.59971 7.83763 9.84491 7.60314C9.84517 7.60252 9.84542 7.6019 9.84568 7.60128C9.88947 7.49555 9.96993 7.41612 10.0662 7.37162C10.1126 7.34006 10.1642 7.31813 10.2179 7.30629C10.2797 7.29258 10.3447 7.29217 10.4085 7.30657C10.453 7.31656 10.4964 7.33367 10.5372 7.35815C10.5881 7.38858 10.6308 7.42807 10.6643 7.47349C10.6946 7.51447 10.7171 7.55994 10.7313 7.6076C10.754 7.68295 10.7565 7.76449 10.7359 7.84347C10.7278 7.87448 10.7163 7.9049 10.7012 7.93414C10.4753 8.38954 10.4666 8.92413 10.5623 9.4027C10.6096 9.6396 10.6805 9.85086 10.7528 10.0146C10.7889 10.0963 10.8239 10.1628 10.8543 10.2127C10.8694 10.2375 10.8824 10.2565 10.8927 10.2702C10.9023 10.2831 10.9076 10.2888 10.9082 10.2894C10.9083 10.2895 10.9083 10.2895 10.9082 10.2895C11.0791 10.4603 11.0791 10.7373 10.9082 10.9082C10.7374 11.079 10.4604 11.079 10.2895 10.9082C10.1606 10.7792 10.0448 10.5772 9.95246 10.3682C9.85467 10.1469 9.76433 9.87465 9.70426 9.5743C9.69587 9.53234 9.68802 9.4896 9.68081 9.44614C9.64304 9.48649 9.60458 9.52625 9.56544 9.56539C9.0991 10.0317 8.54547 10.4016 7.93617 10.654Z"
+        fill={props.color}
+      />
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M4.0377 1.31979C4.647 1.06741 5.30005 0.937507 5.95955 0.937508C6.61905 0.937508 7.2721 1.06741 7.8814 1.31979C8.4907 1.57217 9.04432 1.94209 9.51066 2.40843C9.977 2.87476 10.3469 3.42839 10.5993 4.03769C10.8517 4.64699 10.9816 5.30003 10.9816 5.95954C10.9816 6.20116 10.7857 6.39704 10.5441 6.39704C10.3025 6.39704 10.1066 6.20116 10.1066 5.95954C10.1066 5.41494 9.99931 4.87568 9.7909 4.37254C9.5825 3.8694 9.27703 3.41223 8.89194 3.02714C8.50685 2.64206 8.04969 2.33659 7.54655 2.12818C7.04341 1.91977 6.50415 1.81251 5.95955 1.81251C5.41495 1.81251 4.87569 1.91977 4.37255 2.12818C3.86941 2.33659 3.41225 2.64206 3.02716 3.02714C2.99931 3.05499 2.97188 3.08322 2.94487 3.11181C2.97039 3.10859 2.99573 3.1057 3.02083 3.10312C3.31263 3.07312 3.59267 3.08256 3.82954 3.11346C4.0567 3.14309 4.27767 3.19678 4.43601 3.27596C4.65213 3.38401 4.73973 3.64681 4.63167 3.86292C4.52361 4.07904 4.26082 4.16664 4.0447 4.05858C4.01202 4.04224 3.90109 4.0052 3.71636 3.98111C3.54134 3.95828 3.3295 3.951 3.11031 3.97353C2.72734 4.0129 2.37417 4.13619 2.12897 4.37068C2.12871 4.3713 2.12845 4.37192 2.1282 4.37254C2.0844 4.47826 2.00394 4.55769 1.90766 4.6022C1.86126 4.63376 1.80968 4.65568 1.75602 4.66752C1.69419 4.68124 1.62914 4.68165 1.56541 4.66725C1.52094 4.65726 1.4775 4.64016 1.43678 4.61571C1.38582 4.58527 1.34306 4.54576 1.30955 4.50032C1.27926 4.45934 1.25681 4.41388 1.24253 4.36622C1.21988 4.29087 1.2174 4.20933 1.23799 4.13034C1.24603 4.09934 1.25758 4.06892 1.27271 4.03967C1.49853 3.58427 1.50733 3.04968 1.41161 2.57112C1.36423 2.33422 1.2934 2.12295 1.22106 1.95924C1.18494 1.87748 1.14994 1.81098 1.11955 1.76115C1.10443 1.73635 1.09146 1.71734 1.08118 1.70357C1.07159 1.69073 1.06626 1.68503 1.06566 1.68439C1.0656 1.68432 1.06559 1.68431 1.06564 1.68436C0.894787 1.51351 0.894787 1.2365 1.06564 1.06564C1.2365 0.89479 1.51351 0.89479 1.68436 1.06564C1.81331 1.1946 1.92908 1.39663 2.02142 1.6056C2.11921 1.82691 2.20955 2.09917 2.26962 2.39952C2.27801 2.44147 2.28586 2.48422 2.29307 2.52767C2.33084 2.48732 2.3693 2.44757 2.40844 2.40842C2.87478 1.94209 3.4284 1.57217 4.0377 1.31979Z"
+        fill={props.color}
+      />
+    </svg>
+  );
+};
+
+export default RefreshIcon;

package/src/ui/icons/search.tsx

@@ -4,15 +4,15 @@ export const SearchIcon = (props: React.SVGProps<SVGSVGElement>) => {
       <path
         d="M5 1.875C5.81162 1.875 6.65905 2.2748 7.30957 2.91699C7.95937 3.55852 8.375 4.40467 8.375 5.25C8.375 7.01349 7.19019 8.375 5.5 8.375C3.44557 8.37499 1.875 6.71455 1.875 5C1.875 3.27411 3.27411 1.875 5 1.875Z"
         stroke="#2C3034"
-        stroke-width="0.75"
+        strokeWidth="0.75"
       />
       <path
-        fill-rule="evenodd"
-        clip-rule="evenodd"
+        fillRule="evenodd"
+        clipRule="evenodd"
         d="M5 7.75C6.51878 7.75 7.75 6.51878 7.75 5C7.75 3.48122 6.51878 2.25 5 2.25C3.48122 2.25 2.25 3.48122 2.25 5C2.25 6.51878 3.48122 7.75 5 7.75ZM5 8.5C6.933 8.5 8.5 6.933 8.5 5C8.5 3.067 6.933 1.5 5 1.5C3.067 1.5 1.5 3.067 1.5 5C1.5 6.933 3.067 8.5 5 8.5Z"
         fill="#2C3034"
       />
-      <path d="M7.25 7.25006L10.25 10.2501" stroke="#2C3034" stroke-width="0.75" stroke-linecap="round" />
+      <path d="M7.25 7.25006L10.25 10.2501" stroke="#2C3034" strokeWidth="0.75" strokeLinecap="round" />
     </svg>
   );
 };

package/src/ui/icons/switch.tsx

@@ -1,10 +1,10 @@
 export const SwitchIcon = (props: React.SVGProps<SVGSVGElement>) => {
   return (
     <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
-      <path d="M10 4L10 19" stroke="#EBDEDC" stroke-width="2" stroke-linecap="round" />
-      <path d="M14 19L14 4" stroke="#EBDEDC" stroke-width="2" stroke-linecap="round" />
-      <path d="M10 19C10 18.3269 9.52 14 6 14" stroke="#EBDEDC" stroke-width="2" stroke-linecap="round" />
-      <path d="M14 4C14 4.67308 14.48 9 18 9" stroke="#EBDEDC" stroke-width="2" stroke-linecap="round" />
+      <path d="M10 4L10 19" stroke="#EBDEDC" strokeWidth="2" strokeLinecap="round" />
+      <path d="M14 19L14 4" stroke="#EBDEDC" strokeWidth="2" strokeLinecap="round" />
+      <path d="M10 19C10 18.3269 9.52 14 6 14" stroke="#EBDEDC" strokeWidth="2" stroke-linecap="round" />
+      <path d="M14 4C14 4.67308 14.48 9 18 9" stroke="#EBDEDC" strokeWidth="2" stroke-linecap="round" />
     </svg>
   );
 };

package/src/ui/icons/wallet.tsx

@@ -2,14 +2,12 @@ export const WalletIcon = (props: React.SVGProps<SVGSVGElement>) => {
   return (
     <svg xmlns="http://www.w3.org/2000/svg" width={24} height={24} viewBox="0 0 12 12" fill="none" {...props}>
       <path
-        fill-rule="evenodd"
-        clip-rule="evenodd"
+        clipRule="evenodd"
         d="M2.25 1.125C1.62868 1.125 1.125 1.62868 1.125 2.25V3.25V10C1.125 10.6213 1.62868 11.125 2.25 11.125H9.75C10.3713 11.125 10.875 10.6213 10.875 10V8.5C10.875 8.47885 10.8732 8.4581 10.8699 8.43791C11.3095 8.28493 11.625 7.86688 11.625 7.37512V6.66092C11.625 6.24411 11.2859 5.86414 10.875 5.65915V4C10.875 3.37868 10.3713 2.875 9.75 2.875H9.625V2.25C9.625 1.62868 9.12132 1.125 8.5 1.125H2.25ZM10.2206 6.25012C10.2893 6.32677 10.389 6.375 10.5 6.375C10.5051 6.375 10.5103 6.3749 10.5154 6.37469C10.6967 6.51463 10.875 6.73984 10.875 6.87512V7.37512C10.875 7.58223 10.7071 7.75012 10.5 7.75012H9.00003C8.65485 7.75012 8.25003 7.4703 8.25003 7.12512C8.25003 6.77994 8.65485 6.25012 9.00003 6.25012H10.2206ZM10.125 5.52513V4C10.125 3.79289 9.95711 3.625 9.75 3.625H9.25H1.875V10C1.875 10.2071 2.04289 10.375 2.25 10.375H9.75C9.95711 10.375 10.125 10.2071 10.125 10V8.5C10.125 8.47904 10.1267 8.45848 10.13 8.43845L9.00003 8.25012C8.24064 8.25012 7.75003 7.88451 7.75003 7.12512C7.75003 6.36573 8.24064 5.75012 9.00003 5.75012L10.125 5.52513ZM8.875 2.875H1.875V2.25C1.875 2.04289 2.04289 1.875 2.25 1.875H8.5C8.70711 1.875 8.875 2.04289 8.875 2.25V2.875Z"
         fill="#ececec"
       />
       <path
-        fill-rule="evenodd"
-        clip-rule="evenodd"
+        clipRule="evenodd"
         d="M2.25 1.125C1.62868 1.125 1.125 1.62868 1.125 2.25V3.25V9.5C1.125 10.1213 1.62868 10.625 2.25 10.625H9.25C9.87132 10.625 10.375 10.1213 10.375 9.5V8.36813C10.9375 8.30594 11.375 7.82906 11.375 7.25V6.75C11.375 6.17094 10.9375 5.69406 10.375 5.63187V4C10.375 3.37868 9.87132 2.875 9.25 2.875H9.125V2.25C9.125 1.62868 8.62132 1.125 8 1.125H2.25ZM9.625 5.625V4C9.625 3.79289 9.45711 3.625 9.25 3.625H8.75H1.875V9.5C1.875 9.70711 2.04289 9.875 2.25 9.875H9.25C9.45711 9.875 9.625 9.70711 9.625 9.5V8.375H8.99997C8.24058 8.375 7.62497 7.75939 7.62497 7C7.62497 6.24061 8.24058 5.625 8.99997 5.625H9.625ZM10 7.625H10.25C10.4571 7.625 10.625 7.45711 10.625 7.25V6.75C10.625 6.54289 10.4571 6.375 10.25 6.375H10H8.99997C8.65479 6.375 8.37497 6.65482 8.37497 7C8.37497 7.34518 8.65479 7.625 8.99997 7.625H10ZM8.375 2.875H1.875V2.25C1.875 2.04289 2.04289 1.875 2.25 1.875H8C8.20711 1.875 8.375 2.04289 8.375 2.25V2.875Z"
         fill="#ececec"
       />