🐛 Add version compatibility check for token transfer

packages/controller/src/controller.ts

@@ -85,6 +85,7 @@ export default class ControllerProvider extends BaseProvider {
         },
         rpcUrl: this.rpc.toString(),
         username,
+        version: this.version,
       });
     }
 

packages/controller/src/iframe/profile.ts

@@ -5,6 +5,7 @@ import { IFrame, IFrameOptions } from "./base";
 export type ProfileIFrameOptions = IFrameOptions<Profile> &
   ProfileOptions & {
     rpcUrl: string;
+    version?: string;
     username: string;
     slot?: string;
     namespace?: string;
@@ -14,14 +15,15 @@ export class ProfileIFrame extends IFrame<Profile> {
   constructor({
     profileUrl,
     rpcUrl,
-    namespace,
-    slot,
+    version,
     username,
+    slot,
+    namespace,
     tokens,
     ...iframeOptions
   }: ProfileIFrameOptions) {
     const _profileUrl = (profileUrl || PROFILE_URL).replace(/\/$/, "");
-    const _url = new URL(
+    let _url = new URL(
       slot
         ? namespace
           ? `${_profileUrl}/account/${username}/slot/${slot}?ps=${encodeURIComponent(
@@ -33,6 +35,10 @@ export class ProfileIFrame extends IFrame<Profile> {
         : `${_profileUrl}/account/${username}`,
     );
 
+    if (version) {
+      _url.searchParams.set("v", encodeURIComponent(version));
+    }
+
     _url.searchParams.set("rpcUrl", encodeURIComponent(rpcUrl));
 
     if (tokens?.erc20) {

packages/controller/src/types.ts

@@ -76,6 +76,7 @@ export type DeployReply = {
 export type IFrames = {
   keychain: KeychainIFrame;
   profile?: ProfileIFrame;
+  version?: number;
 };
 
 export interface LookupRequest {

packages/profile/package.json

@@ -17,6 +17,7 @@
     "@cartridge/ui-next": "workspace:*",
     "@cartridge/utils": "workspace:*",
     "@hookform/resolvers": "^3.9.1",
+    "compare-versions": "^6.1.1",
     "posthog-js": "^1.181.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",

packages/profile/src/components/context/connection.tsx

@@ -23,6 +23,7 @@ type ConnectionContextType = {
   erc20: string[];
   project?: string;
   namespace?: string;
+  version?: string;
   isVisible: boolean;
   setIsVisible: (isVisible: boolean) => void;
 };
@@ -66,6 +67,11 @@ export function ConnectionProvider({ children }: { children: ReactNode }) {
         });
       }
 
+      const versionParam = searchParams.get("v");
+      if (versionParam) {
+        state.version = decodeURIComponent(versionParam);
+      }
+
       const psParam = searchParams.get("ps");
       if (psParam && !state.project) {
         state.project = decodeURIComponent(psParam);

packages/profile/src/components/inventory/token/token.tsx

@@ -30,6 +30,8 @@ import { formatEther } from "viem";
 import { useAccount } from "@/hooks/account";
 import { useToken } from "@/hooks/token";
 import { TokenPair } from "@cartridge/utils/api/cartridge";
+import { useMemo } from "react";
+import { compare } from "compare-versions";
 
 export function Token() {
   const { address } = useParams<{ address: string }>();
@@ -93,7 +95,7 @@ function Credits() {
 
 function ERC20() {
   const { address } = useParams<{ address: string }>();
-
+  const { version } = useConnection();
   const { chainId } = useConnection();
   const t = useToken({ tokenAddress: address! });
   const { countervalue } = useCountervalue(
@@ -104,6 +106,11 @@ function ERC20() {
     { enabled: t && ["ETH", "STRK"].includes(t.meta.symbol) },
   );
 
+  const compatibility = useMemo(() => {
+    if (!version) return false;
+    return compare(version, "0.4.0", ">=");
+  }, [version]);
+
   if (!t) {
     return;
   }
@@ -167,7 +174,7 @@ function ERC20() {
         </Card>
       </LayoutContent>
 
-      {isIframe() && (
+      {isIframe() && compatibility && (
         <LayoutFooter>
           <Link to="send">
             <Button className="w-full">Send</Button>