From 56bba70ffd65b4a57b22e9bee8417b9b7a0fba23 Mon Sep 17 00:00:00 2001
From: Jax_Pro <melodyyu707421395@gmail.com>
Date: Sat, 11 Jan 2025 20:01:23 +0800
Subject: [PATCH] refactor: make component's dom more flexible

---
 .../StoryKitProvider/__docs__/Example.tsx     | 43 +++++++------------
 1 file changed, 16 insertions(+), 27 deletions(-)

diff --git a/packages/storykit/src/providers/StoryKitProvider/__docs__/Example.tsx b/packages/storykit/src/providers/StoryKitProvider/__docs__/Example.tsx
index 05bc90c2..96b1bf8b 100644
--- a/packages/storykit/src/providers/StoryKitProvider/__docs__/Example.tsx
+++ b/packages/storykit/src/providers/StoryKitProvider/__docs__/Example.tsx
@@ -27,35 +27,24 @@ const Example: FC<{
 
 const ExampleComponent = () => {
   const { themeClass, defaultCurrency, chain } = useStoryKitContext()
+  const chainInfoList = [ "id", "name", "displayName", "rpcUrl", "blockExplorerUrl", "protocolExplorerUrl" ]
+  const defaultCurrencyInfoList = [ "name", "symbol", "address" ]
   return (
     <div className={cn(themeClass, "flex flex-col h-full bg-background p-8 font-sans text-primary")}>
-      <div className="text-sm text-foreground">
-        <i>id:</i> <strong>{chain.id}</strong>
-      </div>
-      <div className="text-sm text-foreground">
-        <i>name:</i> <strong>{chain.name}</strong>
-      </div>
-      <div className="text-sm text-foreground">
-        <i>displayName:</i> <strong>{chain.displayName}</strong>
-      </div>
-      <div className="text-sm text-foreground">
-        <i>rpcUrl:</i> <strong>{chain.rpcUrl}</strong>
-      </div>
-      <div className="text-sm text-foreground">
-        <i>blockExplorerUrl:</i> <strong>{chain.blockExplorerUrl}</strong>
-      </div>
-      <div className="text-sm text-foreground">
-        <i>protocolExplorerUrl:</i> <strong>{chain.protocolExplorerUrl}</strong>
-      </div>
-      <div className="text-sm text-foreground">
-        <i>currency name:</i> <strong>{defaultCurrency.name}</strong>
-      </div>
-      <div className="text-sm text-foreground">
-        <i>currency symbol:</i> <strong>{defaultCurrency.symbol}</strong>
-      </div>
-      <div className="text-sm text-foreground">
-        <i>currency address:</i> <strong>{defaultCurrency.address}</strong>
-      </div>
+      {
+        chainInfoList.map(item => (
+          <div key={item} className="text-sm text-foreground">
+            <i>{item}:</i> <strong>{chain[item]}</strong>
+          </div>
+        ))
+      }
+      {
+        defaultCurrencyInfoList.map(item => (
+          <div key={item} className="text-sm text-foreground">
+            <i>currency{item}:</i> <strong>{defaultCurrency[item]}</strong>
+          </div>
+        ))
+      }
     </div>
   )
 }