Skip to content

Commit

Permalink
fix: freeze when opening a live-app [LIVE-13411]
Browse files Browse the repository at this point in the history
  • Loading branch information
Justkant committed Aug 20, 2024
1 parent 935ce9f commit 22019d6
Show file tree
Hide file tree
Showing 5 changed files with 111 additions and 66 deletions.
5 changes: 5 additions & 0 deletions .changeset/tricky-forks-fly.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"live-mobile": patch
---

fix: freeze when opening a live-app
Original file line number Diff line number Diff line change
@@ -1,17 +1,12 @@
import React, { RefObject, useCallback } from "react";
import { TouchableOpacity } from "react-native";
import { Flex, Text } from "@ledgerhq/native-ui";
import { Flex } from "@ledgerhq/native-ui";
import { ArrowLeftMedium, ArrowRightMedium, ReverseMedium } from "@ledgerhq/native-ui/assets/icons";
import { useTheme } from "styled-components/native";
import { AppManifest } from "@ledgerhq/live-common/wallet-api/types";
import { useDappCurrentAccount } from "@ledgerhq/live-common/wallet-api/useDappLogic";
import { safeGetRefValue, CurrentAccountHistDB } from "@ledgerhq/live-common/wallet-api/react";
import { WebviewAPI, WebviewState } from "../Web3AppWebview/types";
import Button from "../Button";
import { Trans } from "react-i18next";
import CircleCurrencyIcon from "../CircleCurrencyIcon";
import { useSelectAccount } from "../Web3AppWebview/helpers";
import { useMaybeAccountName } from "~/reducers/wallet";
import SelectAccountButton from "./SelectAccountButton";

type BottomBarProps = {
manifest: AppManifest;
Expand Down Expand Up @@ -48,7 +43,6 @@ export function BottomBar({
currentAccountHistDb,
}: BottomBarProps) {
const { colors } = useTheme();
const { currentAccount } = useDappCurrentAccount(currentAccountHistDb);
const shouldDisplaySelectAccount = !!manifest.dapp;

const handleForward = useCallback(() => {
Expand All @@ -69,10 +63,6 @@ export function BottomBar({
webview.reload();
}, [webviewAPIRef]);

const { onSelectAccount } = useSelectAccount({ manifest, currentAccountHistDb });

const currentAccountName = useMaybeAccountName(currentAccount);

return (
<Flex flexDirection="row" paddingY={4} paddingX={4} alignItems="center">
<Flex flexDirection="row" flex={1}>
Expand All @@ -92,27 +82,7 @@ export function BottomBar({
</Flex>

{shouldDisplaySelectAccount ? (
<Button type="primary" onPress={onSelectAccount}>
{!currentAccount ? (
<Text>
<Trans i18nKey="common.selectAccount" />
</Text>
) : (
<Flex flexDirection="row" height={50} alignItems="center" justifyContent="center">
<CircleCurrencyIcon
size={24}
currency={
currentAccount.type === "TokenAccount"
? currentAccount.token
: currentAccount.currency
}
/>
<Text color={"neutral.c20"} ml={4}>
{currentAccountName}
</Text>
</Flex>
)}
</Button>
<SelectAccountButton manifest={manifest} currentAccountHistDb={currentAccountHistDb} />
) : null}

<IconButton onPress={handleReload} alignSelf="flex-end">
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@
import React from "react";
import { Trans } from "react-i18next";
import { Flex, Text } from "@ledgerhq/native-ui";
import { AppManifest } from "@ledgerhq/live-common/wallet-api/types";
import { CurrentAccountHistDB } from "@ledgerhq/live-common/wallet-api/react";
import { useDappCurrentAccount } from "@ledgerhq/live-common/wallet-api/useDappLogic";
import Button from "~/components/Button";
import CircleCurrencyIcon from "~/components/CircleCurrencyIcon";
import { useSelectAccount } from "~/components/Web3AppWebview/helpers";
import { useMaybeAccountName } from "~/reducers/wallet";

type SelectAccountButtonProps = {
manifest: AppManifest;
currentAccountHistDb: CurrentAccountHistDB;
};

export default function SelectAccountButton({
manifest,
currentAccountHistDb,
}: SelectAccountButtonProps) {
const { currentAccount } = useDappCurrentAccount(currentAccountHistDb);

const { onSelectAccount } = useSelectAccount({ manifest, currentAccountHistDb });

const currentAccountName = useMaybeAccountName(currentAccount);

return (
<Button type="primary" onPress={onSelectAccount}>
{!currentAccount ? (
<Text>
<Trans i18nKey="common.selectAccount" />
</Text>
) : (
<Flex flexDirection="row" height={50} alignItems="center" justifyContent="center">
<CircleCurrencyIcon
size={24}
currency={
currentAccount.type === "TokenAccount"
? currentAccount.token
: currentAccount.currency
}
/>
<Text color={"neutral.c20"} ml={4}>
{currentAccountName}
</Text>
</Flex>
)}
</Button>
);
}
Original file line number Diff line number Diff line change
@@ -1,23 +1,18 @@
import React, { RefObject, useCallback } from "react";
import { TouchableOpacity } from "react-native";
import { useTheme } from "@react-navigation/native";
import { Trans } from "react-i18next";
import Animated, {
useAnimatedStyle,
interpolate,
Extrapolation,
SharedValue,
} from "react-native-reanimated";
import { Flex, Text } from "@ledgerhq/native-ui";
import { Flex } from "@ledgerhq/native-ui";
import { AppManifest } from "@ledgerhq/live-common/wallet-api/types";
import { ArrowLeftMedium, ArrowRightMedium, ReverseMedium } from "@ledgerhq/native-ui/assets/icons";
import { safeGetRefValue, CurrentAccountHistDB } from "@ledgerhq/live-common/wallet-api/react";
import { useDappCurrentAccount } from "@ledgerhq/live-common/wallet-api/useDappLogic";
import { WebviewAPI, WebviewState } from "~/components/Web3AppWebview/types";
import Button from "~/components/Button";
import CircleCurrencyIcon from "~/components/CircleCurrencyIcon";
import { useSelectAccount } from "~/components/Web3AppWebview/helpers";
import { useMaybeAccountName } from "~/reducers/wallet";
import SelectAccountButton from "./SelectAccountButton";

const BAR_HEIGHT = 60;
export const TOTAL_HEADER_HEIGHT = BAR_HEIGHT;
Expand Down Expand Up @@ -61,7 +56,6 @@ export function BottomBar({
layoutY,
}: BottomBarProps) {
const { colors } = useTheme();
const { currentAccount } = useDappCurrentAccount(currentAccountHistDb);
const shouldDisplaySelectAccount = !!manifest.dapp;

const handleForward = useCallback(() => {
Expand All @@ -82,10 +76,6 @@ export function BottomBar({
webview.reload();
}, [webviewAPIRef]);

const { onSelectAccount } = useSelectAccount({ manifest, currentAccountHistDb });

const currentAccountName = useMaybeAccountName(currentAccount);

const heightStyle = useAnimatedStyle(() => {
if (!layoutY) return {};

Expand Down Expand Up @@ -132,27 +122,7 @@ export function BottomBar({
</Flex>

{shouldDisplaySelectAccount ? (
<Button type="primary" onPress={onSelectAccount}>
{!currentAccount ? (
<Text>
<Trans i18nKey="common.selectAccount" />
</Text>
) : (
<Flex flexDirection="row" height={50} alignItems="center" justifyContent="center">
<CircleCurrencyIcon
size={24}
currency={
currentAccount.type === "TokenAccount"
? currentAccount.token
: currentAccount.currency
}
/>
<Text color={"neutral.c20"} ml={4}>
{currentAccountName}
</Text>
</Flex>
)}
</Button>
<SelectAccountButton manifest={manifest} currentAccountHistDb={currentAccountHistDb} />
) : null}

<IconButton onPress={handleReload} alignSelf="flex-end">
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@
import React from "react";
import { Trans } from "react-i18next";
import { Flex, Text } from "@ledgerhq/native-ui";
import { AppManifest } from "@ledgerhq/live-common/wallet-api/types";
import { CurrentAccountHistDB } from "@ledgerhq/live-common/wallet-api/react";
import { useDappCurrentAccount } from "@ledgerhq/live-common/wallet-api/useDappLogic";
import Button from "~/components/Button";
import CircleCurrencyIcon from "~/components/CircleCurrencyIcon";
import { useSelectAccount } from "~/components/Web3AppWebview/helpers";
import { useMaybeAccountName } from "~/reducers/wallet";

type SelectAccountButtonProps = {
manifest: AppManifest;
currentAccountHistDb: CurrentAccountHistDB;
};

export default function SelectAccountButton({
manifest,
currentAccountHistDb,
}: SelectAccountButtonProps) {
const { currentAccount } = useDappCurrentAccount(currentAccountHistDb);

const { onSelectAccount } = useSelectAccount({ manifest, currentAccountHistDb });

const currentAccountName = useMaybeAccountName(currentAccount);

return (
<Button type="primary" onPress={onSelectAccount}>
{!currentAccount ? (
<Text>
<Trans i18nKey="common.selectAccount" />
</Text>
) : (
<Flex flexDirection="row" height={50} alignItems="center" justifyContent="center">
<CircleCurrencyIcon
size={24}
currency={
currentAccount.type === "TokenAccount"
? currentAccount.token
: currentAccount.currency
}
/>
<Text color={"neutral.c20"} ml={4}>
{currentAccountName}
</Text>
</Flex>
)}
</Button>
);
}

0 comments on commit 22019d6

Please sign in to comment.