From 3807faca2c12500f82c40ee0f4a282f0c6dd8a3b Mon Sep 17 00:00:00 2001 From: kyranjamie Date: Mon, 18 Mar 2024 18:15:25 +0100 Subject: [PATCH] chore: tooltip in header --- .storybook/preview.ts | 1 - pnpm-lock.yaml | 247 ++++++++++-------- src/app/common/theme-provider.tsx | 4 +- .../account/account-list-item.layout.tsx | 2 +- .../brc20-token-asset-item.layout.tsx | 2 +- .../crypto-currency-asset-item.layout.tsx | 2 +- ...tacks-fungible-token-asset-item.layout.tsx | 2 +- .../transaction-item.layout.tsx | 2 +- src/app/features/approver/approver-demo.tsx | 35 ++- .../features/approver/approver.stories.tsx | 18 +- .../approver/components/approver-advanced.tsx | 4 +- .../approver/components/approver-header.tsx | 29 +- .../approver/components/approver-section.tsx | 1 - .../approver/components/approver-status.tsx | 18 ++ ...tacks-balance-list-item.layout.stories.tsx | 3 +- .../pages/receive/components/receive-item.tsx | 2 +- .../components/swap-asset-item.tsx | 2 +- .../item-layout/item-layout-with-buttons.tsx | 6 +- .../item-layout/item-layout.stories.tsx | 2 +- .../ui/components/item-layout/item-layout.tsx | 12 +- src/app/ui/components/tooltip/tooltip.tsx | 2 + src/app/ui/pressable/pressable.stories.tsx | 6 +- 22 files changed, 242 insertions(+), 160 deletions(-) create mode 100644 src/app/features/approver/components/approver-status.tsx diff --git a/.storybook/preview.ts b/.storybook/preview.ts index fe3b4426509..390dc8f4cc0 100644 --- a/.storybook/preview.ts +++ b/.storybook/preview.ts @@ -5,7 +5,6 @@ import { customViewports } from './viewports'; const preview: Preview = { parameters: { - actions: { argTypesRegex: '^on[A-Z].*' }, backgrounds: { default: 'leather-light-mode', values: [ diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 4ed7f02cbad..d748a800840 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -230,6 +230,9 @@ dependencies: formik: specifier: 2.4.5 version: 2.4.5(react@18.2.0) + framer-motion: + specifier: 11.0.8 + version: 11.0.8(react-dom@18.2.0)(react@18.2.0) jotai: specifier: 2.2.1 version: 2.2.1(react@18.2.0) @@ -312,8 +315,8 @@ dependencies: specifier: 8.1.3 version: 8.1.3(@types/react-dom@18.2.19)(@types/react@18.2.57)(react-dom@18.2.0)(react@18.2.0)(redux@4.2.1) react-router-dom: - specifier: 6.22.1 - version: 6.22.1(react-dom@18.2.0)(react@18.2.0) + specifier: 6.22.2 + version: 6.22.2(react-dom@18.2.0)(react@18.2.0) react-virtuoso: specifier: 4.7.1 version: 4.7.1(react-dom@18.2.0)(react@18.2.0) @@ -377,8 +380,8 @@ devDependencies: specifier: 3.0.0 version: 3.0.0(webpack@5.90.3) '@pandacss/dev': - specifier: 0.32.0 - version: 0.32.0(jsdom@22.1.0)(typescript@5.3.3) + specifier: 0.33.0 + version: 0.33.0(jsdom@22.1.0)(typescript@5.3.3) '@playwright/test': specifier: 1.40.1 version: 1.40.1 @@ -530,8 +533,8 @@ devDependencies: specifier: 4.23.0 version: 4.23.0 chromatic: - specifier: 10.9.6 - version: 10.9.6 + specifier: 11.0.0 + version: 11.0.0 chrome-webstore-upload-cli: specifier: 2.2.2 version: 2.2.2 @@ -599,8 +602,8 @@ devDependencies: specifier: 8.4.35 version: 8.4.35 postcss-loader: - specifier: 8.1.0 - version: 8.1.0(postcss@8.4.35)(typescript@5.3.3)(webpack@5.90.3) + specifier: 8.1.1 + version: 8.1.1(postcss@8.4.35)(typescript@5.3.3)(webpack@5.90.3) prettier: specifier: 3.2.5 version: 3.2.5 @@ -2395,17 +2398,6 @@ packages: '@csstools/css-tokenizer': 2.2.3 dev: false - /@csstools/postcss-cascade-layers@4.0.2(postcss@8.4.35): - resolution: {integrity: sha512-PqM+jvg5T2tB4FHX+akrMGNWAygLupD4FNUjcv4PSvtVuWZ6ISxuo37m4jFGU7Jg3rCfloGzKd0+xfr5Ec3vZQ==} - engines: {node: ^14 || ^16 || >=18} - peerDependencies: - postcss: ^8.4 - dependencies: - '@csstools/selector-specificity': 3.0.2(postcss-selector-parser@6.0.15) - postcss: 8.4.35 - postcss-selector-parser: 6.0.15 - dev: true - /@csstools/postcss-cascade-layers@4.0.3(postcss@8.4.35): resolution: {integrity: sha512-RbkQoOH23yGhWVetgBTwFgIOHEyU2tKMN7blTz/YAKKabR6tr9pP7mYS23Q9snFY2hr8WSaV8Le64KdM9BtUSA==} engines: {node: ^14 || ^16 || >=18} @@ -2415,7 +2407,6 @@ packages: '@csstools/selector-specificity': 3.0.2(postcss-selector-parser@6.0.15) postcss: 8.4.35 postcss-selector-parser: 6.0.15 - dev: false /@csstools/postcss-color-function@3.0.10(postcss@8.4.35): resolution: {integrity: sha512-jxiXmSl4ZYX8KewFjL5ef6of9uW73VkaHeDb2tqb5q4ZDPYxjusNX1KJ8UXY8+7ydqS5QBo42tVMrSMGy+rDmw==} @@ -2892,12 +2883,26 @@ packages: resolution: {integrity: sha512-gJB6HLm5rYwSLI6PQa+X1t5CFGrv1J1TWG+sOyMCeKz2ojaj6Fnl/rZEspogG+cvqbt4AE/2eIyD2QfLKTBNlQ==} dev: true + /@emotion/is-prop-valid@0.8.8: + resolution: {integrity: sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==} + requiresBuild: true + dependencies: + '@emotion/memoize': 0.7.4 + dev: false + optional: true + /@emotion/is-prop-valid@1.2.1: resolution: {integrity: sha512-61Mf7Ufx4aDxx1xlDeOm8aFFigGHE4z+0sKCa+IHCeZKiyP9RLD0Mmx7m8b9/Cf37f7NAvQOOJAbQQGVr5uERw==} dependencies: '@emotion/memoize': 0.8.1 dev: true + /@emotion/memoize@0.7.4: + resolution: {integrity: sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==} + requiresBuild: true + dev: false + optional: true + /@emotion/memoize@0.8.1: resolution: {integrity: sha512-W2P2c/VRW1/1tLox0mVUalvnWXxavmv/Oum2aPsRcoDJuob75FC3Y8FbpfLwUegRcxINtGUMPq0tFCvYNTBXNA==} dev: true @@ -3845,14 +3850,14 @@ packages: '@octokit/openapi-types': 19.1.0 dev: false - /@pandacss/config@0.32.0: - resolution: {integrity: sha512-clf6DrtBvIEyztvdgAQc8Hq6RpdAwY5MTsune0Ka1iX4B5DjLyL38dIdV2DPCWSZkGx+oBHTgG9bmeGn7MYDpg==} + /@pandacss/config@0.33.0: + resolution: {integrity: sha512-ztSmI/Y0AQuRH0CfuwG3T6C1wdVcC/uxv+ODh56r9EE7w/F3ncp1TAXiAiVFqSK5f9eyr1vwt6L0cfdS+uO8Dg==} dependencies: - '@pandacss/logger': 0.32.0 - '@pandacss/preset-base': 0.32.0 - '@pandacss/preset-panda': 0.32.0 - '@pandacss/shared': 0.32.0 - '@pandacss/types': 0.32.0 + '@pandacss/logger': 0.33.0 + '@pandacss/preset-base': 0.33.0 + '@pandacss/preset-panda': 0.33.0 + '@pandacss/shared': 0.33.0 + '@pandacss/types': 0.33.0 bundle-n-require: 1.1.1 escalade: 3.1.2 merge-anything: 5.1.7 @@ -3860,15 +3865,15 @@ packages: typescript: 5.3.3 dev: true - /@pandacss/core@0.32.0: - resolution: {integrity: sha512-o6eptw6Wf5df424N5Mmv8yqv/ySb/5+4M76gQUgDp/MrKUhMHnz7JAmREL94XZzVZI8T4RDu+XPMdZWzCjz0Ow==} + /@pandacss/core@0.33.0: + resolution: {integrity: sha512-8XvAWsGovRGMNIotpIlEp3VwOhvc6n65FV+a6VdaidruPl1yLXRqXCcO0cJWEeohy3VWPc6/bAgeW3m2nzSkPg==} dependencies: - '@csstools/postcss-cascade-layers': 4.0.2(postcss@8.4.35) - '@pandacss/is-valid-prop': 0.32.0 - '@pandacss/logger': 0.32.0 - '@pandacss/shared': 0.32.0 - '@pandacss/token-dictionary': 0.32.0 - '@pandacss/types': 0.32.0 + '@csstools/postcss-cascade-layers': 4.0.3(postcss@8.4.35) + '@pandacss/is-valid-prop': 0.33.0 + '@pandacss/logger': 0.33.0 + '@pandacss/shared': 0.33.0 + '@pandacss/token-dictionary': 0.33.0 + '@pandacss/types': 0.33.0 autoprefixer: 10.4.17(postcss@8.4.35) browserslist: 4.23.0 hookable: 5.5.3 @@ -3886,29 +3891,29 @@ packages: ts-pattern: 5.0.8 dev: true - /@pandacss/dev@0.32.0(jsdom@22.1.0)(typescript@5.3.3): - resolution: {integrity: sha512-v2F3l7GcE4ufF1dEZeamrBIZ2OX/6Pywj8+HxBiDTxMHkG5vEyO7I9P5aI3kiHb4YlDYtunlVhmX1JyX+8b4jg==} + /@pandacss/dev@0.33.0(jsdom@22.1.0)(typescript@5.3.3): + resolution: {integrity: sha512-TBohWjDFHLzfGo/DwPDkoM2fG7bgTqKGaau1MqpnGL02AJDi+qnMU7+LAJNw2FdAzEHZR4652mtUmidZwWCmIg==} hasBin: true dependencies: '@clack/prompts': 0.7.0 - '@pandacss/config': 0.32.0 - '@pandacss/logger': 0.32.0 - '@pandacss/node': 0.32.0(jsdom@22.1.0)(typescript@5.3.3) - '@pandacss/postcss': 0.32.0(jsdom@22.1.0)(typescript@5.3.3) - '@pandacss/preset-panda': 0.32.0 - '@pandacss/shared': 0.32.0 - '@pandacss/token-dictionary': 0.32.0 - '@pandacss/types': 0.32.0 + '@pandacss/config': 0.33.0 + '@pandacss/logger': 0.33.0 + '@pandacss/node': 0.33.0(jsdom@22.1.0)(typescript@5.3.3) + '@pandacss/postcss': 0.33.0(jsdom@22.1.0)(typescript@5.3.3) + '@pandacss/preset-panda': 0.33.0 + '@pandacss/shared': 0.33.0 + '@pandacss/token-dictionary': 0.33.0 + '@pandacss/types': 0.33.0 cac: 6.7.14 transitivePeerDependencies: - jsdom - typescript dev: true - /@pandacss/extractor@0.32.0(jsdom@22.1.0)(typescript@5.3.3): - resolution: {integrity: sha512-aKyIVk4JPlMptGfs73JtF6w0EJeZMVzz3MbU/glvcoSNhNDpnV6t0fswq0IWMVV/gmnxinSDvQ7wJwjHeRpOzg==} + /@pandacss/extractor@0.33.0(jsdom@22.1.0)(typescript@5.3.3): + resolution: {integrity: sha512-nvu5YA/U622E6yT1n+Nh54L9IguPjIeNLN12QQEuL2XWgJlxbyZlKn8uPawKG8U5QokEQT6qG/hagWYuJ/NtnQ==} dependencies: - '@pandacss/shared': 0.32.0 + '@pandacss/shared': 0.33.0 ts-evaluator: 1.2.0(jsdom@22.1.0)(typescript@5.3.3) ts-morph: 21.0.1 transitivePeerDependencies: @@ -3916,15 +3921,15 @@ packages: - typescript dev: true - /@pandacss/generator@0.32.0: - resolution: {integrity: sha512-DxMnoXhsmk3xwJ0GTI8WioN9Bf+U93I0bAluSpV7HLeLBqTRpbFfsLhM0Fzsfk/h5urrnFFQMS+4cX/KUP8iZA==} + /@pandacss/generator@0.33.0: + resolution: {integrity: sha512-Uta5rUd4w2pMmTgn3zNb5ApjBaCGnt9NtwiI7O2pZup0wJb8nEbtVSrZRGcZrMSkvwAy67+9PE4Ei9iTLr2b8w==} dependencies: - '@pandacss/core': 0.32.0 - '@pandacss/is-valid-prop': 0.32.0 - '@pandacss/logger': 0.32.0 - '@pandacss/shared': 0.32.0 - '@pandacss/token-dictionary': 0.32.0 - '@pandacss/types': 0.32.0 + '@pandacss/core': 0.33.0 + '@pandacss/is-valid-prop': 0.33.0 + '@pandacss/logger': 0.33.0 + '@pandacss/shared': 0.33.0 + '@pandacss/token-dictionary': 0.33.0 + '@pandacss/types': 0.33.0 javascript-stringify: 2.1.0 outdent: 0.8.0 pluralize: 8.0.0 @@ -3932,29 +3937,29 @@ packages: ts-pattern: 5.0.8 dev: true - /@pandacss/is-valid-prop@0.32.0: - resolution: {integrity: sha512-IFI8S++hjP6Q2bIBamJV8BS1X+y5RPoTGu5VIkUPitF4zuesR5orfPIYFyixo4CweLCZce2rFng3yim/Cam9jA==} + /@pandacss/is-valid-prop@0.33.0: + resolution: {integrity: sha512-P7lvmlH3idILBIBM651dVDecSlRLNpAuxIJltypw5tX5IdRfigouu2h+5n2vQRYThm3fgKp4boH6PA2gXt+kkA==} dev: true - /@pandacss/logger@0.32.0: - resolution: {integrity: sha512-8TaHKkqBPqB8+bpeEPghHtPRyhHVLIoSTl4dziEUQIgf4s6HXYLIfeXKtw2d7zfNnTIoS+Oc0ZJp5KzEn5p7JQ==} + /@pandacss/logger@0.33.0: + resolution: {integrity: sha512-UfZ6Aza579qT3LbX/I2AkphuVxgXEd/lZfQrmEZJ4n1WOIW0E47k10e4q0SVU988pwhMLInnJDskvurSOrirbw==} dependencies: - '@pandacss/types': 0.32.0 + '@pandacss/types': 0.33.0 kleur: 4.1.5 dev: true - /@pandacss/node@0.32.0(jsdom@22.1.0)(typescript@5.3.3): - resolution: {integrity: sha512-GpfXZBn54jVHNyJp/K67bhrjjmQdXlSq8K1ExBMwZjsMJkMMCWoYi3L+9nLC0Jxxr2T/7MGpYISwPefOK6Y7GA==} + /@pandacss/node@0.33.0(jsdom@22.1.0)(typescript@5.3.3): + resolution: {integrity: sha512-q0xXE0xEdkfpvGHCWk6188pbUcnwQLt4HoFsEPv0DkMUxqlQCCnyparNsydducBExzYS2dwujMyXFZ2TIxqa2Q==} dependencies: - '@pandacss/config': 0.32.0 - '@pandacss/core': 0.32.0 - '@pandacss/extractor': 0.32.0(jsdom@22.1.0)(typescript@5.3.3) - '@pandacss/generator': 0.32.0 - '@pandacss/logger': 0.32.0 - '@pandacss/parser': 0.32.0(jsdom@22.1.0)(typescript@5.3.3) - '@pandacss/shared': 0.32.0 - '@pandacss/token-dictionary': 0.32.0 - '@pandacss/types': 0.32.0 + '@pandacss/config': 0.33.0 + '@pandacss/core': 0.33.0 + '@pandacss/extractor': 0.33.0(jsdom@22.1.0)(typescript@5.3.3) + '@pandacss/generator': 0.33.0 + '@pandacss/logger': 0.33.0 + '@pandacss/parser': 0.33.0(jsdom@22.1.0)(typescript@5.3.3) + '@pandacss/shared': 0.33.0 + '@pandacss/token-dictionary': 0.33.0 + '@pandacss/types': 0.33.0 browserslist: 4.23.0 chokidar: 3.6.0 fast-glob: 3.3.2 @@ -3971,7 +3976,7 @@ packages: pluralize: 8.0.0 postcss: 8.4.35 preferred-pm: 3.1.2 - prettier: 2.8.8 + prettier: 3.2.5 ts-morph: 21.0.1 ts-pattern: 5.0.8 tsconfck: 3.0.2(typescript@5.3.3) @@ -3980,15 +3985,15 @@ packages: - typescript dev: true - /@pandacss/parser@0.32.0(jsdom@22.1.0)(typescript@5.3.3): - resolution: {integrity: sha512-PDjdhqzAh8Ax4q9/+KUUSDk7mVlQMP0QEWxx/l9t8bCZwi/GLXxeMytDXNqwBFQsHkhbGIL0To5P5143o+dF2Q==} + /@pandacss/parser@0.33.0(jsdom@22.1.0)(typescript@5.3.3): + resolution: {integrity: sha512-AxKQQFLd9ShOTeMG3Vceok6p1VxWRZqNNcGy7uAWUlZBzPeoLZ/DhCG8eXh4DZ/lPyMCsBh7/JSmUj95yXdbOA==} dependencies: - '@pandacss/config': 0.32.0 - '@pandacss/core': 0.32.0 - '@pandacss/extractor': 0.32.0(jsdom@22.1.0)(typescript@5.3.3) - '@pandacss/logger': 0.32.0 - '@pandacss/shared': 0.32.0 - '@pandacss/types': 0.32.0 + '@pandacss/config': 0.33.0 + '@pandacss/core': 0.33.0 + '@pandacss/extractor': 0.33.0(jsdom@22.1.0)(typescript@5.3.3) + '@pandacss/logger': 0.33.0 + '@pandacss/shared': 0.33.0 + '@pandacss/types': 0.33.0 '@vue/compiler-sfc': 3.4.19 magic-string: 0.30.7 ts-morph: 21.0.1 @@ -3998,43 +4003,43 @@ packages: - typescript dev: true - /@pandacss/postcss@0.32.0(jsdom@22.1.0)(typescript@5.3.3): - resolution: {integrity: sha512-bre7iPV8U6gai25gqzW+OQjHoPTcibNTeGWc+Zp4mAAQhYFJWeiHqOLfU+9Hx0wIY6pAkj5V+zBNLECXb3SfBA==} + /@pandacss/postcss@0.33.0(jsdom@22.1.0)(typescript@5.3.3): + resolution: {integrity: sha512-3uXELMnkNUNwTbzZrc+yNZEigSHmpMTu01wsXb4QaDtePj3cyusi0ocViK9/NYeYc7DXrwFaedGZ3j74NZKU6A==} dependencies: - '@pandacss/node': 0.32.0(jsdom@22.1.0)(typescript@5.3.3) + '@pandacss/node': 0.33.0(jsdom@22.1.0)(typescript@5.3.3) postcss: 8.4.35 transitivePeerDependencies: - jsdom - typescript dev: true - /@pandacss/preset-base@0.32.0: - resolution: {integrity: sha512-yDFcPYwTRWGwcR5ka++mG9bShulr1KjtGpeJBZXrOGvgjUM0WlMRhcq44/o4qtJe375OcDXEZqCYrY32NTkGWA==} + /@pandacss/preset-base@0.33.0: + resolution: {integrity: sha512-k57gdZ/Wj1D3hVZOSpjG5ye+G6pMIn8C0cDTgOIVrzO+uJRRhManecBd92ErNnb7iBTnlvfyyKCPBXk0r74N+g==} dependencies: - '@pandacss/types': 0.32.0 + '@pandacss/types': 0.33.0 dev: true - /@pandacss/preset-panda@0.32.0: - resolution: {integrity: sha512-gVhjnmRJ/EcIEUeHNJocFCWKKgA/wUam39Nwd57KR3AO3iDUgWp3w9t/tv/rTXGVgZzJyLEnR2thBz9keZz7sA==} + /@pandacss/preset-panda@0.33.0: + resolution: {integrity: sha512-ezu74WZnvmQBHmIgMgty+zYryeTlPVmQkkBwPP3ywCv4eBTGOObKbIL8CzB1xc7NOHBIudxEEGToaAQYMAWbbA==} dependencies: - '@pandacss/types': 0.32.0 + '@pandacss/types': 0.33.0 dev: true - /@pandacss/shared@0.32.0: - resolution: {integrity: sha512-mdMEp8gkCyCKyCq4NRkmSHIddReN3a+Su0/5tV6U8Lqh80yU92nQYlot9xVk8HQV4VsqG/StBImGNn0TPb5Irg==} + /@pandacss/shared@0.33.0: + resolution: {integrity: sha512-OMOOyAp3UAemySerbfx0hZKwnmIEiWg3ao9ugxyFnWZ4lUpqfEkVg7JICV0RoExnDmRA8gUAT8xxWMiJ2OPzbg==} dev: true - /@pandacss/token-dictionary@0.32.0: - resolution: {integrity: sha512-44iw5fmStdkj5lDLzwSMLmcQyD5JZOVub+28f5TGGxduS/7f5Ds3Z3NGgdCnmNS/j2OajOeBFqJoIZISzlHxLQ==} + /@pandacss/token-dictionary@0.33.0: + resolution: {integrity: sha512-rfVFak3bx2IWEcMXKM+THFy5HxW6ZnPLYLB9VnynYFfsvkehfVc7C7pOyfI/V8yvV9G54Cozd1NkFrbsH0Nogw==} dependencies: - '@pandacss/logger': 0.32.0 - '@pandacss/shared': 0.32.0 - '@pandacss/types': 0.32.0 + '@pandacss/logger': 0.33.0 + '@pandacss/shared': 0.33.0 + '@pandacss/types': 0.33.0 ts-pattern: 5.0.8 dev: true - /@pandacss/types@0.32.0: - resolution: {integrity: sha512-jzEQrp/UYco2bIlU30DglBKJ7Ytnduy7JCrVVgb3pcNJy0LhVOLfMLb9m9605PcG2dPRZ0RU2a1DpqZgYSpayw==} + /@pandacss/types@0.33.0: + resolution: {integrity: sha512-44tlDreSHaDW5medtCCiecgzihzm27mq3YabtHtDiJRUuyIl4+NmzlZZzETWziRmZjtw1jH1oMoGTOKM6+j/Hw==} dev: true /@pkgjs/parseargs@0.11.0: @@ -5709,8 +5714,8 @@ packages: reselect: 4.1.8 dev: true - /@remix-run/router@1.15.1: - resolution: {integrity: sha512-zcU0gM3z+3iqj8UX45AmWY810l3oUmXM7uH4dt5xtzvMhRtYVhKGOmgOd1877dOPPepfCjUv57w+syamWIYe7w==} + /@remix-run/router@1.15.2: + resolution: {integrity: sha512-+Rnav+CaoTE5QJc4Jcwh5toUpnVLKYbpU6Ys0zqbakqbaLQHeglLVHPfxOiQqdNmUy5C2lXz5dwC6tQNX2JW2Q==} engines: {node: '>=14.0.0'} dev: false @@ -11617,8 +11622,8 @@ packages: resolution: {integrity: sha512-U9eDw6+wt7V8z5NncY2jJfZa+hUH8XEj8FQHgFJTrUFnJfXYf4Ml4adI2vXZOjqRDpFWtYVWypDfZwnJ+HIR4A==} dev: false - /chromatic@10.9.6: - resolution: {integrity: sha512-1MoT+/U+vQwEiq2GuehPyStbqhxqHmM1B9pdpVU1dKh26userQg1FyOFYifkTgy+9reo2w2p7sAbc0JRd2kzlA==} + /chromatic@11.0.0: + resolution: {integrity: sha512-utzRVqdMrpzYwZNf7dHWU0z0/rx6SH/FUVNozQxYHDtQfYUdEj+Ro4OSch5+Wsk2FoUmznJyLkaC2J839z1N7A==} hasBin: true peerDependencies: '@chromatic-com/cypress': ^0.5.2 || ^1.0.0 @@ -14613,6 +14618,24 @@ packages: /fraction.js@4.3.7: resolution: {integrity: sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==} + /framer-motion@11.0.8(react-dom@18.2.0)(react@18.2.0): + resolution: {integrity: sha512-1KSGNuqe1qZkS/SWQlDnqK2VCVzRVEoval379j0FiUBJAZoqgwyvqFkfvJbgW2IPFo4wX16K+M0k5jO23lCIjA==} + peerDependencies: + react: ^18.0.0 + react-dom: ^18.0.0 + peerDependenciesMeta: + react: + optional: true + react-dom: + optional: true + dependencies: + react: 18.2.0 + react-dom: 18.2.0(react@18.2.0) + tslib: 2.6.2 + optionalDependencies: + '@emotion/is-prop-valid': 0.8.8 + dev: false + /fresh@0.5.2: resolution: {integrity: sha512-zJ2mQYM18rEFOudeV4GShTGIQ7RbzA7ozbU9I/XBpm7kqgMywgmylMwXHxZJmkVoYkna9d2pVXVXPdYTP9ej8Q==} engines: {node: '>= 0.6'} @@ -19453,8 +19476,8 @@ packages: postcss: 8.4.35 dev: false - /postcss-loader@8.1.0(postcss@8.4.35)(typescript@5.3.3)(webpack@5.90.3): - resolution: {integrity: sha512-AbperNcX3rlob7Ay7A/HQcrofug1caABBkopoFeOQMspZBqcqj6giYn1Bwey/0uiOPAcR+NQD0I2HC7rXzk91w==} + /postcss-loader@8.1.1(postcss@8.4.35)(typescript@5.3.3)(webpack@5.90.3): + resolution: {integrity: sha512-0IeqyAsG6tYiDRCYKQJLAmgQr47DX6N7sFSWvQxt6AcupX8DIdmykuk/o/tx0Lze3ErGHJEp5OSRxrelC6+NdQ==} engines: {node: '>= 18.12.0'} peerDependencies: '@rspack/core': 0.x || 1.x @@ -20397,26 +20420,26 @@ packages: use-sidecar: 1.1.2(@types/react@18.2.57)(react@18.2.0) dev: false - /react-router-dom@6.22.1(react-dom@18.2.0)(react@18.2.0): - resolution: {integrity: sha512-iwMyyyrbL7zkKY7MRjOVRy+TMnS/OPusaFVxM2P11x9dzSzGmLsebkCvYirGq0DWB9K9hOspHYYtDz33gE5Duw==} + /react-router-dom@6.22.2(react-dom@18.2.0)(react@18.2.0): + resolution: {integrity: sha512-WgqxD2qySEIBPZ3w0sHH+PUAiamDeszls9tzqMPBDA1YYVucTBXLU7+gtRfcSnhe92A3glPnvSxK2dhNoAVOIQ==} engines: {node: '>=14.0.0'} peerDependencies: react: '>=16.8' react-dom: '>=16.8' dependencies: - '@remix-run/router': 1.15.1 + '@remix-run/router': 1.15.2 react: 18.2.0 react-dom: 18.2.0(react@18.2.0) - react-router: 6.22.1(react@18.2.0) + react-router: 6.22.2(react@18.2.0) dev: false - /react-router@6.22.1(react@18.2.0): - resolution: {integrity: sha512-0pdoRGwLtemnJqn1K0XHUbnKiX0S4X8CgvVVmHGOWmofESj31msHo/1YiqcJWK7Wxfq2a4uvvtS01KAQyWK/CQ==} + /react-router@6.22.2(react@18.2.0): + resolution: {integrity: sha512-YD3Dzprzpcq+tBMHBS822tCjnWD3iIZbTeSXMY9LPSG541EfoBGyZ3bS25KEnaZjLcmQpw2AVLkFyfgXY8uvcw==} engines: {node: '>=14.0.0'} peerDependencies: react: '>=16.8' dependencies: - '@remix-run/router': 1.15.1 + '@remix-run/router': 1.15.2 react: 18.2.0 dev: false diff --git a/src/app/common/theme-provider.tsx b/src/app/common/theme-provider.tsx index 1dbf55467f2..4710e440466 100644 --- a/src/app/common/theme-provider.tsx +++ b/src/app/common/theme-provider.tsx @@ -1,6 +1,5 @@ import { createContext, useContext, useEffect, useState } from 'react'; -import * as RadixTooltip from '@radix-ui/react-tooltip'; import { Theme as RadixTheme } from '@radix-ui/themes'; import { noop } from '@shared/utils'; @@ -8,6 +7,7 @@ import { noop } from '@shared/utils'; import { store } from '@app/store'; import { settingsActions } from '@app/store/settings/settings.actions'; import { useUserSelectedTheme } from '@app/store/settings/settings.selectors'; +import { TooltipProvider } from '@app/ui/components/tooltip/tooltip'; import { useOnMount } from './hooks/use-on-mount'; @@ -93,7 +93,7 @@ export function ThemeSwitcherProvider({ children }: ThemeSwitcherProviderProps) return ( - {children} + {children} ); diff --git a/src/app/components/account/account-list-item.layout.tsx b/src/app/components/account/account-list-item.layout.tsx index 0b0f014af0e..42dfc80fde0 100644 --- a/src/app/components/account/account-list-item.layout.tsx +++ b/src/app/components/account/account-list-item.layout.tsx @@ -36,7 +36,7 @@ export function AccountListItemLayout(props: AccountListItemLayoutProps) { > } + img={} titleLeft={token.ticker} captionLeft="BRC-20" titleRight={ diff --git a/src/app/components/crypto-assets/crypto-currency-asset/crypto-currency-asset-item.layout.tsx b/src/app/components/crypto-assets/crypto-currency-asset/crypto-currency-asset-item.layout.tsx index b4bc1b9b04d..5c3466fc19a 100644 --- a/src/app/components/crypto-assets/crypto-currency-asset/crypto-currency-asset-item.layout.tsx +++ b/src/app/components/crypto-assets/crypto-currency-asset/crypto-currency-asset-item.layout.tsx @@ -39,7 +39,7 @@ export function CryptoCurrencyAssetItemLayout({ const content = ( diff --git a/src/app/features/approver/approver-demo.tsx b/src/app/features/approver/approver-demo.tsx index 80f9e6124cc..b63f8e4f2c1 100644 --- a/src/app/features/approver/approver-demo.tsx +++ b/src/app/features/approver/approver-demo.tsx @@ -3,8 +3,11 @@ import { Box, Circle, styled } from 'leather-styles/jsx'; import { Button } from '@app/ui/components/button/button'; import { Callout } from '@app/ui/components/callout/callout'; import { Flag } from '@app/ui/components/flag/flag'; -import { ItemInteractive } from '@app/ui/components/item/item-interactive'; -import { ItemLayout } from '@app/ui/components/item/item.layout'; +import { ItemLayout } from '@app/ui/components/item-layout/item-layout'; +import { BasicTooltip } from '@app/ui/components/tooltip/basic-tooltip'; +import { TooltipProvider } from '@app/ui/components/tooltip/tooltip'; +import { InfoCircleIcon } from '@app/ui/icons'; +import { Pressable } from '@app/ui/pressable/pressable'; import { Approver } from './approver'; @@ -12,11 +15,25 @@ export function ApproverDemo() { return ( - + + + + + + } + /> Hey watch out for this sketchy app Demo section 1 - } align="top"> + } + align="top" + mb="space.03" + > @@ -28,21 +45,23 @@ export function ApproverDemo() { titleRight="Example" captionLeft="Example" captionRight="Example" - flagImg={} + img={} + mb="space.03" /> Section 3 - {}} mt="space.03"> + {}} mt="space.03"> } + img={} titleLeft="Example" titleRight="Example" + mb="space.03" /> - + Demo section 1 diff --git a/src/app/features/approver/approver.stories.tsx b/src/app/features/approver/approver.stories.tsx index c0c581e1b55..30a784932d2 100644 --- a/src/app/features/approver/approver.stories.tsx +++ b/src/app/features/approver/approver.stories.tsx @@ -4,9 +4,9 @@ import { Box, Circle, Flex } from 'leather-styles/jsx'; import { Button } from '@app/ui/components/button/button'; import { Callout } from '@app/ui/components/callout/callout'; import { Flag } from '@app/ui/components/flag/flag'; -import { ItemInteractive } from '@app/ui/components/item/item-interactive'; -import { ItemLayout } from '@app/ui/components/item/item.layout'; +import { ItemLayout } from '@app/ui/components/item-layout/item-layout'; import { ZapIcon } from '@app/ui/icons'; +import { Pressable } from '@app/ui/pressable/pressable'; import { Approver } from './approver'; @@ -36,15 +36,15 @@ export const ExampleOne: Story = { Subheader with icon - + } + img={} titleLeft={} titleRight={} captionLeft={} captionRight={} /> - + Subheader 2 } @@ -62,21 +62,21 @@ export const ExampleOne: Story = { titleRight="100 MICA" captionLeft="SIP-10" captionRight="$894,891" - flagImg={} + img={} /> In the advanced section - {}} mt="space.03" mb="space.03"> + {}} mt="space.03" mb="space.03"> } + img={} /> - + Inputs & Outputs diff --git a/src/app/features/approver/components/approver-advanced.tsx b/src/app/features/approver/components/approver-advanced.tsx index e7ac423355c..760fb1bd983 100644 --- a/src/app/features/approver/components/approver-advanced.tsx +++ b/src/app/features/approver/components/approver-advanced.tsx @@ -3,8 +3,10 @@ import { useRef } from 'react'; import { AnimatePresence, motion } from 'framer-motion'; import { Flex } from 'leather-styles/jsx'; +import { createDelay } from '@shared/utils'; + import type { HasChildren } from '@app/common/has-children'; -import { createDelay, getScrollParent } from '@app/common/utils'; +import { getScrollParent } from '@app/common/utils'; import { Button } from '@app/ui/components/button/button'; import { Flag } from '@app/ui/components/flag/flag'; import { ChevronDownIcon } from '@app/ui/icons'; diff --git a/src/app/features/approver/components/approver-header.tsx b/src/app/features/approver/components/approver-header.tsx index dd9f8e13028..4ed20c14134 100644 --- a/src/app/features/approver/components/approver-header.tsx +++ b/src/app/features/approver/components/approver-header.tsx @@ -1,6 +1,11 @@ import type { ReactNode } from 'react'; -import { styled } from 'leather-styles/jsx'; +import { Box, styled } from 'leather-styles/jsx'; + +import { isString } from '@shared/utils'; + +import { Favicon } from '@app/components/favicon'; +import { Flag } from '@app/ui/components/flag/flag'; import { ApproverHeaderAnimation } from '../approver-animation'; import { useRegisterApproverChild } from '../approver.context'; @@ -8,19 +13,31 @@ import { useRegisterApproverChild } from '../approver.context'; interface ApproverHeaderProps { title: ReactNode; requester: ReactNode; + iconTooltip?: ReactNode; } -export function ApproverHeader({ title, requester }: ApproverHeaderProps) { +export function ApproverHeader({ title, requester, iconTooltip }: ApproverHeaderProps) { useRegisterApproverChild('header'); return ( - + - {title} + + {title} + - + : requester} + > Requested by {requester} - + + {iconTooltip && ( + + {iconTooltip} + + )} ); } diff --git a/src/app/features/approver/components/approver-section.tsx b/src/app/features/approver/components/approver-section.tsx index 552d29a07dd..d6268179980 100644 --- a/src/app/features/approver/components/approver-section.tsx +++ b/src/app/features/approver/components/approver-section.tsx @@ -10,7 +10,6 @@ export function ApproverSection(props: HasChildren) { + + {status} + {dayjs(new Date()).format()} + + + ); +} diff --git a/src/app/features/asset-list/components/stacks-balance-list-item.layout.stories.tsx b/src/app/features/asset-list/components/stacks-balance-list-item.layout.stories.tsx index 32e8341b0b4..31598ec828f 100644 --- a/src/app/features/asset-list/components/stacks-balance-list-item.layout.stories.tsx +++ b/src/app/features/asset-list/components/stacks-balance-list-item.layout.stories.tsx @@ -1,7 +1,8 @@ -import { TooltipProvider } from '@radix-ui/react-tooltip'; import { Meta, StoryObj } from '@storybook/react'; import BigNumber from 'bignumber.js'; +import { TooltipProvider } from '@app/ui/components/tooltip/tooltip'; + import { StacksBalanceListItemLayout } from './stacks-balance-list-item.layout'; const meta: Meta = { diff --git a/src/app/pages/receive/components/receive-item.tsx b/src/app/pages/receive/components/receive-item.tsx index f4813db8ec3..0c93714bf2f 100644 --- a/src/app/pages/receive/components/receive-item.tsx +++ b/src/app/pages/receive/components/receive-item.tsx @@ -25,7 +25,7 @@ export function ReceiveItem({ return ( {fallback} diff --git a/src/app/ui/components/item-layout/item-layout-with-buttons.tsx b/src/app/ui/components/item-layout/item-layout-with-buttons.tsx index dd610fbf398..41154bf7d9d 100644 --- a/src/app/ui/components/item-layout/item-layout-with-buttons.tsx +++ b/src/app/ui/components/item-layout/item-layout-with-buttons.tsx @@ -9,17 +9,17 @@ import { Flag } from '../flag/flag'; interface ItemWithButtonsLayoutProps { buttons: ReactNode; caption: string; - flagImg: ReactNode; + img: ReactNode; title: string; } export function ItemLayoutWithButtons({ buttons, caption, - flagImg, + img, title, }: ItemWithButtonsLayoutProps) { return ( - + ; export const Item: Story = { render: () => ( } + img={} titleLeft={} captionLeft={} titleRight={} diff --git a/src/app/ui/components/item-layout/item-layout.tsx b/src/app/ui/components/item-layout/item-layout.tsx index adab2139c25..348eee1a99c 100644 --- a/src/app/ui/components/item-layout/item-layout.tsx +++ b/src/app/ui/components/item-layout/item-layout.tsx @@ -5,12 +5,12 @@ import { Flex, HStack, Stack, styled } from 'leather-styles/jsx'; import { pressableCaptionStyles, pressableChevronStyles } from '@app/ui/pressable/pressable'; import { ChevronUpIcon } from '../../icons/chevron-up-icon'; -import { Flag } from '../flag/flag'; +import { Flag, type FlagProps } from '../flag/flag'; -interface ItemLayoutProps { +interface ItemLayoutProps extends Omit { captionLeft: ReactNode; captionRight?: ReactNode; - flagImg: ReactNode; + img: ReactNode; isDisabled?: boolean; isSelected?: boolean; showChevron?: boolean; @@ -20,13 +20,15 @@ interface ItemLayoutProps { export function ItemLayout({ captionLeft, captionRight, - flagImg, + img, + isSelected, showChevron, titleLeft, titleRight, + ...props }: ItemLayoutProps) { return ( - + ; } diff --git a/src/app/ui/pressable/pressable.stories.tsx b/src/app/ui/pressable/pressable.stories.tsx index c9381210117..2771422bb84 100644 --- a/src/app/ui/pressable/pressable.stories.tsx +++ b/src/app/ui/pressable/pressable.stories.tsx @@ -26,7 +26,7 @@ function ExampleInteractiveItemContent() { return ( } + img={} titleLeft="Label" captionLeft="Caption" titleRight="1,000.00 ABC" @@ -57,7 +57,7 @@ export const Disabled: Story = { children: ( } + img={} titleLeft="Label" captionLeft="Caption" titleRight="1,000.00 ABC" @@ -71,7 +71,7 @@ export const WithButtons: Story = { args: { children: ( } + img={} title="Label" caption="Caption" buttons={