diff --git a/package.json b/package.json
index 87f5f1c0..31e01872 100644
--- a/package.json
+++ b/package.json
@@ -53,7 +53,7 @@
"@types/react": "^18.2.21",
"@typescript-eslint/eslint-plugin": "^5.59.0",
"@typescript-eslint/parser": "^5.59.0",
- "@vanilla-extract/dynamic": "^2.0.3",
+ "@vanilla-extract/dynamic": "^2.1.0",
"@vitejs/plugin-vue": "^4.1.0",
"@vue/babel-preset-app": "^5.0.8",
"autoprefixer": "^10.4.14",
@@ -95,9 +95,9 @@
"@types/react-dom": "^18.2.7"
},
"dependencies": {
- "@vanilla-extract/css": "^1.12.0",
+ "@vanilla-extract/css": "^1.14.0",
"@vanilla-extract/css-utils": "^0.1.3",
- "@vanilla-extract/recipes": "^0.4.0",
+ "@vanilla-extract/recipes": "^0.5.1",
"animejs": "^3.2.1",
"clsx": "^1.2.1",
"immer": "^9.0.21",
diff --git a/packages/react/.storybook/main.ts b/packages/react/.storybook/main.ts
index 96a50525..9bb61ed5 100644
--- a/packages/react/.storybook/main.ts
+++ b/packages/react/.storybook/main.ts
@@ -1,18 +1,16 @@
import { dirname, join } from "path";
+import { mergeConfig, splitVendorChunkPlugin } from "vite";
+import react from "@vitejs/plugin-react";
+import { vanillaExtractPlugin } from "@vanilla-extract/vite-plugin";
import type { StorybookConfig } from "@storybook/react-vite";
const config: StorybookConfig = {
- stories: [
- "../src/**/*.mdx",
- "../src/**/*.stories.@(jsx|ts|tsx)",
- "../stories/**/*mdx",
- "../stories/**/*.stories.@(jsx|ts|tsx)",
- ],
+ stories: ["../stories/**/*mdx", "../stories/**/*.stories.@(jsx|ts|tsx)"],
addons: [
getAbsolutePath("@storybook/addon-links"),
getAbsolutePath("@storybook/addon-essentials"),
getAbsolutePath("@storybook/addon-interactions"),
- getAbsolutePath("@storybook/addon-viewport")
+ getAbsolutePath("@storybook/addon-viewport"),
],
framework: {
name: getAbsolutePath("@storybook/react-vite"),
@@ -21,6 +19,32 @@ const config: StorybookConfig = {
docs: {
autodocs: "tag",
},
+ core: {
+ builder: "@storybook/builder-vite", // 👈 The builder enabled here.
+ },
+ async viteFinal(config, { configType }) {
+ // return the customized config
+ if (configType === "PRODUCTION") {
+ return mergeConfig(config, {
+ // customize the Vite config here
+ plugins: [react(), splitVendorChunkPlugin(), vanillaExtractPlugin()],
+ build: {
+ rollupOptions: {
+ output: {
+ manualChunks(id: string) {
+ // creating a chunk for mock data
+ if (id.includes("stub/")) {
+ return "stub";
+ }
+ },
+ },
+ },
+ },
+ });
+ }
+
+ return config;
+ },
};
export default config;
diff --git a/packages/react/.storybook/preview.tsx b/packages/react/.storybook/preview.tsx
index 5f28bc95..7f356418 100644
--- a/packages/react/.storybook/preview.tsx
+++ b/packages/react/.storybook/preview.tsx
@@ -1,8 +1,9 @@
import React from "react";
import type { Preview } from "@storybook/react";
-import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
+import { INITIAL_VIEWPORTS } from "@storybook/addon-viewport";
import WithThemeDecorator from "./WithThemeDecorator";
import { I18nProvider } from "../src";
+import "./story-global.css";
const preview: Preview = {
parameters: {
@@ -20,9 +21,9 @@ const preview: Preview = {
decorators: [
(story) => (
-
- {/* 👇 Decorators in Storybook also accept a function. Replace with Story() to enable it */}
- {story()}
+
+ {/* 👇 Decorators in Storybook also accept a function. Replace with Story() to enable it */}
+ {story()}
),
diff --git a/packages/react/.storybook/story-global.css b/packages/react/.storybook/story-global.css
new file mode 100644
index 00000000..56dd654f
--- /dev/null
+++ b/packages/react/.storybook/story-global.css
@@ -0,0 +1,68 @@
+/*
+ 1. Use a more-intuitive box-sizing model.
+*/
+*,
+*::before,
+*::after {
+ box-sizing: border-box;
+}
+
+/*
+ 2. Remove default margin
+*/
+* {
+ margin: 0;
+}
+
+/*
+ Typographic tweaks!
+ 3. Add accessible line-height
+ 4. Improve text rendering
+*/
+body {
+ line-height: 1.5;
+ -webkit-font-smoothing: antialiased;
+}
+
+/*
+ 5. Improve media defaults
+*/
+img,
+picture,
+video,
+canvas,
+svg {
+ display: block;
+ max-width: 100%;
+}
+
+/*
+ 6. Remove built-in form typography styles
+*/
+input,
+button,
+textarea,
+select {
+ font: inherit;
+}
+
+/*
+ 7. Avoid text overflows
+*/
+p,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+ overflow-wrap: break-word;
+}
+
+/*
+ 8. Create a root stacking context
+*/
+#root,
+#__next {
+ isolation: isolate;
+}
\ No newline at end of file
diff --git a/packages/react/package.json b/packages/react/package.json
index 32cd59b8..be3884fb 100644
--- a/packages/react/package.json
+++ b/packages/react/package.json
@@ -54,10 +54,9 @@
"@floating-ui/react": "^0.26.0",
"@formkit/auto-animate": "1.0.0-beta.6",
"@react-aria/utils": "^3.21.1",
- "@vanilla-extract/css": "^1.12.0",
- "@vanilla-extract/css-utils": "^0.1.3",
- "@vanilla-extract/dynamic": "^2.0.3",
- "@vanilla-extract/recipes": "^0.4.0",
+ "@vanilla-extract/css": "^1.14.0",
+ "@vanilla-extract/dynamic": "^2.1.0",
+ "@vanilla-extract/recipes": "^0.5.1",
"animejs": "^3.2.1",
"bignumber.js": "^9.1.1",
"client-only": "^0.0.1",
@@ -110,12 +109,13 @@
"@storybook/addon-links": "^7.5.3",
"@storybook/addon-viewport": "^7.5.3",
"@storybook/blocks": "^7.5.3",
+ "@storybook/builder-vite": "^7.5.3",
"@storybook/react": "^7.5.3",
"@storybook/react-vite": "^7.5.3",
"@storybook/testing-library": "^0.2.2",
"@types/react": "^18.2.34",
"@vanilla-extract/parcel-transformer": "^1.0.0",
- "@vanilla-extract/vite-plugin": "^3.8.2",
+ "@vanilla-extract/vite-plugin": "^3.9.2",
"@vitejs/plugin-react": "^4.1.0",
"chain-registry": "^1.19.0",
"parcel": "^2.10.2",
diff --git a/packages/react/stories/asset/AssetListHeader.stories.tsx b/packages/react/stories/asset/AssetListHeader.stories.tsx
index 5682aa02..30cc3017 100644
--- a/packages/react/stories/asset/AssetListHeader.stories.tsx
+++ b/packages/react/stories/asset/AssetListHeader.stories.tsx
@@ -13,11 +13,35 @@ export default meta;
type Story = StoryObj;
-export const Primary: Story = {
+export const SingleChainHeader: Story = {
args: {
- isSingle: false,
- total: "144.23",
- totalOnAll: "732.16",
+ title: "Your asset",
+ singleChainHeader: {
+ label: "Total on Osmosis",
+ value: "144.23",
+ },
+ onDeposit: () => {
+ console.log("onDeposit");
+ },
+ onWithdraw: () => {
+ console.log("onWithdraw");
+ },
+ },
+};
+
+export const MultiChainHeader: Story = {
+ args: {
+ title: "Your assets",
+ multiChainHeader: [
+ {
+ label: "Total on Osmosis",
+ value: "144.23",
+ },
+ {
+ label: "Total across all chains",
+ value: "732.16",
+ },
+ ],
onDeposit: () => {
console.log("onDeposit");
},
diff --git a/packages/vue/package.json b/packages/vue/package.json
index 9160c5a5..72394256 100644
--- a/packages/vue/package.json
+++ b/packages/vue/package.json
@@ -18,9 +18,9 @@
"dependencies": {
"@fastify/deepmerge": "^1.3.0",
"@formkit/auto-animate": "1.0.0-beta.6",
- "@vanilla-extract/css": "^1.12.0",
- "@vanilla-extract/dynamic": "^2.0.3",
- "@vanilla-extract/recipes": "^0.4.0",
+ "@vanilla-extract/css": "^1.14.0",
+ "@vanilla-extract/dynamic": "^2.1.0",
+ "@vanilla-extract/recipes": "^0.5.1",
"animejs": "^3.2.1",
"copy-to-clipboard": "^3.3.3",
"immer": "^9.0.19",
diff --git a/yarn.lock b/yarn.lock
index 4e026784..9600c3c9 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -6302,7 +6302,7 @@
process "^0.11.10"
util "^0.12.4"
-"@storybook/builder-vite@7.5.3":
+"@storybook/builder-vite@7.5.3", "@storybook/builder-vite@^7.5.3":
version "7.5.3"
resolved "https://registry.yarnpkg.com/@storybook/builder-vite/-/builder-vite-7.5.3.tgz#4a0adce7451948c6496379f9ab3b786315bd3a0e"
integrity sha512-c104V3O75OCVnfZj0Jr70V09g0KSbPGvQK2Zh31omXGvakG8XrhWolYxkmjOcForJmAqsXnKs/nw3F75Gp853g==
@@ -7490,7 +7490,7 @@
resolved "https://registry.npmjs.org/@vanilla-extract/css-utils/-/css-utils-0.1.3.tgz"
integrity sha512-PZAcHROlgtCUGI2y0JntdNwvPwCNyeVnkQu6KTYKdmxBbK3w72XJUmLFYapfaFfgami4I9CTLnrJTPdtmS3gpw==
-"@vanilla-extract/css@^1.10.0", "@vanilla-extract/css@^1.12.0":
+"@vanilla-extract/css@^1.10.0":
version "1.12.0"
resolved "https://registry.npmjs.org/@vanilla-extract/css/-/css-1.12.0.tgz"
integrity sha512-TEttZfnqTRtwgVYiBWQSGGUiVaYWReHp59DsavITEvh4TpJNifZFGhBznHx4wQFEsyio6xA513jps4tmqR6zmw==
@@ -7507,14 +7507,31 @@
media-query-parser "^2.0.2"
outdent "^0.8.0"
-"@vanilla-extract/dynamic@^2.0.3":
- version "2.0.3"
- resolved "https://registry.npmjs.org/@vanilla-extract/dynamic/-/dynamic-2.0.3.tgz"
- integrity sha512-Rglfw2gXAYiBzAQ4jgUG7rBgE2c88e/zcG27ZVoIqMHVq56wf2C1katGMm1yFMNBgzqM7oBNYzz4YOMzznydkg==
+"@vanilla-extract/css@^1.14.0":
+ version "1.14.0"
+ resolved "https://registry.yarnpkg.com/@vanilla-extract/css/-/css-1.14.0.tgz#45fab9c04d893e3e363cf2cde7559d21233b7f63"
+ integrity sha512-rYfm7JciWZ8PFzBM/HDiE2GLnKI3xJ6/vdmVJ5BSgcCZ5CxRlM9Cjqclni9lGzF3eMOijnUhCd/KV8TOzyzbMA==
+ dependencies:
+ "@emotion/hash" "^0.9.0"
+ "@vanilla-extract/private" "^1.0.3"
+ chalk "^4.1.1"
+ css-what "^6.1.0"
+ cssesc "^3.0.0"
+ csstype "^3.0.7"
+ deep-object-diff "^1.1.9"
+ deepmerge "^4.2.2"
+ media-query-parser "^2.0.2"
+ modern-ahocorasick "^1.0.0"
+ outdent "^0.8.0"
+
+"@vanilla-extract/dynamic@^2.1.0":
+ version "2.1.0"
+ resolved "https://registry.yarnpkg.com/@vanilla-extract/dynamic/-/dynamic-2.1.0.tgz#316d3bd4adfd5f5c9fb080445c41d55abe3b463c"
+ integrity sha512-8zl0IgBYRtgD1h+56Zu13wHTiMTJSVEa4F7RWX9vTB/5Xe2KtjoiqApy/szHPVFA56c+ex6A4GpCQjT1bKXbYw==
dependencies:
"@vanilla-extract/private" "^1.0.3"
-"@vanilla-extract/integration@^6.0.0", "@vanilla-extract/integration@^6.0.2":
+"@vanilla-extract/integration@^6.0.0":
version "6.2.1"
resolved "https://registry.npmjs.org/@vanilla-extract/integration/-/integration-6.2.1.tgz"
integrity sha512-+xYJz07G7TFAMZGrOqArOsURG+xcYvqctujEkANjw2McCBvGEK505RxQqOuNiA9Mi9hgGdNp2JedSa94f3eoLg==
@@ -7533,6 +7550,25 @@
vite "^4.1.4"
vite-node "^0.28.5"
+"@vanilla-extract/integration@^6.2.4":
+ version "6.2.4"
+ resolved "https://registry.yarnpkg.com/@vanilla-extract/integration/-/integration-6.2.4.tgz#bd8a5ec0916051c1ef5fb66d8484a5cad8d8c58d"
+ integrity sha512-+AfymNMVq9sEUe0OJpdCokmPZg4Zi6CqKaW/PnUOfDwEn53ighHOMOBl5hAgxYR8Kiz9NG43Bn00mkjWlFi+ng==
+ dependencies:
+ "@babel/core" "^7.20.7"
+ "@babel/plugin-syntax-typescript" "^7.20.0"
+ "@vanilla-extract/babel-plugin-debug-ids" "^1.0.2"
+ "@vanilla-extract/css" "^1.14.0"
+ esbuild "0.17.6"
+ eval "0.1.8"
+ find-up "^5.0.0"
+ javascript-stringify "^2.0.1"
+ lodash "^4.17.21"
+ mlly "^1.1.0"
+ outdent "^0.8.0"
+ vite "^4.1.4"
+ vite-node "^0.28.5"
+
"@vanilla-extract/parcel-transformer@^1.0.0":
version "1.0.0"
resolved "https://registry.npmjs.org/@vanilla-extract/parcel-transformer/-/parcel-transformer-1.0.0.tgz"
@@ -7546,20 +7582,20 @@
resolved "https://registry.npmjs.org/@vanilla-extract/private/-/private-1.0.3.tgz"
integrity sha512-17kVyLq3ePTKOkveHxXuIJZtGYs+cSoev7BlP+Lf4916qfDhk/HBjvlYDe8egrea7LNPHKwSZJK/bzZC+Q6AwQ==
-"@vanilla-extract/recipes@^0.4.0":
- version "0.4.0"
- resolved "https://registry.npmjs.org/@vanilla-extract/recipes/-/recipes-0.4.0.tgz"
- integrity sha512-gFgB7BofUYbtbxINHK6DhMv1JDFDXp/YI/Xm+cqKar+1I/2dfxPepeDxSexL6YB4ftfeaDw8Kn5zydMvHcGOEQ==
+"@vanilla-extract/recipes@^0.5.1":
+ version "0.5.1"
+ resolved "https://registry.yarnpkg.com/@vanilla-extract/recipes/-/recipes-0.5.1.tgz#617d1a0375af60835341770397810317d2f61998"
+ integrity sha512-7dCuBgPQQ/89siQ0w2lkfjgkmToPUUDzFlHf5DRmt9ykiiycfA52tmPJ2RI/mr7jXi7U/vEN2aGP9QJSXEpGlA==
-"@vanilla-extract/vite-plugin@^3.8.2":
- version "3.8.2"
- resolved "https://registry.npmjs.org/@vanilla-extract/vite-plugin/-/vite-plugin-3.8.2.tgz"
- integrity sha512-i0vpuBUoh10Obl0hJr0dWQa6M3Udu/irm4tnsg1lUze8DXTbv3ctHmVu/wrRZHKw1EzzW/v+nLoJJRvisApspQ==
+"@vanilla-extract/vite-plugin@^3.9.2":
+ version "3.9.2"
+ resolved "https://registry.yarnpkg.com/@vanilla-extract/vite-plugin/-/vite-plugin-3.9.2.tgz#5f4a8e884b768d5c9332931b69479295285064c8"
+ integrity sha512-WYgWiEs+nw+lNazyW0Ixp0MMgtNgPL+8fFKrol1V5XoNIzRrYPGfuLhRI7PwheSWQVGF7OOer0kUWQcLey1vOQ==
dependencies:
- "@vanilla-extract/integration" "^6.0.2"
+ "@vanilla-extract/integration" "^6.2.4"
outdent "^0.8.0"
postcss "^8.3.6"
- postcss-load-config "^3.1.0"
+ postcss-load-config "^4.0.1"
"@vitejs/plugin-react@^3.0.1":
version "3.1.0"
@@ -11074,6 +11110,14 @@ eval@0.1.6:
dependencies:
require-like ">= 0.1.1"
+eval@0.1.8:
+ version "0.1.8"
+ resolved "https://registry.yarnpkg.com/eval/-/eval-0.1.8.tgz#2b903473b8cc1d1989b83a1e7923f883eb357f85"
+ integrity sha512-EzV94NYKoO09GLXGjXj9JIlXijVck4ONSr5wiCWDvhsvj5jxSrzTmRU/9C1DyB6uToszLs8aifA6NQ7lEQdvFw==
+ dependencies:
+ "@types/node" "*"
+ require-like ">= 0.1.1"
+
event-target-shim@^5.0.0:
version "5.0.1"
resolved "https://registry.npmjs.org/event-target-shim/-/event-target-shim-5.0.1.tgz"
@@ -15502,6 +15546,11 @@ mlly@^1.1.0, mlly@^1.2.0:
pkg-types "^1.0.3"
ufo "^1.1.2"
+modern-ahocorasick@^1.0.0:
+ version "1.0.1"
+ resolved "https://registry.yarnpkg.com/modern-ahocorasick/-/modern-ahocorasick-1.0.1.tgz#dec373444f51b5458ac05216a8ec376e126dd283"
+ integrity sha512-yoe+JbhTClckZ67b2itRtistFKf8yPYelHLc7e5xAwtNAXxM6wJTUx2C7QeVSJFDzKT7bCIFyBVybPMKvmB9AA==
+
modify-values@^1.0.0:
version "1.0.1"
resolved "https://registry.npmjs.org/modify-values/-/modify-values-1.0.1.tgz"
@@ -16906,14 +16955,6 @@ polished@^4.2.2:
dependencies:
"@babel/runtime" "^7.17.8"
-postcss-load-config@^3.1.0:
- version "3.1.4"
- resolved "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-3.1.4.tgz"
- integrity sha512-6DiM4E7v4coTE4uzA8U//WhtPwyhiim3eyjEMFCnUpzbrkK9wJHgKDT2mR+HbtSrd/NubVaYTOpSpjUl8NQeRg==
- dependencies:
- lilconfig "^2.0.5"
- yaml "^1.10.2"
-
postcss-load-config@^4.0.1:
version "4.0.1"
resolved "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-4.0.1.tgz"
@@ -20471,7 +20512,7 @@ yallist@^4.0.0:
resolved "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz"
integrity sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==
-yaml@^1.10.0, yaml@^1.10.2, yaml@^1.7.2:
+yaml@^1.10.0, yaml@^1.7.2:
version "1.10.2"
resolved "https://registry.npmjs.org/yaml/-/yaml-1.10.2.tgz"
integrity sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==