incorporate guide element in tokencard

sei-protocol · Oct 31, 2024 · 9be2570 · 9be2570
1 parent 0763642
commit 9be2570
Show file tree

Hide file tree

Showing 2 changed files with 63 additions and 21 deletions.
diff --git a/components/TokenCard/TokenCard.tsx b/components/TokenCard/TokenCard.tsx
@@ -15,7 +15,7 @@ const cardStyle = {
 const textColor = { color: '#f0f0f0' };
 const subTextColor = { color: '#b0b0b0' };
 
-export const TokenCard: React.FC<TokenCardProps> = ({ title, description, tooltip, details }) => {
+export const TokenCard: React.FC<TokenCardProps> = ({ title, description, tooltip, details, referenceGuide }) => {
   const [conversionInput, setConversionInput] = useState<number | ''>('');
   const [copied, setCopied] = useState<number | null>(null);
 
@@ -24,9 +24,8 @@ export const TokenCard: React.FC<TokenCardProps> = ({ title, description, toolti
     setConversionInput(value === '' ? '' : parseFloat(value));
   };
 
-  const handleCopy = async (channelData: object, idx: number) => {
-    const jsonData = JSON.stringify(channelData, null, 2);
-    await navigator.clipboard.writeText(jsonData);
+  const handleCopy = async (content: string, idx: number) => {
+    await navigator.clipboard.writeText(content);
     setCopied(idx);
     setTimeout(() => setCopied(null), 1500);
   };
@@ -117,7 +116,7 @@ export const TokenCard: React.FC<TokenCardProps> = ({ title, description, toolti
                         <Button
                           size="xs"
                           variant="subtle"
-                          onClick={() => handleCopy(channel, idx)}
+                          onClick={() => handleCopy(JSON.stringify(channel, null, 2), idx)}
                           style={{ color: '#4a90e2', cursor: 'pointer' }}
                         >
                           <IconClipboardCheck size={16} />
@@ -144,6 +143,40 @@ export const TokenCard: React.FC<TokenCardProps> = ({ title, description, toolti
           ))}
         </Accordion>
       )}
+
+      {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' }
+        }}>
+          <Accordion.Item value="pointer-guide">
+            <Accordion.Control>Pointer Contract Guide</Accordion.Control>
+            <Accordion.Panel>
+              {referenceGuide.map((section, idx) => (
+                <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>
+                      <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' }}
+                        >
+                          <IconClipboardCheck size={16} />
+                        </Button>
+                      </Tooltip>
+                    </div>
+                  )}
+                </div>
+              ))}
+            </Accordion.Panel>
+          </Accordion.Item>
+        </Accordion>
+      )}
     </Card>
   );
 };
diff --git a/pages/learn/dev-token-standards.mdx b/pages/learn/dev-token-standards.mdx
@@ -5,9 +5,7 @@ import { Tabs, Blockquote, Title } from '@mantine/core';
 
 This section provides an overview of the token standards supported on Sei, each serving unique functions within the blockchain ecosystem.
 
----
-
-## **Sei Token**
+<br/>
 
 <TokenCard 
   title="Sei Token"
@@ -19,7 +17,7 @@ This section provides an overview of the token standards supported on Sei, each
   ]}
 />
 
-## **Fungible Tokens**
+---
 
 <TokenCard 
   title="Fungible Tokens"
@@ -28,20 +26,32 @@ This section provides an overview of the token standards supported on Sei, each
     { 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.' },
+    { 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."
+    }
   ]}
 />
 
 ---
 
-<Blockquote mt="lg">
-  <Title order={4} mb="sm">Interoperability Note</Title>
-  Both TokenFactory and CW20/ERC20 tokens support pointer contracts, enabling cross-VM interoperability.
-  See [Pointer Contracts Documentation](/dev-tutorials/pointer-contracts) for further details.
-</Blockquote>
-
-## **Smart Contract Tokens**
-
 <TokenCard 
   title="Smart Contract Tokens"
   tooltip="Tokens managed by smart contracts, compatible with ERC20 and CW20 standards."
@@ -52,7 +62,7 @@ This section provides an overview of the token standards supported on Sei, each
   ]}
 />
 
-## **NFTs**
+---
 
 <TokenCard 
   title="NFTs"
@@ -65,7 +75,7 @@ This section provides an overview of the token standards supported on Sei, each
   ]}
 />
 
-## **IBC Tokens**
+---
 
 <TokenCard 
   title="IBC Tokens"
@@ -75,4 +85,3 @@ This section provides an overview of the token standards supported on Sei, each
     { label: 'Channel Configuration', content: 'Detailed channel information for each network is displayed below.' }
   ]}
 />
-