bump : squid widget (#3677)

* bump : squid widget

* fix

Author: thelostone-mc

packages/grant-explorer/src/features/api/oso.ts

@@ -1,6 +1,5 @@
 import { useState } from "react";
 import useSWR from "swr";
-import { Hex } from "viem";
 import { gql, GraphQLClient } from "graphql-request";
 
 const osoApiKey = process.env.REACT_APP_OSO_API_KEY as string;

packages/grant-explorer/src/features/common/GenericModal.tsx

@@ -10,6 +10,7 @@ interface InfoModalProps {
     | React.Dispatch<React.SetStateAction<boolean>>
     | ((flag: boolean) => void);
   children?: ReactNode;
+  isIframe?: boolean;
 }
 
 export default function InfoModal({
@@ -57,7 +58,11 @@ export default function InfoModal({
               leaveFrom="opacity-100 translate-y-0 sm:scale-100"
               leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
             >
-              <Dialog.Panel className="relative bg-white px-4 pt-5 pb-4 text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:max-w-lg sm:w-full sm:p-6">
+              <Dialog.Panel
+                className={`relative ${
+                  props.isIframe ? "" : "bg-white shadow-xl"
+                } px-4 pt-5 pb-4 text-left overflow-hidden transform transition-all sm:my-8 sm:max-w-lg sm:w-full sm:p-6`}
+              >
                 <div className="sm:flex sm:items-start flex-col">
                   <div className="mt-3 text-center sm:mt-0 sm:text-left w-full">
                     <Dialog.Title

packages/grant-explorer/src/features/round/ViewCartPage/ChainConfirmationModalBody.tsx

@@ -4,7 +4,6 @@ import { TToken, getChainById, stringToBlobUrl } from "common";
 import { useCartStorage } from "../../../store";
 import { parseChainId } from "common/src/chains";
 import { Checkbox } from "@chakra-ui/react";
-import { SwapParams } from "./SquidWidget";
 
 type ChainConfirmationModalBodyProps = {
   projectsByChain: { [chain: number]: CartProject[] };

packages/grant-explorer/src/features/round/ViewCartPage/SquidWidget.tsx

@@ -1,95 +1,50 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 
 export type SwapParams = {
-  initialFromChainId: number;
-  initialToChainId: number;
+  fromChainId: string;
+  toChainId: string;
   // amount: string;
-  fromTokenAddress: string;
-  toTokenAddress: string;
+  fromTokenAddress?: string;
+  toTokenAddress?: string;
 };
 
 const SquidWidget = ({
-  integratorId = 'squid-swap-widget',
-  companyName = 'Gitcoin',
-  neutralContent = '#C4AEEC',
-  baseContent = '#070002',
-  base100 = '#ffffff',
-  base200 = '#fafafa',
-  base300 = '#e8e8e8',
-  error = '#ED6A5E',
-  warning = '#FFB155',
-  success = '#2EAEB0',
-  primary = '#A992EA',
-  secondary = '#F89CC3',
-  secondaryContent = '#F7F6FB',
-  neutral = '#FFFFFF',
-  roundedBtn = '26px',
-  roundedCornerBtn = '999px',
-  roundedBox = '1rem',
-  roundedDropDown = '20rem',
-  slippage = 1.5,
-  infiniteApproval = false,
-  enableExpress = true,
-  apiUrl = 'https://api.squidrouter.com',
-  comingSoonChainIds = [],
-  iframeBackgroundColorHex = '#FFF',
-  initialFromChainId = 1,
-  initialToChainId = 10,
-  fromTokenAddress = "0xEeeeeEeeeEeEeeEeEeEeeEEEeeeeEeeeeeeeEEeE",
-  toTokenAddress = "0xEeeeeEeeeEeEeeEeEeEeeEEEeeeeEeeeeeeeEEeE",
-}) => {
+  fromChainId,
+  toChainId,
+  fromTokenAddress,
+  toTokenAddress,
+}: SwapParams) => {
+
+  console.log('fromChainId', fromChainId);
+  console.log('toChainId', toChainId);
+  console.log('fromTokenAddress', fromTokenAddress);
+  console.log('toTokenAddress', toTokenAddress);
+
   // State to manage loading
   const [loading, setLoading] = useState(true);
 
   // Construct the config object
   const config = {
-    integratorId,
-    companyName,
-    style: {
-      neutralContent,
-      baseContent,
-      base100,
-      base200,
-      base300,
-      error,
-      warning,
-      success,
-      primary,
-      secondary,
-      secondaryContent,
-      neutral,
-      roundedBtn,
-      roundedCornerBtn,
-      roundedBox,
-      roundedDropDown,
-    },
-    slippage,
-    infiniteApproval,
-    enableExpress,
-    apiUrl,
-    comingSoonChainIds,
-    environment: 'mainnet',
-    showOnRampLink: true,
-    iframeBackgroundColorHex,
-    initialFromChainId,
-    initialToChainId,
-    defaultTokens: [
-      {
-        address: fromTokenAddress, 
-        chainId: initialFromChainId,
+    integratorId: "squid-swap-widget",
+    instantExec: true,
+    apiUrl: "https://apiplus.squidrouter.com",
+    initialAssets: {
+      from: {
+        chainId: fromChainId,
+        address: fromTokenAddress?.toLowerCase(),
       },
-      {
-        address: toTokenAddress,
-        chainId: initialToChainId,
+      to: {
+        chainId: toChainId,
+        address: toTokenAddress?.toLowerCase(),
       },
-    ],
+    },
   };
 
   // Convert config object to a URI-encoded JSON string
   const configString = encodeURIComponent(JSON.stringify(config));
 
   // Construct the iframe URL
-  const iframeUrl = `https://widget.squidrouter.com/iframe?config=${configString}`;
+  const iframeUrl = `https://studio.squidrouter.com/iframe?config=${configString}`;
 
   // Handler for when iframe loads
   const handleIframeLoad = () => {
@@ -98,27 +53,13 @@ const SquidWidget = ({
 
   return (
     <div style={{ position: "relative", width: "500", height: "684px" }}>
-      {loading && (
-        <div
-          style={{
-            position: "absolute",
-            top: "50%",
-            left: "50%",
-            transform: "translate(-50%, -50%)",
-            fontSize: "18px",
-            color: "#333",
-          }}
-        >
-          Loading...
-        </div>
-      )}
       <iframe
         title="squid_widget"
         width="500"
         height="684"
         src={iframeUrl}
         onLoad={handleIframeLoad}
-        style={{ display: loading ? "none" : "block" }} // Hide iframe until loaded
+        style={{ display: "block" }}
       />
     </div>
   );

packages/grant-explorer/src/features/round/ViewCartPage/SummaryContainer.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable no-unexpected-multiline */
-import { getTokenPrice, NATIVE, submitPassportLite } from "common";
+import { getTokenPrice, submitPassportLite } from "common";
 import { useCartStorage } from "../../../store";
 import { useEffect, useMemo, useState } from "react";
 import { Summary } from "./Summary";
@@ -31,7 +31,6 @@ import { useDataLayer } from "data-layer";
 import { isPresent } from "ts-is-present";
 import { getFormattedRoundId } from "../../common/utils/utils";
 import { datadogLogs } from "@datadog/browser-logs";
-import { SwapParams } from "./SquidWidget";
 
 export function SummaryContainer(props: {
   enoughBalanceByChainId: Record<number, boolean>;

packages/grant-explorer/src/features/round/ViewCartPage/ViewCartPage.tsx

@@ -36,7 +36,14 @@ export default function ViewCart() {
   const chainIds = Object.keys(groupedCartProjects);
 
   const [openSwapModel, setOpenSwapModal] = useState<boolean>(false);
-  const [swapParams, setSwapParams] = useState<SwapParams>();
+  const [swapParams, setSwapParams] = useState<SwapParams>(
+    {
+      fromChainId: "1",
+      toChainId: "42161",
+      fromTokenAddress: "0xEeeeeEeeeEeEeeEeEeEeeEEEeeeeEeeeeeeeEEeE",
+      toTokenAddress: "0xEeeeeEeeeEeEeeEeEeEeeEEEeeeeEeeeeeeeEEeE",
+    }
+  );
 
   const handleSwap = (params: SwapParams) => {
     setSwapParams(params);
@@ -208,10 +215,11 @@ export default function ViewCart() {
 
   const swap = (_chainId: number | string) => {
     const chainId = Number(_chainId);
+    const isConnectedChain = !connectedChain || connectedChain === chainId;
+
     handleSwap({
-      initialFromChainId:
-        !connectedChain || connectedChain === chainId ? 1 : connectedChain,
-      initialToChainId: chainId,
+      fromChainId: isConnectedChain ? "1" : connectedChain.toString(),
+      toChainId: chainId.toString(),
       fromTokenAddress: "0xEeeeeEeeeEeEeeEeEeEeeEEEeeeeEeeeeeeeEEeE",
       toTokenAddress: getVotingTokenForChain(chainId).address,
     });
@@ -269,6 +277,7 @@ export default function ViewCart() {
             )}
           </div>
           <GenericModal
+            isIframe={true}
             body={<SquidWidget {...swapParams} />}
             isOpen={openSwapModel}
             setIsOpen={swapModalHandler}