Storybook wallet integration (#27)

apps/workshop/.storybook/preview.tsx

@@ -5,6 +5,7 @@ import { DARK_MODE_EVENT_NAME } from "storybook-dark-mode";
 import { MantineProvider, useMantineColorScheme } from "@mantine/core";
 
 // import application theme
+import WalletProvider from "./walletProvider";
 import { theme } from "../../web/src/providers/theme";
 
 const channel = addons.getChannel();
@@ -23,6 +24,7 @@ function ColorSchemeWrapper({ children }: { children: React.ReactNode }) {
 }
 
 export const decorators = [
+    (renderStory: any) => <WalletProvider>{renderStory()}</WalletProvider>,
     (renderStory: any) => (
         <ColorSchemeWrapper>{renderStory()}</ColorSchemeWrapper>
     ),

apps/workshop/.storybook/walletProvider.tsx

@@ -0,0 +1,84 @@
+import { useMantineColorScheme } from "@mantine/core";
+import {
+    RainbowKitProvider,
+    connectorsForWallets,
+    darkTheme,
+    getDefaultWallets,
+    lightTheme,
+} from "@rainbow-me/rainbowkit";
+import { ThemeOptions } from "@rainbow-me/rainbowkit/dist/themes/baseTheme";
+import "@rainbow-me/rainbowkit/styles.css";
+import {
+    argentWallet,
+    ledgerWallet,
+    trustWallet,
+} from "@rainbow-me/rainbowkit/wallets";
+import { configureChains, createConfig, WagmiConfig } from "wagmi";
+import { foundry, mainnet, sepolia } from "wagmi/chains";
+import { publicProvider } from "wagmi/providers/public";
+
+// only 1 chain is enabled, based on env var
+const { chains, publicClient, webSocketPublicClient } = configureChains(
+    [foundry, mainnet, sepolia],
+    [publicProvider()],
+);
+
+const projectId = "a6265c875f8a7513ac7c52362abf434b";
+const { wallets } = getDefaultWallets({
+    appName: "CartesiScan",
+    projectId,
+    chains,
+});
+
+const appInfo = {
+    appName: "CartesiScan",
+    learnMoreUrl: "https://cartesiscan.io",
+};
+
+const connectors = connectorsForWallets([
+    ...wallets,
+    {
+        groupName: "Other",
+        wallets: [
+            argentWallet({ chains, projectId }),
+            trustWallet({ chains, projectId }),
+            ledgerWallet({ chains, projectId }),
+        ],
+    },
+]);
+
+const wagmiConfig = createConfig({
+    autoConnect: true,
+    connectors,
+    publicClient,
+    webSocketPublicClient,
+});
+
+const WalletProvider = ({ children }: { children: React.ReactNode }) => {
+    const scheme = useMantineColorScheme();
+
+    // XXX: make this match the mantine theme
+    const themeOptions: ThemeOptions = {
+        accentColor: "rgb(12, 133, 153)",
+        borderRadius: "small",
+    };
+
+    const walletTheme =
+        scheme.colorScheme == "dark"
+            ? darkTheme(themeOptions)
+            : lightTheme(themeOptions);
+
+    return (
+        <WagmiConfig config={wagmiConfig}>
+            <RainbowKitProvider
+                appInfo={appInfo}
+                chains={chains}
+                theme={walletTheme}
+            >
+                {children}
+            </RainbowKitProvider>
+        </WagmiConfig>
+    );
+};
+
+export default WalletProvider;

apps/workshop/package.json

@@ -14,9 +14,11 @@
         "@cartesi/rollups-explorer-ui": "*",
         "@mantine/core": "^7.0.0",
         "@mantine/hooks": "^7.0.0",
+        "@rainbow-me/rainbowkit": "^1",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
-        "react-icons": "^4"
+        "react-icons": "^4",
+        "wagmi": "^1"
     },
     "devDependencies": {
         "@cartesi/tsconfig": "*",

apps/workshop/src/stories/ConnectButton.stories.tsx

@@ -0,0 +1,38 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { ConnectButton } from "@rainbow-me/rainbowkit";
+
+const meta: Meta<typeof ConnectButton> = {
+    component: ConnectButton,
+};
+
+export default meta;
+type Story = StoryObj<typeof ConnectButton>;
+
+export const Default: Story = {
+    args: {},
+};
+
+export const NoBalance: Story = {
+    args: {
+        showBalance: false,
+    },
+};
+
+export const IconChainStatus: Story = {
+    args: {
+        chainStatus: "icon",
+    },
+};
+
+export const NameChainStatus: Story = {
+    args: {
+        chainStatus: "name",
+    },
+};
+
+export const NoneChainStatus: Story = {
+    args: {
+        chainStatus: "none",
+    },
+};

yarn.lock

@@ -2943,7 +2943,7 @@
   dependencies:
     "@babel/runtime" "^7.13.10"
 
-"@rainbow-me/rainbowkit@^1.0.11":
+"@rainbow-me/rainbowkit@^1", "@rainbow-me/rainbowkit@^1.0.11":
   version "1.0.11"
   resolved "https://registry.yarnpkg.com/@rainbow-me/rainbowkit/-/rainbowkit-1.0.11.tgz#5d03a8b1f8b8d7f8b3dee14dae378574ea3e6f8b"
   integrity sha512-+cm6+WUPG9iPgkfJKbvlowcrSHu266Zk20LVRsYLcmb6v29gVMHcWQvyI4T6EVC9TxNjnyq/jIlen++uiUBmmQ==