Skip to content

Commit 309d9b5

Browse files
nitegeistnitegeist
authored
Merge pull request #90 from raid-guild/feat/tailwind
- Tailwind migration - Pkg manager migration from yarn to pnpm - Bug fixes - Linter fixes
2 parents 9cced64 + c5f3c04 commit 309d9b5

42 files changed

Lines changed: 10924 additions & 8132 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎.eslintrc‎

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,11 @@
11
{
22
"parser": "@typescript-eslint/parser",
3-
"plugins": ["@typescript-eslint"],
3+
"plugins": ["react", "@typescript-eslint"],
44
"extends": [
55
"airbnb",
66
"next",
77
"next/core-web-vitals",
8+
"eslint:recommended",
89
"plugin:@typescript-eslint/recommended",
910
"plugin:react/recommended",
1011
"prettier"
@@ -49,6 +50,15 @@
4950
},
5051
"import/resolver": {
5152
"typescript": {}
53+
},
54+
"next": {
55+
"rootDir": "./"
5256
}
57+
},
58+
"parserOptions": {
59+
"project": "./tsconfig.json",
60+
"tsconfigRootDir": "./",
61+
"ecmaVersion": 2022,
62+
"sourceType": "module"
5363
}
5464
}

‎.prettierrc‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
{
2-
"singleQuote": true,
3-
"jsxSingleQuote": true,
4-
"semi": true,
5-
"trailingComma": "all",
6-
"tabWidth": 2
7-
}
8-
2+
"singleQuote": true,
3+
"jsxSingleQuote": true,
4+
"semi": true,
5+
"trailingComma": "none",
6+
"tabWidth": 2,
7+
"plugins": ["prettier-plugin-tailwindcss"]
8+
}

‎.storybook/main.js‎

Lines changed: 0 additions & 21 deletions
This file was deleted.

‎.storybook/preview.js‎

Lines changed: 0 additions & 23 deletions
This file was deleted.

‎README.md‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,8 @@
44

55
This is a front-end that calls `deposit` and `withdraw` functions on various wrapped ETH smart contracts, depending on which blockchain the user is connected to. Users can switch between various EVM chains and wallets, and swap the chain's native token for its wrapped native token, and vice versa.
66

7-
* Raid Guild and WrapETH do not own the smart contracts being called by this UI.
8-
* WrapETH does not hold custody of funds, nor create or send tokens.
7+
- Raid Guild and WrapETH do not own the smart contracts being called by this UI.
8+
- WrapETH does not hold custody of funds, nor create or send tokens.
99

1010
# Contributing to WrapETH
1111

@@ -14,4 +14,3 @@ This is a front-end that calls `deposit` and `withdraw` functions on various wra
1414
3. `yarn dev`
1515

1616
On http://localhost:3000/ you'll see components
17-

‎app/layout.tsx‎

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
import Provider from '@/app/providers';
2+
import cn from '@/lib/utils';
3+
import '@/styles/globals.css';
4+
import '@rainbow-me/rainbowkit/styles.css';
5+
// eslint-disable-next-line import/no-unresolved
6+
import { Analytics } from '@vercel/analytics/next';
7+
import { Metadata, Viewport } from 'next';
8+
// eslint-disable-next-line camelcase
9+
import { Texturina, Uncial_Antiqua } from 'next/font/google';
10+
import React from 'react';
11+
12+
const uncial = Uncial_Antiqua({
13+
weight: '400',
14+
subsets: ['latin'],
15+
display: 'swap'
16+
});
17+
18+
const texturina = Texturina({
19+
weight: '400',
20+
subsets: ['latin'],
21+
display: 'swap'
22+
});
23+
24+
export const metadata: Metadata = {
25+
title: 'Wrap ETH',
26+
description:
27+
'Easily wrap ETH or xDAI for trading with any ERC-20 token. No fees, no frills.',
28+
icons: {
29+
icon: '/favicon.ico'
30+
}
31+
};
32+
33+
export const viewport: Viewport = {
34+
themeColor: [
35+
{ media: '(prefers-color-scheme: light)', color: 'white' },
36+
{ media: '(prefers-color-scheme: dark)', color: 'black' }
37+
]
38+
};
39+
40+
const RootLayout = ({ children }: { children: React.ReactNode }) => (
41+
<html lang='en'>
42+
<body
43+
className={cn(
44+
'bg-background h-screen w-screen max-w-full overflow-auto',
45+
uncial.className,
46+
texturina.className
47+
)}
48+
>
49+
<Provider>
50+
<main>{children}</main>
51+
</Provider>
52+
<Analytics mode='production' />
53+
</body>
54+
</html>
55+
);
56+
57+
export default RootLayout;

‎app/page.tsx‎

Lines changed: 97 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,97 @@
1+
'use client';
2+
3+
import ConnectWallet from '@/components/ConnectWallet';
4+
import Header from '@/components/Header';
5+
import RaidGuild from '@/components/icons/RaidGuild';
6+
import { Button } from '@/components/ui/button';
7+
import { Card } from '@/components/ui/card';
8+
import Skeleton from '@/components/ui/skeleton';
9+
import WrapperForm from '@/components/WrapperForm';
10+
import cn from '@/lib/utils';
11+
import '@rainbow-me/rainbowkit/styles.css';
12+
import Link from 'next/link';
13+
import React, { Suspense, useEffect, useState } from 'react';
14+
import { useAccount } from 'wagmi';
15+
16+
const Home = () => {
17+
const [deposit, setDeposit] = useState<boolean>(true);
18+
const { isConnected, chain } = useAccount();
19+
const [mounted, setMounted] = useState(false);
20+
21+
useEffect(() => {
22+
setMounted(true);
23+
}, []);
24+
25+
const onButtonSelection = (index: number) => {
26+
switch (index) {
27+
case 0:
28+
setDeposit(true);
29+
break;
30+
case 1:
31+
setDeposit(false);
32+
break;
33+
default:
34+
// eslint-disable-next-line no-console
35+
console.log(`Invalid input: ${index}`);
36+
}
37+
};
38+
39+
return (
40+
<div className='container mx-auto max-w-[80ch]'>
41+
<Header>
42+
<Suspense fallback={<Skeleton className='h-10 w-20' />}>
43+
<ConnectWallet />
44+
</Suspense>
45+
</Header>
46+
<h1 className='font-uncial mt-10 text-center text-7xl font-semibold'>
47+
Wrap Eth
48+
</h1>
49+
<Card className='mt-6 w-full rounded-xs border-2 border-white p-32'>
50+
<div className='flex items-center justify-center'>
51+
<Button
52+
onClick={() => onButtonSelection(0)}
53+
className={cn(
54+
'pointer rounded-xs rounded-r-none uppercase hover:bg-purple-600',
55+
deposit ? 'hover:bg-primary bg-purple-600' : 'bg-secondary'
56+
)}
57+
>
58+
Wrap {mounted ? chain?.nativeCurrency?.symbol || 'ETH' : 'ETH'}
59+
</Button>
60+
<Button
61+
onClick={() => onButtonSelection(1)}
62+
className={cn(
63+
'pointer rounded-xs rounded-l-none uppercase hover:bg-purple-600',
64+
deposit ? 'bg-secondary' : 'hover:bg-primary bg-purple-600'
65+
)}
66+
>
67+
Unwrap W{mounted ? chain?.nativeCurrency?.symbol || 'ETH' : 'ETH'}
68+
</Button>
69+
</div>
70+
71+
{mounted && isConnected ? (
72+
<WrapperForm action={deposit ? 'deposit' : 'withdraw'} />
73+
) : (
74+
<h1 className='font-uncial mt-5 text-center text-2xl font-semibold text-white'>
75+
Connect to {deposit ? 'wrap' : 'unwrap'} ETH
76+
</h1>
77+
)}
78+
</Card>
79+
80+
<div className='my-6 mr-48 flex w-full justify-center md:justify-end'>
81+
<Link
82+
className='flex flex-col items-center justify-center gap-1.5'
83+
href='https://raidguild.org'
84+
target='_blank'
85+
rel='noopener noreferrer'
86+
>
87+
<h1 className='font-uncial text-xl font-semibold text-white'>
88+
Brought to you by:
89+
</h1>
90+
<RaidGuild className='text-primary h-14 w-50' />
91+
</Link>
92+
</div>
93+
</div>
94+
);
95+
};
96+
97+
export default Home;

‎app/providers.tsx‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
'use client';
2+
3+
import Toaster from '@/components/ui/sonner';
4+
import wagmiConfig from '@/utils/wagmiConfig';
5+
import { darkTheme, RainbowKitProvider } from '@rainbow-me/rainbowkit';
6+
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
7+
import React, { PropsWithChildren } from 'react';
8+
import { WagmiProvider } from 'wagmi';
9+
10+
function makeQueryClient() {
11+
return new QueryClient({
12+
defaultOptions: {
13+
queries: {
14+
// With SSR, we usually want to set some default staleTime
15+
// above 0 to avoid refetching immediately on the client
16+
staleTime: 60 * 1000
17+
}
18+
}
19+
});
20+
}
21+
22+
let browserQueryClient: QueryClient | undefined;
23+
24+
function getQueryClient() {
25+
if (typeof window === 'undefined') {
26+
// Server: always make a new query client
27+
return makeQueryClient();
28+
}
29+
if (!browserQueryClient) browserQueryClient = makeQueryClient();
30+
return browserQueryClient;
31+
}
32+
33+
const Provider = ({ children }: PropsWithChildren) => {
34+
const queryClient = getQueryClient();
35+
return (
36+
<WagmiProvider config={wagmiConfig}>
37+
<QueryClientProvider client={queryClient}>
38+
<RainbowKitProvider theme={darkTheme()}>
39+
{children}
40+
<Toaster richColors />
41+
</RainbowKitProvider>
42+
</QueryClientProvider>
43+
</WagmiProvider>
44+
);
45+
};
46+
47+
export default Provider;

‎components.json‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
{
2+
"$schema": "https://ui.shadcn.com/schema.json",
3+
"style": "new-york",
4+
"rsc": false,
5+
"tsx": true,
6+
"tailwind": {
7+
"config": "",
8+
"css": "styles/globals.css",
9+
"baseColor": "neutral",
10+
"cssVariables": true,
11+
"prefix": ""
12+
},
13+
"aliases": {
14+
"components": "@/components",
15+
"utils": "@/lib/utils",
16+
"ui": "@/components/ui",
17+
"lib": "@/lib",
18+
"hooks": "@/hooks"
19+
},
20+
"iconLibrary": "lucide"
21+
}

0 commit comments

Comments
 (0)