@hot-labs/kit 1.4.15 → 1.4.17

package/src/ui/bridge/Bridge.tsx

@@ -142,6 +142,17 @@ export const Bridge = observer(({ hot, widget, setup, onClose, onProcess, onSele
     setIsReviewing(false);
   };
 
+  const openTooltip = (id: string) => {
+    const tooltip = document.getElementById(id);
+    if (!tooltip) return;
+    tooltip.style.transform = "translateY(0)";
+    tooltip.style.opacity = "1";
+    setTimeout(() => {
+      tooltip.style.transform = "translateY(8px)";
+      tooltip.style.opacity = "0";
+    }, 3000);
+  };
+
   const reviewSwap = useCallback(() => {
     reviewId.current = uuid4();
     const currentReviewId = reviewId.current;
@@ -151,9 +162,6 @@ export const Bridge = observer(({ hot, widget, setup, onClose, onProcess, onSele
 
     const refund = sender !== "qr" ? sender : hot.priorityWallet;
     if (valueInTokens <= 0) return throwError("Enter amount");
-    if (!sender) return throwError("Set sender");
-    if (!recipient) return throwError("Set recipient");
-    if (!refund) return throwError("Connect any wallet");
 
     const debounceTimer = setTimeout(async () => {
       try {
@@ -162,6 +170,12 @@ export const Bridge = observer(({ hot, widget, setup, onClose, onProcess, onSele
         const recipientWallet = hot.wallets.find((w) => w.address === recipient?.address && w.type === recipient?.type) || recipient;
         const review = await hot.exchange.reviewSwap({ recipient: recipientWallet, slippage: 0.005, sender, refund, amount, type, from, to });
         if (currentReviewId !== reviewId.current) return;
+
+        if (amount > 0) {
+          if (!sender) setTimeout(() => openTooltip("sender-tooltip"), 100);
+          if (!recipient) openTooltip("recipient-tooltip");
+        }
+
         setIsReviewing(false);
         setIsError(null);
         setReview(review);
@@ -283,8 +297,8 @@ export const Bridge = observer(({ hot, widget, setup, onClose, onProcess, onSele
   }
 
   const button = () => {
-    if (sender == null) return <ActionButton disabled>Set sender</ActionButton>;
-    if (recipient == null) return <ActionButton disabled>Set recipient</ActionButton>;
+    if (sender == null) return <ActionButton disabled>Confirm</ActionButton>;
+    if (recipient == null) return <ActionButton disabled>Confirm</ActionButton>;
     if (sender !== "qr" && +from.float(hot.balance(sender, from)).toFixed(FIXED) < +amountFrom.toFixed(FIXED)) return <ActionButton disabled>Insufficient balance</ActionButton>;
     return (
       <ActionButton style={{ width: "100%", marginTop: 40 }} disabled={isReviewing || isError != null} onClick={handleConfirm}>
@@ -307,6 +321,7 @@ export const Bridge = observer(({ hot, widget, setup, onClose, onProcess, onSele
 
             <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
               <PSmall>Sender:</PSmall>
+
               <BadgeButton
                 onClick={() => {
                   if (from.type === WalletType.OMNI) openSelectSender({ hot, type: from.type, onSelect: (sender) => setSender(sender) });
@@ -314,6 +329,9 @@ export const Bridge = observer(({ hot, widget, setup, onClose, onProcess, onSele
                 }}
               >
                 <PSmall>{sender == null ? "Select" : sender !== "qr" ? formatter.truncateAddress(sender.address, 8) : "QR"}</PSmall>
+                <Tooltip id="sender-tooltip">
+                  <PSmall>Select sender wallet</PSmall>
+                </Tooltip>
               </BadgeButton>
             </div>
           </CardHeader>
@@ -433,6 +451,9 @@ export const Bridge = observer(({ hot, widget, setup, onClose, onProcess, onSele
               <PSmall>Recipient:</PSmall>
               <BadgeButton onClick={() => openSelectRecipient({ hot, chain: to.chain, onSelect: (recipient) => setRecipient(recipient) })}>
                 <PSmall>{recipient == null ? "Select" : formatter.truncateAddress(recipient.address, 8)}</PSmall>
+                <Tooltip id="recipient-tooltip">
+                  <PSmall>Select recipient wallet</PSmall>
+                </Tooltip>
               </BadgeButton>
             </div>
           </CardHeader>
@@ -495,6 +516,41 @@ const TokenPreview = ({ style, token, onSelect }: { style?: React.CSSProperties;
   );
 };
 
+const Tooltip = styled.div`
+  transition: 0.2s transform, 0.2s opacity;
+  transform: translateY(8px);
+  opacity: 0;
+  position: absolute;
+  top: -48px;
+  right: 0;
+  z-index: 100000000;
+  border-radius: 16px;
+  background: var(--surface-white, #fff);
+  padding: 4px 12px;
+  justify-content: center;
+  pointer-events: none;
+  align-items: center;
+  gap: 4px;
+
+  p {
+    white-space: nowrap;
+    color: #000;
+  }
+
+  &::after {
+    content: "";
+    position: absolute;
+    top: 100%;
+    right: 8px;
+    transform: translateX(-50%);
+    width: 0;
+    height: 0;
+    border-left: 8px solid transparent;
+    border-right: 8px solid transparent;
+    border-top: 8px solid #fff;
+  }
+`;
+
 const BadgeButton = styled.button`
   display: flex;
   border-radius: 8px;
@@ -502,6 +558,7 @@ const BadgeButton = styled.button`
   padding: 4px 8px;
   background: transparent;
   transition: 0.2s border-color;
+  position: relative;
   cursor: pointer;
   outline: none;
   gap: 4px;

package/src/ui/bridge/SelectRecipient.tsx

@@ -25,10 +25,7 @@ interface SelectRecipientProps {
 }
 
 export const SelectRecipient = observer(({ recipient, hot, chain, onSelect, onClose }: SelectRecipientProps) => {
-  const connectors = hot.connectors.filter((t) => t.walletTypes.includes(type) && t.type !== ConnectorType.SOCIAL);
   const [customAddress, setCustomAddress] = useState<string>(recipient?.address || "");
-
-  const isError = !Recipient.isValidAddress(chain, customAddress) && customAddress.length > 0;
   const type = chains.get(chain)?.type;
 
   if (!type)
@@ -38,6 +35,9 @@ export const SelectRecipient = observer(({ recipient, hot, chain, onSelect, onCl
       </Popup>
     );
 
+  const connectors = hot.connectors.filter((t) => t.walletTypes.includes(type) && t.type !== ConnectorType.SOCIAL);
+  const isError = !Recipient.isValidAddress(chain, customAddress) && customAddress.length > 0;
+
   const selectCustom = async () => {
     const recipient = await Recipient.fromAddress(type, customAddress);
     onSelect(recipient);

package/src/ui/connect/ConnectWallet.tsx

@@ -23,7 +23,7 @@ interface MultichainPopupProps {
 
 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)) && t.options.length > 0);
-  const social = hot.connectors.filter((t) => t.type === ConnectorType.SOCIAL && (walletType == null || t.walletTypes.includes(walletType as WalletType)) && t.options.length > 0);
+  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();
@@ -33,25 +33,8 @@ export const Connector = observer(({ hot, onClose, title, walletType, widget }:
 
   return (
     <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} />
-          <PopupOptionInfo>
-            <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 width={32} height={32} />}
-        </PopupOption>
-      ))}
-
       {social.length > 0 && (
         <>
-          <div style={{ margin: "4px 0", display: "flex", width: "100%", alignItems: "center", justifyContent: "center", gap: "8px" }}>
-            <div style={{ height: "1px", flex: 1, background: "rgba(255,255,255,0.1)" }}></div>
-            <div>or</div>
-            <div style={{ height: "1px", flex: 1, background: "rgba(255,255,255,0.1)" }}></div>
-          </div>
-
           {social.map((t) => (
             <PopupOption key={t.id} onClick={() => selectConnector(t)}>
               <ImageView src={t.icon} alt={t.name} size={44} />
@@ -62,8 +45,25 @@ export const Connector = observer(({ hot, onClose, title, walletType, widget }:
               {t.wallets[0]?.address && <LogoutIcon width={32} height={32} />}
             </PopupOption>
           ))}
+
+          <div style={{ margin: "4px 0", display: "flex", width: "100%", alignItems: "center", justifyContent: "center", gap: "8px" }}>
+            <div style={{ height: "1px", flex: 1, background: "rgba(255,255,255,0.1)" }}></div>
+            <div>or</div>
+            <div style={{ height: "1px", flex: 1, background: "rgba(255,255,255,0.1)" }}></div>
+          </div>
         </>
       )}
+
+      {onechain.map((t) => (
+        <PopupOption key={t.id} onClick={() => selectConnector(t)}>
+          <ImageView src={t.icon} alt={t.name} size={44} />
+          <PopupOptionInfo>
+            <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 width={32} height={32} />}
+        </PopupOption>
+      ))}
     </Popup>
   );
 });

package/src/ui/icons/home.tsx

@@ -0,0 +1,12 @@
+export const HomeIcon = (props: React.SVGProps<SVGSVGElement>) => {
+  return (
+    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M3.16669 11.7087C3.16669 11.9848 3.39054 12.2087 3.66669 12.2087H6.34718C6.33809 12.1545 6.33335 12.0988 6.33335 12.042V10.042C6.33335 9.48973 6.78107 9.04202 7.33335 9.04202H8.00002C8.5523 9.04202 9.00002 9.48973 9.00002 10.042V12.042C9.00002 12.0988 8.99529 12.1545 8.98619 12.2087H11.6667C11.9428 12.2087 12.1667 11.9848 12.1667 11.7087V6.85598C12.1667 6.70408 12.0976 6.56043 11.979 6.46554L7.95259 3.24438C7.77663 3.10362 7.52835 3.09799 7.34624 3.23039C7.34568 3.2308 7.34512 3.2312 7.34456 3.23161L3.37101 6.14556C3.33507 6.17191 3.30325 6.20261 3.27605 6.23665C3.21212 6.31668 3.17375 6.41517 3.16757 6.51902C3.16698 6.52889 3.16669 6.5388 3.16669 6.54875V6.54876M8.56531 2.4331C8.03636 2.02861 7.30406 2.02125 6.76709 2.41503L6.75611 2.42308C6.75514 2.42379 6.75416 2.4245 6.75319 2.42521L2.77964 5.33915C2.39433 5.62171 2.16669 6.07094 2.16669 6.54875V11.7087C2.16669 11.7088 2.16669 11.7088 2.16669 11.7089V12.3754C2.16669 13.2038 2.83826 13.8754 3.66669 13.8754H12.3334C13.1618 13.8754 13.8334 13.2038 13.8334 12.3754V7.20286C13.8334 6.73566 13.6157 6.29513 13.2445 6.01133L8.56531 2.4331Z"
+        fill="#2C3034"
+      />
+    </svg>
+  );
+};

package/src/ui/profile/Profile.tsx

@@ -5,7 +5,10 @@ import { useEffect } from "react";
 import PlusIcon from "../icons/plus";
 import { LogoutIcon } from "../icons/logout";
 import ExchangeIcon from "../icons/exchange";
+import { ImageView } from "../uikit/image";
+import { Loader } from "../uikit/loader";
 
+import { ConnectorType } from "../../core/OmniConnector";
 import { formatter } from "../../core/utils";
 import { OmniToken } from "../../core/chains";
 import { tokens } from "../../core/tokens";
@@ -13,8 +16,6 @@ import { tokens } from "../../core/tokens";
 import { HotConnector } from "../../HotConnector";
 import { openBridge, openConnector } from "../router";
 import { TokenCard, TokenIcon } from "../bridge/TokenCard";
-import { ImageView } from "../uikit/image";
-import { Loader } from "../uikit/loader";
 import { PopupOption } from "../styles";
 import Popup from "../Popup";
 
@@ -45,6 +46,7 @@ export const Profile = observer(({ hot, onClose }: { hot: HotConnector; onClose:
 
   const omniTokens = tokensList.filter((t) => t.chain === -4);
   const nonOmniTokens = tokensList.filter((t) => t.chain !== -4);
+  const socialConnector = hot.connectors.find((connector) => connector.type === ConnectorType.SOCIAL && connector.wallets.length > 0);
 
   useEffect(() => {
     if (hot.wallets.length > 0) return;
@@ -58,6 +60,7 @@ export const Profile = observer(({ hot, onClose }: { hot: HotConnector; onClose:
           connector.wallets.map((wallet) => (
             <WalletCard onClick={() => connector.disconnect()}>
               <ImageView src={wallet.icon} alt={connector.name} size={20} />
+              {connector.type === ConnectorType.SOCIAL && <ImageView style={{ position: "absolute", bottom: 4, left: 20 }} src={connector.icon} alt={connector.name} size={12} />}
               <div>{formatter.truncateAddress(wallet.address, 8)}</div>
               <LogoutIcon />
             </WalletCard>
@@ -76,11 +79,19 @@ export const Profile = observer(({ hot, onClose }: { hot: HotConnector; onClose:
         <PSmall>YOUR BALANCE</PSmall>
         <BalanceCard>${formatter.amount(totalBalance)}</BalanceCard>
 
-        <div style={{ width: "100%", display: "flex", gap: 12, marginTop: 24 }}>
+        <div style={{ width: "100%", display: "flex", gap: 12, marginTop: 12, flexWrap: "wrap" }}>
           <ActionButton onClick={() => (onClose(), openBridge(hot, { title: "Exchange" }))}>
             <ExchangeIcon />
             Exchange
           </ActionButton>
+
+          {socialConnector != null && (
+            <ActionButton onClick={() => socialConnector.openWallet()}>
+              <ImageView src={socialConnector.icon} alt={socialConnector.name} size={20} />
+              Open wallet
+            </ActionButton>
+          )}
+
           <ActionButton disabled onClick={() => (onClose(), openBridge(hot, { title: "Deposit" }))}>
             Deposit
           </ActionButton>
@@ -184,6 +195,7 @@ const WalletCard = styled.div`
   background: #1a1a1a;
   cursor: pointer;
   transition: background 0.2s ease-in-out;
+  position: relative;
 
   &:hover {
     background: rgba(255, 255, 255, 0.04);

package/src/ui/styles.ts

@@ -116,7 +116,7 @@ export const ModalBody = styled.div`
   text-align: center;
   gap: 4px;
   overflow: auto;
-  border-radius: 24px;
+  border-radius: 22px;
   background: rgba(255, 255, 255, 0.08);
   width: 100%;
   flex: 1;

package/src/ui/uikit/button.tsx

@@ -19,7 +19,7 @@ export const ActionButton = styled.button<{ $stroke?: boolean }>`
   flex: 1;
   width: 100%;
 
-  color: #121212;
+  color: #121212 !important;
   text-align: center;
   font-family: "Golos Text";
   font-size: 16px;
@@ -43,7 +43,7 @@ export const ActionButton = styled.button<{ $stroke?: boolean }>`
     css`
       background: transparent;
       border: 1px solid #d2d2d2;
-      color: #fff;
+      color: #fff !important;
 
       &:hover {
         background: rgba(255, 255, 255, 0.1);