From cff1c858a18b0ca7fdaab964d8b343f4cd4d377b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ti=E1=BA=BFn=20Nguy=E1=BB=85n=20Kh=E1=BA=AFc?=
 <tien.nguyenkhac@icloud.com>
Date: Tue, 23 Jul 2024 22:40:20 +1200
Subject: [PATCH] docs: use codebase convention for code snippets (#37)

---
 .../docs/getting-started/connect-wallets.mdx   | 12 +++++-------
 apps/docs/docs/getting-started/multichain.md   |  4 +---
 apps/docs/docs/getting-started/setup.mdx       | 18 +++++++-----------
 3 files changed, 13 insertions(+), 21 deletions(-)

diff --git a/apps/docs/docs/getting-started/connect-wallets.mdx b/apps/docs/docs/getting-started/connect-wallets.mdx
index 9962ef77..5b77f8b3 100644
--- a/apps/docs/docs/getting-started/connect-wallets.mdx
+++ b/apps/docs/docs/getting-started/connect-wallets.mdx
@@ -50,7 +50,7 @@ import {
   WalletConnect,
 } from "@reactive-dot/core/wallets.js";
 
-const config = {
+export const config = {
   // ...
   wallets: [
     new InjectedWalletAggregator(),
@@ -72,20 +72,18 @@ const config = {
     }),
   ],
 } as const satisfies Config;
-
-export default config;
 ```
 
 ## Connect to wallets
 
-```tsx title="Wallets.tsx"
+```tsx title="wallets.tsx"
 import {
   useConnectedWallets,
   useWallets,
   useConnectWallet,
 } from "@reactive-dot/react";
 
-export default function Wallets() {
+export function Wallets() {
   const wallets = useWallets();
   const connectedWallets = useConnectedWallets();
 
@@ -123,10 +121,10 @@ export default function Wallets() {
 
 ## Display available accounts
 
-```tsx title="Accounts.tsx"
+```tsx title="accounts.tsx"
 import { useAccounts } from "@reactive-dot/react";
 
-export default function Accounts() {
+export function Accounts() {
   const accounts = useAccounts();
 
   return (
diff --git a/apps/docs/docs/getting-started/multichain.md b/apps/docs/docs/getting-started/multichain.md
index 4904389f..bd374a78 100644
--- a/apps/docs/docs/getting-started/multichain.md
+++ b/apps/docs/docs/getting-started/multichain.md
@@ -39,7 +39,7 @@ declare module "@reactive-dot/core" {
 import type { dot, ksm, wnd } from "@polkadot-api/descriptors";
 import type { Config } from "@reactive-dot/core";
 
-const config = {
+export const config = {
   chains: {
     polkadot: {
       descriptor: dot,
@@ -56,8 +56,6 @@ const config = {
   },
   //...
 } as const satisfies Config;
-
-export default config;
 ```
 
 ## Chain selection
diff --git a/apps/docs/docs/getting-started/setup.mdx b/apps/docs/docs/getting-started/setup.mdx
index 09eab97e..adaf3e62 100644
--- a/apps/docs/docs/getting-started/setup.mdx
+++ b/apps/docs/docs/getting-started/setup.mdx
@@ -83,7 +83,7 @@ const smoldot = startFromWorker(
   }),
 );
 
-const config = {
+export const config = {
   chains: {
     // "polkadot" here can be any unique string value
     polkadot: {
@@ -93,8 +93,6 @@ const config = {
   },
   wallets: [new InjectedWalletAggregator()],
 } as const satisfies Config;
-
-export default config;
 ```
 
 {/* prettier-ignore-start */}
@@ -110,7 +108,7 @@ import { WebSocketProvider } from "@polkadot-api/ws-provider/web";
 import type { Config } from "@reactive-dot/core";
 import { InjectedWalletAggregator } from "@reactive-dot/core/wallets.js";
 
-const config = {
+export const config = {
   chains: {
     polkadot: {
       descriptor: dot,
@@ -119,8 +117,6 @@ const config = {
   },
   wallets: [new InjectedWalletAggregator()],
 } as const satisfies Config;
-
-export default config;
 ```
 
 {/* prettier-ignore-start */}
@@ -145,12 +141,12 @@ declare module "@reactive-dot/core" {
 
 ## Wrap app in context providers
 
-```tsx title="App.tsx"
-import config from "./config";
+```tsx title="app.tsx"
+import { config } from "./config";
 import { ReDotChainProvider, ReDotProvider } from "@reactive-dot/react";
 import { Suspense } from "react";
 
-export default function App() {
+export function App() {
   return (
     <ReDotProvider config={config}>
       {/* `chainId` match the ID previously specified via `polkadot: typeof dot` */}
@@ -165,11 +161,11 @@ export default function App() {
 
 ## Use Reactive DOT
 
-```tsx title="MyComponent.tsx"
+```tsx title="my-component.tsx"
 import { config } from "./config";
 import { useAccounts, useLazyLoadQuery } from "@reactive-dot/react";
 
-export default function MyComponent() {
+export function MyComponent() {
   const accounts = useAccounts();
   const [timestamp, totalIssuance] = useLazyLoadQuery((builder) =>
     builder