refactor: refactor active component logic in playground (#1622)

coinbase · Nov 14, 2024 · 9c28af7 · 9c28af7
1 parent 7d7b436
commit 9c28af7
Showing 1 changed file with 21 additions and 61 deletions.
diff --git a/playground/nextjs-app-router/components/Demo.tsx b/playground/nextjs-app-router/components/Demo.tsx
@@ -18,6 +18,23 @@ import TransactionDefaultDemo from './demo/TransactionDefault';
 import WalletDemo from './demo/Wallet';
 import WalletDefaultDemo from './demo/WalletDefault';
 
+const activeComponentMapping: Record<OnchainKitComponent, React.FC> = {
+  [OnchainKitComponent.Fund]: FundDemo,
+  [OnchainKitComponent.Identity]: IdentityDemo,
+  [OnchainKitComponent.Transaction]: TransactionDemo,
+  [OnchainKitComponent.Checkout]: CheckoutDemo,
+  [OnchainKitComponent.Swap]: SwapDemo,
+  [OnchainKitComponent.SwapDefault]: SwapDefaultDemo,
+  [OnchainKitComponent.Wallet]: WalletDemo,
+  [OnchainKitComponent.WalletDefault]: WalletDefaultDemo,
+  [OnchainKitComponent.TransactionDefault]: TransactionDefaultDemo,
+  [OnchainKitComponent.NFTMintCard]: NFTMintCardDemo,
+  [OnchainKitComponent.NFTCard]: NFTCardDemo,
+  [OnchainKitComponent.NFTMintCardDefault]: NFTMintCardDefaultDemo,
+  [OnchainKitComponent.NFTCardDefault]: NFTCardDefaultDemo,
+  [OnchainKitComponent.IdentityCard]: IdentityCardDemo,
+};
+
 function Demo() {
   const { activeComponent } = useContext(AppContext);
   const [isDarkMode, setIsDarkMode] = useState(true);
@@ -45,66 +62,9 @@ function Demo() {
       : 'border-gray-300 bg-white text-black hover:bg-gray-100'
   }`;
 
-  // biome-ignore lint/complexity/noExcessiveCognitiveComplexity: TODO: refactor
-  function renderActiveComponent() {
-    if (activeComponent === OnchainKitComponent.Fund) {
-      return <FundDemo />;
-    }
-
-    if (activeComponent === OnchainKitComponent.Identity) {
-      return <IdentityDemo />;
-    }
-
-    if (activeComponent === OnchainKitComponent.Transaction) {
-      return <TransactionDemo />;
-    }
-
-    if (activeComponent === OnchainKitComponent.Checkout) {
-      return <CheckoutDemo />;
-    }
-
-    if (activeComponent === OnchainKitComponent.Swap) {
-      return <SwapDemo />;
-    }
-
-    if (activeComponent === OnchainKitComponent.SwapDefault) {
-      return <SwapDefaultDemo />;
-    }
-
-    if (activeComponent === OnchainKitComponent.Wallet) {
-      return <WalletDemo />;
-    }
-
-    if (activeComponent === OnchainKitComponent.WalletDefault) {
-      return <WalletDefaultDemo />;
-    }
-
-    if (activeComponent === OnchainKitComponent.TransactionDefault) {
-      return <TransactionDefaultDemo />;
-    }
-
-    if (activeComponent === OnchainKitComponent.NFTMintCard) {
-      return <NFTMintCardDemo />;
-    }
-
-    if (activeComponent === OnchainKitComponent.NFTCard) {
-      return <NFTCardDemo />;
-    }
-
-    if (activeComponent === OnchainKitComponent.NFTMintCardDefault) {
-      return <NFTMintCardDefaultDemo />;
-    }
-
-    if (activeComponent === OnchainKitComponent.NFTCardDefault) {
-      return <NFTCardDefaultDemo />;
-    }
-
-    if (activeComponent === OnchainKitComponent.IdentityCard) {
-      return <IdentityCardDemo />;
-    }
-
-    return <></>;
-  }
+  const ActiveComponent = activeComponent
+    ? activeComponentMapping[activeComponent]
+    : null;
 
   return (
     <>
@@ -159,7 +119,7 @@ function Demo() {
       </div>
       <div className="linear-gradient(to_bottom,#f0f0f0_1px,transparent_1px)] flex flex-1 flex-col bg-[linear-gradient(to_right,#f0f0f0_1px,transparent_1px), bg-[size:6rem_4rem]">
         <div className="flex h-full w-full flex-col items-center justify-center">
-          {renderActiveComponent()}
+          {ActiveComponent && <ActiveComponent />}
         </div>
       </div>
     </>