docs: create content for Libraries Integration (#8)

.vitepress/config.ts

@@ -422,7 +422,7 @@ function sidebarHome() {
       collapsed: true,
       items: [
         {
-          text: "XDEFI Wallet integration",
+          text: "XDEFI Wallet Integration",
           link: "/developers/xdefi-wallet-integration",
           collapsed: true,
           items: [
@@ -499,7 +499,7 @@ function sidebarHome() {
           ],
         },
         {
-          text: "Blockhains Integration",
+          text: "Blockchains Integration",
           link: "/developers/blockchains-integration",
           collapsed: true,
           items: [
@@ -566,7 +566,7 @@ function sidebarHome() {
           ],
         },
         {
-          text: "Libraries integration",
+          text: "Libraries Integration",
           link: "/developers/libraries-integration",
           collapsed: true,
           items: [
@@ -576,11 +576,11 @@ function sidebarHome() {
               link: "/developers/blocknative-xdefi-integration",
             },
             {
-              text: "Cosmos Kit",
+              text: "CosmosKit",
               link: "/developers/cosmoskit-xdefi-integration",
             },
             {
-              text: "Rainbowkit",
+              text: "RainbowKit",
               link: "/developers/rainbowkit-xdefi-integration",
             },
             {

developers/blocknative-xdefi-integration.md

@@ -1 +1,28 @@
 # BlockNative XDEFI Integration
+
+First, your app need to install the core Onboard library, the injected wallets module and optionally ethers js to support browser extension and mobile wallets:
+
+```bash
+yarn add @web3-onboard/core @web3-onboard/injected-wallets ethers
+```
+
+Then initialize in your app:
+
+```javascript
+import Onboard from "@web3-onboard/core";
+import xdefiWalletModule from "@web3-onboard/xdefi";
+
+// initialize the module with options
+const xdefiWalletSdk = xdefiWalletModule();
+
+const onboard = Onboard({
+  // ... other Onboard options
+  wallets: [
+    xdefiWalletSdk(),
+    //... other wallets
+  ],
+});
+
+const connectedWallets = await onboard.connectWallet();
+console.log(connectedWallets);
+```

developers/cosmoskit-xdefi-integration.md

@@ -0,0 +1,43 @@
+# CosmosKit XDEFI Integration
+
+First, your app need to install 2 packages for the XDEFI:
+
+- `@cosmos-kit/xdefi`
+- `@cosmos-kit/xdefi-extension`
+
+`@cosmos-kit/xdefi` export all available xdefi wallets (currently only extension available), while if you only want to add a particular one, choose `@cosmos-kit/xdefi-extension`
+
+> Note: all these packages export `wallets` and it's an array of `MainWalletBase`
+
+Take `@cosmos-kit/xdefi` for example
+
+### add `@cosmos-kit/xdefi`
+
+```bash
+yarn add @cosmos-kit/xdefi
+```
+
+### import the wallets
+
+```javascript
+import { wallets as xdefi } from "@cosmos-kit/xdefi";
+```
+
+### add to your provider
+
+```javascript
+function MyCosmosApp({ Component, pageProps }: AppProps) {
+  return (
+      <ChainProvider
+        chains={chains}
+        assetLists={assets}
+        wallets={[...xdefi]}
+        walletConnectOptions={...} // required if `wallets` contains mobile wallets
+      >
+        <Component {...pageProps} />
+      </ChainProvider>
+  );
+}
+
+export default MyCosmosApp;
+```

developers/introduction.md

@@ -53,7 +53,7 @@ XDEFI Wallet is also integrated in a large panel of libraries to make it accessi
 
 You can acces the list from here:
 
-- [BlockNative](./blocknative-xdefi-integration
-- [Cosmos Kit](./cosmoskit-xdefi-integration)
-- [Rainbowkit](./rainbowkit-xdefi-integration)
+- [BlockNative](./blocknative-xdefi-integration)
+- [CosmosKit](./cosmoskit-xdefi-integration)
+- [RainbowKit](./rainbowkit-xdefi-integration)
 - [Solana Adapter](./solana-adapter-xdefi-integration)

developers/libraries-integration.md

@@ -0,0 +1,10 @@
+# Libraries Integration
+
+XDEFI Wallet is also integrated in a large panel of libraries to make it accessible to any developer's needs.
+
+You can access the list from here:
+
+- [BlockNative](./blocknative-xdefi-integration)
+- [CosmosKit](./cosmoskit-xdefi-integration)
+- [RainbowKit](./rainbowkit-xdefi-integration)
+- [Solana Adapter](./solana-adapter-xdefi-integration)

developers/rainbowkit-xdefi-integration.md

@@ -0,0 +1,122 @@
+# RainbowKit XDEFI Integration
+
+You can import individual wallets from `'@rainbow-me/rainbowkit/wallets'` along with the `connectorsForWallets` function to build your own list of wallets with their necessary connectors. This way you have full control over which wallets to display, and in which order.
+
+For example, you can choose to only show Rainbow along with generic fallback wallets.
+
+```javascript
+import { connectorsForWallets } from "@rainbow-me/rainbowkit";
+import {
+  rainbowWallet,
+  walletConnectWallet,
+} from "@rainbow-me/rainbowkit/wallets";
+
+const connectors = connectorsForWallets(
+  [
+    {
+      groupName: "Recommended",
+      wallets: [rainbowWallet, walletConnectWallet],
+    },
+  ],
+  {
+    appName: "My RainbowKit App",
+    projectId: "YOUR_PROJECT_ID",
+  },
+);
+```
+
+You can then pass your connectors to Wagmi's `createConfig`.
+
+```javascript
+import { connectorsForWallets } from '@rainbow-me/rainbowkit';
+import { createConfig } from 'wagmi';
+
+const connectors = connectorsForWallets(/* ... */);
+
+const config = createConfig({
+  connectors,
+  {/* Wagmi config */}
+});
+
+const queryClient = new QueryClient();
+
+const App = () => (
+  <WagmiProvider config={config}>
+    <QueryClientProvider client={queryClient}>
+      <RainbowKitProvider {...etc}>
+        {/* Your App */}
+      </RainbowKitProvider>
+    </QueryClientProvider>
+  </WagmiProvider>
+);
+```
+
+### Built-in XDEFI Wallets
+
+First, you need to install the `@rainbow-me/rainbowkit/wallets` package and then import the dApp:
+
+```javascript
+import { xdefiWallet } from "@rainbow-me/rainbowkit/wallets";
+```
+
+### Examples
+
+Here are examples: Show Rainbow, MetaMask, Coinbase and XDEFI along with generic fallback wallets.
+
+```javascript
+import { connectorsForWallets } from '@rainbow-me/rainbowkit';
+import {
+  rainbowWallet,
+  xdefiWallet
+  metaMaskWallet,
+  coinbaseWallet,
+  walletConnectWallet,
+} from '@rainbow-me/rainbowkit/wallets';
+
+const connectors = connectorsForWallets(
+  [
+    {
+      groupName: 'Suggested',
+      wallets: [
+        rainbowWallet,
+        xdefiWallet,
+        metaMaskWallet,
+        coinbaseWallet,
+        walletConnectWallet,
+      ],
+    },
+  ],
+  { appName: 'RainbowKit App', projectId: 'YOUR_PROJECT_ID' },
+);
+```
+
+> Reminder: The order of the wallets array defines the order in which wallets will be displayed in the UI.
+
+You also can use the `groupName` key to name different wallet groups. This is useful if you want to communicate to your users which wallets you recommend, as well as other possible wallets.
+
+Recommend Rainbow and MetaMask, but also offer Coinbase along with generic fallback wallets.
+
+```javascript
+import { connectorsForWallets } from "@rainbow-me/rainbowkit";
+import {
+  rainbowWallet,
+  xdefiWallet,
+  metaMaskWallet,
+  coinbaseWallet,
+  walletConnectWallet,
+} from "@rainbow-me/rainbowkit/wallets";
+
+const connectors = connectorsForWallets(
+  [
+    {
+      groupName: "Recommended",
+      wallets: [rainbowWallet, metaMaskWallet],
+    },
+    {
+      groupName: "Others",
+      wallets: [xdefiWallet, coinbaseWallet, walletConnectWallet],
+    },
+  ],
+  { appName: "RainbowKit App", projectId: "YOUR_PROJECT_ID" },
+);
+```