-
Notifications
You must be signed in to change notification settings - Fork 332
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(live-12839): SWAP - setup demo3 flag and route (#7573)
* feat(LIVE-12839): demo-3 feature flag * feat: demo3 dedicated swap page * fix: remove debug logs * chore: comments * fix: rebase * chore: add changeset * fix: lint * fix: lint * fix: import from renderer * chore: add logger critical --------- Co-authored-by: Alinus Dumitrana <[email protected]>
- Loading branch information
1 parent
9badf39
commit 0c80144
Showing
17 changed files
with
312 additions
and
55 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,7 @@ | ||
| --- | ||
| "@ledgerhq/types-live": patch | ||
| "ledger-live-desktop": patch | ||
| "@ledgerhq/live-common": patch | ||
| --- | ||
|
|
||
| [swap] setup demo3 flag and routes |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
53 changes: 53 additions & 0 deletions
53
apps/ledger-live-desktop/src/renderer/screens/exchange/Swap2/App/App.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,53 @@ | ||
| import { useSwapLiveConfig } from "@ledgerhq/live-common/exchange/swap/hooks/index"; | ||
| import { useRemoteLiveAppManifest } from "@ledgerhq/live-common/platform/providers/RemoteLiveAppProvider/index"; | ||
| import { useLocalLiveAppManifest } from "@ledgerhq/live-common/wallet-api/LocalLiveAppProvider/index"; | ||
| import React, { useState } from "react"; | ||
| import styled from "styled-components"; | ||
| import SwapWebView from "~/renderer/screens/exchange/Swap2/Form/SwapWebViewDemo3"; | ||
|
|
||
| const Root = styled.div` | ||
| display: flex; | ||
| flex-direction: column; | ||
| justify-content: flex-start; | ||
| `; | ||
|
|
||
| // TODO: fix with proper error handling | ||
| const ErrorWrapper = styled.div` | ||
| width: auto; | ||
| display: inline-flex; | ||
| align-self: center; | ||
| align-items: center; | ||
| justify-self: center; | ||
| justify-content: center; | ||
| padding: 24px; | ||
| border-radius: 14px; | ||
| background-color: rgba(255, 0, 0, 0.3); | ||
| color: #fff; | ||
| font-weight: 500; | ||
| `; | ||
|
|
||
| export function SwapApp() { | ||
| const [unavailable, setUnavailable] = useState(false); | ||
| const swapLiveEnabledFlag = useSwapLiveConfig(); | ||
| const swapLiveAppManifestID = swapLiveEnabledFlag?.params?.manifest_id; | ||
|
|
||
| const localManifest = useLocalLiveAppManifest(swapLiveAppManifestID || undefined); | ||
| const remoteManifest = useRemoteLiveAppManifest(swapLiveAppManifestID || undefined); | ||
| const manifest = localManifest || remoteManifest; | ||
|
|
||
| if (!manifest) { | ||
| // TODO: fix with proper error handling | ||
| return <ErrorWrapper>Unable to load application: missing manifest</ErrorWrapper>; | ||
| } | ||
|
|
||
| if (unavailable) { | ||
| // TODO: fix with proper error handling | ||
| return <ErrorWrapper>Unable to load application: Unavailable</ErrorWrapper>; | ||
| } | ||
|
|
||
| return ( | ||
| <Root> | ||
| <SwapWebView manifest={manifest} liveAppUnavailable={() => setUnavailable(true)} /> | ||
| </Root> | ||
| ); | ||
| } |
1 change: 1 addition & 0 deletions
1
apps/ledger-live-desktop/src/renderer/screens/exchange/Swap2/App/index.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| export * from "./App"; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
2 changes: 1 addition & 1 deletion
2
apps/ledger-live-desktop/src/renderer/screens/exchange/Swap2/Form/FormSummary/index.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
148 changes: 148 additions & 0 deletions
148
apps/ledger-live-desktop/src/renderer/screens/exchange/Swap2/Form/SwapWebViewDemo3.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,148 @@ | ||
| import { SwapLiveError } from "@ledgerhq/live-common/exchange/swap/types"; | ||
| import { LiveAppManifest } from "@ledgerhq/live-common/platform/types"; | ||
| import { handlers as loggerHandlers } from "@ledgerhq/live-common/wallet-api/CustomLogger/server"; | ||
| import { getEnv } from "@ledgerhq/live-env"; | ||
| import React, { useEffect, useMemo, useRef, useState } from "react"; | ||
| import { useSelector } from "react-redux"; | ||
| import styled from "styled-components"; | ||
| import { Web3AppWebview } from "~/renderer/components/Web3AppWebview"; | ||
| import { initialWebviewState } from "~/renderer/components/Web3AppWebview/helpers"; | ||
| import { WebviewAPI, WebviewProps, WebviewState } from "~/renderer/components/Web3AppWebview/types"; | ||
| import { TopBar } from "~/renderer/components/WebPlatformPlayer/TopBar"; | ||
| import { usePTXCustomHandlers } from "~/renderer/components/WebPTXPlayer/CustomHandlers"; | ||
| import { context } from "~/renderer/drawers/Provider"; | ||
| import useTheme from "~/renderer/hooks/useTheme"; | ||
| import logger from "~/renderer/logger"; | ||
| import { | ||
| counterValueCurrencySelector, | ||
| enablePlatformDevToolsSelector, | ||
| languageSelector, | ||
| } from "~/renderer/reducers/settings"; | ||
| import { captureException } from "~/sentry/renderer"; | ||
| import WebviewErrorDrawer from "./WebviewErrorDrawer/index"; | ||
|
|
||
| export class UnableToLoadSwapLiveError extends Error { | ||
| constructor(message: string) { | ||
| const name = "UnableToLoadSwapLiveError"; | ||
| super(message || name); | ||
| this.name = name; | ||
| this.message = message; | ||
| } | ||
| } | ||
|
|
||
| export type SwapProps = { | ||
| provider: string; | ||
| fromAccountId: string; | ||
| fromParentAccountId?: string; | ||
| toAccountId: string; | ||
| fromAmount: string; | ||
| toAmount?: string; | ||
| quoteId: string; | ||
| rate: string; | ||
| feeStrategy: string; | ||
| customFeeConfig: string; | ||
| cacheKey: string; | ||
| loading: boolean; | ||
| error: boolean; | ||
| providerRedirectURL: string; | ||
| toNewTokenId: string; | ||
| swapApiBase: string; | ||
| estimatedFees: string; | ||
| estimatedFeesUnit: string; | ||
| }; | ||
|
|
||
| export type SwapWebProps = { | ||
| manifest: LiveAppManifest; | ||
| liveAppUnavailable: () => void; | ||
| }; | ||
|
|
||
| const SwapWebAppWrapper = styled.div` | ||
| width: 100%; | ||
| flex: 1; | ||
| `; | ||
|
|
||
| const SWAP_API_BASE = getEnv("SWAP_API_BASE"); | ||
|
|
||
| const SwapWebView = ({ manifest, liveAppUnavailable }: SwapWebProps) => { | ||
| const { | ||
| colors: { | ||
| palette: { type: themeType }, | ||
| }, | ||
| } = useTheme(); | ||
|
|
||
| const webviewAPIRef = useRef<WebviewAPI>(null); | ||
| const { setDrawer } = React.useContext(context); | ||
| const [webviewState, setWebviewState] = useState<WebviewState>(initialWebviewState); | ||
| const fiatCurrency = useSelector(counterValueCurrencySelector); | ||
| const locale = useSelector(languageSelector); | ||
| const enablePlatformDevTools = useSelector(enablePlatformDevToolsSelector); | ||
|
|
||
| const customPTXHandlers = usePTXCustomHandlers(manifest); | ||
| const customHandlers = useMemo( | ||
| () => ({ | ||
| ...loggerHandlers, | ||
| ...customPTXHandlers, | ||
| }), | ||
| // eslint-disable-next-line react-hooks/exhaustive-deps | ||
| [], | ||
| ); | ||
|
|
||
| const hashString = useMemo(() => new URLSearchParams({}).toString(), []); | ||
|
|
||
| const onSwapWebviewError = (error?: SwapLiveError) => { | ||
| console.error("onSwapWebviewError", error); | ||
| logger.critical(error); | ||
| setDrawer(WebviewErrorDrawer, error); | ||
| }; | ||
|
|
||
| const onStateChange: WebviewProps["onStateChange"] = state => { | ||
| setWebviewState(state); | ||
|
|
||
| if (!state.loading && state.isAppUnavailable) { | ||
| liveAppUnavailable(); | ||
| captureException( | ||
| new UnableToLoadSwapLiveError( | ||
| '"Failed to load swap live app using WebPlatformPlayer in SwapWeb",', | ||
| ), | ||
| ); | ||
| } | ||
| }; | ||
|
|
||
| useEffect(() => { | ||
| if (webviewState.url.includes("/unknown-error")) { | ||
| // the live app has re-directed to /unknown-error. Handle this in callback, probably wallet-api failure. | ||
| onSwapWebviewError(); | ||
| } | ||
| // eslint-disable-next-line react-hooks/exhaustive-deps | ||
| }, [webviewState.url]); | ||
|
|
||
| return ( | ||
| <> | ||
| {enablePlatformDevTools && ( | ||
| <TopBar | ||
| manifest={{ ...manifest, url: `${manifest.url}#${hashString}` }} | ||
| webviewAPIRef={webviewAPIRef} | ||
| webviewState={webviewState} | ||
| /> | ||
| )} | ||
|
|
||
| <SwapWebAppWrapper> | ||
| <Web3AppWebview | ||
| manifest={{ ...manifest, url: `${manifest.url}#${hashString}` }} | ||
| inputs={{ | ||
| theme: themeType, | ||
| lang: locale, | ||
| currencyTicker: fiatCurrency.ticker, | ||
| swapApiBase: SWAP_API_BASE, | ||
| }} | ||
| onStateChange={onStateChange} | ||
| ref={webviewAPIRef} | ||
| customHandlers={customHandlers as never} | ||
| hideLoader | ||
| /> | ||
| </SwapWebAppWrapper> | ||
| </> | ||
| ); | ||
| }; | ||
|
|
||
| export default SwapWebView; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
18 changes: 0 additions & 18 deletions
18
.../ledger-live-desktop/src/renderer/screens/exchange/Swap2/Form/useIsSwapLiveFlagEnabled.ts
This file was deleted.
Oops, something went wrong.
22 changes: 22 additions & 0 deletions
22
...ledger-live-desktop/src/renderer/screens/exchange/Swap2/hooks/useIsSwapLiveFlagEnabled.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,22 @@ | ||
| import { useFeature } from "@ledgerhq/live-common/featureFlags/index"; | ||
|
|
||
| // used to get the value of the Swap Live App flag | ||
| export const useIsSwapLiveFlagEnabled = (flag: string): boolean => { | ||
| const demoZero = useFeature("ptxSwapLiveAppDemoZero"); | ||
| const demoOne = useFeature("ptxSwapLiveAppDemoOne"); | ||
| const demoThree = useFeature("ptxSwapLiveAppDemoThree"); | ||
|
|
||
| if (flag === "ptxSwapLiveAppDemoThree") { | ||
| return !!demoThree?.enabled; | ||
| } | ||
|
|
||
| if (flag === "ptxSwapLiveAppDemoOne") { | ||
| return !!demoOne?.enabled; | ||
| } | ||
|
|
||
| if (flag === "ptxSwapLiveAppDemoZero") { | ||
| return !!demoZero?.enabled; | ||
| } | ||
|
|
||
| throw new Error(`Unknown Swap Live App flag: ${flag}`); | ||
| }; |
Oops, something went wrong.