@xswap-link/sdk 0.3.5 → 0.4.0

package/src/components/global.css

@@ -2,7 +2,9 @@
 @tailwind components;
 @tailwind utilities;
 
-.xpay {
+:host {
+  color: white;
+
   /* Works on Firefox */
   * {
     scrollbar-width: thin;
@@ -26,11 +28,120 @@
 }
 
 @layer components {
-  .xpay-global-border {
-    border: 1px solid rgba(255, 255, 255, 0.1);
+  .gradient-border-container-blue {
+    @apply bg-gradient-to-r from-x_blue_300 to-x_blue_400 p-[1px];
+  }
+
+  .gradient-sections-separator-container {
+    @apply bg-gradient-to-r from-transparent via-white/25 to-transparent;
+  }
+
+  .x-border {
+    @apply border border-solid border-white border-opacity-10;
   }
 
   .xpay-tx-status {
-    @apply xpay-fixed xpay-bottom-5 xpay-right-2 xpay-flex xpay-flex-col xpay-gap-3 xpay-pl-9 xpay-items-end xpay-w-full xpay-z-50;
+    @apply fixed bottom-5 right-2 flex flex-col gap-3 pl-9 items-end w-full z-50;
+  }
+
+  .x-border {
+    @apply border border-solid border-white border-opacity-10;
+  }
+
+  .selected-chain-item {
+    @apply bg-white bg-opacity-10 border-opacity-10 rounded-2xl;
+  }
+  .disabled-chain-item {
+    @apply bg-white bg-opacity-10 border-opacity-10 rounded-2xl opacity-70;
+  }
+
+  .horizontal-separator {
+    @apply h-0.5 bg-white bg-opacity-10 w-full;
+  }
+
+  .vertical-separator {
+    @apply w-0.5 bg-white bg-opacity-60 h-full;
+  }
+
+  .token-picker-container {
+    @apply flex gap-3 py-2 px-4 items-center cursor-pointer hover:bg-white hover:bg-opacity-10;
+  }
+
+  .btn {
+    @apply bg-transparent m-0 appearance-none border-none text-sm relative z-[1] text-white whitespace-nowrap;
+  }
+
+  .btn:hover {
+    @apply cursor-pointer;
+  }
+
+  .btn-disabled {
+    @apply opacity-50 text-white hover:cursor-not-allowed;
+  }
+
+  .btn-small {
+    @apply h-[26px] leading-[26px];
+  }
+
+  .btn-medium {
+    @apply h-[32px] leading-[32px];
+  }
+
+  .btn-large {
+    @apply h-[42px] leading-[42px];
+  }
+
+  .btn-contained {
+    @apply text-center border-2 border-[#375bd2] bg-white text-[#375bd2] rounded-xl px-8 hover:bg-[#375bd2] hover:text-white;
+  }
+
+  .btn-contained:before {
+    @apply content-[''] absolute transition-all duration-300 ease-out shadow-[0_0_4px_0_rgba(102,204,154,0.7)] rounded-xl bg-gradient-to-r from-x_swap_primary to-x_swap_secondary_active w-[calc(100%+4px)] h-[calc(100%+4px)] top-[-2px] left-[-2px] -z-[1] opacity-0;
+  }
+
+  .btn-contained-disabled {
+    @apply text-center opacity-50 bg-[#626262] text-white rounded-xl px-8;
   }
+
+  .btn-outlined {
+    @apply text-center text-white rounded-xl border border-white/20 px-8 hover:before:opacity-100;
+  }
+
+  .btn-outlined:before {
+    @apply content-[''] absolute transition-all duration-300 ease-out rounded-xl border-2 border-secondary-active w-full h-full top-[-2px] left-[-2px] -z-[1] opacity-0;
+  }
+
+  .btn-outlined-disabled {
+    @apply text-center opacity-50 border border-white/20 text-white rounded-xl px-8;
+  }
+
+  .btn--full-width {
+    @apply w-full;
+  }
+
+  .btn-default {
+    @apply px-8;
+  }
+
+  .btn-filled-rounded {
+    @apply flex items-center justify-center rounded-full text-white px-8 cursor-pointer whitespace-nowrap bg-gradient-to-r from-x_blue_400 to-x_blue_600;
+  }
+
+  .btn-filled-squared {
+    @apply flex items-center justify-center rounded-lg text-white px-8 cursor-pointer whitespace-nowrap bg-gradient-to-r from-x_blue_400 to-x_blue_600;
+  }
+
+  .btn-filled-rounded-secondary {
+    @apply flex items-center justify-center rounded-full text-white px-8 cursor-pointer whitespace-nowrap border border-blue;
+  }
+
+  .btn-filled-rounded-disabled {
+    @apply flex items-center justify-center opacity-50 border border-white/20 text-white bg-dark-grey rounded-full px-8 hover:cursor-not-allowed;
+  }
+}
+
+/* override notistack position */
+.SnackbarContainer-top,
+.notistack-SnackbarContainer {
+  top: 100px !important;
 }

package/src/components/index.ts

@@ -1,4 +1,21 @@
 export * from "./Alert";
+export * from "./Button";
+export * from "./ToggleButton";
+export * from "./MessageBar";
+export * from "./MessageBar/SnackMessage";
+export * from "./Modal";
+export * from "./PoweredBy";
+export * from "./SafeInput";
+export * from "./Skeleton";
+export * from "./Spinner";
+export * from "./Swap";
+export * from "./TextInput";
+export * from "./Timer";
+export * from "./TokenLogo";
+export * from "./TokenLogo/WithChain";
+export * from "./TokenLogo/Unknown";
+export * from "./Tooltip";
 export * from "./TxConfigForm";
+export * from "./TxDataCard";
 export * from "./TxStatusButton";
-export * from "./Skeleton";
+export * from "./WaitingForInit";

package/src/config/fonts.ts

@@ -0,0 +1,114 @@
+// import SatoshiVariableWOFF2 from "../fonts/Satoshi-Variable.woff2";
+// const Satosh1iVariable = `@font-face {
+//   font-family: "Satoshi-Variable";
+//   src: url(${SatoshiVariableWOFF2}) format("woff2");
+//   font-weight: 100 300 900;
+//   font-display: swap;
+//   font-style: normal;
+// }`;
+
+// import SatoshiVariableItalicWOFF2 from "../fonts/Satoshi-VariableItalic.woff2";
+// const SatoshiVariableItalic = `@font-face {
+//   font-family: "Satoshi-VariableItalic";
+//   src: url(${SatoshiVariableItalicWOFF2}) format("woff2");
+//   font-weight: 300 900;
+//   font-display: swap;
+//   font-style: italic;
+// }`;
+
+// import SatoshiLightWOFF2 from "../fonts/Satoshi-Light.woff2";
+// const SatoshiLight = `@font-face {
+//   font-family: "Satoshi-Light";
+//   src: url(${SatoshiLightWOFF2}) format("woff2");
+//   font-weight: 300;
+//   font-display: swap;
+//   font-style: normal;
+// }`;
+
+// import SatoshiLightItalicWOFF2 from "../fonts/Satoshi-LightItalic.woff2";
+// const SatoshiLightItalic = `@font-face {
+//   font-family: "Satoshi-LightItalic";
+//   src: url(${SatoshiLightItalicWOFF2}) format("woff2");
+//   font-weight: 300;
+//   font-display: swap;
+//   font-style: italic;
+// }`;
+
+// import SatoshiRegularWOFF2 from "../fonts/Satoshi-Regular.woff2";
+// const SatoshiRegular = `@font-face {
+//   font-family: "Satoshi-Regular";
+//   src: url(${SatoshiRegularWOFF2}) format("woff2");
+//   font-weight: 400;
+//   font-display: swap;
+//   font-style: normal;
+// }`;
+
+// import SatoshiRegularItalicWOFF2 from "../fonts/Satoshi-RegularItalic.woff2";
+// const SatoshiRegularItalic = `@font-face {
+//   font-family: "Satoshi-RegularItalic";
+//   src: url(${SatoshiRegularItalicWOFF2}) format("woff2");
+//   font-weight: 400;
+//   font-display: swap;
+//   font-style: italic;
+// }`;
+
+import SatoshiMediumWOFF2 from "../fonts/Satoshi-Medium.woff2";
+const SatoshiMedium = `@font-face {
+  font-family: "Satoshi-Medium";
+  src: url(${SatoshiMediumWOFF2}) format("woff2");
+  font-weight: 500;
+  font-display: swap;
+  font-style: normal;
+}`;
+
+// import SatoshiMediumItalicWOFF2 from "../fonts/Satoshi-MediumItalic.woff2";
+// const SatoshiMediumItalic = `@font-face {
+//   font-family: "Satoshi-MediumItalic";
+//   src: url(${SatoshiMediumItalicWOFF2}) format("woff2");
+//   font-weight: 500;
+//   font-display: swap;
+//   font-style: italic;
+// }`;
+
+// import SatoshiBoldWOFF2 from "../fonts/Satoshi-Bold.woff2";
+// const SatoshiBold = `@font-face {
+//   font-family: "Satoshi-Bold";
+//   src: url(${SatoshiBoldWOFF2}) format("woff2");
+//   font-weight: 700;
+//   font-display: swap;
+//   font-style: normal;
+// }`;
+
+// import SatoshiBoldItalicWOFF2 from "../fonts/Satoshi-BoldItalic.woff2";
+// const SatoshiBoldItalic = `@font-face {
+//   font-family: "Satoshi-BoldItalic";
+//   src: url(${SatoshiBoldItalicWOFF2}) format("woff2");
+//   font-weight: 700;
+//   font-display: swap;
+//   font-style: italic;
+// }`;
+
+// import SatoshiBlackWOFF2 from "../fonts/Satoshi-Black.woff2";
+// const SatoshiBlack = `@font-face {
+//   font-family: "Satoshi-Black";
+//   src: url(${SatoshiBlackWOFF2}) format("woff2");
+//   font-weight: 900;
+//   font-display: swap;
+//   font-style: normal;
+// }`;
+
+// import SatoshiBlackItalicWOFF2 from "../fonts/Satoshi-BlackItalic.woff2";
+// const SatoshiBlackItalic = `@font-face {
+//   font-family: "Satoshi-BlackItalic";
+//   src: url(${SatoshiBlackItalicWOFF2}) format("woff2");
+//   font-weight: 900;
+//   font-display: swap;
+//   font-style: italic;
+// }`;
+
+// Fonts are inlined into JS bundle when we import them and they are added into DOM when we add them to this array.
+// Use only fonts that you need.
+// We don't want to increase the bundle size unnecessarily.
+const enabledFonts = [SatoshiMedium];
+
+export const fontDefinitions = enabledFonts.join("\n");

package/src/config/global.d.ts

@@ -0,0 +1,4 @@
+declare module "*.css";
+declare module "*.ttf";
+declare module "*.woff";
+declare module "*.woff2";

package/src/config/init.tsx

@@ -1,9 +1,10 @@
-import { createRoot, Root } from "react-dom/client";
-import xswapConfig from "../../xswap.config";
-import { version } from "../../package.json";
 import { WaitingForInit } from "@src/components/WaitingForInit";
+import { createRoot, Root } from "react-dom/client";
+import CSS from "../components/global.css";
+import { fontDefinitions } from "./fonts";
 
 export let xpayRoot: Root | null = null;
+export let xpayShadowRoot: ShadowRoot | null = null;
 export let xpayInitIndicatorRoot: Root | null = null;
 export let xpayTxStatusRoot: Root | null = null;
 
@@ -17,11 +18,13 @@ export const initDocument = () => {
   }
   createXPayInitIndicatorRoot();
 
-  Promise.all([
-    createStyleElement(),
-    createXPayRoot(),
-    createXPayTxStatusRoot(),
-  ]).then(() => {
+  setupFonts();
+
+  Promise.all([createXPayRoot(), createXPayTxStatusRoot()]).then((roots) => {
+    for (const root of roots) {
+      attachStyles(root);
+    }
+
     xPayInitCompleted = true;
   });
 };
@@ -36,47 +39,48 @@ export const waitForInitialization = async () => {
   }
 };
 
-const createStyleElement = async () => {
-  if (isServer) {
+const attachStyles = async (root: ShadowRoot) => {
+  const style = document.createElement("style");
+  style.appendChild(document.createTextNode(CSS));
+  root.appendChild(style);
+};
+
+/**
+ * To let Web Components use custom fonts, we need to define them on the page's document.
+ */
+const setupFonts = () => {
+  const SELECTOR_KEY = "xpay-fonts";
+
+  if (document.querySelector(`style[data-name="${SELECTOR_KEY}"]`)) {
     return;
   }
-  const css = await fetch(
-    `${xswapConfig.apiUrl}/sdk/css?${new URLSearchParams({
-      data: JSON.stringify({ version }),
-    })}`,
-  );
-  const text = await css.text();
+
   const style = document.createElement("style");
-  style.textContent = text;
-  document.body.appendChild(style);
+  style.dataset.name = SELECTOR_KEY;
+
+  style.appendChild(document.createTextNode(fontDefinitions));
+  document.head.appendChild(style);
 };
 
 const createXPayRoot = async () => {
-  if (isServer) {
-    return;
-  }
   const xswapElement = document.createElement("div");
+  xpayShadowRoot = xswapElement.attachShadow({ mode: "open" });
   xswapElement.setAttribute("id", "xpay-root");
-  xswapElement.setAttribute("class", "xpay");
   document.body.appendChild(xswapElement);
-  xpayRoot = createRoot(xswapElement);
+  xpayRoot = createRoot(xpayShadowRoot);
+  return xpayShadowRoot;
 };
 
 const createXPayTxStatusRoot = async () => {
-  if (isServer) {
-    return;
-  }
   const txStatusElement = document.createElement("div");
+  const shadow = txStatusElement.attachShadow({ mode: "open" });
   txStatusElement.setAttribute("id", "xpay-tx-status");
-  txStatusElement.setAttribute("class", "xpay-tx-status");
   document.body.appendChild(txStatusElement);
-  xpayTxStatusRoot = createRoot(txStatusElement);
+  xpayTxStatusRoot = createRoot(shadow);
+  return shadow;
 };
 
 const createXPayInitIndicatorRoot = () => {
-  if (isServer) {
-    return;
-  }
   const initIndicatorElement = document.createElement("div");
   initIndicatorElement.setAttribute("id", "xpay-init-indicator");
   document.body.appendChild(initIndicatorElement);

package/src/constants/crosschainEstimationTimes.ts

@@ -0,0 +1,52 @@
+export const crosschainEstimationTimes = {
+  "1": {
+    "8453": 30 * 60 * 1000,
+    "42161": 30 * 60 * 1000,
+    "10": 30 * 60 * 1000,
+    "137": 30 * 60 * 1000,
+    "43114": 30 * 60 * 1000,
+  },
+  "8453": {
+    "42161": 30 * 60 * 1000,
+    "10": 30 * 60 * 1000,
+    "1": 30 * 60 * 1000,
+    "137": 30 * 60 * 1000,
+    "43114": 30 * 60 * 1000,
+  },
+  "42161": {
+    "8453": 30 * 60 * 1000,
+    "10": 30 * 60 * 1000,
+    "1": 30 * 60 * 1000,
+    "137": 30 * 60 * 1000,
+    "43114": 30 * 60 * 1000,
+  },
+  "10": {
+    "8453": 30 * 60 * 1000,
+    "42161": 30 * 60 * 1000,
+    "1": 30 * 60 * 1000,
+    "137": 30 * 60 * 1000,
+    "43114": 30 * 60 * 1000,
+  },
+  "137": {
+    "8453": 30 * 60 * 1000,
+    "42161": 30 * 60 * 1000,
+    "1": 30 * 60 * 1000,
+    "137": 30 * 60 * 1000,
+    "43114": 30 * 60 * 1000,
+  },
+  "43114": {
+    "8453": 30 * 60 * 1000,
+    "42161": 30 * 60 * 1000,
+    "1": 30 * 60 * 1000,
+    "137": 30 * 60 * 1000,
+    "43114": 30 * 60 * 1000,
+  },
+
+  // testnets
+  "43113": {
+    "80001": 30 * 60 * 1000,
+  },
+  "80001": {
+    "43113": 30 * 60 * 1000,
+  },
+};

package/src/constants/index.ts

@@ -1,4 +1,5 @@
 import { Ecosystem } from "@src/models";
+import { constants } from "ethers";
 
 export const DEFAULT_ECOSYSTEM = Ecosystem.EVM;
 export const NUMBER_INPUT_REGEX = /^[0-9]*[.,]?[0-9]*$/;
@@ -10,9 +11,14 @@ export const BALANCES_CHUNK_SIZE = 500;
 export const ROUTE_TIMEOUT_MS = 10000;
 export const MINIMUM_DISPLAYED_TOKEN_AMOUNT = 0.0001;
 export const DEFAULT_SOURCE_CHAIN_ID = "1";
+export const DEFAULT_SOURCE_TOKEN_ADDR = constants.AddressZero;
 export const CCIP_EXPLORER = "https://ccip.chain.link/";
 export const TX_RECEIPT_STATUS_LIFETIME = 60000;
 export const DEFAULT_REQUEST_ABORT_MSG = "Request deprecated";
+export const FALLBACK_CROSSCHAIN_ESTIMATION_TIME = 30 * 60 * 1000;
+export const TOTAL_QUESTS_COUNT = 2;
+export const XSWAP_STAKING_CHAIN_ID = "8453";
+export const GAS_LIMIT_MULTIPLIER = 1.1;
 
 export const MSG_SENT_EVENT_SIG =
   "MessageSent(bytes32,uint64,address,bytes,address,uint256,uint256,address,uint256)";
@@ -26,3 +32,5 @@ export const MSG_RECEIVED_EVENT_SIG =
 export const MSG_RECEIVED_EVENT_ABI = [
   "event MessageReceived(bytes32 indexed messageId, uint64 indexed sourceChainSelector, address indexed sender, bytes data, address token, uint256 tokenAmount)",
 ];
+
+export * from "./crosschainEstimationTimes";

package/src/context/GlobalDataProvider.tsx

@@ -0,0 +1,165 @@
+import { ADDRESSES } from "@src/contracts";
+import { TOTAL_QUESTS_COUNT, XSWAP_STAKING_CHAIN_ID } from "@src/constants";
+import { useXPower } from "@src/hooks";
+import {
+  Context,
+  Dispatch,
+  FC,
+  ReactNode,
+  SetStateAction,
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useState,
+} from "react";
+import { useAccount } from "wagmi";
+import { getFinishedLeaderboardQuests } from "@src/services";
+import { getBalanceOf } from "@src/utils";
+import { useSwapContext } from "@src/context/SwapProvider";
+import { Ecosystem } from "@src/models";
+
+export interface GlobalDataState {
+  rank: number;
+  setRank: Dispatch<SetStateAction<number>>;
+  xPower: string;
+  updateXPower: () => void;
+  xSwapBalance: string;
+  updateXSwapBalance: () => void;
+  unfinishedQuestsCount: number;
+  setUnfinishedQuestsCount: Dispatch<SetStateAction<number>>;
+}
+
+const initialValue: GlobalDataState = {
+  rank: 0,
+  setRank: () => {
+    throw new Error("GlobalDataState > setRank is not implemented");
+  },
+  xPower: "0",
+  updateXPower: () => {
+    throw new Error("GlobalDataState > updateXPower is not implemented");
+  },
+  xSwapBalance: "0",
+  updateXSwapBalance: () => {
+    throw new Error("GlobalDataState > updateXSwapBalance is not implemented");
+  },
+  unfinishedQuestsCount: 0,
+  setUnfinishedQuestsCount: () => {
+    throw new Error(
+      "GlobalDataState > setUnfinishedQuestsCount is not implemented",
+    );
+  },
+};
+
+const GlobalDataContext: Context<GlobalDataState> =
+  createContext<GlobalDataState>({
+    rank: initialValue.rank,
+    setRank: initialValue.setRank,
+    xPower: initialValue.xPower,
+    updateXPower: initialValue.updateXPower,
+    xSwapBalance: initialValue.xSwapBalance,
+    updateXSwapBalance: initialValue.updateXSwapBalance,
+    unfinishedQuestsCount: initialValue.unfinishedQuestsCount,
+    setUnfinishedQuestsCount: initialValue.setUnfinishedQuestsCount,
+  });
+
+export const GlobalDataProvider: FC<{ children: ReactNode }> = ({
+  children,
+}) => {
+  const { address } = useAccount();
+  const [unfinishedQuestsCount, setUnfinishedQuestsCount] = useState(
+    initialValue.unfinishedQuestsCount,
+  );
+  const [rank, setRank] = useState(initialValue.rank);
+  const [xPower, setXPower] = useState(initialValue.xPower);
+  const [xSwapBalance, setXSwapBalance] = useState(initialValue.xSwapBalance);
+  const { getXPower } = useXPower(XSWAP_STAKING_CHAIN_ID);
+
+  const { supportedChains } = useSwapContext();
+
+  const getFinishedQuests = useCallback(async () => {
+    if (!address) {
+      return;
+    }
+    const response = await getFinishedLeaderboardQuests({
+      walletAddress: address.toLowerCase(),
+    });
+
+    if (!response.ok) {
+      throw Error("Could not fetch quests statuses.");
+    }
+    const finishedQuestsResponse = await response.json();
+    if (finishedQuestsResponse.quests) {
+      const questsLeft = Math.max(
+        TOTAL_QUESTS_COUNT - (finishedQuestsResponse.quests.length || 0),
+        0,
+      );
+      setUnfinishedQuestsCount(questsLeft);
+    }
+  }, [address]);
+
+  const fetchXPower = useCallback(async () => {
+    if (address) {
+      const response = await getXPower(address);
+      setXPower(response);
+    } else {
+      setXPower("0");
+    }
+  }, [getXPower, address]);
+
+  const fetchXSwapBalance = useCallback(async () => {
+    const rpcUrl = supportedChains.find(
+      (chain) =>
+        chain.ecosystem === Ecosystem.EVM &&
+        chain.chainId === XSWAP_STAKING_CHAIN_ID,
+    )?.publicRpcUrls[0];
+
+    if (
+      address &&
+      rpcUrl &&
+      ADDRESSES[XSWAP_STAKING_CHAIN_ID] &&
+      ADDRESSES[XSWAP_STAKING_CHAIN_ID].XSwapToken
+    ) {
+      const response = await getBalanceOf(
+        address,
+        ADDRESSES[XSWAP_STAKING_CHAIN_ID].XSwapToken,
+        rpcUrl,
+      );
+      setXSwapBalance(response);
+    } else {
+      setXSwapBalance("0");
+    }
+  }, []);
+
+  useEffect(() => {
+    getFinishedQuests();
+  }, [getFinishedQuests]);
+
+  useEffect(() => {
+    fetchXPower();
+  }, [fetchXPower]);
+
+  useEffect(() => {
+    fetchXSwapBalance();
+  }, [fetchXSwapBalance]);
+
+  return (
+    <GlobalDataContext.Provider
+      value={{
+        rank,
+        setRank,
+        xPower,
+        updateXPower: () => fetchXPower(),
+        xSwapBalance,
+        updateXSwapBalance: () => fetchXSwapBalance(),
+        unfinishedQuestsCount,
+        setUnfinishedQuestsCount,
+      }}
+    >
+      {children}
+    </GlobalDataContext.Provider>
+  );
+};
+
+export const useGlobalData = (): GlobalDataState =>
+  useContext(GlobalDataContext);