chore: setup chromatic for storybook

.github/workflows/chromatic.yaml

@@ -0,0 +1,31 @@
+name: "Chromatic"
+
+on: push
+
+jobs:
+  chromatic:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+      - name: Make envfile
+        uses: SpicyPizza/[email protected]
+        with:
+          envkey_REACT_APP_WALLET_CONNECT_PROJECT_ID: ${{ secrets.REACT_APP_WALLET_CONNECT_PROJECT_ID }}
+          envkey_STORYBOOK_INFURA_PROJECT_SECRET: ${{ secrets.INFURA_PROJECT_SECRET }}
+          envkey_STORYBOOK_REACT_APP_MAGIC_API_KEY: ${{ secrets.REACT_APP_MAGIC_API_KEY }}
+          directory: ./packages/react-kit
+          file_name: .env
+      - run: cat .env
+        working-directory: ./packages/react-kit
+      - name: Install dependencies
+        run: npm ci
+      - id: build
+        run: npm run build -- --cache-dir=".turbo"
+      - name: Publish to Chromatic
+        uses: chromaui/action@latest
+        with:
+          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
+          workingDir: packages/react-kit

.github/workflows/pin-to-pinata.yaml

@@ -34,52 +34,52 @@ jobs:
         env:
           PINATA_JWT: ${{ secrets.PINATA_JWT }}
           INFURA_PROJECT_ID: ${{ secrets.INFURA_PROJECT_ID }}
-          INFURA_PROJECT_SECRET: ${{ secrets.INFURA_PROJECT_SECRET }}
+          STORYBOOK_INFURA_PROJECT_SECRET: ${{ secrets.STORYBOOK_INFURA_PROJECT_SECRET }}
         run: |
           echo "Pin for testing/mumbai env..."
           npm run pin-to-pinata -- \
             -e testing \
             -c testing-80001-0 \
             -fd ${{ env.FROM_DATE }} \
             -p ${{ env.PINATA_JWT }} \
-            -i ${{ env.INFURA_PROJECT_ID }}/${{ env.INFURA_PROJECT_SECRET }}
+            -i ${{ env.INFURA_PROJECT_ID }}/${{ env.STORYBOOK_INFURA_PROJECT_SECRET }}
 
           echo "Pin for testing/goerli env..."
           npm run pin-to-pinata -- \
             -e testing \
             -c testing-5-0 \
             -fd ${{ env.FROM_DATE }} \
             -p ${{ env.PINATA_JWT }} \
-            -i ${{ env.INFURA_PROJECT_ID }}/${{ env.INFURA_PROJECT_SECRET }}
+            -i ${{ env.INFURA_PROJECT_ID }}/${{ env.STORYBOOK_INFURA_PROJECT_SECRET }}
 
           echo "Pin for staging/mumbai env..."
           npm run pin-to-pinata -- \
             -e staging \
             -c staging-80001-0 \
             -fd ${{ env.FROM_DATE }} \
             -p ${{ env.PINATA_JWT }} \
-            -i ${{ env.INFURA_PROJECT_ID }}/${{ env.INFURA_PROJECT_SECRET }}
+            -i ${{ env.INFURA_PROJECT_ID }}/${{ env.STORYBOOK_INFURA_PROJECT_SECRET }}
 
           echo "Pin for staging/goerli env..."
           npm run pin-to-pinata -- \
             -e staging \
             -c staging-5-0 \
             -fd ${{ env.FROM_DATE }} \
             -p ${{ env.PINATA_JWT }} \
-            -i ${{ env.INFURA_PROJECT_ID }}/${{ env.INFURA_PROJECT_SECRET }}
+            -i ${{ env.INFURA_PROJECT_ID }}/${{ env.STORYBOOK_INFURA_PROJECT_SECRET }}
 
           echo "Pin for production/polygon env..."
           npm run pin-to-pinata -- \
             -e production \
             -c production-137-0 \
             -fd ${{ env.FROM_DATE }} \
             -p ${{ env.PINATA_JWT }} \
-            -i ${{ env.INFURA_PROJECT_ID }}/${{ env.INFURA_PROJECT_SECRET }}
+            -i ${{ env.INFURA_PROJECT_ID }}/${{ env.STORYBOOK_INFURA_PROJECT_SECRET }}
 
           echo "Pin for production/ethereum env..."
           npm run pin-to-pinata -- \
             -e production \
             -c production-1-0 \
             -fd ${{ env.FROM_DATE }} \
             -p ${{ env.PINATA_JWT }} \
-            -i ${{ env.INFURA_PROJECT_ID }}/${{ env.INFURA_PROJECT_SECRET }}
+            -i ${{ env.INFURA_PROJECT_ID }}/${{ env.STORYBOOK_INFURA_PROJECT_SECRET }}

packages/react-kit/.env.example

@@ -1,6 +1,6 @@
 REACT_APP_WALLET_CONNECT_PROJECT_ID=
-REACT_APP_MAGIC_API_KEY=
-REACT_APP_INFURA_KEY=
+STORYBOOK_REACT_APP_MAGIC_API_KEY=
+STORYBOOK_INFURA_PROJECT_SECRET=
 STORYBOOK_DATA_TOKENS_LIST=
 STORYBOOK_DATA_ENV_NAME=
 STORYBOOK_DATA_SELLER_ID=

packages/react-kit/.storybook/main.ts

@@ -79,6 +79,12 @@ const config: StorybookConfig = {
     });
     config.plugins = config.plugins?.filter((plugin) => !!plugin);
     return config;
+  },
+  env: (config) => {
+    console.log("main storybook", config, process.env);
+    return {
+      ...config
+    };
   }
 };
 export default config;

packages/react-kit/package.json

@@ -146,6 +146,7 @@
     "@web3-react/metamask": "8.2.4",
     "babel-plugin-named-exports-order": "^0.0.2",
     "buffer": "6.0.3",
+    "chromatic": "^11.0.8",
     "copyfiles": "^2.4.1",
     "customize-cra": "^1.0.0",
     "eslint": "^8.10.0",

packages/react-kit/src/lib/config/config.ts

@@ -1,12 +1,12 @@
 import { getRpcUrls } from "../const/networks";
 
-const magicLinkKey = process.env.REACT_APP_MAGIC_API_KEY;
+const magicLinkKey = process.env.STORYBOOK_REACT_APP_MAGIC_API_KEY;
 if (!magicLinkKey) {
-  throw new Error("REACT_APP_MAGIC_API_KEY is not defined");
+  throw new Error("STORYBOOK_REACT_APP_MAGIC_API_KEY is not defined");
 }
-const infuraKey = process.env.REACT_APP_INFURA_KEY;
+const infuraKey = process.env.STORYBOOK_INFURA_PROJECT_SECRET;
 if (!infuraKey) {
-  throw new Error("REACT_APP_INFURA_KEY is not defined");
+  throw new Error("STORYBOOK_INFURA_PROJECT_SECRET is not defined");
 }
 
 export const CONFIG = {

packages/react-kit/src/stories/cta/funds/WithdrawFundsButton.stories.tsx

@@ -1,11 +1,11 @@
+import { ComponentMeta, ComponentStory } from "@storybook/react";
 import React, { useRef } from "react";
-import { ComponentStory, ComponentMeta } from "@storybook/react";
 
 import { WithdrawFundsButton } from "../../../components/cta/funds/WithdrawFundsButton";
 
+import { BigNumber } from "ethers";
 import { hooks } from "../../helpers/connect-wallet";
 import { CtaButtonWrapper } from "../../helpers/CtaButtonWrapper";
-import { BigNumberish } from "ethers";
 
 export default {
   title: "Visual Components/CTA/funds/WithdrawFundsButton",
@@ -52,10 +52,7 @@ Simple.args = {
   tokensToWithdraw: [
     {
       address: "",
-      amount: {
-        type: "BigNumber",
-        hex: ""
-      } as unknown as BigNumberish
+      amount: BigNumber.from(0)
     }
   ],
   disabled: false,

packages/react-kit/src/stories/searchBar/SearchBar.stories.tsx

@@ -1,6 +1,7 @@
+import { ComponentMeta, ComponentStory } from "@storybook/react";
 import React from "react";
-import { ComponentStory, ComponentMeta } from "@storybook/react";
 
+import { EnvironmentType, getEnvConfigs } from "@bosonprotocol/core-sdk";
 import { SearchBar } from "../../components/searchBar/SearchBar";
 
 export default {
@@ -13,8 +14,11 @@ const Template: ComponentStory<typeof SearchBar> = (args) => (
 );
 
 export const Primary: ComponentStory<typeof SearchBar> = Template.bind({});
-
+const envName =
+  (process.env.STORYBOOK_DATA_ENV_NAME as EnvironmentType) || "testing";
+const envConfig = getEnvConfigs(envName);
 Primary.args = {
   disabled: false,
-  envName: "testing"
+  envName,
+  configId: envConfig[0].configId
 };