docs: create content for Libraries Integration

.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" },
+);
+```