diff --git a/apps/sample/public/fonts/HMAlphaMono-Medium.woff2 b/apps/sample/public/fonts/HMAlphaMono-Medium.woff2 new file mode 100644 index 000000000..c0a07df8b Binary files /dev/null and b/apps/sample/public/fonts/HMAlphaMono-Medium.woff2 differ diff --git a/apps/sample/public/fonts/Inter-Bold.woff2 b/apps/sample/public/fonts/Inter-Bold.woff2 new file mode 100644 index 000000000..b26180b16 Binary files /dev/null and b/apps/sample/public/fonts/Inter-Bold.woff2 differ diff --git a/apps/sample/public/fonts/Inter-ExtraBold.woff2 b/apps/sample/public/fonts/Inter-ExtraBold.woff2 new file mode 100644 index 000000000..fc1e3e2ab Binary files /dev/null and b/apps/sample/public/fonts/Inter-ExtraBold.woff2 differ diff --git a/apps/sample/public/fonts/Inter-ExtraLight-BETA.woff2 b/apps/sample/public/fonts/Inter-ExtraLight-BETA.woff2 new file mode 100644 index 000000000..e080a70ea Binary files /dev/null and b/apps/sample/public/fonts/Inter-ExtraLight-BETA.woff2 differ diff --git a/apps/sample/public/fonts/Inter-Light-BETA.woff2 b/apps/sample/public/fonts/Inter-Light-BETA.woff2 new file mode 100644 index 000000000..c5fcddd38 Binary files /dev/null and b/apps/sample/public/fonts/Inter-Light-BETA.woff2 differ diff --git a/apps/sample/public/fonts/Inter-Medium.woff2 b/apps/sample/public/fonts/Inter-Medium.woff2 new file mode 100644 index 000000000..7d0fbe9ed Binary files /dev/null and b/apps/sample/public/fonts/Inter-Medium.woff2 differ diff --git a/apps/sample/public/fonts/Inter-Regular.woff2 b/apps/sample/public/fonts/Inter-Regular.woff2 new file mode 100644 index 000000000..46568fdcd Binary files /dev/null and b/apps/sample/public/fonts/Inter-Regular.woff2 differ diff --git a/apps/sample/public/fonts/Inter-SemiBold.woff2 b/apps/sample/public/fonts/Inter-SemiBold.woff2 new file mode 100644 index 000000000..6bb8bee18 Binary files /dev/null and b/apps/sample/public/fonts/Inter-SemiBold.woff2 differ diff --git a/apps/sample/public/nano-x.png b/apps/sample/public/nano-x.png new file mode 100644 index 000000000..4df3dd8af Binary files /dev/null and b/apps/sample/public/nano-x.png differ diff --git a/apps/sample/public/next.svg b/apps/sample/public/next.svg deleted file mode 100644 index 5174b28c5..000000000 --- a/apps/sample/public/next.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/apps/sample/public/vercel.svg b/apps/sample/public/vercel.svg deleted file mode 100644 index d2f842227..000000000 --- a/apps/sample/public/vercel.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/apps/sample/src/components/Device/index.tsx b/apps/sample/src/components/Device/index.tsx new file mode 100644 index 000000000..db7d1cb4f --- /dev/null +++ b/apps/sample/src/components/Device/index.tsx @@ -0,0 +1,12 @@ +import React from "react"; +import { Box } from "@ledgerhq/react-ui"; +import styled, { DefaultTheme } from "styled-components"; + +const Root = styled(Box).attrs({ p: 6, mb: 8, borderRadius: 2 })` + background: ${({ theme }: { theme: DefaultTheme }) => + theme.colors.neutral.c30}; +`; + +export const Device: React.FC = () => { + return No device connected; +}; diff --git a/apps/sample/src/components/MainView/index.tsx b/apps/sample/src/components/MainView/index.tsx new file mode 100644 index 000000000..b216764a4 --- /dev/null +++ b/apps/sample/src/components/MainView/index.tsx @@ -0,0 +1,81 @@ +import React from "react"; +import { Button, Flex, Icons, Text } from "@ledgerhq/react-ui"; +import styled, { DefaultTheme } from "styled-components"; +import Image from "next/image"; + +const Root = styled(Flex)` + flex-direction: column; + flex: 1; +`; + +const Header = styled(Flex).attrs({ py: 3, px: 10, gridGap: 8 })` + justify-content: flex-end; + align-items: center; +`; + +const Actions = styled(Flex)` + justify-content: flex-end; + align-items: center; + flex: 1 0 0; +`; + +const IconBox = styled(Flex).attrs({ p: 3 })` + cursor: pointer; + align-items: center; + opacity: 0.7; +`; + +const Container = styled(Flex)` + flex: 1; + justify-content: center; + align-items: center; + flex-direction: column; +`; + +const Description = styled(Text).attrs({ my: 6 })` + color: ${({ theme }: { theme: DefaultTheme }) => theme.colors.neutral.c70}; +`; + +const NanoLogo = styled(Image).attrs({ mb: 8 })` + transform: rotate(23deg); +`; + +export const MainView: React.FC = () => { + return ( + +
+ + + + + + + + +
+ + + + + Ledger Device SDK + + + Use this application to test Ledger hardware device features. + + + + + + ); +}; diff --git a/apps/sample/src/components/Menu/index.tsx b/apps/sample/src/components/Menu/index.tsx new file mode 100644 index 000000000..bb8ba0a30 --- /dev/null +++ b/apps/sample/src/components/Menu/index.tsx @@ -0,0 +1,35 @@ +import { Flex, Icons, Text } from "@ledgerhq/react-ui"; +import styled from "styled-components"; + +const MenuItem = styled(Flex).attrs({ p: 3, pl: 5 })` + align-items: center; +`; + +const MenuTitle = styled(Text).attrs({ + variant: "paragraph", + fontWeight: "semiBold", + ml: 5, +})``; + +export const Menu: React.FC = () => { + return ( + <> + + + App session + + + + Device action + + + + APDU + + + + Install app + + + ); +}; diff --git a/apps/sample/src/components/Sidebar/index.tsx b/apps/sample/src/components/Sidebar/index.tsx new file mode 100644 index 000000000..9ed6c7cff --- /dev/null +++ b/apps/sample/src/components/Sidebar/index.tsx @@ -0,0 +1,67 @@ +import React from "react"; +import { Box, Flex, Icons, Text } from "@ledgerhq/react-ui"; +import styled, { DefaultTheme } from "styled-components"; +import { Menu } from "../Menu"; +import { Device } from "../Device"; + +const Root = styled(Flex).attrs({ py: 8, px: 6 })` + flex-direction: column; + width: 280px; + background-color: ${({ theme }: { theme: DefaultTheme }) => + theme.colors.background.main}; +`; + +const Title = styled(Text).attrs({ mb: 8 })` + opacity: 0.5; +`; + +const Subtitle = styled(Text).attrs({ mb: 5 })``; + +const MenuContainer = styled(Box)` + flex: 1; + opacity: 0.2; +`; + +const BottomContainer = styled(Flex)` + opacity: 0.2; + flex-direction: column; + align-items: center; +`; + +const LogsContainer = styled(Flex).attrs({ mb: 6 })` + flex-direction: row; + align-items: center; +`; + +const LogsText = styled(Text).attrs({ ml: 3 })``; + +const VersionText = styled(Text)` + color: ${({ theme }: { theme: DefaultTheme }) => theme.colors.neutral.c50}; +`; + +export const Sidebar: React.FC = () => { + return ( + + Ledger Device SDK + + Device + + + + Menu + + + + + + + Share logs + + + Ledger device SDK version 0.0.1 + + App version 0.1 + + + ); +}; diff --git a/apps/sample/src/pages/_app.tsx b/apps/sample/src/pages/_app.tsx index 6fa2c0544..f86d41961 100644 --- a/apps/sample/src/pages/_app.tsx +++ b/apps/sample/src/pages/_app.tsx @@ -11,20 +11,17 @@ * https://nextjs.org/docs/advanced-features/custom-app */ -import { CustomThemeProvider } from "@/providers/theme"; import { GlobalStyle } from "@/styles/globalstyles"; +import { StyleProvider } from "@ledgerhq/react-ui"; import type { AppProps } from "next/app"; -import { Inter } from "next/font/google"; - -const inter = Inter({ subsets: ["latin"] }); export default function App({ Component, pageProps }: AppProps) { return ( -
- +
+ - +
); } diff --git a/apps/sample/src/pages/index.tsx b/apps/sample/src/pages/index.tsx index 5107f4428..d96fba33c 100644 --- a/apps/sample/src/pages/index.tsx +++ b/apps/sample/src/pages/index.tsx @@ -1,18 +1,23 @@ "use client"; import React from "react"; -import { Box } from "@ledgerhq/react-ui/index"; +import { Flex } from "@ledgerhq/react-ui"; import styled, { DefaultTheme } from "styled-components"; +import { Sidebar } from "@/components/Sidebar"; +import { MainView } from "@/components/MainView"; -const MainContainer = styled(Box)` - width: 100%; - height: 100%; - background-color: ${({ theme }: { theme: DefaultTheme }) => - theme.colors.background.main}; +const Root = styled(Flex)` color: ${({ theme }: { theme: DefaultTheme }) => theme.colors.neutral.c90}; + flex-direction: row; + height: 100%; `; const Home: React.FC = () => { - return Test; + return ( + + + + + ); }; export default Home; diff --git a/apps/sample/src/providers/theme.tsx b/apps/sample/src/providers/theme.tsx deleted file mode 100644 index 325d8e737..000000000 --- a/apps/sample/src/providers/theme.tsx +++ /dev/null @@ -1,27 +0,0 @@ -import React, { useMemo } from "react"; -import { defaultTheme, palettes } from "@ledgerhq/react-ui/styles/index"; -import { ThemeProvider } from "styled-components"; - -interface CustomThemeProviderProps { - children: React.ReactNode; -} - -export const CustomThemeProvider: React.FC = ({ - children, -}) => { - const selectedPalettes: "dark" | "light" = "dark"; - - const theme = useMemo( - () => ({ - ...defaultTheme, - theme: selectedPalettes, - colors: { - ...defaultTheme.colors, - ...palettes[selectedPalettes], - }, - }), - [] - ); - - return {children}; -};