superfluid-org · kasparkallas · Sep 5, 2023 · Sep 5, 2023 · Sep 6, 2023 · Sep 6, 2023
diff --git a/.changeset/nasty-insects-live.md b/.changeset/nasty-insects-live.md
diff --git a/.changeset/neat-impalas-sparkle.md b/.changeset/neat-impalas-sparkle.md
diff --git a/apps/hosted-widget/package.json b/apps/hosted-widget/package.json
@@ -27,8 +27,8 @@
     "react": "^18.2.0",
     "react-blockies": "^1.4.1",
     "react-dom": "^18.2.0",
-    "viem": "^1.11.0",
-    "wagmi": "^1.4.2",
+    "viem": "^1.10.9",
+    "wagmi": "^1.4.1",
     "zod": "^3.21.4"
   },
   "devDependencies": {

diff --git a/apps/hosted-widget/src/utils/deleteDemoFlow.ts b/apps/hosted-widget/src/utils/deleteDemoFlow.ts
@@ -1,6 +1,6 @@
 import { cfAv1ForwarderABI } from "@superfluid-finance/widget";
 import { getContract } from "viem";
-import { polygonMumbai } from "wagmi/chains";
+import { polygonMumbai } from "viem/chains";
 
 import { wagmiConfigDemo } from "../DEMO-wagmi";
 

diff --git a/apps/widget-builder/src/components/payment-option-view/PaymentOptionView.tsx b/apps/widget-builder/src/components/payment-option-view/PaymentOptionView.tsx
@@ -19,12 +19,12 @@ import {
   FlowRate,
   supportedNetworks,
 } from "@superfluid-finance/widget";
-import superTokenList from "@superfluid-finance/widget/tokenlist";
 import Image from "next/image";
 import { FC, ReactNode, useMemo } from "react";
 import { getAddress } from "viem";
 
 import NetworkAvatar from "../NetworkAvatar";
+import { widgetTokenList } from "../widget-preview/WidgetPreview";
 
 type PaymentOptionRowProps = {
   label: string;
@@ -91,11 +91,11 @@ const PaymentOptionView: FC<PaymentOptionViewProps> = ({
 
   const token = useMemo(
     () =>
-      Object.values(superTokenList.tokens).find(
+      Object.values(widgetTokenList.tokens).find(
         (token) =>
           token.address.toLowerCase() === superToken.address.toLowerCase(),
       ),
-    [superTokenList, superToken.address],
+    [superToken.address],
   );
 
   const flowRateValue = useMemo(() => {

diff --git a/apps/widget-builder/src/components/select-payment-option/SelectPaymentOption.tsx b/apps/widget-builder/src/components/select-payment-option/SelectPaymentOption.tsx
@@ -41,7 +41,7 @@ import { ZodError } from "zod";
 
 import InputWrapper, { InputInfo } from "../form/InputWrapper";
 import NetworkAvatar from "../NetworkAvatar";
-import { WidgetProps } from "../widget-preview/WidgetPreview";
+import { WidgetProps, widgetTokenList } from "../widget-preview/WidgetPreview";
 
 export type PaymentOptionWithSuperTokenAndNetwork = {
   network: NetworkAssetInfo;
@@ -85,7 +85,7 @@ const SelectPaymentOption: FC<PaymentOptionSelectorProps> = ({
 
       if (value.superToken) {
         setSelectedToken(
-          tokenList.tokens.find(
+          widgetTokenList.tokens.find(
             ({ address }) =>
               address.toLowerCase() === value.superToken.address.toLowerCase(),
           ) ?? null,
@@ -180,7 +180,7 @@ const SelectPaymentOption: FC<PaymentOptionSelectorProps> = ({
     const network = supportedNetworks.find(
       ({ name }) => name === selectedNetwork?.name,
     );
-    return tokenList.tokens.filter(
+    return widgetTokenList.tokens.filter(
       (token) =>
         token.chainId === network?.id && token.tags?.includes("supertoken"),
     );

diff --git a/apps/widget-builder/src/components/terms-and-privacy/TermsAndPrivacy.tsx b/apps/widget-builder/src/components/terms-and-privacy/TermsAndPrivacy.tsx
@@ -2,6 +2,7 @@ import { Box } from "@mui/material";
 import { FC } from "react";
 
 import Link from "../../Link";
+import { goerliPermitTokens } from "../widget-preview/WidgetPreview";
 
 const TermsAndPrivacy: FC = () => (
   <Box
@@ -12,6 +13,19 @@ const TermsAndPrivacy: FC = () => (
       left: "540px",
     }}
   >
+    <Link
+      sx={{
+        fontWeight: 600,
+      }}
+      target="_blank"
+      href={`https://goerli.etherscan.io/token/${
+        goerliPermitTokens.find((x) => (x.tags ?? []).includes("underlying"))!
+          .address
+      }#writeContract#F4`}
+    >
+      {"Click here to mint Permit Super Token's underlying token on Goerli!"}
+    </Link>
+    <br />
     <Link
       data-testid="terms-link"
       href="https://www.superfluid.finance/termsofuse/"

diff --git a/apps/widget-builder/src/components/widget-preview/WidgetPreview.tsx b/apps/widget-builder/src/components/widget-preview/WidgetPreview.tsx
@@ -4,7 +4,10 @@ import SuperfluidWidget, {
   ProductDetails,
   WalletManager,
 } from "@superfluid-finance/widget";
-import tokenList from "@superfluid-finance/widget/tokenlist";
+import tokenList, {
+  SuperTokenList,
+  TokenInfo,
+} from "@superfluid-finance/widget/tokenlist";
 import { useWeb3Modal } from "@web3modal/react";
 import {
   createContext,
@@ -18,6 +21,70 @@ import {
 
 import useFontLoader from "../../hooks/useFontLoader";
 
+const mumbaiPermitTokens: TokenInfo[] = [
+  {
+    address: "0x50c988f2c2cce525cc2067c93b8c4a43ec62a166",
+    name: "PERMIT: Super fUSDC Fake Token",
+    symbol: "pfUSDCx",
+    decimals: 18,
+    chainId: 80001,
+    extensions: {
+      superTokenInfo: {
+        type: "Wrapper",
+        underlyingTokenAddress: "0x60974a03baaa984ea79f4590ac1e88aaae31158a",
+      },
+    },
+    logoURI:
+      "https://raw.githubusercontent.com/superfluid-finance/assets/master/public/tokens/usdc/icon.svg",
+    tags: ["supertoken", "testnet"],
+  },
+  {
+    address: "0x60974a03baaa984ea79f4590ac1e88aaae31158a",
+    name: "PERMIT: fUSDC Fake Token",
+    symbol: "pfUSDC",
+    decimals: 18,
+    chainId: 80001,
+    logoURI:
+      "https://raw.githubusercontent.com/superfluid-finance/assets/master/public/tokens/usdc/icon.svg",
+    tags: ["permit", "underlying", "testnet"],
+  },
+];
+
+export const goerliPermitTokens: TokenInfo[] = [
+  {
+    address: "0x19E6F96A887D0a27d60ef63942d7BF707fb1aD08",
+    name: "PERMIT: Super fUSDC Fake Token",
+    symbol: "pfUSDCx",
+    decimals: 18,
+    chainId: 5,
+    extensions: {
+      superTokenInfo: {
+        type: "Wrapper",
+        underlyingTokenAddress: "0xc3cA859682786B0f97Fa9c1239C249cbBb20cDaC",
+      },
+    },
+    logoURI:
+      "https://raw.githubusercontent.com/superfluid-finance/assets/master/public/tokens/usdc/icon.svg",
+    tags: ["supertoken", "testnet"],
+  },
+  {
+    address: "0xc3cA859682786B0f97Fa9c1239C249cbBb20cDaC",
+    name: "PERMIT: fUSDC Fake Token",
+    symbol: "pfUSDC",
+    decimals: 18,
+    chainId: 5,
+    logoURI:
+      "https://raw.githubusercontent.com/superfluid-finance/assets/master/public/tokens/usdc/icon.svg",
+    tags: ["permit", "underlying", "testnet"],
+  },
+];
+
+export const widgetTokenList = {
+  ...tokenList,
+  tokens: [...goerliPermitTokens, ...tokenList.tokens],
+  // ...mumbaiPermitTokens,
+} as SuperTokenList;
+
 export interface FontSettings {
   family: string;
   category: string;
@@ -98,7 +165,7 @@ const switchLayout = (
     <SuperfluidWidget
       productDetails={productDetails}
       paymentDetails={paymentDetails}
-      tokenList={tokenList}
+      tokenList={widgetTokenList}
       type={layout}
       theme={theme}
       walletManager={walletManager}
@@ -111,7 +178,7 @@ const switchLayout = (
     <SuperfluidWidget
       productDetails={productDetails}
       paymentDetails={paymentDetails}
-      tokenList={tokenList}
+      tokenList={widgetTokenList}
       type={layout}
       theme={theme}
       walletManager={walletManager}

diff --git a/apps/widget-builder/src/hooks/useDemoMode.ts b/apps/widget-builder/src/hooks/useDemoMode.ts
@@ -6,9 +6,11 @@ import {
 } from "@superfluid-finance/widget";
 import { useCallback } from "react";
 import { useFormContext } from "react-hook-form";
+import { Address } from "viem";
 
 import {
   DisplaySettings,
+  goerliPermitTokens,
   Layout,
   WidgetProps,
 } from "../components/widget-preview/WidgetPreview";
@@ -111,10 +113,12 @@ const demoPaymentDetails: PaymentDetails = {
 const defaultPaymentDetails: PaymentDetails = {
   paymentOptions: [
     {
-      receiverAddress: "0xf26ce9749f29e61c25d0333bce2301cb2dfd3a22", // rebounder
+      receiverAddress: "0xd8dA6BF26964aF9D7eEd9e03E53415D37aA96045", // vitalik.eth
       chainId: supportedNetwork.goerli.id,
       superToken: {
-        address: "0x8ae68021f6170e5a766be613cea0d75236ecca9a", // fUSDCx
+        address: goerliPermitTokens.find((x) =>
+          (x.tags ?? []).includes("supertoken"),
+        )!.address as Address,
       },
       flowRate: {
         amountEther: "1",

diff --git a/examples/b2b-service-demo/src/utils/deleteDemoFlow.tsx b/examples/b2b-service-demo/src/utils/deleteDemoFlow.tsx
@@ -1,6 +1,6 @@
 import { cfAv1ForwarderABI } from "@superfluid-finance/widget";
 import { getContract } from "viem";
-import { polygonMumbai } from "wagmi/chains";
+import { polygonMumbai } from "viem/chains";
 
 import configuration from "@/configuration";
 

diff --git a/examples/donation-demo/src/utils/deleteDemoFlow.tsx b/examples/donation-demo/src/utils/deleteDemoFlow.tsx
@@ -1,6 +1,6 @@
 import { cfAv1ForwarderABI } from "@superfluid-finance/widget";
 import { getContract } from "viem";
-import { polygonMumbai } from "wagmi/chains";
+import { polygonMumbai } from "viem/chains";
 
 import configuration from "@/configuration";
 

diff --git a/examples/gated-community-demo/src/utils/deleteDemoFlow.ts b/examples/gated-community-demo/src/utils/deleteDemoFlow.ts
@@ -1,6 +1,6 @@
 import { cfAv1ForwarderABI } from "@superfluid-finance/widget";
 import { getContract } from "viem";
-import { polygonMumbai } from "wagmi/chains";
+import { polygonMumbai } from "viem/chains";
 
 import configuration from "@/configuration";
 

diff --git a/examples/widget-vite-react-rainbowkit/package.json b/examples/widget-vite-react-rainbowkit/package.json
@@ -15,8 +15,8 @@
     "@superfluid-finance/widget": "workspace:*",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "viem": "^1.11.0",
-    "wagmi": "^1.4.2",
+    "viem": "^1.8.1",
+    "wagmi": "^1.3.10",
     "zod": "^3.22.2"
   },
   "devDependencies": {

diff --git a/package.json b/package.json
@@ -42,7 +42,8 @@
   "packageManager": "pnpm@8.6.1",
   "pnpm": {
     "overrides": {
-      "eslint-plugin-react-hooks": "5.0.0-canary-41f0e9dae-20230907"
+      "react-hook-form": "~7.44.3",
+      "eslint-plugin-react-hooks": "5.0.0-canary-7118f5dd7-20230705"
     }
   }
 }
diff --git a/packages/widget/src/CommandHandlerContext.ts b/packages/widget/src/CommandHandlerContext.ts
@@ -1,18 +1,19 @@
 import { createContext, useContext } from "react";
 
-import { CommandHandlingAggregate, State } from "./CommandHandlerState.js";
+import { State } from "./CommandHandlerState.js";
 import { Command } from "./commands.js";
 import { ContractWrite } from "./ContractWrite.js";
 import { ContractWriteResult } from "./ContractWriteManager.js";
 
 // TODO(KK): nested structure
 export type CommandHandlerContextValue = {
   status: State["status"];
-  commands: ReadonlyArray<CommandHandlingAggregate>;
+  commands: ReadonlyArray<Command>;
   contractWrites: ReadonlyArray<ContractWrite>;
   contractWriteResults: ReadonlyArray<ContractWriteResult>;
   sessionId: string | null;
   submitCommands: (commands: ReadonlyArray<Command>) => void;
+  setContractWrites: (contractWrites: ReadonlyArray<ContractWrite>) => void;
   writeIndex: number;
   handleNextWrite: (currentWriteIndex: number) => void;
 };