diff --git a/.changeset/witty-bugs-add.md b/.changeset/witty-bugs-add.md new file mode 100644 index 000000000000..232f7175fa82 --- /dev/null +++ b/.changeset/witty-bugs-add.md @@ -0,0 +1,5 @@ +--- +"ledger-live-desktop": patch +--- + +storyly stories localization diff --git a/apps/ledger-live-desktop/src/storyly/StorylyProvider.tsx b/apps/ledger-live-desktop/src/storyly/StorylyProvider.tsx index 68200efaae8d..aa3172ea51fa 100644 --- a/apps/ledger-live-desktop/src/storyly/StorylyProvider.tsx +++ b/apps/ledger-live-desktop/src/storyly/StorylyProvider.tsx @@ -3,11 +3,12 @@ import useFeature from "@ledgerhq/live-common/featureFlags/useFeature"; import { closeAllModal } from "~/renderer/actions/modals"; import { context } from "~/renderer/drawers/Provider"; import { closeInformationCenter } from "~/renderer/actions/UI"; -import { useDispatch } from "react-redux"; +import { useDispatch, useSelector } from "react-redux"; import { openURL } from "~/renderer/linking"; import { Feature_Storyly, StorylyInstanceType } from "@ledgerhq/types-live"; import { StorylyRef, Story } from "storyly-web"; +import { languageSelector } from "~/renderer/reducers/settings"; interface StorylyProviderProps { children: ReactNode; } @@ -37,6 +38,9 @@ const StorylyProvider: React.FC = ({ children }) => { const storylyRef = useRef(null); const { params } = useFeature("storyly") || {}; + + const language = useSelector(languageSelector); + const stories = params?.stories; useEffect(() => { @@ -60,6 +64,12 @@ const StorylyProvider: React.FC = ({ children }) => { storylyRef.current?.openStory({ group: query?.g, story: query?.s, playMode: query?.play }); }, [params, token, query, dispatch, setDrawer]); + useEffect(() => { + if (language) { + storylyRef.current?.setLang({ language }); + } + }, [language]); + useEffect(() => { if (url) { const storylyUrl = new URL(`ledgerlive://${url}`); diff --git a/apps/ledger-live-desktop/src/storyly/useStoryly.tsx b/apps/ledger-live-desktop/src/storyly/useStoryly.tsx index 8522a5fd35f8..1f182ff39b37 100644 --- a/apps/ledger-live-desktop/src/storyly/useStoryly.tsx +++ b/apps/ledger-live-desktop/src/storyly/useStoryly.tsx @@ -37,7 +37,6 @@ export const useStoryly = ( ref.current?.init({ layout: "classic", token: storyly.params?.stories[instanceId].token || "", - lang: language, segments: [`lang_${language}`], props: { ...props, ...options?.styleProps }, }); @@ -59,7 +58,7 @@ export const useStoryly = ( * Change `lang` and `segments` based on the app language */ useLayoutEffect(() => { - ref.current?.setLang({ language: language }); + ref.current?.setLang({ language }); ref.current?.setSegments([`lang_${language}`]); }, [language]); diff --git a/apps/ledger-live-desktop/src/types/storyly-web.d.ts b/apps/ledger-live-desktop/src/types/storyly-web.d.ts index c1ed46194d11..1acf9ef8e966 100644 --- a/apps/ledger-live-desktop/src/types/storyly-web.d.ts +++ b/apps/ledger-live-desktop/src/types/storyly-web.d.ts @@ -29,7 +29,7 @@ declare module "storyly-web" { interface StorylyOptions { layout: "classic" | "modern"; token: string; - lang?: Language /* TODO: delete it in LIVE-14102 and replace it with locale*/; + locale?: LanguagePrefixed; segments?: string[]; props?: StorylyStyleProps; }