Skip to content

Commit 4f7559b

Browse files
kyranjamiekyranjamie
committed
fix(web): enable imports of icons from ui, closes LEA-2315 
1 parent 02575c7 commit 4f7559b

File tree

13 files changed

+611
-341
lines changed

13 files changed

+611
-341
lines changed

‎apps/web/app/components/icons/bitcoin-icon.tsx

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,14 @@
11
import { HTMLStyledProps, styled } from 'leather-styles/jsx';
2-
import { getUiPackageAssetUrl } from '~/helpers/utils';
32

43
interface BitcoinIconProps extends HTMLStyledProps<'img'> {
54
size?: number;
65
}
76
export function BitcoinIcon({ size = 24 }: BitcoinIconProps) {
8-
return <styled.img width={size} height={size} src={getUiPackageAssetUrl('icons/bitcoin.svg')} />;
7+
return (
8+
<styled.img
9+
width={size}
10+
height={size}
11+
src={'node_modules/@leather.io/ui/dist-web/assets/icons/bitcoin.svg'}
12+
/>
13+
);
914
}

‎apps/web/app/components/icons/stacks-icon.tsx

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,14 @@
11
import { HTMLStyledProps, styled } from 'leather-styles/jsx';
2-
import { getUiPackageAssetUrl } from '~/helpers/utils';
32

43
interface StacksIconProps extends HTMLStyledProps<'img'> {
54
size?: number;
65
}
76
export function StacksIcon({ size = 24 }: StacksIconProps) {
8-
return <styled.img width={size} height={size} src={getUiPackageAssetUrl('icons/stacks.svg')} />;
7+
return (
8+
<styled.img
9+
width={size}
10+
height={size}
11+
src="node_modules/@leather.io/ui/dist-web/assets/icons/stacks.svg"
12+
/>
13+
);
914
}

‎apps/web/app/features/sign-in-button/sign-in-button.layout.tsx

Lines changed: 15 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,15 @@
11
import { styled } from 'leather-styles/jsx';
2-
import { getUiPackageAssetUrl } from '~/helpers/utils';
32

4-
import { Button, type ButtonProps, DropdownMenu, Flag, type HasChildren } from '@leather.io/ui';
3+
import {
4+
ArrowsRepeatLeftRightIcon,
5+
Button,
6+
type ButtonProps,
7+
ChevronDownIcon,
8+
DropdownMenu,
9+
ExitIcon,
10+
Flag,
11+
type HasChildren,
12+
} from '@leather.io/ui';
513
import { truncateMiddle } from '@leather.io/utils';
614

715
export function SignInButtonContainer({ children }: HasChildren) {
@@ -41,7 +49,7 @@ export function ActiveAccountButtonLayout({
4149
borderTop="default"
4250
_focusVisible={{ textDecoration: 'underline' }}
4351
>
44-
<Flag reverse img={<img src={getUiPackageAssetUrl('icons/chevron-down-16-16.svg')} />}>
52+
<Flag reverse img={<ChevronDownIcon variant="small" />}>
4553
{truncateMiddle(address, 4)}
4654
</Flag>
4755
</styled.button>
@@ -51,16 +59,7 @@ export function ActiveAccountButtonLayout({
5159
<DropdownMenu.Content sideOffset={2}>
5260
<styled.div mx="space.02" py="space.02">
5361
<DropdownMenu.Item onSelect={onSwitchAccount}>
54-
<Flag
55-
textStyle="label.02"
56-
img={
57-
<img
58-
src={getUiPackageAssetUrl('icons/arrow-right-left-16-16.svg')}
59-
width="16"
60-
height="16"
61-
/>
62-
}
63-
>
62+
<Flag textStyle="label.02" img={<ArrowsRepeatLeftRightIcon variant="small" />}>
6463
Switch account
6564
</Flag>
6665
</DropdownMenu.Item>
@@ -69,13 +68,9 @@ export function ActiveAccountButtonLayout({
6968
color="red.action-primary-default"
7069
textStyle="label.02"
7170
img={
72-
<styled.img
73-
// Hack to make icon red while icons don't work
74-
filter="invert(18%) sepia(94%) saturate(7491%) hue-rotate(359deg);"
75-
src={getUiPackageAssetUrl('icons/exit-16-16.svg')}
76-
width="16"
77-
height="16"
78-
/>
71+
<styled.div filter="invert(18%) sepia(94%) saturate(7491%) hue-rotate(359deg);">
72+
<ExitIcon variant="small" />
73+
</styled.div>
7974
}
8075
>
8176
Sign out

‎apps/web/app/helpers/utils.ts

Lines changed: 0 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,5 @@
11
import { isDefined } from '@leather.io/utils';
22

3-
export function getUiPackageAssetUrl(path: string) {
4-
if (import.meta.env.MODE === 'development') {
5-
return 'node_modules/@leather.io/ui/dist-web/assets/' + path;
6-
}
7-
return 'assets/' + path;
8-
}
9-
103
export function isLeatherInstalled() {
114
return isDefined(window.LeatherProvider);
125
}

‎apps/web/app/layouts/footer/footer.layout.tsx

Lines changed: 3 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,8 @@ import {
88
styled,
99
} from 'leather-styles/jsx';
1010
import { ExternalLink } from '~/components/external-link';
11-
import { getUiPackageAssetUrl } from '~/helpers/utils';
11+
12+
import { LeatherLettermarkIcon } from '@leather.io/ui';
1213

1314
export function FooterLayout(props: HTMLStyledProps<'footer'>) {
1415
return (
@@ -34,14 +35,7 @@ function FooterGrid(props: GridProps) {
3435
}
3536

3637
function FooterLeatherIcon() {
37-
return (
38-
<styled.img
39-
src={getUiPackageAssetUrl('icons/leather-lettermark-24-24.svg')}
40-
alt="Leather logo"
41-
width="20"
42-
height="20"
43-
/>
44-
);
38+
return <LeatherLettermarkIcon variant="small" />;
4539
}
4640

4741
interface FooterColumnProps extends FlexProps {

‎apps/web/app/layouts/nav/nav-item.layout.tsx

Lines changed: 3 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,15 @@
1-
import type { ReactNode } from 'react';
1+
import type { ReactElement, ReactNode } from 'react';
22
import { NavLink } from 'react-router';
33

44
import { styled } from 'leather-styles/jsx';
5-
import { getUiPackageAssetUrl } from '~/helpers/utils';
65

76
import { Flag } from '@leather.io/ui';
87

98
const StyledNavLink = styled(NavLink);
109

1110
interface NavItemProps {
1211
href: string;
13-
icon: string;
12+
icon: ReactElement;
1413
children: ReactNode;
1514
}
1615
export function NavItem({ children, icon, href }: NavItemProps) {
@@ -27,16 +26,7 @@ export function NavItem({ children, icon, href }: NavItemProps) {
2726
_hover={{ bg: 'ink.component-background-hover' }}
2827
_focusVisible={{ textDecoration: 'underline' }}
2928
>
30-
<Flag
31-
spacing="space.04"
32-
img={
33-
<styled.img
34-
userSelect="none"
35-
src={getUiPackageAssetUrl(`icons/${icon}-16-16.svg`)}
36-
alt={`${icon} icon`}
37-
/>
38-
}
39-
>
29+
<Flag spacing="space.04" img={icon}>
4030
{children}
4131
</Flag>
4232
</StyledNavLink>

‎apps/web/app/layouts/nav/nav.tsx

Lines changed: 21 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,18 @@ import { styled } from 'leather-styles/jsx';
22
import { WhenClient } from '~/components/client-only';
33
import { SignInButton } from '~/features/sign-in-button/sign-in-button';
44

5+
import {
6+
ArrowsRepeatLeftRightIcon,
7+
GlassesIcon,
8+
HouseIcon,
9+
InboxIcon,
10+
NewspaperIcon,
11+
PaperPlaneIcon,
12+
PlusIcon,
13+
SupportIcon,
14+
TerminalIcon,
15+
} from '@leather.io/ui';
16+
517
import { NavItem } from './nav-item.layout';
618

719
export function Nav() {
@@ -45,42 +57,42 @@ export function Nav() {
4557
</styled.svg>
4658

4759
<styled.div mt="space.06" mb="space.06">
48-
<NavItem href="/" icon="house">
60+
<NavItem href="/" icon={<HouseIcon variant="small" />}>
4961
Home
5062
</NavItem>
5163

52-
<NavItem href="/earn" icon="pulse">
64+
<NavItem href="/earn" icon={<PlusIcon variant="small" />}>
5365
Earn
5466
</NavItem>
5567

56-
<NavItem href="/send" icon="paper-plane">
68+
<NavItem href="/send" icon={<PaperPlaneIcon variant="small" />}>
5769
Send
5870
</NavItem>
5971

60-
<NavItem href="/receive" icon="inbox">
72+
<NavItem href="/receive" icon={<InboxIcon variant="small" />}>
6173
Receive
6274
</NavItem>
6375

64-
<NavItem href="/swap" icon="arrows-repeat-left-right">
76+
<NavItem href="/swap" icon={<ArrowsRepeatLeftRightIcon variant="small" />}>
6577
Swap
6678
</NavItem>
6779
</styled.div>
6880

6981
{allNavItems && (
7082
<styled.div mt="auto" mb="space.09">
71-
<NavItem href="/blog" icon="newspaper">
83+
<NavItem href="/blog" icon={<NewspaperIcon variant="small" />}>
7284
Blog
7385
</NavItem>
7486

75-
<NavItem href="/guides" icon="glasses">
87+
<NavItem href="/guides" icon={<GlassesIcon variant="small" />}>
7688
Guides
7789
</NavItem>
7890

79-
<NavItem href="/dev-docs" icon="terminal">
91+
<NavItem href="/dev-docs" icon={<TerminalIcon variant="small" />}>
8092
Dev Docs
8193
</NavItem>
8294

83-
<NavItem href="/support" icon="support">
95+
<NavItem href="/support" icon={<SupportIcon variant="small" />}>
8496
Support
8597
</NavItem>
8698
</styled.div>

‎apps/web/app/pages/earn/components/earn-instructions.tsx

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
import type { ReactElement } from 'react';
2+
3+
import { css } from 'leather-styles/css';
4+
import { Flex, Grid, type HTMLStyledProps, VStack, styled } from 'leather-styles/jsx';
5+
import { DummyIcon } from '~/components/dummy';
6+
7+
// This is some pretty funky border code I am not a fan of, but didn't find an
8+
// easier way to handle the conditional border for the breakpoints
9+
const gridBorders = css({
10+
'& > .earn-step:not(:last-child)': {
11+
borderRight: [null, null, 'default'],
12+
},
13+
'& > .earn-step:first-child': {
14+
borderRight: ['default', 'default', null],
15+
borderBottom: ['default', 'default', 'unset'],
16+
},
17+
'& > .earn-step:nth-child(2)': {
18+
borderBottom: ['default', 'default', 'unset'],
19+
},
20+
'& > .earn-step:nth-child(3)': {
21+
borderRight: ['default', 'default', null],
22+
},
23+
});
24+
25+
// interface EarnInstructionsProps extends HTMLStyledProps<'section'> {}
26+
export function EarnInstructions(props: HTMLStyledProps<'section'>) {
27+
return (
28+
<styled.section border="default" borderRadius="sm" {...props}>
29+
<Grid
30+
className={gridBorders}
31+
gap={0}
32+
gridTemplateColumns={['repeat(2, 1fr)', 'repeat(2, 1fr)', 'repeat(4, 1fr)']}
33+
>
34+
<EarnInstructionStep
35+
index={0}
36+
title="Own STX"
37+
description="Acquire or hold STX in your wallet, ready to stack."
38+
img={<DummyIcon />}
39+
/>
40+
<EarnInstructionStep
41+
index={1}
42+
title="Choose a provider"
43+
description="Pick a protocol from the table below"
44+
img={<DummyIcon />}
45+
/>
46+
<EarnInstructionStep
47+
index={2}
48+
title="Lock STX"
49+
description="Delegate and lock your STX into the chosen pool"
50+
img={<DummyIcon />}
51+
/>
52+
<EarnInstructionStep
53+
index={3}
54+
title="Begin earning"
55+
description="Receive regular rewards without lifting a finger"
56+
img={<DummyIcon />}
57+
/>
58+
</Grid>
59+
</styled.section>
60+
);
61+
}
62+
63+
interface EarnInstructionStepProps {
64+
index: number;
65+
title: string;
66+
description: string;
67+
img: ReactElement;
68+
}
69+
export function EarnInstructionStep({ index, title, description, img }: EarnInstructionStepProps) {
70+
return (
71+
<Flex flexDir="column" p="space.05" className="earn-step">
72+
<VStack gap="space.02" alignItems="left">
73+
<styled.span textStyle="heading.05" color="ink.text-non-interactive">
74+
0{index + 1}
75+
</styled.span>
76+
{img}
77+
<styled.h4 textStyle="label.01">{title}</styled.h4>
78+
</VStack>
79+
<styled.p textStyle="caption.01" fontSize="13px">
80+
{description}
81+
</styled.p>
82+
</Flex>
83+
);
84+
}

‎apps/web/package.json

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -19,8 +19,8 @@
1919
"@leather.io/sdk": "workspace:*",
2020
"@leather.io/ui": "workspace:*",
2121
"@leather.io/utils": "workspace:*",
22-
"@react-router/node": "7.3.0",
23-
"@react-router/serve": "7.3.0",
22+
"@react-router/node": "7.4.0",
23+
"@react-router/serve": "7.4.0",
2424
"@stacks/network": "7.0.2",
2525
"@stacks/stacking": "7.0.5",
2626
"@stacks/transactions": "7.0.5",
@@ -31,24 +31,24 @@
3131
"nprogress": "0.2.0",
3232
"react": "19.0.0",
3333
"react-dom": "19.0.0",
34-
"react-router": "7.3.0",
34+
"react-router": "7.4.0",
3535
"zod": "3.24.1"
3636
},
3737
"devDependencies": {
3838
"@cloudflare/workers-types": "4.20250303.0",
3939
"@originjs/vite-plugin-commonjs": "1.0.3",
4040
"@pandacss/dev": "0.53.1",
4141
"@playwright/test": "1.51.0",
42-
"@react-router/cloudflare": "7.3.0",
43-
"@react-router/dev": "7.3.0",
42+
"@react-router/cloudflare": "7.4.0",
43+
"@react-router/dev": "7.4.0",
4444
"@types/node": "22.13.5",
4545
"@types/nprogress": "0.2.3",
4646
"@types/react": "19.0.10",
4747
"@types/react-dom": "19.0.4",
4848
"react-router-devtools": "1.1.6",
4949
"typescript": "5.7.3",
5050
"vite": "6.2.0",
51-
"vite-plugin-static-copy": "2.3.0",
51+
"vite-plugin-svgr": "4.3.0",
5252
"vite-tsconfig-paths": "5.1.4",
5353
"vitest": "2.1.9",
5454
"wrangler": "3.114.0"

0 commit comments

Comments
 (0)