Merge pull request #206 from reown-com/docs-restructure

Docs Update: Restructuring the sidebar according to order of importance and categories

docs/appkit/features/one-click-auth.mdx → docs/appkit/authentication/one-click-auth.mdx

@@ -1,7 +1,7 @@
-import Button from '../../components/button'
+import Button from '../../components/button/index.js'
 import Container from '../../components/Container.js'
-import Wrapper from '../../components/Home/Wrapper'
-import W3MQuickStart from '../../components/W3MQuickStart'
+import Wrapper from '../../components/Home/Wrapper.js'
+import W3MQuickStart from '../../components/W3MQuickStart.js'
 import useBaseUrl from '@docusaurus/useBaseUrl'
 
 import reactLogo from '../../../static/assets/home/reactLogo.png'

docs/appkit/features/socials.mdx → docs/appkit/authentication/socials.mdx

@@ -1,6 +1,6 @@
-import Button from '../../components/button'
+import Button from '../../components/button/index.js'
 import Container from '../../components/Container.js'
-import Wrapper from '../../components/Home/Wrapper'
+import Wrapper from '../../components/Home/Wrapper.js'
 
 import reactLogo from '../../../static/assets/home/reactLogo.png'
 import nextjsLogo from '../../../static/assets/home/nextjsLogo.png'

docs/appkit/features/multichain.mdx

@@ -1,5 +1,4 @@
 ---
-pagination_next: appkit/react/core/installation
 title: Multichain
 ---
 

docs/appkit/features/onramp.mdx

@@ -1,5 +1,4 @@
 ---
-pagination_next: appkit/react/core/installation
 title: On-Ramp
 ---
 

docs/appkit/features/swaps.mdx

@@ -1,5 +1,4 @@
 ---
-pagination_next: appkit/react/transactions/swaps
 title: Swaps
 ---
 

docs/appkit/features/telegram-mini-apps.mdx

@@ -1,5 +1,4 @@
 ---
-pagination_next: appkit/react/transactions/swaps
 title: Telegram MiniApps
 ---
 

docs/appkit/networks/evm.mdx

@@ -0,0 +1,113 @@
+---
+title: EVM
+---
+
+import Button from '../../components/button/index.js'
+import Container from '../../components/Container.js'
+import Wrapper from '../../components/Home/Wrapper.js'
+import W3MQuickStart from '../../components/W3MQuickStart.js'
+import useBaseUrl from '@docusaurus/useBaseUrl'
+import ReactPlayer from 'react-player'
+
+import reactLogo from '../../../static/assets/home/reactLogo.png'
+import nextjsLogo from '../../../static/assets/home/nextjsLogo.png'
+import htmlLogo from '../../../static/assets/home/htmlLogo.png'
+import vueLogo from '../../../static/assets/home/vueLogo.png'
+import androidLogo from '../../../static/assets/home/androidLogo.png'
+import iosLogo from '../../../static/assets/home/iosLogo.png'
+import rnLogo from '../../../static/assets/home/rnLogo.png'
+import flutterLogo from '../../../static/assets/home/flutterLogo.png'
+import unityLogo from '../../../static/assets/home/unityLogo.png'
+import javascriptLogo from '../../../static/assets/home/javascriptLogo.png'
+
+# EVM Compatible Chains
+
+## Support for all EVM Chains
+The AppKit SDK supports all EVM-compatible chains, allowing users to connect their EVM wallets to Web3 applications. As long as the EVM chain you are trying to configure is included in [Viem's package](https://github.com/wevm/viem/blob/main/src/chains/index.ts), AppKit will support it.
+
+<div style={{
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+}}>
+<ReactPlayer url={useBaseUrl('/img/EVM.mp4')} playing loop width="100%" height="100%"/>
+</div>
+
+**AppKit provides a simple, secure, and seamless in-app experience for users looking to transact within web3.**
+
+<Button name="Try Demo" url="https://appkit-lab.reown.com/library/solana/" />
+
+## Get Started
+
+<Wrapper
+  type="large"
+  fit={false}
+  items={[
+    {
+      name: 'React',
+      type: 'react',
+      description: 'Get started with AppKit in React.',
+      icon: reactLogo,
+      href: '../react/core/installation'
+    },
+    {
+      name: 'Next.js',
+      type: 'next',
+      description: 'Get started with AppKit in Next.js.',
+      icon: nextjsLogo,
+      href: '../next/core/installation',
+      isWhite: true
+    },
+    {
+      name: 'Vue',
+      type: 'vue',
+      description: 'Get started with AppKit in Vue.',
+      icon: vueLogo,
+      href: '../vue/core/installation'
+    },
+    {
+      name: 'JavaScript',
+      type: 'javascript',
+      description: 'Get started with AppKit in JavaScript.',
+      icon: javascriptLogo,
+      href: '../javascript/core/installation'
+    },
+    {
+      name: 'React Native',
+      type: 'react-native',
+      description: 'Get started with AppKit in React Native.',
+      icon: rnLogo,
+      href: '../react-native/core/installation'
+    },
+    {
+      name: 'Flutter',
+      type: 'flutter',
+      description: 'Get started with AppKit in Flutter.',
+      icon: flutterLogo,
+      href: '../flutter/core/installation'
+    },
+    {
+      name: 'Android',
+      type: 'android',
+      description: 'Get started with AppKit in Android.',
+      icon: androidLogo,
+      href: '../android/core/installation'
+    },
+    {
+      name: 'iOS',
+      type: 'ios',
+      description: 'Get started with AppKit in iOS.',
+      icon: iosLogo,
+      href: '../ios/core/installation',
+      isWhite: true
+    },
+    {
+      name: 'Unity',
+      type: 'unity',
+      description: 'Get started with AppKit in Unity.',
+      icon: unityLogo,
+      href: '../unity/core/installation',
+      isWhite: true
+    }
+  ]}
+/>

docs/appkit/features/solana.mdx → docs/appkit/networks/solana.mdx

@@ -1,22 +1,30 @@
 ---
-pagination_next: appkit/react/core/installation
 title: Solana
 ---
 
-import Button from '../../components/button'
-import Container from '../../components/Container.js'
-import Wrapper from '../../components/Home/Wrapper'
-import W3MQuickStart from '../../components/W3MQuickStart'
+import Button from '../../components/button/index.js'
+import Wrapper from '../../components/Home/Wrapper.js'
 import useBaseUrl from '@docusaurus/useBaseUrl'
 
 import reactLogo from '../../../static/assets/home/reactLogo.png'
 import nextjsLogo from '../../../static/assets/home/nextjsLogo.png'
 import vueLogo from '../../../static/assets/home/vueLogo.png'
 import javascriptLogo from '../../../static/assets/home/javascriptLogo.png'
+import ReactPlayer from 'react-player'
 
 # Solana
 
-The AppKit SDK supports Solana, allowing users to connect their Solana wallets to applications. AppKit provides a simple, secure, and seamless in-app experience for users looking to transact within web3.
+The AppKit SDK supports Solana, allowing users to connect their Solana wallets to applications.
+
+<div style={{
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+}}>
+<ReactPlayer url={useBaseUrl('/img/Solana.mp4')} loop playing width="100%" height="100%"/>
+</div>
+
+**AppKit provides a simple, secure, and seamless in-app experience for users looking to transact within web3.**
 
 <Button name="Try Demo" url="https://appkit-lab.reown.com/library/solana/" />
 

docs/appkit/overview.mdx

@@ -1,5 +1,4 @@
 ---
-pagination_next: appkit/features/socials
 title: Overview
 ---
 

docs/appkit/recipes/telegram-mini-app.mdx

@@ -75,7 +75,7 @@ After you select your preferred wallet and connect it, you should be able to see
     justifyContent: 'center',
     alignItems: 'center',
 }}>
-<ReactPlayer url={useBaseUrl('/img/recipes/tgvideo.mp4')} playing controls width="40%" height="40%"/>
+<ReactPlayer url={useBaseUrl('/img/recipes/tgvideo.mp4')} playing loop width="40%" height="40%"/>
 </div>
 
 ## Conclusion

docs/appkit/recipes/wagmi-send-transaction.mdx

@@ -1,5 +1,5 @@
 ---
-title: Send a Transaction in AppKit Web with wagmi
+title: Transactions on AppKit Web using Wagmi
 ---
 
 import GithubBox from '../../components/GithubBox'

sidebars.js

@@ -236,16 +236,32 @@ module.exports = {
               collapsible: true,
               items: [
                 { type: 'doc', label: 'Swaps', id: 'appkit/features/swaps' },
-                { type: 'doc', label: 'Email & Social Login', id: 'appkit/features/socials' },
                 { type: 'doc', label: 'On-Ramp', id: 'appkit/features/onramp' },
-                { type: 'doc', label: 'One-Click Auth', id: 'appkit/features/one-click-auth' },
-                { type: 'doc', label: 'Smart Accounts', id: 'appkit/features/smart-accounts' },
-                { type: 'doc', label: 'Solana', id: 'appkit/features/solana' },
                 { type: 'doc', label: 'Multichain', id: 'appkit/features/multichain' },
+                { type: 'doc', label: 'Smart Accounts', id: 'appkit/features/smart-accounts' },
                 { type: 'doc', label: 'Notifications', id: 'appkit/features/notifications' },
                 { type: 'doc', label: 'Telegram Mini Apps', id:'appkit/features/telegram-mini-apps'}
               ]
             },
+            {
+              type: 'category',
+              label: "Networks",
+              collapsed: false,
+              collapsible: true,
+              items: [
+                { type: 'doc', label: 'EVM Chains', id: 'appkit/networks/evm'},
+                { type: 'doc', label: 'Solana', id: 'appkit/networks/solana' },
+              ]
+            },
+            {
+              type: 'category',
+              label: "Authentication",
+              collapsed: false,
+              collapsible: true,
+              items: [
+                { type: 'doc', label: 'Email & Social Login', id: 'appkit/authentication/socials' },
+                { type: 'doc', label: 'One-Click Auth', id: 'appkit/authentication/one-click-auth' },              ]
+            },
             {
               type: 'category',
               label: 'Recipes',
@@ -254,7 +270,7 @@ module.exports = {
               items: [
                 { type: 'doc', label: 'Build a Telegram Mini App', id: 'appkit/recipes/telegram-mini-app' },
                 { type: 'doc', label: 'Configure Virtual TestNets', id: 'appkit/recipes/tenderly-virtual-testnets'},      
-                { type: 'doc', label: 'Interact with EVM usign wagmi', id: 'appkit/recipes/wagmi-send-transaction'}      
+                { type: 'doc', label: 'EVM Transactions using Wagmi', id: 'appkit/recipes/wagmi-send-transaction'}      
               ]
             },
             {

src/theme/DocSidebar/index.js

@@ -25,12 +25,14 @@ export const FrameworksMenu = () => {
   if (
     location.pathname.includes('/appkit/overview') ||
     location.pathname.includes('/appkit/features') ||
+    location.pathname.includes('/appkit/networks') ||
+    location.pathname.includes('/appkit/authentication') ||
+    location.pathname.includes('/appkit/recipes') ||
     location.pathname.includes('/appkit/migration') ||
     location.pathname.includes('/appkit/upgrade') ||
     location.pathname.includes('/walletkit/upgrade') ||
     location.pathname.includes('/walletkit/overview') ||
     location.pathname.includes('/walletkit/features') ||
-    location.pathname.includes('/appkit/recipes') ||
     location.pathname.includes('/walletkit/best-practices')
   ) {
     return