superfluid-finance · elvijsTDL · Oct 9, 2024 · Oct 9, 2024 · Oct 9, 2024
diff --git a/.changeset/itchy-rabbits-chew.md b/.changeset/itchy-rabbits-chew.md
@@ -0,0 +1,5 @@
+---
+"@superfluid-finance/widget": patch
+---
+
+Update deps
diff --git a/.changeset/mighty-frogs-sniff.md b/.changeset/mighty-frogs-sniff.md
@@ -0,0 +1,5 @@
+---
+"@superfluid-finance/widget": patch
+---
+
+Make Native Asset Super Tokens wrappable
diff --git a/.changeset/shy-ducks-call.md b/.changeset/shy-ducks-call.md
@@ -0,0 +1,5 @@
+---
+"@superfluid-finance/widget": patch
+---
+
+Update token list
diff --git a/apps/hosted-widget/package.json b/apps/hosted-widget/package.json
@@ -17,8 +17,8 @@
     "@emotion/styled": "^11.13.0",
     "@mui/icons-material": "^5.16.7",
     "@mui/material": "^5.16.7",
-    "@segment/analytics-next": "^1.74.0",
-    "@sentry/nextjs": "^7.119.0",
+    "@segment/analytics-next": "^1.75.0",
+    "@sentry/nextjs": "^7.119.1",
     "@superfluid-finance/widget": "workspace:*",
     "@web3modal/ethereum": "^2.7.1",
     "@web3modal/react": "^2.7.1",
@@ -32,7 +32,7 @@
     "zod": "^3.23.8"
   },
   "devDependencies": {
-    "@types/node": "^22.7.4",
+    "@types/node": "^22.7.5",
     "@types/react": "^18.3.11",
     "@types/react-blockies": "^1.4.4",
     "eslint": "^8.57.1",

diff --git a/apps/widget-builder/next.config.js b/apps/widget-builder/next.config.js
@@ -13,6 +13,12 @@ module.exports = {
         port: "",
         pathname: "/superfluid-finance/**/*",
       },
+      {
+        protocol: "https",
+        hostname: "superfluid-finance.github.io",
+        port: "",
+        pathname: "/**/*",
+      },
     ],
   },
   env: {

diff --git a/apps/widget-builder/package.json b/apps/widget-builder/package.json
@@ -21,8 +21,8 @@
     "@mui/lab": "5.0.0-alpha.147",
     "@mui/material": "^5.16.7",
     "@pinata/sdk": "^2.1.0",
-    "@segment/analytics-next": "^1.74.0",
-    "@sentry/nextjs": "^7.119.0",
+    "@segment/analytics-next": "^1.75.0",
+    "@sentry/nextjs": "^7.119.1",
     "@superfluid-finance/widget": "workspace:*",
     "@web3modal/ethereum": "^2.7.1",
     "@web3modal/react": "^2.7.1",
@@ -45,7 +45,7 @@
   "devDependencies": {
     "@hookform/devtools": "^4.3.1",
     "@types/lodash": "^4.17.10",
-    "@types/node": "^22.7.4",
+    "@types/node": "^22.7.5",
     "@types/react": "^18.3.11",
     "@types/react-dom": "^18.3.0",
     "@types/react-google-recaptcha": "^2.1.9",

diff --git a/apps/widget-builder/src/hooks/useDemoMode.ts b/apps/widget-builder/src/hooks/useDemoMode.ts
@@ -43,7 +43,7 @@ const demoPaymentDetails: WidgetProps["paymentDetails"] = {
       receiverAddress: "0xf26ce9749f29e61c25d0333bce2301cb2dfd3a22", // rebounder
       chainId: supportedNetwork.optimismSepolia.id,
       superToken: {
-        address: "0x00d05Eed85Bad962bA5237DD4aFFF12004455a8a", // fUSDCx
+        address: "0x131780640edf9830099aac2203229073d6d2fe69", // fUSDCx
       },
       flowRate: {
         amountEther: "1",

diff --git a/examples/b2b-service-demo/package.json b/examples/b2b-service-demo/package.json
@@ -10,13 +10,13 @@
     "tsc": "tsc --noEmit"
   },
   "dependencies": {
-    "@sentry/nextjs": "^7.119.0",
+    "@sentry/nextjs": "^7.119.1",
     "@superfluid-finance/widget": "workspace:*",
     "@web3modal/ethereum": "^2.7.1",
     "@web3modal/react": "^2.7.1",
     "next": "13.4.19",
-    "react": "18.2.0",
-    "react-dom": "18.2.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "react-use-intercom": "^5.4.1",
     "viem": "^1.21.4",
     "wagmi": "^1.4.13",

diff --git a/examples/donation-demo/package.json b/examples/donation-demo/package.json
@@ -10,13 +10,13 @@
     "tsc": "tsc --noEmit"
   },
   "dependencies": {
-    "@sentry/nextjs": "^7.119.0",
+    "@sentry/nextjs": "^7.119.1",
     "@superfluid-finance/widget": "workspace:*",
     "@web3modal/ethereum": "^2.7.1",
     "@web3modal/react": "^2.7.1",
     "next": "13.4.19",
-    "react": "18.2.0",
-    "react-dom": "18.2.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "react-use-intercom": "^5.4.1",
     "viem": "^1.21.4",
     "wagmi": "^1.4.13",

diff --git a/examples/gated-community-demo/package.json b/examples/gated-community-demo/package.json
@@ -10,13 +10,13 @@
     "tsc": "tsc --noEmit"
   },
   "dependencies": {
-    "@sentry/nextjs": "^7.119.0",
+    "@sentry/nextjs": "^7.119.1",
     "@superfluid-finance/widget": "workspace:*",
     "@web3modal/ethereum": "^2.7.1",
     "@web3modal/react": "^2.7.1",
     "next": "13.4.19",
-    "react": "18.2.0",
-    "react-dom": "18.2.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "viem": "^1.21.4",
     "wagmi": "^1.4.13",
     "zod": "^3.23.8"

diff --git a/examples/widget-webcomponent/package.json b/examples/widget-webcomponent/package.json
@@ -10,7 +10,7 @@
     "tsc": "tsc --noEmit"
   },
   "dependencies": {
-    "@superfluid-finance/tokenlist": "^5.8.2",
+    "@superfluid-finance/tokenlist": "^5.9.0",
     "@superfluid-finance/widget": "workspace:*"
   },
   "devDependencies": {

diff --git a/package.json b/package.json
@@ -43,7 +43,9 @@
   "pnpm": {
     "overrides": {
       "eslint-plugin-react-hooks": "5.0.0-canary-41f0e9dae-20230907",
-      "@wagmi/core": "1"
+      "@wagmi/core": "1",
+      "react-dom": "^18.3.1",
+      "react": "^18.3.1"
     }
   }
 }
diff --git a/packages/widget/package.json b/packages/widget/package.json
@@ -73,7 +73,7 @@
     "@mui/lab": "5.0.0-alpha.147",
     "@mui/utils": "^5.16.6",
     "@superfluid-finance/metadata": "^1.5.0",
-    "@superfluid-finance/tokenlist": "^5.8.2",
+    "@superfluid-finance/tokenlist": "^5.9.0",
     "abitype": "^0.10.3",
     "blockies-ts": "^1.0.0",
     "immer": "^10.1.1",

diff --git a/packages/widget/src/CheckoutSummary.tsx b/packages/widget/src/CheckoutSummary.tsx
@@ -46,7 +46,11 @@ export function CheckoutSummary() {
   const startingBalanceDate = useMemo(() => new Date(), []);
 
   const superToken = useMemo(
-    () => getSuperToken(subscribeCommand.superTokenAddress),
+    () =>
+      getSuperToken(
+        subscribeCommand.chainId,
+        subscribeCommand.superTokenAddress,
+      ),
     [subscribeCommand.superTokenAddress, getSuperToken],
   );
 

diff --git a/packages/widget/src/CommandMapper.tsx b/packages/widget/src/CommandMapper.tsx
@@ -117,7 +117,7 @@ export function EnableAutoWrapCommandMapper({
           createContractWrite({
             commandId: cmd.id,
             displayTitle: `Approve ${
-              getUnderlyingToken(cmd.underlyingTokenAddress).symbol
+              getUnderlyingToken(cmd.chainId, cmd.underlyingTokenAddress).symbol
             } Allowance`,
             chainId: cmd.chainId,
             abi: erc20ABI,
@@ -148,8 +148,8 @@ export function WrapIntoSuperTokensCommandMapper({
 
   const isNativeAssetUnderlyingToken = cmd.underlyingToken.isNativeAsset;
 
-  const { data: allowance_, isSuccess } = useContractRead(
-    !isNativeAssetUnderlyingToken
+  const { data: allowance_, isSuccess: isSuccess_ } = useContractRead(
+    !isNativeAssetUnderlyingToken // ERC-20 allowance doesn't apply to native asset tokens
       ? {
           chainId: cmd.chainId,
           address: cmd.underlyingToken.address,
@@ -160,6 +160,7 @@ export function WrapIntoSuperTokensCommandMapper({
         }
       : undefined,
   );
+  const isSuccess = isSuccess_ || isNativeAssetUnderlyingToken;
 
   const contractWrites = useMemo(() => {
     const contractWrites_: ContractWrite[] = [];
@@ -169,7 +170,7 @@ export function WrapIntoSuperTokensCommandMapper({
         createContractWrite({
           commandId: cmd.id,
           displayTitle: `Wrap to ${
-            getSuperToken(cmd.superTokenAddress).symbol
+            getSuperToken(cmd.chainId, cmd.superTokenAddress).symbol
           }`,
           chainId: cmd.chainId,
           abi: nativeAssetSuperTokenABI,
@@ -186,7 +187,8 @@ export function WrapIntoSuperTokensCommandMapper({
             createContractWrite({
               commandId: cmd.id,
               displayTitle: `Approve ${
-                getUnderlyingToken(cmd.underlyingToken.address).symbol
+                getUnderlyingToken(cmd.chainId, cmd.underlyingToken.address)
+                  .symbol
               } Allowance`,
               chainId: cmd.chainId,
               abi: erc20ABI,
@@ -204,8 +206,9 @@ export function WrapIntoSuperTokensCommandMapper({
           createContractWrite({
             commandId: cmd.id,
             displayTitle: `Wrap ${
-              getUnderlyingToken(cmd.underlyingToken.address).symbol
-            } into ${getSuperToken(cmd.superTokenAddress).symbol}`,
+              getUnderlyingToken(cmd.chainId, cmd.underlyingToken.address)
+                .symbol
+            } into ${getSuperToken(cmd.chainId, cmd.superTokenAddress).symbol}`,
             chainId: cmd.chainId,
             abi: superTokenABI,
             address: cmd.superTokenAddress,

diff --git a/packages/widget/src/StepContentWrap.tsx b/packages/widget/src/StepContentWrap.tsx
@@ -18,8 +18,10 @@ import {
   useState,
 } from "react";
 import { Controller, useFormContext } from "react-hook-form";
+import { zeroAddress } from "viem";
 import { Address, useBalance } from "wagmi";
 
+import { ChainId } from "./core/SupportedNetwork.js";
 import { DraftFormValues } from "./formValues.js";
 import { UpgradeIcon } from "./previews/CommandPreview.js";
 import { StepProps } from "./Stepper.js";
@@ -88,9 +90,7 @@ const WrapCard: FC<WrapCardProps> = ({
           gridColumn: "1/3",
         }}
       >
-        {`Balance: ${
-          formattedTokenBalance && approximateIfDecimal(formattedTokenBalance)
-        }`}
+        {`Balance: ${formattedTokenBalance}`}
       </Typography>
     </Paper>
   );
@@ -118,7 +118,7 @@ export default function StepContentWrap({ stepIndex }: StepProps) {
     ]);
 
   const superToken = paymentOptionWithTokenInfo?.superToken;
-  const { getUnderlyingToken, eventHandlers } = useWidget();
+  const { getUnderlyingToken, getNativeAsset, eventHandlers } = useWidget();
 
   // Find the underlying token of the Super Token.
   const underlyingToken = useMemo(() => {
@@ -127,19 +127,29 @@ export default function StepContentWrap({ stepIndex }: StepProps) {
     }
 
     const superTokenInfo = superToken.extensions.superTokenInfo;
-    if (superTokenInfo.type !== "Wrapper") {
-      return undefined;
+    if (superTokenInfo.type === "Wrapper") {
+      return getUnderlyingToken(
+        superToken.chainId,
+        superTokenInfo.underlyingTokenAddress,
+      );
+    }
+
+    if (superTokenInfo.type === "Native Asset") {
+      return getNativeAsset(superToken.chainId as ChainId);
     }
 
-    return getUnderlyingToken(superTokenInfo.underlyingTokenAddress);
-  }, [superToken, getUnderlyingToken]);
+    return undefined;
+  }, [superToken, getUnderlyingToken, getNativeAsset]);
 
   // TODO(KK): Probably don't need to do so much null-checking.
 
   const { data: underlyingTokenBalance } = useBalance(
     paymentOptionWithTokenInfo && underlyingToken && accountAddress
       ? {
-          token: underlyingToken.address as Address,
+          token:
+            underlyingToken.address === zeroAddress
+              ? undefined
+              : (underlyingToken.address as Address),
           address: accountAddress,
           chainId: paymentOptionWithTokenInfo.paymentOption.chainId,
           formatUnits: underlyingToken.decimals,
@@ -333,12 +343,3 @@ export default function StepContentWrap({ stepIndex }: StepProps) {
     </Stack>
   );
 }
-
-function approximateIfDecimal(numStr: string): string {
-  const hasDecimal = numStr.includes(".");
-  if (hasDecimal) {
-    const integerPart = numStr.split(".")[0];
-    return `≈${integerPart}`;
-  }
-  return numStr;
-}
diff --git a/packages/widget/src/Stepper.tsx b/packages/widget/src/Stepper.tsx
@@ -39,6 +39,9 @@ export default function Stepper() {
   ]);
 
   const [visibleSteps, walletConnectStep] = useMemo(() => {
+    const superTokenType =
+      paymentOptionWithTokenInfo?.superToken.extensions.superTokenInfo.type;
+
     const steps = [
       {
         optional: false,
@@ -47,8 +50,7 @@ export default function Stepper() {
         Content: StepContentPaymentOption,
       },
       // Add wrap step only when Super Token has an underlying token.
-      ...(paymentOptionWithTokenInfo?.superToken.extensions.superTokenInfo
-        .type === "Wrapper" // TODO(KK): Enable native asset wrapping here.
+      ...(superTokenType === "Wrapper" || superTokenType === "Native Asset"
         ? [
             {
               optional: true,

diff --git a/packages/widget/src/TokenAvatar.tsx b/packages/widget/src/TokenAvatar.tsx
@@ -14,12 +14,22 @@ export function TokenAvatar({ tokenInfo, ...AvatarProps }: Props) {
       src={tokenInfo.logoURI}
       {...AvatarProps}
       sx={{ width: 24, height: 24, objectFit: "contain", ...AvatarSx }}
+      slotProps={{
+        img: {
+          style: { objectFit: "contain" },
+        },
+      }}
     />
   ) : (
     <Avatar
       alt={`${tokenInfo.symbol} logo`}
       {...AvatarProps}
       sx={{ width: 24, height: 24, ...AvatarSx }}
+      slotProps={{
+        img: {
+          style: { objectFit: "contain" },
+        },
+      }}
     >
       {" "}
     </Avatar>

diff --git a/packages/widget/src/WidgetContext.ts b/packages/widget/src/WidgetContext.ts
@@ -13,8 +13,8 @@ import { WalletManager } from "./WalletManager.js";
 import { ViewProps } from "./WidgetView.js";
 
 export type WidgetContextValue = {
-  getSuperToken: (address: Address) => SuperTokenInfo;
-  getUnderlyingToken: (address: Address) => TokenInfo;
+  getSuperToken: (chainId: number, address: Address) => SuperTokenInfo;
+  getUnderlyingToken: (chainId: number, address: Address) => TokenInfo;
   getNetwork: (chainId: ChainId) => SupportedNetwork;
   getNativeAsset: (chainId: ChainId) => TokenInfo;
   superTokens: ReadonlyArray<SuperTokenInfo>;