Skip to content

Commit

Permalink
enh homepage and tokencard components
Browse files Browse the repository at this point in the history
  • Loading branch information
salmad3 committed Nov 7, 2024
1 parent 6e7ce9e commit 06a9a2e
Show file tree
Hide file tree
Showing 5 changed files with 146 additions and 101 deletions.
5 changes: 3 additions & 2 deletions components/Homepage/SeiIntro.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ const SeiIntro: React.FC = () => {
setMounted(true);
}, []);

// Styles
const heroStyles = {
position: 'relative' as const,
height: '80vh',
Expand Down Expand Up @@ -138,7 +139,7 @@ const SeiIntro: React.FC = () => {
scalability with a developer-focused approach.
</Text>
<Group style={buttonsStyles}>
<Button
<Button<'a'>
variant="gradient"
gradient={{ from: '#9E1F19', to: '#780000', deg: 135 }}
size="md"
Expand All @@ -149,7 +150,7 @@ const SeiIntro: React.FC = () => {
>
Get Started
</Button>
<Button
<Button<'a'>
variant="outline"
color="light"
size="md"
Expand Down
72 changes: 44 additions & 28 deletions components/TokenCard/TokenCard.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,15 +5,31 @@ import { TokenCardProps } from './types';
import ibcInfo from './data/ibc_info.json';

const cardStyle = {
backgroundColor: '#2c2f33',
backgroundColor: '#1B1F24',
padding: '1.5rem',
borderRadius: '12px',
boxShadow: '0 4px 12px rgba(0, 0, 0, 0.3)',
boxShadow: '0 2px 8px rgba(0, 0, 0, 0.2)',
transition: 'box-shadow 0.3s ease-in-out',
border: '1px solid #2A2F36',
};

const textColor = { color: '#f0f0f0' };
const subTextColor = { color: '#b0b0b0' };
const textColor = { color: '#ECEDEE' };
const subTextColor = { color: '#B0B4BA' };
const headerStyle = {
color: '#ECEDEE',
borderBottom: '1px solid #780000',
paddingBottom: '4px',
marginBottom: '8px',
fontWeight: 'bold',
};

const inputStyle = {
backgroundColor: '#2A2F36',
color: '#ECEDEE',
border: '1px solid #8CABA9',
borderRadius: '8px',
padding: '0.5rem',
};

export const TokenCard: React.FC<TokenCardProps> = ({ title, description, tooltip, details, referenceGuide }) => {
const [conversionInput, setConversionInput] = useState<number | ''>('');
Expand All @@ -34,28 +50,28 @@ export const TokenCard: React.FC<TokenCardProps> = ({ title, description, toolti
const COSMOS_CONVERSION_FACTOR = { asei: 1e18, nsei: 1e9, usei: 1e6 };

return (
<Card
style={cardStyle}
shadow="sm"
padding="lg"
<Card
style={cardStyle}
shadow="sm"
padding="lg"
withBorder
onMouseEnter={(e) => e.currentTarget.style.boxShadow = '0 8px 20px rgba(0, 0, 0, 0.5)'}
onMouseLeave={(e) => e.currentTarget.style.boxShadow = '0 4px 12px rgba(0, 0, 0, 0.3)'}
onMouseEnter={(e) => (e.currentTarget.style.boxShadow = '0 4px 16px rgba(0, 0, 0, 0.3)')}
onMouseLeave={(e) => (e.currentTarget.style.boxShadow = '0 2px 8px rgba(0, 0, 0, 0.2)')}
>
<div style={{ display: 'flex', alignItems: 'center', marginBottom: '8px' }}>
<Text size="lg" style={{ ...textColor, fontWeight: 'bold' }}>{title}</Text>
<Text size="lg" style={headerStyle}>{title}</Text>
{tooltip && (
<Tooltip label={tooltip} position="right" withArrow>
<IconInfoCircle size={18} color="#4a90e2" style={{ cursor: 'pointer', marginLeft: '8px' }} />
<IconInfoCircle size={18} color="#ECEDEE" style={{ cursor: 'pointer', marginLeft: '8px' }} />
</Tooltip>
)}
</div>

{description && (
<Text size="sm" style={{ ...subTextColor, marginBottom: '16px' }}>{description}</Text>
)}
<Divider my="sm" variant="dashed" />

<Divider my="sm" color="#2A2F36" />

{details.map((detail, index) => (
<div key={index} style={{ marginBottom: '12px' }}>
Expand All @@ -67,7 +83,7 @@ export const TokenCard: React.FC<TokenCardProps> = ({ title, description, toolti
type="number"
value={conversionInput}
onChange={handleConversionInput}
styles={{ input: { backgroundColor: '#4a4d52', color: '#ffffff', marginTop: '8px' } }}
styles={{ input: inputStyle }}
/>
{conversionInput !== '' && detail.label === "EVM Conversion" && (
<Text size="sm" style={{ ...textColor, marginTop: '8px' }}>
Expand Down Expand Up @@ -98,9 +114,9 @@ export const TokenCard: React.FC<TokenCardProps> = ({ title, description, toolti

{title === "IBC Tokens" && (
<Accordion variant="contained" mt="md" styles={{
item: { backgroundColor: '#3b3e42', color: '#f0f0f0', borderRadius: '8px', marginBottom: '8px' },
control: { color: '#f0f0f0', fontWeight: 500 },
panel: { color: '#e0e0e0', padding: '12px 16px', fontSize: '14px' }
item: { backgroundColor: '#1B1F24', color: '#ECEDEE', borderRadius: '8px', marginBottom: '8px' },
control: { color: '#ECEDEE', fontWeight: 500 },
panel: { color: '#ECEDEE', padding: '12px 16px', fontSize: '14px' }
}}>
{Object.entries(ibcInfo).map(([network, channels]) => (
<Accordion.Item key={network} value={network}>
Expand All @@ -109,15 +125,15 @@ export const TokenCard: React.FC<TokenCardProps> = ({ title, description, toolti
{channels.map((channel, idx) => (
<div key={idx} style={{ marginBottom: '12px' }}>
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
<Text size="sm" style={{ color: '#e0e0e0' }}>
<Text size="sm" style={{ color: '#ECEDEE' }}>
<b>Counterparty Chain:</b> {channel.counterparty_chain_name}
</Text>
<Tooltip label={copied === idx ? "Copied!" : "Copy JSON"} withArrow>
<Button
size="xs"
variant="subtle"
onClick={() => handleCopy(JSON.stringify(channel, null, 2), idx)}
style={{ color: '#4a90e2', cursor: 'pointer' }}
style={{ color: '#ECEDEE', cursor: 'pointer' }}
>
<IconClipboardCheck size={16} />
</Button>
Expand All @@ -135,7 +151,7 @@ export const TokenCard: React.FC<TokenCardProps> = ({ title, description, toolti
<Text size="sm" style={subTextColor}>
<b>Client ID:</b> {channel.client_id}
</Text>
{idx < channels.length - 1 && <hr style={{ borderColor: '#4a4d52', margin: '8px 0' }} />}
{idx < channels.length - 1 && <hr style={{ borderColor: '#2A2F36', margin: '8px 0' }} />}
</div>
))}
</Accordion.Panel>
Expand All @@ -146,9 +162,9 @@ export const TokenCard: React.FC<TokenCardProps> = ({ title, description, toolti

{referenceGuide && (
<Accordion variant="contained" mt="md" styles={{
item: { backgroundColor: '#3b3e42', color: '#f0f0f0', borderRadius: '8px', marginBottom: '8px' },
control: { color: '#f0f0f0', fontWeight: 500 },
panel: { color: '#e0e0e0', padding: '12px 16px', fontSize: '14px' }
item: { backgroundColor: '#1B1F24', color: '#ECEDEE', borderRadius: '8px', marginBottom: '8px' },
control: { color: '#ECEDEE', fontWeight: 500 },
panel: { color: '#ECEDEE', padding: '12px 16px', fontSize: '14px' }
}}>
<Accordion.Item value="pointer-guide">
<Accordion.Control>Pointer Contract Guide</Accordion.Control>
Expand All @@ -157,14 +173,14 @@ export const TokenCard: React.FC<TokenCardProps> = ({ title, description, toolti
<div key={idx} style={{ marginBottom: '12px' }}>
<Text size="sm" style={subTextColor}>{section.content}</Text>
{section.command && (
<div style={{ position: 'relative', backgroundColor: '#4a4d52', padding: '10px', borderRadius: '5px', marginTop: '8px' }}>
<Text size="xs" style={{ color: '#ffffff', fontFamily: 'monospace' }}>{section.command}</Text>
<div style={{ position: 'relative', backgroundColor: '#2A2F36', padding: '10px', borderRadius: '5px', marginTop: '8px' }}>
<Text size="xs" style={{ color: '#ECEDEE', fontFamily: 'monospace' }}>{section.command}</Text>
<Tooltip label={copied === idx ? "Copied!" : "Copy Command"} withArrow>
<Button
size="xs"
variant="subtle"
onClick={() => handleCopy(section.command, idx)}
style={{ position: 'absolute', top: '8px', right: '8px', color: '#4a90e2', cursor: 'pointer' }}
style={{ position: 'absolute', top: '8px', right: '8px', color: '#ECEDEE', cursor: 'pointer' }}
>
<IconClipboardCheck size={16} />
</Button>
Expand Down
1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@
"@mantine/code-highlight": "^7.12.2",
"@mantine/core": "^7.13.4",
"@mantine/hooks": "^7.13.4",
"@mantine/prism": "^6.0.22",
"@mantine/styles": "^6.0.22",
"@rainbow-me/rainbowkit": "^1.3.3",
"@sei-js/registry": "^1.0.1",
Expand Down
151 changes: 80 additions & 71 deletions pages/learn/dev-token-standards.mdx
Original file line number Diff line number Diff line change
@@ -1,87 +1,96 @@
import { TokenCard } from '../../components/TokenCard';
import { Tabs, Blockquote, Title } from '@mantine/core';
import { Box, Divider } from '@mantine/core';

# Token Standards

This section provides an overview of the token standards supported on Sei, each serving unique functions within the blockchain ecosystem.

<br/>

<TokenCard
title="Sei Token"
tooltip="Native token used on Sei for transaction fees and governance."
details={[
{ label: 'Primary Use', content: 'Used to pay transaction fees and participate in governance decisions.' },
{ label: 'EVM Conversion', content: 'Enter an amount to convert Sei to wei.' },
{ label: 'Cosmos Conversion', content: 'Enter an amount to convert Sei to Cosmos units.' },
]}
/>
<Box mb="md">
<TokenCard
title="Sei Token"
tooltip="Native token used on Sei for transaction fees and governance."
details={[
{ label: 'EVM Conversion', content: 'Enter an amount to convert Sei to wei.' },
{ label: 'Cosmos Conversion', content: 'Enter an amount to convert Sei to Cosmos units.' },
]}
/>
</Box>

---
<Divider variant="dashed" color="#9E1F19" />

<TokenCard
title="Fungible Tokens"
tooltip="Interchangeable digital assets supporting ERC20 and CW20 standards."
details={[
{ label: 'TokenFactory', content: 'Natively integrated with Cosmos modules for efficient queries and high performance.' },
{ label: 'ERC20 Standard', content: 'Defines transferable, interchangeable tokens for EVM-based dApps.' },
{ label: 'CW20 Standard', content: 'Cosmos equivalent of ERC20, providing compatibility with Cosmos-based dApps.' },
{ label: 'Cross-Chain Compatibility', content: 'Supports pointer contracts for seamless cross-chain interaction.' }
]}
referenceGuide={[
{
content: "To deploy a pointer contract for cross-chain compatibility, follow these steps using the seid CLI tool.",
},
{
content: "1. Check if a pointer already exists for the token or contract using:",
command: "seid q evm pointer [type] [pointee] [flags]"
},
{
content: "2. Deploy a new pointer contract linking a CosmWasm contract with an EVM pointer:",
command: "seid tx evm register-evm-pointer CW20 $CW20_TOKEN_ADDRESS --from=$SENDER --chain-id=pacific-1 --broadcast-mode=block --gas=200000 --fees=5000usei --node=https://rpc.sei-apis.com"
},
{
content: "3. Confirm the pointer registration with:",
command: "seid query evm pointer [type] [pointee] [flags]"
},
{
content: "Refer to the [Pointer Contracts Documentation](/dev-interoperability/pointer-contracts) for a detailed overview."
}
]}
/>
<Box mt="md" mb="md">
<TokenCard
title="Fungible Tokens"
tooltip="Interchangeable digital assets supporting ERC20 and CW20 standards."
details={[
{ label: 'TokenFactory', content: 'Natively integrated with Cosmos modules for efficient queries and high performance.' },
{ label: 'ERC20 Standard', content: 'Defines transferable, interchangeable tokens for EVM-based dApps.' },
{ label: 'CW20 Standard', content: 'Cosmos equivalent of ERC20, providing compatibility with Cosmos-based dApps.' },
{ label: 'Cross-Chain Compatibility', content: 'Supports pointer contracts for seamless cross-chain interaction.' }
]}
referenceGuide={[
{
content: "To deploy a pointer contract for cross-chain compatibility, follow these steps using the seid CLI tool.",
},
{
content: "1. Check if a pointer already exists for the token or contract using:",
command: "seid q evm pointer [type] [pointee] [flags]"
},
{
content: "2. Deploy a new pointer contract linking a CosmWasm contract with an EVM pointer:",
command: "seid tx evm register-evm-pointer CW20 $CW20_TOKEN_ADDRESS --from=$SENDER --chain-id=pacific-1 --broadcast-mode=block --gas=200000 --fees=5000usei --node=https://rpc.sei-apis.com"
},
{
content: "3. Confirm the pointer registration with:",
command: "seid query evm pointer [type] [pointee] [flags]"
},
{
content: "Refer to the [Pointer Contracts Documentation](/dev-interoperability/pointer-contracts) for a detailed overview."
}
]}
/>
</Box>

---
<Divider variant="dashed" color="#9E1F19" />

<TokenCard
title="Smart Contract Tokens"
tooltip="Tokens managed by smart contracts, compatible with ERC20 and CW20 standards."
details={[
{ label: 'ERC20 Standard', content: 'Fungible token standard for EVM-based chains, supporting token functions.' },
{ label: 'CW20 Standard', content: 'Cosmos counterpart to ERC20, ensuring compatibility with Cosmos dApps.' },
{ label: 'Pointer Contracts', content: 'Enable interaction between CW20 and ERC20 tokens across Cosmos and EVM environments.' },
]}
/>
<Box mt="md" mb="md">
<TokenCard
title="Smart Contract Tokens"
tooltip="Tokens managed by smart contracts, compatible with ERC20 and CW20 standards."
details={[
{ label: 'ERC20 Standard', content: 'Fungible token standard for EVM-based chains, supporting token functions.' },
{ label: 'CW20 Standard', content: 'Cosmos counterpart to ERC20, ensuring compatibility with Cosmos dApps.' },
{ label: 'Pointer Contracts', content: 'Enable interaction between CW20 and ERC20 tokens across Cosmos and EVM environments.' },
]}
/>
</Box>

---
<Divider variant="dashed" color="#9E1F19" />

<TokenCard
title="NFTs"
tooltip="Unique digital assets following ERC721 and CW721 standards, with optional royalty features."
details={[
{ label: 'ERC721 Standard', content: 'Defines unique, non-interchangeable tokens for EVM-based chains.' },
{ label: 'CW721 Standard', content: 'Cosmos equivalent of ERC721, compatible with Cosmos-based dApps.' },
{ label: 'Royalty Standards', content: 'Supports ERC2981 and CW2981, allowing creators to set royalties.' },
{ label: 'Cross-Chain Compatibility', content: 'Pointer contracts facilitate cross-standard interactions for NFTs.' },
]}
/>
<Box mt="md" mb="md">
<TokenCard
title="NFTs"
tooltip="Unique digital assets following ERC721 and CW721 standards, with optional royalty features."
details={[
{ label: 'ERC721 Standard', content: 'Defines unique, non-interchangeable tokens for EVM-based chains.' },
{ label: 'CW721 Standard', content: 'Cosmos equivalent of ERC721, compatible with Cosmos-based dApps.' },
{ label: 'Royalty Standards', content: 'Supports ERC2981 and CW2981, allowing creators to set royalties.' },
{ label: 'Cross-Chain Compatibility', content: 'Pointer contracts facilitate cross-standard interactions for NFTs.' },
]}
/>
</Box>

---
<Divider variant="dashed" color="#9E1F19" />

<TokenCard
title="IBC Tokens"
tooltip="Tokens bridged from other Cosmos chains via the IBC protocol."
details={[
{ label: 'IBC Protocol', content: 'Facilitates token transfers between Cosmos chains.' },
{ label: 'Channel Configuration', content: 'Detailed channel information for each network is displayed below.' }
]}
/>
<Box mt="md">
<TokenCard
title="IBC Tokens"
tooltip="Tokens bridged from other Cosmos chains via the IBC protocol."
details={[
{ label: 'IBC Protocol', content: 'Facilitates token transfers between Cosmos chains.' },
{ label: 'Channel Configuration', content: 'Detailed channel information for each network is displayed below.' }
]}
/>
</Box>
18 changes: 18 additions & 0 deletions yarn.lock
Original file line number Diff line number Diff line change
Expand Up @@ -223,6 +223,14 @@
resolved "https://registry.yarnpkg.com/@mantine/hooks/-/hooks-7.13.4.tgz#2e4a8aa910a1d9cfc8ad513b33d3a483a41c7f88"
integrity sha512-B2QCegQyWlLdenVNaLNK8H9cTAjLW9JKJ3xWg+ShhpjZDHT2hjZz4L0Nt071Z7mPvyAaOwKGM0FyqTcTjdECfg==

"@mantine/prism@^6.0.22":
version "6.0.22"
resolved "https://registry.yarnpkg.com/@mantine/prism/-/prism-6.0.22.tgz#06499a3f00c6b5a0440de3beb1fb59310a244f88"
integrity sha512-EW3SCmRzg2MlfJPAxkHXFLYMoPdmRp2EhCxqTcgCEeKwSk4TLlLF39aAjFtk2B+rtiqWlA/7Kh7YrhOZ78TdpA==
dependencies:
"@mantine/utils" "6.0.22"
prism-react-renderer "^1.2.1"

"@mantine/styles@^6.0.22":
version "6.0.22"
resolved "https://registry.yarnpkg.com/@mantine/styles/-/styles-6.0.22.tgz#d883823f910e9ab8a56fd80ef667b6f56f2e2bd5"
Expand All @@ -231,6 +239,11 @@
clsx "1.1.1"
csstype "3.0.9"

"@mantine/[email protected]":
version "6.0.22"
resolved "https://registry.yarnpkg.com/@mantine/utils/-/utils-6.0.22.tgz#7eace697084e2bc5a831eb0fd7cbbc04cc1b0354"
integrity sha512-RSKlNZvxhMCkOFZ6slbYvZYbWjHUM+PxDQnupIOxIdsTZQQjx/BFfrfJ7kQFOP+g7MtpOds8weAetEs5obwMOQ==

"@mdx-js/mdx@^2.2.1", "@mdx-js/mdx@^2.3.0":
version "2.3.0"
resolved "https://registry.yarnpkg.com/@mdx-js/mdx/-/mdx-2.3.0.tgz#d65d8c3c28f3f46bb0e7cb3bf7613b39980671a9"
Expand Down Expand Up @@ -4900,6 +4913,11 @@ prettier@^3.3.0:
resolved "https://registry.yarnpkg.com/prettier/-/prettier-3.3.3.tgz#30c54fe0be0d8d12e6ae61dbb10109ea00d53105"
integrity sha512-i2tDNA0O5IrMO757lfrdQZCc2jPNDVntV0m/+4whiDfWaTKfMNgR7Qz0NAeGz/nRqF4m5/6CLzbP4/liHt12Ew==

prism-react-renderer@^1.2.1:
version "1.3.5"
resolved "https://registry.yarnpkg.com/prism-react-renderer/-/prism-react-renderer-1.3.5.tgz#786bb69aa6f73c32ba1ee813fbe17a0115435085"
integrity sha512-IJ+MSwBWKG+SM3b2SUfdrhC+gu01QkV2KmRQgREThBfSQRoufqRfxfHUxpG1WcaFjP+kojcFyO9Qqtpgt3qLCg==

process-warning@^1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/process-warning/-/process-warning-1.0.0.tgz#980a0b25dc38cd6034181be4b7726d89066b4616"
Expand Down

0 comments on commit 06a9a2e

Please sign in to comment.