create-polygon-kit 0.2.0 → 1.0.0

package/templates/vite/typescript/src/App.tsx

@@ -4,15 +4,20 @@ import {
   ConnectWallet,
   WalletDropdown,
   Identity,
+  Avatar,
+  Name,
+  TokenBalance,
+  TokenIcon,
+  TransactionButton,
+  Swap,
   usePolygonKit,
 } from '@sanketsaagar/polygon-kit';
 import { useState } from 'react';
-import './App.css';
+import { parseEther } from 'viem';
 
 function LandingPage() {
   return (
     <div className="min-h-screen bg-gradient-to-br from-purple-900 via-indigo-900 to-blue-900">
-      {/* Hero Section */}
       <div className="container mx-auto px-4 py-16">
         <nav className="flex justify-between items-center mb-20">
           <div className="flex items-center space-x-2">
@@ -36,7 +41,7 @@ function LandingPage() {
           <div className="flex gap-4 justify-center">
             <ConnectWallet />
             <a
-              href="https://docs.polygonkit.com"
+              href="https://polygonlabs.mintlify.app"
               target="_blank"
               rel="noopener noreferrer"
               className="px-8 py-3 bg-white/10 backdrop-blur-sm text-white rounded-lg font-semibold hover:bg-white/20 transition-all duration-200"
@@ -144,8 +149,9 @@ function LandingPage() {
 }
 
 function Dashboard() {
-  const { address, chainId } = usePolygonKit();
-  const [activeTab, setActiveTab] = useState<'overview' | 'activity' | 'settings'>('overview');
+  const { address, isConnected, chainId } = usePolygonKit();
+  const [activeTab, setActiveTab] = useState<'overview' | 'components' | 'transactions' | 'swap'>('overview');
+  const [txHash, setTxHash] = useState<string>('');
 
   const getNetworkName = (chainId?: number) => {
     switch (chainId) {
@@ -160,6 +166,10 @@ function Dashboard() {
     }
   };
 
+  if (!isConnected || !address) {
+    return <LandingPage />;
+  }
+
   return (
     <div className="min-h-screen bg-gradient-to-br from-slate-50 via-purple-50 to-indigo-50 dark:from-gray-900 dark:via-purple-900/20 dark:to-indigo-900/20">
       {/* Header */}
@@ -169,7 +179,7 @@ function Dashboard() {
             <div className="flex items-center space-x-3">
               <div className="w-10 h-10 bg-gradient-to-br from-purple-500 to-pink-500 rounded-lg" />
               <div>
-                <h1 className="text-xl font-bold text-gray-900 dark:text-white">My Polygon App</h1>
+                <h1 className="text-xl font-bold text-gray-900 dark:text-white">PolygonKit Showcase</h1>
                 <p className="text-sm text-gray-500 dark:text-gray-400">{getNetworkName(chainId)}</p>
               </div>
             </div>
@@ -182,11 +192,12 @@ function Dashboard() {
 
       <div className="container mx-auto px-4 py-8">
         {/* Tabs */}
-        <div className="flex space-x-2 mb-8 bg-white/50 dark:bg-gray-800/50 backdrop-blur-sm p-1 rounded-lg w-fit">
+        <div className="flex flex-wrap gap-2 mb-8 bg-white/50 dark:bg-gray-800/50 backdrop-blur-sm p-1 rounded-lg w-fit">
           {[
             { id: 'overview', label: 'Overview', icon: '📊' },
-            { id: 'activity', label: 'Activity', icon: '⚡' },
-            { id: 'settings', label: 'Settings', icon: '⚙️' },
+            { id: 'components', label: 'Components', icon: '🧩' },
+            { id: 'transactions', label: 'Transactions', icon: '💸' },
+            { id: 'swap', label: 'Swap', icon: '🔄' },
           ].map((tab) => (
             <button
               key={tab.id}
@@ -211,22 +222,14 @@ function Dashboard() {
               <div className="lg:col-span-2 bg-gradient-to-br from-purple-500 to-pink-500 p-8 rounded-2xl text-white shadow-xl">
                 <h2 className="text-lg font-semibold mb-4 opacity-90">Your Wallet</h2>
                 <Identity
-                  address={address!}
+                  address={address}
                   showAvatar
                   showAddress
                   showBalance
-                  className="scale-110"
                 />
-                <div className="mt-6 flex gap-3">
-                  <button className="flex-1 py-3 bg-white/20 backdrop-blur-sm rounded-lg font-semibold hover:bg-white/30 transition-all">
-                    Send
-                  </button>
-                  <button className="flex-1 py-3 bg-white/20 backdrop-blur-sm rounded-lg font-semibold hover:bg-white/30 transition-all">
-                    Receive
-                  </button>
-                  <button className="flex-1 py-3 bg-white/20 backdrop-blur-sm rounded-lg font-semibold hover:bg-white/30 transition-all">
-                    Swap
-                  </button>
+                <div className="mt-6 pt-6 border-t border-white/20">
+                  <p className="text-sm opacity-75 mb-3">Native Balance</p>
+                  <TokenBalance address={address} className="text-2xl font-bold" />
                 </div>
               </div>
 
@@ -245,8 +248,8 @@ function Dashboard() {
                     <span className="font-mono font-semibold text-gray-900 dark:text-white">{chainId || 'N/A'}</span>
                   </div>
                   <div className="flex items-center justify-between">
-                    <span className="text-gray-700 dark:text-gray-300">Gas Price</span>
-                    <span className="text-gray-900 dark:text-white font-semibold">~30 Gwei</span>
+                    <span className="text-gray-700 dark:text-gray-300">Network</span>
+                    <span className="text-gray-900 dark:text-white font-semibold">{getNetworkName(chainId)}</span>
                   </div>
                 </div>
               </div>
@@ -255,30 +258,128 @@ function Dashboard() {
             {/* Quick Actions */}
             <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
               {[
-                { icon: '💸', title: 'Send Tokens', desc: 'Transfer assets', color: 'from-blue-500 to-cyan-500' },
-                { icon: '🔄', title: 'Swap', desc: 'Exchange tokens', color: 'from-purple-500 to-pink-500' },
-                { icon: '🌉', title: 'Bridge', desc: 'Cross-chain transfer', color: 'from-orange-500 to-red-500' },
-                { icon: '📈', title: 'Stake', desc: 'Earn rewards', color: 'from-green-500 to-emerald-500' },
+                { icon: '💸', title: 'Send Tokens', desc: 'Transfer assets', tab: 'transactions' },
+                { icon: '🔄', title: 'Swap', desc: 'Exchange tokens', tab: 'swap' },
+                { icon: '🧩', title: 'Components', desc: 'Explore all features', tab: 'components' },
+                { icon: '📖', title: 'Documentation', desc: 'Learn more', link: 'https://polygonlabs.mintlify.app' },
               ].map((action) => (
                 <button
                   key={action.title}
+                  onClick={() => action.tab ? setActiveTab(action.tab as typeof activeTab) : window.open(action.link, '_blank')}
                   className="p-6 bg-white/80 dark:bg-gray-800/80 backdrop-blur-lg rounded-xl border border-gray-200 dark:border-gray-700 hover:scale-105 transition-all duration-200 text-left group shadow-lg hover:shadow-xl"
                 >
-                  <div className={`text-4xl mb-3 group-hover:scale-110 transition-transform`}>{action.icon}</div>
+                  <div className="text-4xl mb-3 group-hover:scale-110 transition-transform">{action.icon}</div>
                   <h3 className="font-bold text-gray-900 dark:text-white mb-1">{action.title}</h3>
                   <p className="text-sm text-gray-600 dark:text-gray-400">{action.desc}</p>
                 </button>
               ))}
             </div>
+          </div>
+        )}
+
+        {/* Components Showcase Tab */}
+        {activeTab === 'components' && (
+          <div className="space-y-6">
+            <div className="bg-white/80 dark:bg-gray-800/80 backdrop-blur-lg p-8 rounded-2xl shadow-lg border border-gray-200 dark:border-gray-700">
+              <h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-6">Identity Components</h2>
+              <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+                <div className="p-6 bg-gray-50 dark:bg-gray-700/50 rounded-xl">
+                  <h3 className="font-semibold mb-4 text-gray-900 dark:text-white">Full Identity</h3>
+                  <Identity address={address} showAvatar showAddress showBalance />
+                </div>
+                <div className="p-6 bg-gray-50 dark:bg-gray-700/50 rounded-xl">
+                  <h3 className="font-semibold mb-4 text-gray-900 dark:text-white">Avatar Only</h3>
+                  <div className="flex items-center gap-4">
+                    <Avatar address={address} size={48} />
+                    <Avatar address={address} size={64} />
+                    <Avatar address={address} size={80} />
+                  </div>
+                </div>
+                <div className="p-6 bg-gray-50 dark:bg-gray-700/50 rounded-xl">
+                  <h3 className="font-semibold mb-4 text-gray-900 dark:text-white">Name/Address</h3>
+                  <Name address={address} />
+                </div>
+              </div>
+            </div>
 
-            {/* Recent Activity */}
             <div className="bg-white/80 dark:bg-gray-800/80 backdrop-blur-lg p-8 rounded-2xl shadow-lg border border-gray-200 dark:border-gray-700">
-              <h2 className="text-xl font-bold text-gray-900 dark:text-white mb-6">Recent Activity</h2>
+              <h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-6">Token Components</h2>
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+                <div className="p-6 bg-gray-50 dark:bg-gray-700/50 rounded-xl">
+                  <h3 className="font-semibold mb-4 text-gray-900 dark:text-white">Token Balance</h3>
+                  <div className="space-y-3">
+                    <div className="flex items-center justify-between p-3 bg-white dark:bg-gray-800 rounded-lg">
+                      <span className="text-gray-600 dark:text-gray-400">Native (MATIC)</span>
+                      <TokenBalance address={address} />
+                    </div>
+                  </div>
+                </div>
+                <div className="p-6 bg-gray-50 dark:bg-gray-700/50 rounded-xl">
+                  <h3 className="font-semibold mb-4 text-gray-900 dark:text-white">Token Icons</h3>
+                  <div className="flex items-center gap-4">
+                    <div className="text-center">
+                      <TokenIcon symbol="MATIC" size={32} />
+                      <p className="text-xs mt-1 text-gray-600 dark:text-gray-400">MATIC</p>
+                    </div>
+                    <div className="text-center">
+                      <TokenIcon symbol="ETH" size={32} />
+                      <p className="text-xs mt-1 text-gray-600 dark:text-gray-400">ETH</p>
+                    </div>
+                    <div className="text-center">
+                      <TokenIcon symbol="USDC" size={32} />
+                      <p className="text-xs mt-1 text-gray-600 dark:text-gray-400">USDC</p>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        )}
+
+        {/* Transactions Tab */}
+        {activeTab === 'transactions' && (
+          <div className="space-y-6">
+            <div className="bg-white/80 dark:bg-gray-800/80 backdrop-blur-lg p-8 rounded-2xl shadow-lg border border-gray-200 dark:border-gray-700">
+              <h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-6">Send Transaction</h2>
+              <p className="text-gray-600 dark:text-gray-400 mb-6">
+                Send 0.001 MATIC to a recipient address. Replace the address below with your test address.
+              </p>
+              <TransactionButton
+                text="Send 0.001 MATIC"
+                calls={[
+                  {
+                    to: address, // Sending to self for demo
+                    value: parseEther('0.001'),
+                  },
+                ]}
+                onSuccess={(hash) => {
+                  console.log('Transaction successful:', hash);
+                  setTxHash(hash);
+                }}
+                onError={(error) => {
+                  console.error('Transaction failed:', error);
+                  alert('Transaction failed: ' + error.message);
+                }}
+                className="px-6 py-3 bg-gradient-to-r from-purple-500 to-pink-500 text-white rounded-lg font-semibold hover:from-purple-600 hover:to-pink-600 transition-all"
+              />
+
+              {txHash && (
+                <div className="mt-6 p-4 bg-green-50 dark:bg-green-900/20 rounded-lg border border-green-200 dark:border-green-800">
+                  <p className="font-semibold text-green-900 dark:text-green-100 mb-2">Transaction Sent!</p>
+                  <p className="text-sm text-green-700 dark:text-green-300 break-all">
+                    Hash: {txHash}
+                  </p>
+                </div>
+              )}
+            </div>
+
+            <div className="bg-white/80 dark:bg-gray-800/80 backdrop-blur-lg p-8 rounded-2xl shadow-lg border border-gray-200 dark:border-gray-700">
+              <h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-6">Recent Activity</h2>
               <div className="space-y-4">
                 {[
-                  { type: 'Received', amount: '100 MATIC', time: '2 mins ago', status: 'success' },
-                  { type: 'Sent', amount: '50 MATIC', time: '1 hour ago', status: 'success' },
-                  { type: 'Swapped', amount: '25 MATIC → 40 USDC', time: '3 hours ago', status: 'success' },
+                  { type: 'Received', amount: '100 MATIC', time: '2 mins ago' },
+                  { type: 'Sent', amount: '50 MATIC', time: '1 hour ago' },
+                  { type: 'Swapped', amount: '25 MATIC → 40 USDC', time: '3 hours ago' },
                 ].map((tx, idx) => (
                   <div key={idx} className="flex items-center justify-between p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
                     <div className="flex items-center gap-4">
@@ -305,23 +406,21 @@ function Dashboard() {
           </div>
         )}
 
-        {/* Activity Tab */}
-        {activeTab === 'activity' && (
-          <div className="bg-white/80 dark:bg-gray-800/80 backdrop-blur-lg p-8 rounded-2xl shadow-lg border border-gray-200 dark:border-gray-700">
-            <h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-6">Transaction History</h2>
-            <p className="text-gray-600 dark:text-gray-400">Your transaction history will appear here.</p>
-          </div>
-        )}
-
-        {/* Settings Tab */}
-        {activeTab === 'settings' && (
-          <div className="bg-white/80 dark:bg-gray-800/80 backdrop-blur-lg p-8 rounded-2xl shadow-lg border border-gray-200 dark:border-gray-700">
-            <h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-6">Settings</h2>
-            <div className="space-y-6">
-              <div>
-                <h3 className="font-semibold text-gray-900 dark:text-white mb-2">Preferences</h3>
-                <p className="text-gray-600 dark:text-gray-400">Configure your app settings here.</p>
-              </div>
+        {/* Swap Tab */}
+        {activeTab === 'swap' && (
+          <div className="max-w-2xl mx-auto">
+            <div className="bg-white/80 dark:bg-gray-800/80 backdrop-blur-lg p-8 rounded-2xl shadow-lg border border-gray-200 dark:border-gray-700">
+              <h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-6">Token Swap</h2>
+              <Swap
+                onSuccess={(hash) => {
+                  console.log('Swap successful:', hash);
+                  alert('Swap successful! Hash: ' + hash);
+                }}
+                onError={(error) => {
+                  console.error('Swap failed:', error);
+                  alert('Swap failed: ' + error.message);
+                }}
+              />
             </div>
           </div>
         )}
@@ -336,18 +435,12 @@ function AppContent() {
   return isConnected ? <Dashboard /> : <LandingPage />;
 }
 
-function App() {
+export default function App() {
   const projectId = import.meta.env.VITE_REOWN_PROJECT_ID;
 
   return (
-    <PolygonKitProvider
-      config={{
-        projectId,
-      }}
-    >
+    <PolygonKitProvider config={{ projectId }}>
       <AppContent />
     </PolygonKitProvider>
   );
 }
-
-export default App;