-
Notifications
You must be signed in to change notification settings - Fork 333
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
✨(lld): add discovery drawer for ordis (#7876)
- Loading branch information
1 parent
2742dda
commit c95ac37
Showing
11 changed files
with
192 additions
and
22 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,5 @@ | ||
--- | ||
"ledger-live-desktop": patch | ||
--- | ||
|
||
Add discovery drawer when arriving on BTC account |
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
22 changes: 22 additions & 0 deletions
22
...newArch/features/Collectibles/Ordinals/components/Inscriptions/DiscoveryDrawer/Header.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,22 @@ | ||
import React from "react"; | ||
import { Flex, CryptoIcon } from "@ledgerhq/react-ui"; | ||
|
||
const DiscoveryDrawerHeader: React.FC = () => ( | ||
<Flex | ||
borderRadius="100%" | ||
justifyContent="center" | ||
style={{ | ||
height: 400, | ||
width: 400, | ||
position: "absolute", | ||
top: 0, | ||
left: "50%", | ||
transform: "translateX(-50%) translateY(-50%)", | ||
filter: "blur(120px)", | ||
}} | ||
> | ||
<CryptoIcon name="BTC" circleIcon size={300} /> | ||
</Flex> | ||
); | ||
|
||
export default DiscoveryDrawerHeader; |
67 changes: 67 additions & 0 deletions
67
.../newArch/features/Collectibles/Ordinals/components/Inscriptions/DiscoveryDrawer/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
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,67 @@ | ||
import React from "react"; | ||
import DiscoveryDrawerHeader from "./Header"; | ||
import { Button, CryptoIcon, Flex, Link, Text } from "@ledgerhq/react-ui"; | ||
import { SideDrawer } from "~/renderer/components/SideDrawer"; | ||
import { Direction } from "@ledgerhq/react-ui/components/layout/Drawer/index"; | ||
import { space } from "@ledgerhq/react-ui/styles/theme"; | ||
import { urls } from "~/config/urls"; | ||
import { openURL } from "~/renderer/linking"; | ||
import { useTranslation } from "react-i18next"; | ||
|
||
type Props = { | ||
isOpen: boolean; | ||
onClose: () => void; | ||
}; | ||
|
||
const DiscoveryDrawer = ({ isOpen, onClose }: Props) => { | ||
const { t } = useTranslation(); | ||
const learnMoreUrl = urls.whatAreOrdinals; | ||
const onButtonClick = () => openURL(learnMoreUrl); | ||
const onLinkClick = () => onClose(); | ||
|
||
return ( | ||
<SideDrawer | ||
isOpen={isOpen} | ||
withPaddingTop={false} | ||
onRequestClose={onClose} | ||
direction={Direction.Left} | ||
forceDisableFocusTrap | ||
> | ||
<DiscoveryDrawerHeader /> | ||
<Flex | ||
px={40} | ||
mx={33} | ||
height="100%" | ||
justifyContent="center" | ||
alignItems="center" | ||
flexDirection="column" | ||
> | ||
<Flex p={18} bg="rgba(247, 147, 26, 0.05)" borderRadius="100%"> | ||
<CryptoIcon name="BTC" circleIcon size={36} /> | ||
</Flex> | ||
<Text variant="h4Inter" textAlign="center" my={space[6]} fontSize="24px"> | ||
{t("ordinals.inscriptions.discoveryDrawer.title")} | ||
</Text> | ||
<Text | ||
variant="bodyLineHeight" | ||
color="neutral.c70" | ||
fontSize="14px" | ||
textAlign="center" | ||
mb={space[8]} | ||
> | ||
{t("ordinals.inscriptions.discoveryDrawer.description")} | ||
</Text> | ||
<Button variant="main" mb={space[8]} onClick={onButtonClick}> | ||
<Text variant="bodyLineHeight" fontSize={16} color="neutral.c00" textAlign="center"> | ||
{t("ordinals.inscriptions.discoveryDrawer.learnMore")} | ||
</Text> | ||
</Button> | ||
<Link mb={space[8]} size="large" onClick={onLinkClick}> | ||
{t("ordinals.inscriptions.discoveryDrawer.viewCoinControl")} | ||
</Link> | ||
</Flex> | ||
</SideDrawer> | ||
); | ||
}; | ||
|
||
export default DiscoveryDrawer; |
38 changes: 23 additions & 15 deletions
38
.../ledger-live-desktop/src/newArch/features/Collectibles/Ordinals/screens/Account/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
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,25 +1,33 @@ | ||
import React from "react"; | ||
import { Flex } from "@ledgerhq/react-ui"; | ||
import Inscriptions from "../../components/Inscriptions"; | ||
import RareSats from "../../components/RareSats"; | ||
import { Flex } from "@ledgerhq/react-ui"; | ||
import useFetchOrdinals from "LLD/features/Collectibles/hooks/useFetchOrdinals"; | ||
import DiscoveryDrawer from "../../components/Inscriptions/DiscoveryDrawer"; | ||
import { BitcoinAccount } from "@ledgerhq/coin-bitcoin/lib/types"; | ||
import { useBitcoinAccountModel } from "./useBitcoinAccountModel"; | ||
|
||
type ViewProps = ReturnType<typeof useBitcoinAccountModel>; | ||
|
||
type Props = { | ||
interface Props { | ||
account: BitcoinAccount; | ||
}; | ||
} | ||
|
||
const OrdinalsAccount: React.FC<Props> = ({ account }) => { | ||
const { rareSats, inscriptions, ...rest } = useFetchOrdinals({ | ||
account, | ||
}); | ||
const View: React.FC<ViewProps> = ({ | ||
inscriptions, | ||
rest, | ||
rareSats, | ||
isDrawerOpen, | ||
handleDrawerClose, | ||
}) => ( | ||
<Flex mb={50} width="100%" flexDirection="column" rowGap={40}> | ||
<Inscriptions inscriptions={inscriptions} {...rest} /> | ||
<RareSats rareSats={rareSats} {...rest} /> | ||
<DiscoveryDrawer isOpen={isDrawerOpen} onClose={handleDrawerClose} /> | ||
</Flex> | ||
); | ||
|
||
return ( | ||
<Flex mb={50} width="100%" flexDirection="column" rowGap={40}> | ||
<Inscriptions inscriptions={inscriptions} {...rest} /> | ||
<RareSats rareSats={rareSats} {...rest} /> | ||
</Flex> | ||
); | ||
}; | ||
const OrdinalsAccount: React.FC<Props> = ({ account }) => ( | ||
<View {...useBitcoinAccountModel({ account })} /> | ||
); | ||
|
||
export default OrdinalsAccount; |
32 changes: 32 additions & 0 deletions
32
...ktop/src/newArch/features/Collectibles/Ordinals/screens/Account/useBitcoinAccountModel.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,32 @@ | ||
import { BitcoinAccount } from "@ledgerhq/coin-bitcoin/lib/types"; | ||
import useFetchOrdinals from "LLD/features/Collectibles/hooks/useFetchOrdinals"; | ||
import { useState, useEffect } from "react"; | ||
import { useDispatch, useSelector } from "react-redux"; | ||
import { setHasSeenOrdinalsDiscoveryDrawer } from "~/renderer/actions/settings"; | ||
import { hasSeenOrdinalsDiscoveryDrawerSelector } from "~/renderer/reducers/settings"; | ||
|
||
interface Props { | ||
account: BitcoinAccount; | ||
} | ||
|
||
export const useBitcoinAccountModel = ({ account }: Props) => { | ||
const dispatch = useDispatch(); | ||
const hasSeenDiscoveryDrawer = useSelector(hasSeenOrdinalsDiscoveryDrawerSelector); | ||
|
||
const { rareSats, inscriptions, ...rest } = useFetchOrdinals({ account }); | ||
|
||
const [isDrawerOpen, setIsDrawerOpen] = useState(!hasSeenDiscoveryDrawer); | ||
|
||
useEffect(() => { | ||
if (hasSeenDiscoveryDrawer) { | ||
setIsDrawerOpen(false); | ||
} | ||
}, [hasSeenDiscoveryDrawer]); | ||
|
||
const handleDrawerClose = () => { | ||
setIsDrawerOpen(false); | ||
dispatch(setHasSeenOrdinalsDiscoveryDrawer(true)); | ||
}; | ||
|
||
return { rareSats, inscriptions, rest, isDrawerOpen, handleDrawerClose }; | ||
}; |
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
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