Merge pull request #25 from SocketDotTech/prod

Release - v0.0.14

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@socket.tech/widget",
-  "version": "0.0.11",
+  "version": "0.0.14",
   "main": "dist/index.js",
   "module": "dist/index.es.js",
   "types": "dist/index.d.ts",
@@ -16,10 +16,10 @@
     "@react-spring/web": "^9.5.0",
     "@reduxjs/toolkit": "^1.8.2",
     "@socket.tech/ll-core": "^0.1.10",
+    "@socket.tech/socket-v2-sdk": "^1.20.0",
     "ethers": "^5.6.9",
     "react-feather": "^2.0.10",
     "react-redux": "^8.0.2",
-    "socket-v2-sdk": "^1.16.0",
     "swr": "^1.3.0"
   },
   "peerDependencies": {

src/components/Input.tsx

@@ -240,13 +240,19 @@ export const Input = ({
       updateInputAmount(_formattedAmount);
       parseInputAmount(_formattedAmount);
     }
-
     // Condition to leave some native tokens for transaction fee.
     if (sourceToken.address === NATIVE_TOKEN_ADDRESS) {
       // subtracting min gas from the total amount
       const minGas =
         mappedChainData[sourceChainId].currency.minNativeCurrencyForGas;
-      const minGasBN = ethers.BigNumber.from(minGas);
+      let minGasBN;
+      minGasBN = ethers.BigNumber.from(minGas);
+
+      // In case of ethereum we have divided the value by 1.7
+      if(sourceChainId === 1){
+        minGasBN = minGasBN.mul(17);
+        minGasBN = minGasBN.div(10);
+      } 
       const balanceBN = ethers.BigNumber.from(balance);
 
       if (minGasBN.lt(balanceBN)) {
@@ -261,7 +267,7 @@ export const Input = ({
                 href="https://www.bungee.exchange/refuel"
                 target="_blank"
                 rel="noopener noreferrer"
-                className="text-widget-accent text-medium"
+                className="skt-w skt-w-anchor text-widget-accent text-medium"
               >
                 Refuel
               </a>{" "}
@@ -279,10 +285,10 @@ export const Input = ({
   }, []);
 
   return (
-    <div className="mt-3.5">
-      <div className="flex items-center justify-between">
-        <div className="flex items-center gap-1.5">
-          <span className="text-widget-secondary text-sm">From</span>
+    <div className="skt-w mt-3.5">
+      <div className="skt-w flex items-center justify-between">
+        <div className="skt-w flex items-center gap-1.5">
+          <span className="skt-w text-widget-secondary text-sm">From</span>
           <ChainSelect
             networks={supportedNetworks}
             activeNetworkId={sourceChainId}

src/components/Output.tsx

@@ -204,10 +204,10 @@ export const Output = ({
   useDebounce(() => dispatch(setDestToken(_destToken)), 300, [_destToken]);
 
   return (
-    <div className="mt-6">
-      <div className="flex items-center justify-between">
-        <div className="flex items-center gap-x-1.5">
-          <span className="text-widget-secondary text-sm">To</span>
+    <div className="skt-w mt-6">
+      <div className="skt-w flex items-center justify-between">
+        <div className="skt-w flex items-center gap-x-1.5">
+          <span className="skt-w text-widget-secondary text-sm">To</span>
           <ChainSelect
             networks={supportedNetworksSubset}
             activeNetworkId={destChainId}

src/components/PendingTransactions.tsx

@@ -1,6 +1,6 @@
 import { useContext, useEffect, useState } from "react";
 import { useDispatch } from "react-redux";
-import { ActiveRouteResponse } from "socket-v2-sdk";
+import { ActiveRouteResponse } from "@socket.tech/socket-v2-sdk";
 import { CustomizeContext } from "../providers/CustomizeProvider";
 
 // components
@@ -51,7 +51,7 @@ export const PendingTransactions = () => {
     return (
       <>
         <button
-          className="uppercase text-sm px-2 py-0.5 bg-widget-accent shadow-inner bg-opacity-90 text-widget-onAccent"
+          className="skt-w skt-w-button skt-w-input uppercase text-sm px-2 py-0.5 bg-widget-accent shadow-inner bg-opacity-90 text-widget-onAccent"
           onClick={() => setIsModalOpen(true)}
           style={{ borderRadius: `calc(0.75rem * ${borderRadius})` }}
         >
@@ -66,7 +66,7 @@ export const PendingTransactions = () => {
                 closeModal={() => setIsModalOpen(false)}
                 style={style}
               >
-                <div className="flex flex-col justify-start p-1 flex-1 overflow-y-auto">
+                <div className="skt-w flex flex-col justify-start p-1 flex-1 overflow-y-auto">
                   {activeRoutes?.map((route: any) => {
                     const refuelSourceToken = {
                       amount: route?.refuel?.fromAmount,
@@ -95,7 +95,7 @@ export const PendingTransactions = () => {
                     );
                   })}
 
-                  <p className="text-widget-secondary text-xs px-3 py-2 text-left">
+                  <p className="skt-w text-widget-secondary text-xs px-3 py-2 text-left">
                     Showing {activeRoutes?.length}/{totalRoutes} active routes
                   </p>
                 </div>

src/components/Refuel.tsx

@@ -28,17 +28,17 @@ export const Refuel = () => {
 
   return (
     <div
-      className="flex gap-1 bg-widget-secondary py-3 pl-4 pr-3 justify-between mt-6 items-center"
+      className="skt-w flex gap-1 bg-widget-secondary py-3 pl-4 pr-3 justify-between mt-6 items-center"
       style={{ borderRadius: `calc(0.5rem * ${borderRadius})` }}
     >
       <div>
-        <p className="text-sm text-widget-primary font-medium flex items-center">
+        <p className="skt-w text-sm text-widget-primary font-medium flex items-center">
           Enable Refuel
-          {/* <Info className="ml-1.5 w-3.5 h-3.5 opacity-70"/> */}
+          {/* <Info className="skt-w ml-1.5 w-3.5 h-3.5 opacity-70"/> */}
         </p>
-        <p className="text-xs text-widget-secondary mt-0.5">
+        <p className="skt-w text-xs text-widget-secondary mt-0.5">
           {destChainId === 1 ? (
-            <span className="text-red-500">
+            <span className="skt-w text-red-500">
               Refuel isn't supported on Ethereum
             </span>
           ) : (

src/components/RouteDetails/ReviewModal.tsx

@@ -66,16 +66,16 @@ export const ReviewModal = ({
       closeModal={showTxDetails ? () => setShowTxDetails(!showTxDetails) : closeModal}
       style={style}
     >
-      <div className="flex flex-col justify-between flex-1 relative">
-        <div className="w-full">
+      <div className="skt-w flex flex-col justify-between flex-1 relative">
+        <div className="skt-w w-full">
           <TokenDetailsRow 
             srcDetails={{token: selectedRoute?.path?.fromToken, amount: selectedRoute?.amount}}
             destDetails={{token: selectedRoute?.path?.toToken, amount: selectedRoute?.route?.toAmount}}
             srcRefuel={refuelSourceToken}
             destRefuel={refuelDestToken}
           />
 
-          <div className="p-3 flex flex-col gap-3 mt-1">
+          <div className="skt-w p-3 flex flex-col gap-3 mt-1">
             <RouteDetailRow
               label="Bridge Name"
               value={
@@ -100,36 +100,36 @@ export const ReviewModal = ({
             showTxDetails ? `h-full max-h-full` : "h-auto max-h-min"
           }`}
         >
-          <div className="flex-1 flex flex-col overflow-auto">
+          <div className="skt-w flex-1 flex flex-col overflow-auto">
             <button
-              className="flex items-center gap-1.5 text-sm text-widget-secondary mb-3"
+              className="skt-w skt-w-button skt-w-input flex items-center gap-1.5 text-sm text-widget-secondary mb-3"
               onClick={() => setShowTxDetails(!showTxDetails)}
             >
               <ChevronUp
-                className={`w-4 h-4 text-widget-secondary transition-all ${
+                className={`skt-w w-4 h-4 text-widget-secondary transition-all ${
                   showTxDetails ? "rotate-180" : "rotate-0"
                 }`}
               />{" "}
               See route details
             </button>
 
             {showTxDetails && (
-              <div className="mb-3 flex-1 overflow-y-auto">
+              <div className="skt-w mb-3 flex-1 overflow-y-auto">
                 <TxStepDetails activeRoute={selectedRoute?.route} forReview refuel={selectedRoute?.refuel}/>
               </div>
             )}
           </div>
 
           <div
-            className={`h-14 transition-all duration-300 flex justify-between items-center border ${
+            className={`skt-w h-14 transition-all duration-300 flex justify-between items-center border ${
               quoteUpdated
                 ? "border-widget-outline p-1 pl-2"
                 : "border-transparent"
             }`}
             style={{ borderRadius: `calc(0.875rem * ${borderRadius})` }}
           >
             {quoteUpdated && (
-              <span className="whitespace-nowrap w-full text-widget-secondary text-sm text-left">
+              <span className="skt-w whitespace-nowrap w-full text-widget-secondary text-sm text-left">
                 Quote updated
               </span>
             )}
@@ -149,7 +149,7 @@ export const ReviewModal = ({
 
 const RouteDetailRow = ({ label, value }: { label: string; value: string }) => {
   return (
-    <div className="w-full flex justify-between text-sm text-widget-secondary">
+    <div className="skt-w w-full flex justify-between text-sm text-widget-secondary">
       <span>{label}</span>
       <span>{value}</span>
     </div>

src/components/RouteDetails/index.tsx

@@ -108,7 +108,7 @@ export const RouteDetails = () => {
 
   return (
     <InnerCard>
-      <div className="text-widget-secondary mb-3 text-sm flex items-center gap-1">
+      <div className="skt-w text-widget-secondary mb-3 text-sm flex items-center gap-1">
         {sourceAmount && sourceAmount !== "0" && isQuotesLoading && (
           <Spinner size={4} />
         )}{" "}
@@ -120,14 +120,15 @@ export const RouteDetails = () => {
       >
         {getButtonStatus()}
       </Button>
-      <div className="flex items-center justify-between text-widget-secondary mt-2.5 text-xs">
-        <a href="http://socket.tech/" target="_blank" rel="noopener noreferrer">
+      <div className="skt-w flex items-center justify-between text-widget-secondary mt-2.5 text-xs">
+        <a href="http://socket.tech/" target="_blank" rel="noopener noreferrer" className="skt-w skt-w-anchor">
           Powered by Socket
         </a>
         <a
           href="https://socketdottech.zendesk.com/hc/en-us"
           target="_blank"
           rel="noopener noreferrer"
+          className="skt-w skt-w-anchor"
         >
           Support
         </a>

src/components/Settings/index.tsx

@@ -63,26 +63,26 @@ export const Settings = () => {
               closeModal={() => setIsSettingsOpen(false)}
               style={style}
             >
-              <div className="px-3 flex items-center mt-2 gap-2">
-                <p className="text-sm text-widget-secondary font-medium my-2 gap-8">
-                  Sort
+              <div className="skt-w px-3 flex items-center mt-2 gap-2">
+                <p className="skt-w text-sm text-widget-secondary font-medium my-2 gap-8">
+                  Preferred Route
                 </p>
                 <div
-                  className="relative border border-widget-secondary-text border-opacity-10 flex w-auto"
+                  className="skt-w relative border border-widget-secondary-text border-opacity-10 flex w-auto"
                   style={{ borderRadius: `calc(0.5rem * ${borderRadius})` }}
                   ref={dropdownRef}
                 >
                   <Option onClick={() => openDropdown(!dropdown)} active>
                     {label}{" "}
                     <ChevronDown
-                      className={`w-4 h-4 text-widget-secondary transition-all ${
+                      className={`skt-w w-4 h-4 text-widget-secondary transition-all ${
                         dropdown ? "rotate-180" : ""
                       }`}
                     />
                   </Option>
                   {dropdown && (
                     <div
-                      className="absolute top-10 left-0 w-full border border-widget-secondary-text border-opacity-10 overflow-hidden"
+                      className="skt-w absolute top-10 left-0 w-full border border-widget-secondary-text border-opacity-10 overflow-hidden"
                       style={{ borderRadius: `calc(0.5rem * ${borderRadius})` }}
                     >
                       {sortOptions.map((x) => {
@@ -99,8 +99,8 @@ export const Settings = () => {
             </Modal>
           )
       )}
-      <button onClick={() => setIsSettingsOpen(true)}>
-        <SettingsIcon className="w-5.5 h-5.5 text-widget-secondary hover:text-widget-primary hover:rotate-45 duration-200 ease-linear" />
+      <button onClick={() => setIsSettingsOpen(true)} className="skt-w skt-w-button skt-w-input flex">
+        <SettingsIcon className="skt-w w-5.5 h-5.5 text-widget-secondary hover:text-widget-primary hover:rotate-45 duration-200 ease-linear" />
       </button>
     </>
   );
@@ -117,7 +117,7 @@ const Option = ({
 }) => {
   return (
     <button
-      className={`w-32 px-2 py-2 text-widget-secondary text-sm flex items-center justify-between gap-2 ${
+      className={`skt-w skt-w-input skt-w-button w-32 px-2 py-2 text-widget-secondary text-sm flex items-center justify-between gap-2 ${
         active ? "" : "hover:bg-widget-secondary"
       }`}
       onClick={onClick}

src/components/TokenInput/TokenSelect.tsx

@@ -91,16 +91,16 @@ export const TokenSelect = (props: Props) => {
       {activeToken && (
         <button
           onClick={() => setOpenTokenList(!openTokenList)}
-          className={`flex items-center flex-1 bg-widget-interactive flex-shrink-0 flex-nowrap w-auto overflow-hidden p-1 gap-1 text-widget-on-interactive`}
+          className={`skt-w skt-w-input skt-w-button flex items-center flex-1 bg-widget-interactive flex-shrink-0 flex-nowrap w-auto overflow-hidden p-1 gap-1 text-widget-on-interactive`}
           style={{ borderRadius: `calc(1rem * ${borderRadius})` }}
         >
           <img
             src={activeToken?.logoURI}
-            className="h-6 w-6 rounded-full mr-1 border"
+            className="skt-w h-6 w-6 rounded-full mr-1 border"
           />
-          <div className="flex items-center gap-0.5">
+          <div className="skt-w flex items-center gap-0.5">
             <span>{activeToken?.symbol}</span>
-            <ChevronDown className="w-4 h-4" />
+            <ChevronDown className="skt-w w-4 h-4" />
           </div>
         </button>
       )}
@@ -113,26 +113,26 @@ export const TokenSelect = (props: Props) => {
               closeModal={() => setOpenTokenList(false)}
               style={style}
             >
-              <div className="h-full overflow-y-auto p-1.5">
+              <div className="skt-w h-full overflow-y-auto p-1.5">
                 {filteredTokens?.map((token: Currency) => {
                   return (
                     <button
-                      className="flex hover:bg-widget-secondary items-center p-2 w-full justify-between"
+                      className="skt-w skt-w-input skt-w-button flex hover:bg-widget-secondary items-center p-2 w-full justify-between"
                       onClick={() => selectToken(token)}
                       key={token?.address}
                       style={{ borderRadius: `calc(0.5rem * ${borderRadius})` }}
                     >
-                      <div className="flex items-center">
+                      <div className="skt-w flex items-center">
                         <img
                           src={token?.logoURI}
-                          className="w-6 h-6 rounded-full"
+                          className="skt-w w-6 h-6 rounded-full"
                         />
-                        <div className="flex flex-col items-start ml-2 text-widget-secondary">
-                          <span className="text-sm">{token?.symbol}</span>
-                          <span className="text-xs -mt-0.5">{token?.name}</span>
+                        <div className="skt-w flex flex-col items-start ml-2 text-widget-secondary">
+                          <span className="skt-w text-sm">{token?.symbol}</span>
+                          <span className="skt-w text-xs -mt-0.5">{token?.name}</span>
                         </div>
                       </div>
-                      <span className="text-widget-secondary text-xs text-right font-medium">
+                      <span className="skt-w text-widget-secondary text-xs text-right font-medium">
                         {showBalance(token)}
                       </span>
                     </button>

src/components/TokenInput/index.tsx

@@ -23,10 +23,10 @@ export const TokenInput = (props: TokenInputProps) => {
     noTokens = false,
   } = props;
   return (
-    <div className="flex items-center justify-between mt-2.5 overflow-hidden">
-      <div className="flex flex-1">
+    <div className="skt-w flex items-center justify-between mt-2.5 overflow-hidden">
+      <div className="skt-w flex flex-1">
         <input
-          className={`text-widget-primary text-3xl focus:outline-none w-full h-full overflow-ellipsis bg-transparent`}
+          className={`skt-w skt-w-input text-widget-primary text-3xl focus:outline-none w-full h-full overflow-ellipsis bg-transparent`}
           value={amount}
           onChange={(e) => onChangeInput(e.target.value)}
           placeholder="0.0"