make blue button the first file to shorten the overall doc length

coinbase · May 13, 2024 · fb63f36 · fb63f36
1 parent 48854ed
commit fb63f36
Showing 1 changed file with 95 additions and 94 deletions.
diff --git a/docs/pages/guides/components/create-wallet-button.mdx b/docs/pages/guides/components/create-wallet-button.mdx
@@ -10,12 +10,13 @@ For the best onboarding experience, we recommend adding a highly visible 'Create
 
 Adding a 'Create Wallet' button to a page streamlines the onboarding experience for a new user and gets them ready to use your dapp in a few seconds. Plus, we're offering additional incentives to dapps who implement this new approach.
 
-We recommend two paths for implementation:
+**We recommend two paths for implementation:**
 
 1. Match our branded Create Wallet button
 1. Match your own apps look and feel in the Create button
 
 Example:
+
 <div style={{ width: 200 }}>
   <div style={{ paddingBottom: 10 }}>
     ![Create Wallet Button](/createWalletButtonBlack.png)
@@ -33,6 +34,48 @@ To implement the Create Wallet button with Wagmi, all you need to do to trigger
 
 :::code-group
 
+```tsx twoslash [BlueCreateWalletButton.tsx] filename="BlueCreateWalletButton.tsx"
+import React, { useCallback } from "react";
+import { useConnect } from "wagmi";
+import { CoinbaseWalletLogo } from "./CoinbaseWalletLogo";
+
+const buttonStyles = {
+  background: "transparent",
+  border: "1px solid transparent",
+  boxSizing: "border-box",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "space-between",
+  width: 200,
+  fontFamily: "Arial, sans-serif",
+  fontWeight: "bold",
+  fontSize: 18,
+  backgroundColor: "#0052FF",
+  paddingLeft: 15,
+  paddingRight: 30,
+  borderRadius: 10,
+};
+
+export function BlueCreateWalletButton() {
+  const { connectors, connect, data } = useConnect();
+
+  const createWallet = useCallback(() => {
+    const coinbaseWalletConnector = connectors.find(
+      (connector) => connector.id === "coinbaseWalletSDK"
+    );
+    if (coinbaseWalletConnector) {
+      connect({ connector: coinbaseWalletConnector });
+    }
+  }, [connectors, connect]);
+  return (
+    <button style={buttonStyles} onClick={createWallet}>
+      <CoinbaseWalletLogo />
+      Create Wallet
+    </button>
+  );
+}
+```
+
 ```tsx twoslash [BlackCreateWalletButton.tsx] filename="BlackCreateWalletButton.tsx"
 import React, { useCallback, useEffect, useMemo, useState } from "react";
 import { useConnect } from "wagmi";
@@ -159,48 +202,6 @@ export function BlackCreateWalletButton({ height = 66, width = 200 }) {
 }
 ```
 
-```tsx twoslash [BlueCreateWalletButton.tsx] filename="BlueCreateWalletButton.tsx"
-import React, { useCallback } from "react";
-import { useConnect } from "wagmi";
-import { CoinbaseWalletLogo } from "./CoinbaseWalletLogo";
-
-const buttonStyles = {
-  background: "transparent",
-  border: "1px solid transparent",
-  boxSizing: "border-box",
-  display: "flex",
-  alignItems: "center",
-  justifyContent: "space-between",
-  width: 200,
-  fontFamily: "Arial, sans-serif",
-  fontWeight: "bold",
-  fontSize: 18,
-  backgroundColor: "#0052FF",
-  paddingLeft: 15,
-  paddingRight: 30,
-  borderRadius: 10,
-};
-
-export function BlueCreateWalletButton() {
-  const { connectors, connect, data } = useConnect();
-
-  const createWallet = useCallback(() => {
-    const coinbaseWalletConnector = connectors.find(
-      (connector) => connector.id === "coinbaseWalletSDK"
-    );
-    if (coinbaseWalletConnector) {
-      connect({ connector: coinbaseWalletConnector });
-    }
-  }, [connectors, connect]);
-  return (
-    <button style={buttonStyles} onClick={createWallet}>
-      <CoinbaseWalletLogo />
-      Create Wallet
-    </button>
-  );
-}
-```
-
 ```tsx twoslash [CoinbaseWalletLogo.tsx] filename="CoinbaseWalletLogo.tsx"
 import React from "react";
 
@@ -270,6 +271,57 @@ To implement the Create Wallet button using only the SDK, all you need to do is
 
 :::code-group
 
+```tsx twoslash [BlueCreateWalletButton.tsx] filename="BlueCreateWalletButton.tsx"
+import React, { useCallback } from "react";
+import { CoinbaseWalletSDK } from "@coinbase/wallet-sdk";
+import { CoinbaseWalletLogo } from "./CoinbaseWalletLogo";
+
+const buttonStyles = {
+  background: "transparent",
+  border: "1px solid transparent",
+  boxSizing: "border-box",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "space-between",
+  width: 200,
+  fontFamily: "Arial, sans-serif",
+  fontWeight: "bold",
+  fontSize: 18,
+  backgroundColor: "#0052FF",
+  paddingLeft: 15,
+  paddingRight: 30,
+  borderRadius: 10,
+};
+
+const sdk = new CoinbaseWalletSDK({
+  appName: "My Dapp",
+  appLogoUrl: "https://example.com/logo.png",
+  appChainIds: [84532],
+});
+
+const provider = sdk.makeWeb3Provider();
+
+export function BlueCreateWalletButton({ handleSuccess, handleError }) {
+  const createWallet = useCallback(async () => {
+    try {
+      const [address] = await provider.request({
+        method: "eth_requestAccounts",
+      });
+      handleSuccess(address);
+    } catch (error) {
+      handleError(error);
+    }
+  }, [handleSuccess, handleError]);
+
+  return (
+    <button style={buttonStyles} onClick={createWallet}>
+      <CoinbaseWalletLogo />
+      Create Wallet
+    </button>
+  );
+}
+```
+
 ```tsx twoslash [BlackCreateWalletButton.tsx] filename="BlackCreateWalletButton.tsx"
 import React, { useCallback, useEffect, useMemo, useState } from "react";
 import { CoinbaseWalletSDK } from "@coinbase/wallet-sdk";
@@ -404,57 +456,6 @@ export function BlackCreateWalletButton({ height = 66, width = 200 }) {
 }
 ```
 
-```tsx twoslash [BlueCreateWalletButton.tsx] filename="BlueCreateWalletButton.tsx"
-import React, { useCallback } from "react";
-import { CoinbaseWalletSDK } from "@coinbase/wallet-sdk";
-import { CoinbaseWalletLogo } from "./CoinbaseWalletLogo";
-
-const buttonStyles = {
-  background: "transparent",
-  border: "1px solid transparent",
-  boxSizing: "border-box",
-  display: "flex",
-  alignItems: "center",
-  justifyContent: "space-between",
-  width: 200,
-  fontFamily: "Arial, sans-serif",
-  fontWeight: "bold",
-  fontSize: 18,
-  backgroundColor: "#0052FF",
-  paddingLeft: 15,
-  paddingRight: 30,
-  borderRadius: 10,
-};
-
-const sdk = new CoinbaseWalletSDK({
-  appName: "My Dapp",
-  appLogoUrl: "https://example.com/logo.png",
-  appChainIds: [84532],
-});
-
-const provider = sdk.makeWeb3Provider();
-
-export function BlueCreateWalletButton({ handleSuccess, handleError }) {
-  const createWallet = useCallback(async () => {
-    try {
-      const [address] = await provider.request({
-        method: "eth_requestAccounts",
-      });
-      handleSuccess(address);
-    } catch (error) {
-      handleError(error);
-    }
-  }, [handleSuccess, handleError]);
-
-  return (
-    <button style={buttonStyles} onClick={createWallet}>
-      <CoinbaseWalletLogo />
-      Create Wallet
-    </button>
-  );
-}
-```
-
 ```tsx twoslash [CoinbaseWalletLogo.tsx] filename="CoinbaseWalletLogo.tsx"
 import React from "react";