[app] Setup rainbowkit and @/fonts

.github/workflows/upload-image.yml

@@ -2,11 +2,19 @@ name: Build and Push Docker Image
 
 on:
   push:
+    paths:
+      - packages/database/**
+      - packages/server/**
+      - packages/spec/**
     branches:
       - main
     tags:
       - v*
   pull_request:
+    paths:
+      - packages/database/**
+      - packages/server/**
+      - packages/spec/**
 
 env:
   IMAGE_NAME: crest-server
@@ -20,10 +28,10 @@ jobs:
 
     steps:
       - uses: actions/checkout@v5
-      
+
       - name: Build image
         run: docker build . --file Dockerfile --tag $IMAGE_NAME --label "runnumber=${GITHUB_RUN_ID}"
-        
+
       - name: Log in to registry
         run: echo "${{ secrets.GITHUB_TOKEN }}" | docker login ghcr.io -u ${{ github.actor }} --password-stdin
 
@@ -37,4 +45,4 @@ jobs:
           echo IMAGE_ID=$IMAGE_ID
           echo VERSION=$VERSION
           docker tag $IMAGE_NAME $IMAGE_ID:$VERSION
-          docker push $IMAGE_ID:$VERSION
+          docker push $IMAGE_ID:$VERSION

.gitmodules

@@ -7,3 +7,6 @@
 [submodule "packages/core/lib/boring-vault"]
 	path = packages/core/lib/boring-vault
 	url = https://github.com/Se7en-Seas/boring-vault
+[submodule "packages/core/lib/solady"]
+	path = packages/core/lib/solady
+	url = https://github.com/vectorized/solady

packages/app/next.config.js

@@ -10,6 +10,14 @@ module.exports = withPlugins(
     compiler: {
       emotion: true,
     },
+    webpack5: true,
+    webpack: (config) => {
+      config.resolve.fallback = {
+        // Peer dependency import fallback for wagmi > @wagmi/connectors > @metamask/sdk
+        '@react-native-async-storage/async-storage': false,
+      };
+      return config;
+    },
   },
   [withBundleAnalyzer],
 );

packages/app/package.json

@@ -11,27 +11,32 @@
   "dependencies": {
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.1",
+    "@rainbow-me/rainbowkit": "^2.2.8",
+    "@tanstack/react-query": "5.89.0",
     "class-variance-authority": "^0.7.1",
-    "clsx": "^2.2.0",
+    "clsx": "^2.1.1",
     "lucide-react": "^0.544.0",
     "next": "^15.5.3",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "react-is": "^19.0.0",
     "tailwind-merge": "^3.3.1",
-    "tailwindcss-animate": "^1.0.7"
+    "tailwindcss-animate": "^1.0.7",
+    "viem": "2.37.7",
+    "wagmi": "2.17.1"
   },
   "devDependencies": {
     "@next/bundle-analyzer": "^15.5.3",
     "@trivago/prettier-plugin-sort-imports": "^4.3.0",
     "@types/node": "^22.10.1",
     "@types/react": "^19.0.2",
     "@types/react-dom": "^19.0.2",
+    "@types/styled-jsx": "^3.4.4",
     "autoprefixer": "^10.4.21",
-    "next-composed-plugins": "^2.2.1",
+    "next-composed-plugins": "^1.0.1",
     "postcss": "^8.5.3",
     "prettier": "^3.4.2",
     "tailwindcss": "^3.4.15",
     "typescript": "^5.6.3"
   }
-}
+}

packages/app/src/components/ConnectButton.tsx

@@ -0,0 +1,121 @@
+import styled from '@emotion/styled';
+import { ConnectButton as RainbowKitConnectButton } from '@rainbow-me/rainbowkit';
+import { WalletIcon } from 'lucide-react';
+
+import { OpticianSans } from '@/fonts';
+import { shortenAddress } from '@/utils/address';
+
+export const ConnectButton: React.FC = () => {
+  return (
+    <RainbowKitConnectButton.Custom>
+      {({
+        account,
+        chain,
+        openAccountModal,
+        openChainModal,
+        openConnectModal,
+        mounted,
+      }) => {
+        const ready = mounted;
+        const connected = mounted && account && chain;
+
+        return (
+          <div
+            {...(!ready && {
+              'aria-hidden': true,
+              style: {
+                opacity: 0,
+                pointerEvents: 'none',
+                userSelect: 'none',
+              },
+            })}
+          >
+            {(() => {
+              if (!connected) {
+                return (
+                  <ConnectWalletButton onClick={openConnectModal} type="button">
+                    Connect Wallet
+                  </ConnectWalletButton>
+                );
+              }
+
+              // FIXME: Check styles here
+              if (chain.unsupported) {
+                return (
+                  <Button onClick={openChainModal} type="button">
+                    Wrong network
+                  </Button>
+                );
+              }
+
+              return (
+                <div style={{ display: 'flex', gap: 12 }}>
+                  <UserButton onClick={openAccountModal} type="button">
+                    <WalletIcon size={14} />
+
+                    <span className="address">
+                      {shortenAddress(account.address)}{' '}
+                      <span className="balance">
+                        {account.displayBalance
+                          ? ` (${account.displayBalance})`
+                          : ''}
+                      </span>
+                    </span>
+                  </UserButton>
+                </div>
+              );
+            })()}
+          </div>
+        );
+      }}
+    </RainbowKitConnectButton.Custom>
+  );
+};
+
+const Button = styled.button`
+  width: fit-content;
+  display: flex;
+  padding: 4px 14px;
+  justify-content: center;
+  align-items: center;
+  gap: 10px;
+
+  border-radius: 8px;
+  background: #18edeb;
+
+  color: #000;
+  text-align: center;
+  font-family: ${OpticianSans.style.fontFamily};
+  font-size: 20px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 100%;
+`;
+const ConnectWalletButton = styled(Button)`
+  padding: 4px 16px;
+`;
+
+const UserButton = styled(Button)`
+  background: #253738;
+  color: #fff;
+
+  & > svg {
+    color: rgba(255, 255, 255, 0.6);
+  }
+
+  & > span {
+    font-weight: 500;
+    font-size: 20px;
+    line-height: 1;
+    text-align: center;
+    letter-spacing: -0.04em;
+  }
+
+  span.balance {
+    opacity: 0.7;
+
+    @media (max-width: 820px) {
+      display: none;
+    }
+  }
+`;

packages/app/src/components/NavigationBar.tsx

@@ -0,0 +1,92 @@
+import styled from '@emotion/styled';
+import Link from 'next/link';
+
+import { OpticianSans } from '@/fonts';
+
+import { ConnectButton } from './ConnectButton';
+
+const NAVIGATION_ITEMS = [
+  { title: 'Interact', href: '#interact' },
+  { title: 'Composition', href: '#composition' },
+];
+
+export const NavigationBar = () => {
+  const scrollToTop = () => window.scrollTo({ top: 0, behavior: 'smooth' });
+
+  return (
+    <Wrapper>
+      <Container>
+        <Link href="/" onClick={() => scrollToTop()}>
+          <Logo src="/assets/crest-logo.svg" />
+        </Link>
+
+        <NavigationList>
+          {NAVIGATION_ITEMS.map((item) => (
+            <Link key={item.href} href={item.href}>
+              <Button>{item.title}</Button>
+            </Link>
+          ))}
+        </NavigationList>
+
+        <Right>
+          <ConnectButton />
+        </Right>
+      </Container>
+    </Wrapper>
+  );
+};
+
+const Wrapper = styled.div`
+  width: 100%;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+`;
+const Container = styled.div`
+  margin: 0 auto;
+  padding: 24px 20px;
+
+  width: 100%;
+  max-width: 1200px;
+
+  display: flex;
+  align-items: center;
+  gap: 24px;
+`;
+const Logo = styled.img`
+  width: 124px;
+  height: 32px;
+  object-fit: contain;
+`;
+
+const NavigationList = styled.nav`
+  display: flex;
+  align-items: center;
+  gap: 6px;
+`;
+const Button = styled.button`
+  width: fit-content;
+  display: flex;
+  padding: 4px 14px;
+  justify-content: center;
+  align-items: center;
+  gap: 10px;
+
+  border-radius: 8px;
+  background: #253738;
+
+  color: #fff;
+  text-align: center;
+  font-family: ${OpticianSans.style.fontFamily};
+  font-size: 20px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 100%;
+`;
+
+const Right = styled.div`
+  margin-left: auto;
+  display: flex;
+  align-items: center;
+`;

packages/app/src/constants/chains.ts

@@ -0,0 +1 @@
+export { hyperliquidEvmTestnet } from 'viem/chains';

packages/app/src/constants/config.ts

@@ -0,0 +1,12 @@
+import { getDefaultConfig } from '@rainbow-me/rainbowkit';
+import { http } from 'viem';
+import { hyperliquidEvmTestnet } from 'viem/chains';
+
+export const wagmiConfig = getDefaultConfig({
+  appName: 'Crest',
+  projectId: 'e41e817bfd4e2b5c929670379c5bfa61',
+  chains: [hyperliquidEvmTestnet],
+  transports: {
+    [hyperliquidEvmTestnet.id]: http(),
+  },
+});

packages/app/src/fonts/index.ts

@@ -0,0 +1,13 @@
+import { Instrument_Sans } from 'next/font/google';
+import localFont from 'next/font/local';
+
+export const OpticianSans = localFont({
+  src: './Optician-Sans.otf',
+  display: 'block',
+  fallback: ['Optician Sans', 'Inter', 'sans-serif'],
+});
+
+export const InstrumentSans = Instrument_Sans({
+  subsets: ['latin'],
+  weight: ['400', '500', '600', '700'],
+});