From 8c21b287a6731e9e6c5fb81d79ad7c9e7c5e8f16 Mon Sep 17 00:00:00 2001 From: Kelbie Date: Tue, 15 Jul 2025 15:52:33 +0100 Subject: [PATCH 1/2] fix background image circular dependency --- helper/colors.tsx | 43 ++++++++++++++++++++++++------------------- 1 file changed, 24 insertions(+), 19 deletions(-) diff --git a/helper/colors.tsx b/helper/colors.tsx index 6536d302..665a33fe 100644 --- a/helper/colors.tsx +++ b/helper/colors.tsx @@ -79,10 +79,26 @@ export const blues: Shades = { export type GreyKey = 0 | 50 | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | 950; export type Greys = Record; +export const DARK_GREYS: Greys = { + 0: '#FFFFFF', + 50: '#E8EAED', + 100: '#C7C7C7', + 200: '#A8A8A8', + 300: '#787878', + 400: '#525252', + 500: '#2C2C2C', + 600: '#202020', + 700: '#1C1C1C', + 800: '#181818', + 900: '#121212', + 950: '#080808', +}; + export const greys = (t: string | Theme): Greys => { const name = typeof t === 'string' ? t : t.id; - if (BACKGROUND_IMAGE_ATTRIBUTES?.[name]) { - return BACKGROUND_IMAGE_ATTRIBUTES[name].greys; + + if (name === 'dark') { + return DARK_GREYS; } switch (name) { @@ -574,24 +590,13 @@ export const greys = (t: string | Theme): Greys => { }; } - case 'dark': - default: { - return { - 0: '#FFFFFF', - 50: '#E8EAED', // 50 - 100: '#C7C7C7', // 100 - 200: '#A8A8A8', // 200 - 300: '#787878', // 300 - 400: '#525252', // 400 - 500: '#2C2C2C', // 500 - 600: '#202020', // 600 - 700: '#1C1C1C', // 700 - 800: '#181818', // 800 - 900: '#121212', // 900 - 950: '#080808', // 950 - }; - } } + + if (BACKGROUND_IMAGE_ATTRIBUTES?.[name]) { + return BACKGROUND_IMAGE_ATTRIBUTES[name].greys; + } + + return DARK_GREYS; }; export const background = '#FFFFFF'; From 15baa96338d7f0f342af597ed8362cdd9b6896aa Mon Sep 17 00:00:00 2001 From: Kelbie Date: Tue, 15 Jul 2025 16:04:41 +0100 Subject: [PATCH 2/2] fix --- app/onboard/new.tsx | 26 +-------------------- app/settings/restoreCounter.tsx | 2 +- components/common/ButtonHandler.tsx | 2 +- components/common/Card.stories.tsx | 32 ++++++++++++++++++++++++++ components/common/Card.tsx | 1 - components/common/Text.stories.tsx | 31 +++++++++++++++++++++++++ components/common/TouchableOpacity.tsx | 2 +- components/common/View.stories.tsx | 13 ++++++++++- helper/index.ts | 24 +++++++++++++++++++ 9 files changed, 103 insertions(+), 30 deletions(-) create mode 100644 components/common/Card.stories.tsx create mode 100644 components/common/Text.stories.tsx create mode 100644 helper/index.ts diff --git a/app/onboard/new.tsx b/app/onboard/new.tsx index d24b4b51..ffba4bc7 100644 --- a/app/onboard/new.tsx +++ b/app/onboard/new.tsx @@ -27,35 +27,11 @@ import * as Crypto from 'expo-crypto'; import { store } from 'helper/redux/store'; import { HDKey } from '@scure/bip32'; import { relays } from 'components/ndk'; +import { runWithAnimationFrame } from 'helper'; // eslint-disable-next-line @typescript-eslint/no-require-imports global.Buffer = require('buffer').Buffer; -/** - * Executes an async function within a requestAnimationFrame to improve UI responsiveness - */ -export const runWithAnimationFrame = ( - callback: Function, - setIsSubmitting?: React.Dispatch> -) => { - return async (...args: T) => { - if (setIsSubmitting) { - setIsSubmitting(true); - } - - requestAnimationFrame(async () => { - try { - await callback(...args); - } catch { - } finally { - if (setIsSubmitting) { - setIsSubmitting(false); - } - } - }); - }; -}; - export function generateMnemonic(): string { const mnemonic = store.getState()?.nostr?.profiles?.[0]?.mnemonic; if (mnemonic) return mnemonic; diff --git a/app/settings/restoreCounter.tsx b/app/settings/restoreCounter.tsx index 441583eb..c105d144 100644 --- a/app/settings/restoreCounter.tsx +++ b/app/settings/restoreCounter.tsx @@ -6,10 +6,10 @@ import { Text } from 'components/common/Text'; import Container from 'components/layout/Container'; import { restoreCounter } from 'helper/cashuClient'; import { increaseCounterV2 } from 'helper/redux/cashu'; -import { runWithAnimationFrame } from '../onboard/new'; import { ScrollView } from 'react-native'; import { RootState } from 'helper/redux/store/reducer'; import { MintKeyset } from '@cashu/cashu-ts'; +import { runWithAnimationFrame } from 'helper'; export default function ModalScreen() { const [isLoading, setIsLoading] = useState(false); diff --git a/components/common/ButtonHandler.tsx b/components/common/ButtonHandler.tsx index ca8f81b6..292f0ea7 100644 --- a/components/common/ButtonHandler.tsx +++ b/components/common/ButtonHandler.tsx @@ -9,7 +9,7 @@ import { useSelector } from 'react-redux'; import { memoizedGetTheme } from 'helper/redux/settings'; import { LinearGradient } from 'expo-linear-gradient'; import opacity from 'hex-color-opacity'; -import { runWithAnimationFrame } from 'app/onboard/new'; +import { runWithAnimationFrame } from 'helper'; export interface ButtonHandlerButton { testID?: string | undefined; diff --git a/components/common/Card.stories.tsx b/components/common/Card.stories.tsx new file mode 100644 index 00000000..5e3d03cf --- /dev/null +++ b/components/common/Card.stories.tsx @@ -0,0 +1,32 @@ +import type { Meta, StoryObj } from '@storybook/react'; +import { Card } from './Card'; +import { persistStore } from 'redux-persist'; +import { Provider } from 'react-redux'; +import { store } from 'helper/redux/store'; + +export const persistor = persistStore(store); + +const meta = { + title: 'Card', + component: Card, + args: { + title: 'Hello world', + message: 'Hello world', + variant: 'info', + }, + decorators: [ + (Story) => ( + + + + ), + ], +} satisfies Meta; + +export default meta; + +type Story = StoryObj; + +export const Basic: Story = { + args: {}, +}; diff --git a/components/common/Card.tsx b/components/common/Card.tsx index 21de0f97..8a6ea4de 100644 --- a/components/common/Card.tsx +++ b/components/common/Card.tsx @@ -43,7 +43,6 @@ export const Card = ({ title, message, variant, icon, onPress }: CardProps) => { ); const currentStyle = useMemo(() => variantStyles[variant], [variantStyles, variant]); - return ( ( + + + + ), + ], +} satisfies Meta; + +export default meta; + +type Story = StoryObj; + +export const Basic: Story = { + args: {}, +}; diff --git a/components/common/TouchableOpacity.tsx b/components/common/TouchableOpacity.tsx index f3f2d798..c7d0cc47 100644 --- a/components/common/TouchableOpacity.tsx +++ b/components/common/TouchableOpacity.tsx @@ -1,4 +1,4 @@ -import { runWithAnimationFrame } from 'app/onboard/new'; +import { runWithAnimationFrame } from 'helper'; import React, { useRef, FC } from 'react'; import { TouchableOpacity as RNTouchableOpacity, diff --git a/components/common/View.stories.tsx b/components/common/View.stories.tsx index 81ecc106..b7247b96 100644 --- a/components/common/View.stories.tsx +++ b/components/common/View.stories.tsx @@ -1,11 +1,22 @@ import type { Meta, StoryObj } from '@storybook/react'; import { View } from './View'; +import { persistStore } from 'redux-persist'; +import { Provider } from 'react-redux'; +import { store } from 'helper/redux/store'; + +export const persistor = persistStore(store); const meta = { title: 'View', component: View, args: {}, - decorators: [(Story) => ], + decorators: [ + (Story) => ( + + + + ), + ], } satisfies Meta; export default meta; diff --git a/helper/index.ts b/helper/index.ts new file mode 100644 index 00000000..8213ea42 --- /dev/null +++ b/helper/index.ts @@ -0,0 +1,24 @@ +/** + * Executes an async function within a requestAnimationFrame to improve UI responsiveness + */ +export const runWithAnimationFrame = ( + callback: Function, + setIsSubmitting?: React.Dispatch> +) => { + return async (...args: T) => { + if (setIsSubmitting) { + setIsSubmitting(true); + } + + requestAnimationFrame(async () => { + try { + await callback(...args); + } catch { + } finally { + if (setIsSubmitting) { + setIsSubmitting(false); + } + } + }); + }; +};