Work in progress improve wallet

apps/docs/package.json

@@ -8,7 +8,7 @@
     "build:apps": "next build"
   },
   "dependencies": {
-    "@meshsdk/midnight-react": "0.0.2",
+    "@meshsdk/midnight-react": "*",
     "@radix-ui/react-dialog": "^1.1.6",
     "@radix-ui/react-dropdown-menu": "^2.1.6",
     "@radix-ui/react-slot": "^1.1.2",
@@ -22,6 +22,7 @@
   },
   "devDependencies": {
     "@eslint/eslintrc": "^3",
+    "@graphql-eslint/eslint-plugin": "^4.4.0",
     "@types/node": "^20",
     "@types/react": "^18.3.1",
     "@types/react-dom": "^18.3.1",

apps/docs/src/pages/en/wiki/4_react_components/0_installtion_providers.mdx

@@ -0,0 +1,67 @@
+---
+title: Installation and providers
+description: Configuring provider
+asIndexPage: true
+sidebarTitle: Installation and providers
+---
+
+# Installation and providers
+
+Frontend components for wallet connections, and useful React hooks to getting wallet states.
+
+Mesh provide a collection of useful UI components, so you can easily include web3 functionality and convenient utilities for your application.
+
+## Setup
+
+Install the Mesh React package, run the following:
+
+```sh npm2yarn copy
+npm install @meshsdk/midnight-react
+```
+
+Next, add the Mesh CSS to your application, doing so will apply the default styles to the components. You can add this in /pages/\_app.tsx.
+
+```js filename="/pages/_app.tsx" copy
+import "@meshsdk/midnight-react/styles.css";
+```
+
+## Midnight Mesh Provider
+
+React Context allows apps to share data across the app, and MidnightMeshProvider allows your app to subscribe to context changes. You can wrap MidnightMeshProvider at the root of your application, for example in Next.js:
+
+```js filename="/pages/_app.tsx" copy
+import type { AppProps } from "next/app";
+import { MidnightMeshProvider } from "@meshsdk/midnight-react";
+import "@meshsdk/midnight-react/styles.css";
+
+export default function App({ Component, pageProps }: AppProps) {
+  return (
+    <MidnightMeshProvider>
+      <Component {...pageProps} />
+    </MidnightMeshProvider>
+  );
+}
+```
+
+You may optionally provide a logger to track wallet actions and events. If not required, it can be omitted as demonstrated above.
+
+```js filename="/pages/_app.tsx" copy
+import type { AppProps } from "next/app";
+import { MidnightMeshProvider } from "@meshsdk/midnight-react";
+import "@meshsdk/midnight-react/styles.css";
+import * as pino from "pino";
+
+export default function App({ Component, pageProps }: AppProps) {
+  export const logger = pino.pino({
+  level: "trace",
+  });
+
+  return (
+    <MidnightMeshProvider logger={logger}>
+      <Component {...pageProps} />
+    </MidnightMeshProvider>
+  );
+}
+```
+
+Now your application is ready, explore the available UI components and wallet hooks and start using them in your application.

apps/docs/src/pages/en/wiki/4_react_components/1_ui_components.mdx

@@ -0,0 +1,59 @@
+---
+title: Wallet UI Components
+description: React ready-to-use components
+asIndexPage: true
+sidebarTitle: Wallet UI Components
+---
+import { Callout } from "nextra/components";
+
+# Wallet UI Components
+
+UI components to speed up your app development.
+
+Mesh provides a collection of useful UI components, so you can easily include web3 functionality and convenient utilities for your application
+
+### Connect Wallet
+In order for apps to communicate with the user's wallet, we need a way to connect to their wallet.
+
+##### Dark Mode 
+Dark mode is built into the library. Simply toggling the dark class will enable it automatically. You can try switching between dark and light modes using the control at the bottom left of the documentation.
+
+##### Persist user session
+The library automatically handles saving and reconnecting the user's last connected wallet. 
+
+##### Headless Wallet - Customization
+For more customization, you can easily build your own wallet connection component. If you are using React, the [React hooks](/en/wiki/4_react_components/2_hooks) will be useful. You may also take reference from this [component](https://github.com/MeshJS/midnight/tree/main/example-workspaces/wallet-examples).
+
+##### Connect Wallet Component
+The wallet component is currently supported only in the Google Chrome browser.
+```js copy
+import { MidnightWallet } from "@meshsdk/midnight-react";
+
+export default function Home() {
+  return (    
+    <MidnightWallet />      
+  );
+}
+```
+<Callout type="info" emoji="ℹ️">
+Output of the component
+</Callout>
+
+import { MidnightMeshProvider, MidnightWallet } from "@meshsdk/midnight-react";
+import "@meshsdk/midnight-react/styles.css";
+import * as pino from "pino";
+
+export function Wallet() { 
+  const logger = pino.pino({
+  level: "trace",
+  });
+  return (
+    <MidnightMeshProvider logger={logger}>
+      <div className="mt-5">
+      <MidnightWallet />
+      </div>
+    </MidnightMeshProvider>
+  );
+}
+
+<Wallet />