chore: bump storyly version and adapt new api spec (#7896)

.changeset/calm-pets-shout.md

@@ -0,0 +1,5 @@
+---
+"ledger-live-desktop": patch
+---
+
+bump storyly version

apps/ledger-live-desktop/package.json

@@ -143,7 +143,7 @@
  "rxjs": "^7.8.1",
  "secp256k1": "^4.0.3",
  "semver": "^7.1.3",
- "storyly-web": "^2.8.0",
+ "storyly-web": "^3.5.0",
  "styled-components": "^5.3.3",
  "styled-system": "^5.1.5",
  "timemachine": "^0.3.2",

apps/ledger-live-desktop/src/storyly/StorylyProvider.tsx

@@ -7,7 +7,7 @@ import { useDispatch } from "react-redux";
 import { openURL } from "~/renderer/linking";
 import { Feature_Storyly, StorylyInstanceType } from "@ledgerhq/types-live";
 
-import { StorylyRef } from "storyly-web";
+import { StorylyRef, Story } from "storyly-web";
 interface StorylyProviderProps {
  children: ReactNode;
 }
@@ -44,19 +44,19 @@ const StorylyProvider: React.FC<StorylyProviderProps> = ({ children }) => {
  storylyRef.current?.init({
  layout: "classic",
  token: token,
- events: {
- closeStoryGroup: clear,
- actionClicked: story => {
- if (story?.media?.actionUrl) {
- openURL(story.media.actionUrl);
- storylyRef.current?.close?.();
- dispatch(closeAllModal());
- setDrawer();
- dispatch(closeInformationCenter());
- }
- },
- },
  });
+
+ storylyRef.current?.on("actionClicked", (story: Story) => {
+ if (!story.actionUrl) return;
+ openURL(story.actionUrl as string);
+ storylyRef.current?.close?.();
+ dispatch(closeAllModal());
+ setDrawer();
+ dispatch(closeInformationCenter());
+ });
+
+ storylyRef.current?.on("closeStoryGroup", clear);
+
  storylyRef.current?.openStory({ group: query?.g, story: query?.s, playMode: query?.play });
  }, [params, token, query, dispatch, setDrawer]);
 

apps/ledger-live-desktop/src/storyly/useStoryly.tsx

@@ -8,7 +8,7 @@ import { useDispatch } from "react-redux";
 import { languageSelector } from "~/renderer/reducers/settings";
 import { StorylyStyleProps, useStorylyDefaultStyleProps } from "./style";
 import { openURL } from "~/renderer/linking";
-import { StorylyRef, StorylyData } from "storyly-web";
+import { StorylyRef, StorylyData, Story, StoryGroup } from "storyly-web";
 
 /**
  * Hook to use Storyly
@@ -26,7 +26,7 @@ export const useStoryly = (
  const dispatch = useDispatch();
  const { setDrawer } = useContext(context);
  const ref = useRef<StorylyRef>();
- const dataRef = useRef<StorylyData>();
+ const dataRef = useRef<StoryGroup[]>();
  const props = useStorylyDefaultStyleProps();
  const language = useSelector(languageSelector);
 
@@ -39,22 +39,20 @@ export const useStoryly = (
  token: storyly.params?.stories[instanceId].token || "",
  lang: language,
  segments: [`lang_${language}`],
- events: {
- isReady: data => {
- dataRef.current = data;
- // Triggered when story is ready.
- },
- actionClicked: story => {
- if (story?.media?.actionUrl) {
- openURL(story.media.actionUrl);
- ref.current?.close?.();
- dispatch(closeAllModal());
- setDrawer();
- }
- },
- },
  props: { ...props, ...options?.styleProps },
  });
+
+ ref.current?.on("loaded", (data: StorylyData) => {
+ dataRef.current = data.groupList;
+ });
+
+ ref.current?.on("actionClicked", (story: Story) => {
+ if (!story.actionUrl) return;
+ openURL(story.actionUrl);
+ ref.current?.close?.();
+ dispatch(closeAllModal());
+ setDrawer();
+ });
  });
 
  /**

apps/ledger-live-desktop/src/types/storyly-web.d.ts

@@ -1,38 +1,53 @@
 declare module "storyly-web" {
- type StorylyData = Array<{
- title: string;
- image: URL;
- pinned: boolean;
- id: number;
- }>;
-
  type Story = {
  group_id: number;
  id: number;
  index: number;
- media: {
- actionUrl?: string;
- };
+ actionUrl: string | undefined;
  seen: boolean;
  title: string;
  };
 
+ type StoryGroup = {
+ iconUrl: string;
+ id: number;
+ nudge?: string;
+ pinned?: boolean;
+ stories: Story[];
+ title: string;
+ type: unknown;
+ };
+
+ type StorylyData = {
+ dataSource: string;
+ groupList: StoryGroup[];
+ };
+
  /**
  * Storyly Options
  */
  interface StorylyOptions {
  layout: "classic" | "modern";
  token: string;
- events?: {
- closeStoryGroup?(): void;
- isReady?(data: StorylyData): void;
- actionClicked?(story: Story): void;
- };
- lang?: Language;
+ lang?: Language /* TODO: delete it in LIVE-14102 and replace it with locale*/;
  segments?: string[];
  props?: StorylyStyleProps;
  }
 
+ /**
+ * Storyly user events
+ */
+ type StorylyUserEvents =
+ | "actionClicked"
+ | "loaded"
+ | "loadFailed"
+ | "openStoryGroup"
+ | "storyOpenFailed"
+ | "storyImpression"
+ | "storyCompleted"
+ | "groupCompleted"
+ | "closeStoryGroup";
+
  /**
  * Storyly Ref
  */
@@ -42,6 +57,7 @@ declare module "storyly-web" {
  setLang: (options: { language: StorylyOptions["lang"] }) => void;
  openStory: (props: openStoryParams) => void;
  close: () => void;
+ on: (event: StorylyUserEvents, callback: (...args) => void) => void;
  }
 
  interface openStoryParams {
@@ -64,5 +80,13 @@ declare module "storyly-web" {
  >;
 
  export default StorylyWeb;
- export { StorylyRef, StorylyOptions, StorylyData, openStoryParams };
+ export {
+ StorylyRef,
+ StorylyOptions,
+ StorylyData,
+ openStoryParams,
+ StorylyUserEvents,
+ Story,
+ StoryGroup,
+ };
 }