FLIX v1.1 (#234)

* working flix v1.1 for the most part

* sort accounts in address builder by address

* fix type errors

* fix cadence code building

* fix type error

Author: bartolomej

apps/electron/src/renderer/App.tsx

@@ -16,12 +16,15 @@ import {
 } from '@onflowser/api';
 import { SWRConfig } from 'swr';
 import { FlowNetworkProvider } from '@onflowser/ui/src/contexts/flow-network.context';
+import { FlowFlixV11Service } from '@onflowser/core/src/flow-flix-v11.service';
+import { HttpService } from '@onflowser/core/src/http.service';
+import { IFlowserLogger } from '@onflowser/core';
 import { DependencyErrors } from './components/DependencyErrors/DependencyErrors';
-import { indexSyncIntervalInMs, IpcIndexCache } from './ipc-index-cache';
 import { FlowserRouter } from './router';
 import { UpdateLoader } from './components/loaders/UpdateLoader';
 import { AnalyticsService } from '../services/analytics.service';
 import { SentryRendererService } from '../services/sentry-renderer.service';
+import { indexSyncIntervalInMs, IpcIndexCache } from './ipc-index-cache';
 
 const indexes = {
   accountStorage: new IpcIndexCache<FlowAccountStorage>('accountStorage'),
@@ -36,6 +39,28 @@ const indexes = {
 const analyticsService = new AnalyticsService();
 const monitoringService = new SentryRendererService();
 
+class WebLogger implements IFlowserLogger {
+  debug(message: any): void {
+    console.debug(message);
+  }
+
+  error(message: any, error?: unknown): void {
+    console.error(message, error);
+  }
+
+  log(message: any): void {
+    console.log(message);
+  }
+
+  verbose(message: any): void {
+    console.debug(message);
+  }
+
+  warn(message: any): void {
+    console.warn(message);
+  }
+}
+
 export function App() {
   const [isExiting, setIsExiting] = useState(false);
   const [appUpdateDownloadPercentage, setAppUpdateDownloadPercentage] =
@@ -97,6 +122,12 @@ export function App() {
               analyticsService,
               workspaceService: window.electron.workspaces,
               snapshotService: window.electron.snapshots,
+              flixService: new FlowFlixV11Service(
+                {
+                  flixServerUrl: 'https://flix-indexer.fly.dev',
+                },
+                new HttpService(new WebLogger()),
+              ),
             }}
           >
             <ConfirmDialogProvider>

apps/electron/src/services/flowser-app.service.ts

@@ -234,7 +234,8 @@ export class FlowserAppService {
           message: errorMessage,
           detail: isErrorWithMessage(error) ? error.message : undefined,
           type: 'error',
-          buttons: ['Restart app'],
+          cancelId: 1,
+          buttons: ['Restart app', 'Cancel'],
         });
         const quitClicked = result.response === 0;
         if (quitClicked) {

apps/web/src/app/[networkId]/[interaction]/opengraph-image.tsx

@@ -1,10 +1,11 @@
 import { ImageResponse } from 'next/og';
-import { FlixUtils } from "@onflowser/core/src/flix-utils";
+import { FlixV11Utils } from "@onflowser/core/src/flix-v11-utils";
 import { FlowUtils } from "@onflowser/core/src/flow-utils";
 import type { FlowNetworkId } from "@onflowser/core/src/flow-utils";
 import type { FlowNameProfile } from "@onflowser/core/src/flow-names.service";
-import type { FlixV1Auditor, FlixV1Template } from "@onflowser/core/src/flix-v1";
 import type { InteractionsPageParams } from "@/common/interaction-page-params";
+import type { FlixV11Template } from "@onflowser/core/src/flix-v11";
+import { FlixV1Auditor } from "@onflowser/core";
 
 // Don't use edge runtime because of the code size limit.
 // See: https://github.com/vercel/commerce/issues/1028
@@ -31,17 +32,18 @@ export default async function Image(props: Props) {
   ])
 
   if (interaction) {
-    const [flix, auditors] = await Promise.all([
+    const [flix] = await Promise.all([
       fetchFlixTemplateById(interaction),
-      fetchFlixAuditorsById(interaction, networkId),
+      // Auditing not implemented yet
+      // fetchFlixAuditorsById(interaction, networkId),
     ]);
 
     if (!flix) {
       return new ImageResponse(<FallbackPreview />, size);
     }
 
-    const cadenceSourceCode = FlixUtils.getCadenceSourceCode(flix, networkId);
-    const dependencies = FlixUtils.getDependencies(flix, networkId);
+    const cadenceSourceCode = FlixV11Utils.getCadenceSourceCode(flix, networkId);
+    const dependencies = FlixV11Utils.getDependencies(flix, networkId);
     const address = dependencies[0].address;
 
     const [flowNameProfiles, addressIndex] = await Promise.all([
@@ -71,8 +73,8 @@ export default async function Image(props: Props) {
             }}
           >
             <TitleAndDescription flix={flix} />
-            <AuditorInfo auditors={auditors} />
-            <CodePreview cadence={cadenceSourceCode} />
+            {/*<AuditorInfo auditors={auditors} />*/}
+            {cadenceSourceCode && <CodePreview cadence={cadenceSourceCode} />}
           </div>
           <div
             style={{
@@ -115,7 +117,7 @@ function FallbackPreview() {
   )
 }
 
-function TitleAndDescription(props: {flix: FlixV1Template}) {
+function TitleAndDescription(props: {flix: FlixV11Template}) {
   return (
     <div
       style={{
@@ -132,7 +134,7 @@ function TitleAndDescription(props: {flix: FlixV1Template}) {
           color: "#31363C",
         }}
       >
-        {FlixUtils.getName(props.flix)}
+        {FlixV11Utils.getName(props.flix)}
       </span>
       <span
         style={{
@@ -141,12 +143,13 @@ function TitleAndDescription(props: {flix: FlixV1Template}) {
           color: "#56595E",
         }}
       >
-        {FlixUtils.getDescription(props.flix)}
+        {FlixV11Utils.getDescription(props.flix)}
       </span>
     </div>
   )
 }
 
+// TODO(flix-v11): Add support for auditors?
 function AuditorInfo(props: { auditors: FlixV1Auditor[]}) {
   const {auditors} = props;
   const iconSize = 25;
@@ -292,19 +295,20 @@ function RiStarFill(props: IconProps) {
 // and axios can't be used in edge runtime.
 // See: https://github.com/axios/axios/issues/5523
 
-const flixApiHost = `https://flowser-flix-368a32c94da2.herokuapp.com`;
+const flixApiHost = `https://flix-indexer.fly.dev`;
 
-async function fetchFlixTemplateById(id: string): Promise<FlixV1Template | undefined> {
-  const res = await fetch(`${flixApiHost}/v1/templates/${id}`);
+async function fetchFlixTemplateById(id: string): Promise<FlixV11Template | undefined> {
+  const res = await fetch(`${flixApiHost}/v1.1/templates/${id}`);
   if (res.status === 200) {
     return await res.json();
   } else {
     return undefined;
   }
 }
 
+// TODO(flix-v11) Migrate to flix v1.1
 async function fetchFlixAuditorsById(id: string, networkId: string): Promise<FlixV1Auditor[]> {
-  const res = await fetch(`${flixApiHost}/v1/templates/${id}/auditors?network=${networkId}`);
+  const res = await fetch(`${flixApiHost}/v1.1/templates/${id}/auditors?network=${networkId}`);
   return await res.json();
 }
 

apps/web/src/common/metadata.ts

@@ -1,7 +1,8 @@
 import { Metadata } from "next";
 import { HttpService } from "@onflowser/core/src/http.service";
-import { FlixUtils, FlowFlixService } from "@onflowser/core";
 import { InteractionsPageParams } from "@/common/interaction-page-params";
+import { FlowFlixV11Service } from "@onflowser/core/src/flow-flix-v11.service";
+import { FlixV11Utils } from "@onflowser/core/src/flix-v11-utils";
 
 export async function getInteractionPageMetadata(
   params: InteractionsPageParams
@@ -21,15 +22,15 @@ async function getFlixMetadata(flixId: string): Promise<Metadata> {
     verbose: console.debug
   });
   const flixConfig = {
-    flixServerUrl: "https://flowser-flix-368a32c94da2.herokuapp.com"
+    flixServerUrl: "https://flix-indexer.fly.dev"
   };
-  const flixService = new FlowFlixService(flixConfig, httpService);
+  const flixService = new FlowFlixV11Service(flixConfig, httpService);
 
   const template = await flixService.getById(flixId);
 
   if (template) {
-    const title = `Interaction: ${FlixUtils.getName(template)}`;
-    const description = FlixUtils.getDescription(template)
+    const title = `Interaction: ${FlixV11Utils.getName(template)}`;
+    const description = FlixV11Utils.getDescription(template)
 
     return {
       title,

apps/web/src/common/root.tsx

@@ -51,6 +51,7 @@ import { NetworkDropdown } from "./NetworkDropdown";
 import { ProfileDropdown } from "@/common/ProfileDropdown";
 import { ConfirmDialogProvider } from "@onflowser/ui/src/contexts/confirm-dialog.context";
 import { Analytics } from "@vercel/analytics/react"
+import { FlowFlixV11Service } from "@onflowser/core/src/flow-flix-v11.service";
 
 const indexSyncIntervalInMs = 500;
 
@@ -352,6 +353,9 @@ export default function Root() {
             <ServiceRegistryProvider
               services={{
                 flowService: new FlowService(),
+                flixService: new FlowFlixV11Service({
+                  flixServerUrl:"https://flix-indexer.fly.dev"
+                }, appService.httpService),
                 interactionsService: appService.interactionsService,
                 transactionsIndex: appService.getTransactionIndex(),
                 blocksIndex: appService.getBlockIndex(),

packages/core/src/flix-utils.ts renamed to packages/core/src/flix-v1-utils.ts

@@ -6,7 +6,7 @@ type FlixDependencySummary = {
   address: string;
 }
 
-export class FlixUtils {
+export class FlixV1Utils {
 
   static getDependencies(template: FlixV1Template, networkId: FlowNetworkId): FlixDependencySummary[] {
     return Object

packages/core/src/flix-v1.ts

@@ -4,7 +4,7 @@ import { FlowNetworkId } from "./flow-utils";
 export type FlixV1Template = {
   id: string;
   f_type: "InteractionTemplate";
-  f_version: string;
+  f_version: "1.0.0";
   data: {
     messages: FlixV1Messages;
     dependencies: Record<string, FlixV1Dependency>;

packages/core/src/flix-v11-utils.ts

@@ -0,0 +1,70 @@
+import type { FlowNetworkId } from "./flow-utils";
+import type { FlixV11Template } from "./flix-v11";
+import { ensurePrefixedAddress, isDefined } from "./utils";
+
+type FlixDependencySummary = {
+  name: string;
+  address: string;
+}
+
+export class FlixV11Utils {
+
+  static getDependencies(template: FlixV11Template, networkId: FlowNetworkId): FlixDependencySummary[] {
+    return template.data.dependencies
+      ?.map(e => e.contracts)
+      .flat()
+      .map((dependency): FlixDependencySummary | undefined => {
+        const network = dependency.networks.find(network => network.network === networkId);
+
+        if (!network) {
+          return undefined;
+        }
+
+        return {
+          name: dependency.contract,
+          address: network.address
+        }
+      })
+      .filter(isDefined) ?? [];
+  }
+
+  static getDescription(template: FlixV11Template): string | undefined {
+    return template.data.messages
+      ?.find(message => message.key === "description")?.i18n
+      ?.find(i18n => i18n.tag === "en-US")?.translation;
+  }
+
+  static getName(template: FlixV11Template): string {
+    const englishTitle =  template.data.messages
+      ?.find(message => message.key === "title")?.i18n
+      ?.find(i18n => i18n.tag === "en-US")?.translation;
+    return englishTitle ?? "Unknown";
+  }
+
+  static getCadenceSourceCode(template: FlixV11Template, networkId: FlowNetworkId): string | undefined {
+    let source = template.data.cadence.body;
+    const contractDependency = template.data.dependencies?.flatMap(e => e.contracts) ?? [];
+    for (const dependency of contractDependency) {
+      const networkConfig = dependency.networks.find(network => network.network === networkId);
+      if (!networkConfig) {
+        return undefined;
+      }
+
+      source = source.replace(
+        new RegExp(`import +"${dependency.contract}"`),
+        `import ${dependency.contract} from ${ensurePrefixedAddress(networkConfig.address)}`
+      );
+    }
+    return source;
+  }
+
+  static hasDependenciesForNetwork(template: FlixV11Template, networkId: FlowNetworkId): boolean {
+    return template.data.dependencies
+      ?.map(e => e.contracts)
+      .flat()
+      .some(dependency =>
+        dependency.networks.some(network => network.network === networkId)
+      ) ?? false;
+  }
+
+}

packages/core/src/flix-v11.ts

@@ -0,0 +1,52 @@
+// https://github.com/onflow/flips/blob/main/application/20220503-interaction-templates.md#interaction-interfaces
+import { FlowNetworkId } from "./flow-utils";
+
+export type FlixV11Template = {
+  id: string;
+  f_type: "InteractionTemplate";
+  f_version: "1.1.0";
+  data: {
+    messages: FlixV11Message[] | null;
+    cadence: {
+      body: string;
+      network_pins: FlixV11NetworkPin[];
+    };
+    parameters: FlixV11Parameter[];
+    dependencies: { contracts: FlixV11ContractDependency[] }[] | null;
+  };
+};
+
+export type FlixV11ContractDependency = {
+  // Name of the contract (e.g. "EVM")
+  contract: string;
+  networks: FlixV11ContractNetwork[];
+}
+
+export type FlixV11ContractNetwork = {
+  network: FlowNetworkId;
+  address: string;
+}
+
+export type FlixV11NetworkPin = {
+  network: FlowNetworkId;
+  pin_self: string;
+}
+
+export type FlixV11Message = {
+  // Standard keys: "title", "description",..
+  key: string;
+  i18n: FlixV11MessageI18n[];
+}
+
+export type FlixV11MessageI18n = {
+  // Language key (e.g. "en-US")
+  tag: string;
+  translation: string;
+}
+
+export type FlixV11Parameter = {
+  label: string;
+  index: 0;
+  type: string;
+  messages: FlixV11Message[];
+}

packages/core/src/flow-flix.service.ts renamed to packages/core/src/flow-flix-v1.service.ts

@@ -1,13 +1,13 @@
 import { HttpService } from "./http.service";
 import { FlixV1Template } from "./flix-v1";
 
-type FlowV1FlixServiceConfig = {
+type FlowFlixV1ServiceConfig = {
   flixServerUrl: string;
 }
 
-export class FlowFlixService {
+export class FlowFlixV1Service {
   constructor(
-    private readonly config: FlowV1FlixServiceConfig,
+    private readonly config: FlowFlixV1ServiceConfig,
     private readonly httpService: HttpService
   ) {}