Skip to content

Commit 00e6c18

Browse files
citrusinesiscitrusinesis
authored
Merge pull request #7 from 0xinevitable/junhoyeo/init-wagmi
[app] Setup rainbowkit and `@/fonts`
2 parents 498d438 + fe50faa commit 00e6c18

File tree

26 files changed

+3052
-159
lines changed

26 files changed

+3052
-159
lines changed

‎.github/workflows/upload-image.yml‎

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,19 @@ name: Build and Push Docker Image
22

33
on:
44
push:
5+
paths:
6+
- packages/database/**
7+
- packages/server/**
8+
- packages/spec/**
59
branches:
610
- main
711
tags:
812
- v*
913
pull_request:
14+
paths:
15+
- packages/database/**
16+
- packages/server/**
17+
- packages/spec/**
1018

1119
env:
1220
IMAGE_NAME: crest-server
@@ -20,10 +28,10 @@ jobs:
2028

2129
steps:
2230
- uses: actions/checkout@v5
23-
31+
2432
- name: Build image
2533
run: docker build . --file Dockerfile --tag $IMAGE_NAME --label "runnumber=${GITHUB_RUN_ID}"
26-
34+
2735
- name: Log in to registry
2836
run: echo "${{ secrets.GITHUB_TOKEN }}" | docker login ghcr.io -u ${{ github.actor }} --password-stdin
2937

@@ -37,4 +45,4 @@ jobs:
3745
echo IMAGE_ID=$IMAGE_ID
3846
echo VERSION=$VERSION
3947
docker tag $IMAGE_NAME $IMAGE_ID:$VERSION
40-
docker push $IMAGE_ID:$VERSION
48+
docker push $IMAGE_ID:$VERSION

‎.gitmodules‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,3 +7,6 @@
77
[submodule "packages/core/lib/boring-vault"]
88
path = packages/core/lib/boring-vault
99
url = https://github.com/Se7en-Seas/boring-vault
10+
[submodule "packages/core/lib/solady"]
11+
path = packages/core/lib/solady
12+
url = https://github.com/vectorized/solady

‎packages/app/next.config.js‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,14 @@ module.exports = withPlugins(
1010
compiler: {
1111
emotion: true,
1212
},
13+
webpack5: true,
14+
webpack: (config) => {
15+
config.resolve.fallback = {
16+
// Peer dependency import fallback for wagmi > @wagmi/connectors > @metamask/sdk
17+
'@react-native-async-storage/async-storage': false,
18+
};
19+
return config;
20+
},
1321
},
1422
[withBundleAnalyzer],
1523
);

‎packages/app/package.json‎

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -11,27 +11,32 @@
1111
"dependencies": {
1212
"@emotion/react": "^11.14.0",
1313
"@emotion/styled": "^11.14.1",
14+
"@rainbow-me/rainbowkit": "^2.2.8",
15+
"@tanstack/react-query": "5.89.0",
1416
"class-variance-authority": "^0.7.1",
15-
"clsx": "^2.2.0",
17+
"clsx": "^2.1.1",
1618
"lucide-react": "^0.544.0",
1719
"next": "^15.5.3",
1820
"react": "^19.0.0",
1921
"react-dom": "^19.0.0",
2022
"react-is": "^19.0.0",
2123
"tailwind-merge": "^3.3.1",
22-
"tailwindcss-animate": "^1.0.7"
24+
"tailwindcss-animate": "^1.0.7",
25+
"viem": "2.37.7",
26+
"wagmi": "2.17.1"
2327
},
2428
"devDependencies": {
2529
"@next/bundle-analyzer": "^15.5.3",
2630
"@trivago/prettier-plugin-sort-imports": "^4.3.0",
2731
"@types/node": "^22.10.1",
2832
"@types/react": "^19.0.2",
2933
"@types/react-dom": "^19.0.2",
34+
"@types/styled-jsx": "^3.4.4",
3035
"autoprefixer": "^10.4.21",
31-
"next-composed-plugins": "^2.2.1",
36+
"next-composed-plugins": "^1.0.1",
3237
"postcss": "^8.5.3",
3338
"prettier": "^3.4.2",
3439
"tailwindcss": "^3.4.15",
3540
"typescript": "^5.6.3"
3641
}
37-
}
42+
}

‎packages/app/public/assets/crest-logo.svg‎

Lines changed: 16 additions & 0 deletions
Loading

‎packages/app/src/components/ConnectButton.tsx‎

Lines changed: 121 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,121 @@
1+
import styled from '@emotion/styled';
2+
import { ConnectButton as RainbowKitConnectButton } from '@rainbow-me/rainbowkit';
3+
import { WalletIcon } from 'lucide-react';
4+
5+
import { OpticianSans } from '@/fonts';
6+
import { shortenAddress } from '@/utils/address';
7+
8+
export const ConnectButton: React.FC = () => {
9+
return (
10+
<RainbowKitConnectButton.Custom>
11+
{({
12+
account,
13+
chain,
14+
openAccountModal,
15+
openChainModal,
16+
openConnectModal,
17+
mounted,
18+
}) => {
19+
const ready = mounted;
20+
const connected = mounted && account && chain;
21+
22+
return (
23+
<div
24+
{...(!ready && {
25+
'aria-hidden': true,
26+
style: {
27+
opacity: 0,
28+
pointerEvents: 'none',
29+
userSelect: 'none',
30+
},
31+
})}
32+
>
33+
{(() => {
34+
if (!connected) {
35+
return (
36+
<ConnectWalletButton onClick={openConnectModal} type="button">
37+
Connect Wallet
38+
</ConnectWalletButton>
39+
);
40+
}
41+
42+
// FIXME: Check styles here
43+
if (chain.unsupported) {
44+
return (
45+
<Button onClick={openChainModal} type="button">
46+
Wrong network
47+
</Button>
48+
);
49+
}
50+
51+
return (
52+
<div style={{ display: 'flex', gap: 12 }}>
53+
<UserButton onClick={openAccountModal} type="button">
54+
<WalletIcon size={14} />
55+
56+
<span className="address">
57+
{shortenAddress(account.address)}{' '}
58+
<span className="balance">
59+
{account.displayBalance
60+
? ` (${account.displayBalance})`
61+
: ''}
62+
</span>
63+
</span>
64+
</UserButton>
65+
</div>
66+
);
67+
})()}
68+
</div>
69+
);
70+
}}
71+
</RainbowKitConnectButton.Custom>
72+
);
73+
};
74+
75+
const Button = styled.button`
76+
width: fit-content;
77+
display: flex;
78+
padding: 4px 14px;
79+
justify-content: center;
80+
align-items: center;
81+
gap: 10px;
82+
83+
border-radius: 8px;
84+
background: #18edeb;
85+
86+
color: #000;
87+
text-align: center;
88+
font-family: ${OpticianSans.style.fontFamily};
89+
font-size: 20px;
90+
font-style: normal;
91+
font-weight: 400;
92+
line-height: 100%;
93+
`;
94+
const ConnectWalletButton = styled(Button)`
95+
padding: 4px 16px;
96+
`;
97+
98+
const UserButton = styled(Button)`
99+
background: #253738;
100+
color: #fff;
101+
102+
& > svg {
103+
color: rgba(255, 255, 255, 0.6);
104+
}
105+
106+
& > span {
107+
font-weight: 500;
108+
font-size: 20px;
109+
line-height: 1;
110+
text-align: center;
111+
letter-spacing: -0.04em;
112+
}
113+
114+
span.balance {
115+
opacity: 0.7;
116+
117+
@media (max-width: 820px) {
118+
display: none;
119+
}
120+
}
121+
`;

‎packages/app/src/components/NavigationBar.tsx‎

Lines changed: 92 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,92 @@
1+
import styled from '@emotion/styled';
2+
import Link from 'next/link';
3+
4+
import { OpticianSans } from '@/fonts';
5+
6+
import { ConnectButton } from './ConnectButton';
7+
8+
const NAVIGATION_ITEMS = [
9+
{ title: 'Interact', href: '#interact' },
10+
{ title: 'Composition', href: '#composition' },
11+
];
12+
13+
export const NavigationBar = () => {
14+
const scrollToTop = () => window.scrollTo({ top: 0, behavior: 'smooth' });
15+
16+
return (
17+
<Wrapper>
18+
<Container>
19+
<Link href="/" onClick={() => scrollToTop()}>
20+
<Logo src="/assets/crest-logo.svg" />
21+
</Link>
22+
23+
<NavigationList>
24+
{NAVIGATION_ITEMS.map((item) => (
25+
<Link key={item.href} href={item.href}>
26+
<Button>{item.title}</Button>
27+
</Link>
28+
))}
29+
</NavigationList>
30+
31+
<Right>
32+
<ConnectButton />
33+
</Right>
34+
</Container>
35+
</Wrapper>
36+
);
37+
};
38+
39+
const Wrapper = styled.div`
40+
width: 100%;
41+
position: fixed;
42+
top: 0;
43+
left: 0;
44+
right: 0;
45+
`;
46+
const Container = styled.div`
47+
margin: 0 auto;
48+
padding: 24px 20px;
49+
50+
width: 100%;
51+
max-width: 1200px;
52+
53+
display: flex;
54+
align-items: center;
55+
gap: 24px;
56+
`;
57+
const Logo = styled.img`
58+
width: 124px;
59+
height: 32px;
60+
object-fit: contain;
61+
`;
62+
63+
const NavigationList = styled.nav`
64+
display: flex;
65+
align-items: center;
66+
gap: 6px;
67+
`;
68+
const Button = styled.button`
69+
width: fit-content;
70+
display: flex;
71+
padding: 4px 14px;
72+
justify-content: center;
73+
align-items: center;
74+
gap: 10px;
75+
76+
border-radius: 8px;
77+
background: #253738;
78+
79+
color: #fff;
80+
text-align: center;
81+
font-family: ${OpticianSans.style.fontFamily};
82+
font-size: 20px;
83+
font-style: normal;
84+
font-weight: 400;
85+
line-height: 100%;
86+
`;
87+
88+
const Right = styled.div`
89+
margin-left: auto;
90+
display: flex;
91+
align-items: center;
92+
`;

‎packages/app/src/constants/chains.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export { hyperliquidEvmTestnet } from 'viem/chains';

‎packages/app/src/constants/config.ts‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import { getDefaultConfig } from '@rainbow-me/rainbowkit';
2+
import { http } from 'viem';
3+
import { hyperliquidEvmTestnet } from 'viem/chains';
4+
5+
export const wagmiConfig = getDefaultConfig({
6+
appName: 'Crest',
7+
projectId: 'e41e817bfd4e2b5c929670379c5bfa61',
8+
chains: [hyperliquidEvmTestnet],
9+
transports: {
10+
[hyperliquidEvmTestnet.id]: http(),
11+
},
12+
});

‎packages/app/src/fonts/Optician-Sans.otf‎

10.5 KB
Binary file not shown.

0 commit comments

Comments
 (0)