Skip to content

Commit fcbda20

Browse files
cordt-seicordt-sei
authored
Merge pull request #61 from sei-protocol/aurora-brand-kit
Completes brand kit page + styling elements
2 parents 04543b6 + b291463 commit fcbda20

18 files changed

+1730
-693
lines changed

‎components/BrandKitGallery/BrandImage.tsx

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
// components/BrandKitGallery/BrandImage.tsx
2+
import NextImage from 'next/image';
3+
import styles from '../../styles/custom.module.css';
4+
import { useState, useEffect } from 'react';
5+
6+
interface BrandImageProps {
7+
url: string;
8+
alt: string;
9+
name: string;
10+
}
11+
12+
const BrandImage = ({ url, alt, name }: BrandImageProps) => {
13+
const [imageDimensions, setImageDimensions] = useState({ width: 0, height: 0 });
14+
const [showModal, setShowModal] = useState(false);
15+
16+
useEffect(() => {
17+
const img = new window.Image();
18+
img.src = url;
19+
img.onload = () => {
20+
setImageDimensions({ width: img.width, height: img.height });
21+
};
22+
}, [url]);
23+
24+
const handleImageClick = () => {
25+
setShowModal(true);
26+
document.body.style.overflow = 'hidden';
27+
};
28+
29+
const closeModal = () => {
30+
setShowModal(false);
31+
document.body.style.overflow = 'auto';
32+
};
33+
34+
return (
35+
<>
36+
<div className={styles.imageWrapper}>
37+
<div className={styles.imageContainer}>
38+
<NextImage
39+
src={url}
40+
alt={alt}
41+
width={imageDimensions.width}
42+
height={imageDimensions.height}
43+
className={styles.image}
44+
onClick={handleImageClick}
45+
/>
46+
</div>
47+
</div>
48+
{showModal && (
49+
<div className={styles.modal} onClick={closeModal}>
50+
<div className={styles.modalContent}>
51+
<NextImage src={url} alt={alt} layout="fill" objectFit="contain" />
52+
</div>
53+
</div>
54+
)}
55+
</>
56+
);
57+
};
58+
59+
export default BrandImage;

‎components/BrandKitGallery/DownloadButton.tsx

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
// components/BrandKitGallery/DownloadButton.tsx
2+
import React from 'react';
3+
import styles from '../../styles/custom.module.css';
4+
5+
const DownloadButton = ({ url, fileName, children }) => {
6+
const handleDownload = () => {
7+
const link = document.createElement('a');
8+
link.href = url;
9+
link.setAttribute('download', fileName);
10+
document.body.appendChild(link);
11+
link.click();
12+
document.body.removeChild(link);
13+
};
14+
15+
return (
16+
<button className={styles.downloadButton} onClick={handleDownload}>
17+
{children}
18+
</button>
19+
);
20+
};
21+
22+
export default DownloadButton;

‎components/BrandKitGallery/index.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
export { default as BrandImage } from './BrandImage';
2+
export { default as DownloadButton } from './DownloadButton';

‎components/EcosystemApps/EcosystemApps.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ const EcosystemApps = () => {
1717
const filteredApps = useMemo(() => (
1818
appData.filter(app =>
1919
app.title.toLowerCase().includes(searchTerm.toLowerCase()) ||
20-
app.tags.some(tag =>
20+
app.tags.some(tag =>
2121
tagPrettyNames[tag]?.some(prettyName => prettyName.toLowerCase().includes(searchTerm.toLowerCase()))
2222
)
2323
)
@@ -27,13 +27,13 @@ const EcosystemApps = () => {
2727
<div>
2828
<input
2929
type="text"
30-
placeholder="Search apps by name or tag..."
30+
placeholder="Search apps by name or category..."
3131
value={searchTerm}
3232
onChange={(e) => setSearchTerm(e.target.value)}
3333
className="w-full p-2 text-sm border rounded shadow-sm placeholder-gray-400"
3434
/>
3535
<div className="mt-2 mb-4 text-sm text-gray-600">
36-
<strong>Filter by Tags:</strong> {allTags.join(', ')}
36+
{allTags.join(', ')}
3737
</div>
3838
<EcosystemCards>
3939
{filteredApps.length > 0 ? (

‎components/EvmWalletConnect/CustomConnectButton.tsx

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
// components/EvmWalletConnect/CustomConnectButton.tsx
2+
import { ConnectButton } from "@rainbow-me/rainbowkit";
3+
import styled from 'styled-components';
4+
5+
const CustomButton = styled.button`
6+
background: #001B2A; /* Dark color */
7+
border: none;
8+
color: #ECDEDE; /* Light color */
9+
padding: 0.5rem 1rem;
10+
font-size: 1rem;
11+
cursor: pointer;
12+
transition: color 0.3s, background 0.3s;
13+
display: inline-block;
14+
margin-top: 1rem;
15+
margin-right: 0.5rem;
16+
border-radius: 25px; /* Rounded corners */
17+
text-align: center;
18+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
19+
font-family: 'Inter', sans-serif;
20+
21+
&:hover {
22+
color: #001B2A; /* Dark color */
23+
background: #ECDEDE; /* Light color */
24+
}
25+
`;
26+
27+
const CustomConnectButton = (props) => (
28+
<ConnectButton.Custom>
29+
{({ account, chain, openAccountModal, openConnectModal, openChainModal, mounted }) => {
30+
const ready = mounted;
31+
const connected = ready && account && chain;
32+
33+
return (
34+
<div
35+
{...(!ready && {
36+
'aria-hidden': true,
37+
'style': {
38+
opacity: 0,
39+
pointerEvents: 'none',
40+
userSelect: 'none'
41+
},
42+
})}
43+
>
44+
{(() => {
45+
if (!connected) {
46+
return (
47+
<CustomButton onClick={openConnectModal} type="button">
48+
Connect Wallet
49+
</CustomButton>
50+
);
51+
}
52+
53+
if (chain.unsupported) {
54+
return (
55+
<CustomButton onClick={openChainModal} type="button">
56+
Wrong network
57+
</CustomButton>
58+
);
59+
}
60+
61+
return (
62+
<CustomButton onClick={openAccountModal} type="button">
63+
{account.displayName}
64+
</CustomButton>
65+
);
66+
})()}
67+
</div>
68+
);
69+
}}
70+
</ConnectButton.Custom>
71+
);
72+
73+
export default CustomConnectButton;

‎components/EvmWalletConnect/EvmWalletConnect.tsx

Lines changed: 28 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,14 @@
1+
// components/EvmWalletConnect/EvmWalletConnect.tsx
12
import {
2-
ConnectButton,
3-
connectorsForWallets,
4-
RainbowKitProvider,
3+
connectorsForWallets,
4+
RainbowKitProvider,
55
} from "@rainbow-me/rainbowkit";
66
import { injectedWallet, metaMaskWallet } from "@rainbow-me/rainbowkit/wallets";
77
import { Chain, configureChains, createConfig, WagmiConfig } from "wagmi";
88
import { publicProvider } from "wagmi/providers/public";
99
import "@rainbow-me/rainbowkit/styles.css";
1010
import { ChainRpcUrls } from "viem/_types/types/chain";
11+
import CustomConnectButton from './CustomConnectButton';
1112

1213
export default function EvmWalletConnect() {
1314
const rpcUrl: ChainRpcUrls = {
@@ -38,34 +39,30 @@ export default function EvmWalletConnect() {
3839
[publicProvider()]
3940
);
4041

41-
const projectId = "385413c214cb74213e0679bc30dd4e4c";
42-
const connectors = connectorsForWallets([
43-
{
44-
groupName: "Recommended",
45-
wallets: [
46-
injectedWallet({ chains }),
47-
metaMaskWallet({ projectId, chains }),
48-
],
49-
},
50-
]);
42+
const projectId = "385413c214cb74213e0679bc30dd4e4c";
43+
const connectors = connectorsForWallets([
44+
{
45+
groupName: "Recommended",
46+
wallets: [
47+
injectedWallet({ chains }),
48+
metaMaskWallet({ projectId, chains }),
49+
],
50+
},
51+
]);
5152

52-
const wagmiConfig = createConfig({
53-
autoConnect: false,
54-
connectors,
55-
publicClient,
56-
});
53+
const wagmiConfig = createConfig({
54+
autoConnect: false,
55+
connectors,
56+
publicClient,
57+
});
5758

58-
return (
59-
<div className="my-4 flex justify-center">
60-
<WagmiConfig config={wagmiConfig}>
61-
<RainbowKitProvider chains={chains}>
62-
<ConnectButton
63-
accountStatus="address"
64-
chainStatus="icon"
65-
showBalance={false}
66-
/>
67-
</RainbowKitProvider>
68-
</WagmiConfig>
69-
</div>
70-
);
59+
return (
60+
<div className="my-4 flex justify-center">
61+
<WagmiConfig config={wagmiConfig}>
62+
<RainbowKitProvider chains={chains}>
63+
<CustomConnectButton />
64+
</RainbowKitProvider>
65+
</WagmiConfig>
66+
</div>
67+
);
7168
}

‎components/index.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,8 @@ export * from "./EcosystemApps";
22
export * from "./EcosystemCard";
33
export * from "./EvmWalletConnect";
44
export * from "./HelpCallout";
5+
export * from "./BrandKitGallery";
56
export * from "./ImageWithCaption";
67
export * from "./Logo";
78
export * from "./Nfts";
9+
export * from "./VersionFetcher";

‎next.config.js

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,16 @@
11
const withNextra = require('nextra')({
22
theme: 'nextra-theme-docs',
33
themeConfig: './theme.config.tsx',
4-
})
4+
});
55

6-
module.exports = withNextra()
6+
module.exports = withNextra({
7+
images: {
8+
remotePatterns: [
9+
{
10+
protocol: 'https',
11+
hostname: 'cdn.sei.io',
12+
pathname: '**',
13+
}
14+
],
15+
},
16+
});

‎package.json

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -10,14 +10,19 @@
1010
},
1111
"license": "MIT",
1212
"dependencies": {
13+
"@mdx-js/loader": "^3.0.1",
14+
"@next/mdx": "^14.2.3",
1315
"@rainbow-me/rainbowkit": "^1.3.3",
16+
"@types/styled-components": "^5.1.34",
1417
"lucide-react": "^0.314.0",
15-
"next": "^14.0.3",
18+
"next": "^14.2.3",
19+
"next-compose-plugins": "^2.2.1",
1620
"nextra": "^2.13.2",
1721
"nextra-theme-docs": "^2.13.2",
18-
"react": "^18.2.0",
19-
"react-dom": "^18.2.0",
22+
"react": "^18.3.1",
23+
"react-dom": "^18.3.1",
2024
"sharp": "^0.33.2",
25+
"styled-components": "^6.1.11",
2126
"tailwind-merge": "^2.2.1",
2227
"viem": "^1.21.4",
2328
"wagmi": "^1.4.13"

‎pages/_app.mdx

Lines changed: 10 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,12 @@
1-
import '../styles/globals.css'
1+
import '../styles/globals.css';
2+
import '../styles/custom.css';
3+
import '@rainbow-me/rainbowkit/styles.css';
4+
import { ThemeProvider } from 'next-themes';
25

36
export default function Nextra({ Component, pageProps }) {
4-
return (
5-
<>
6-
<Component {...pageProps} />
7-
</>
8-
)
9-
}
7+
return (
8+
<ThemeProvider attribute="class">
9+
<Component {...pageProps} />
10+
</ThemeProvider>
11+
);
12+
}

0 commit comments

Comments
 (0)