refactor(wallet-mobile): Button, IconProps, useCopy

apps/wallet-mobile/src/AppNavigator.tsx

@@ -9,6 +9,7 @@ import {Alert, AppState, AppStateStatus, InteractionManager, Platform} from 'rea
 import RNBootSplash from 'react-native-bootsplash'
 
 import StorybookScreen from '../.storybook'
+import {ClipboardProvider} from './components/Clipboard/ClipboardProvider'
 import {ModalProvider} from './components/Modal/ModalContext'
 import {ModalScreen} from './components/Modal/ModalScreen'
 import {useAuth} from './features/Auth/AuthProvider'
@@ -99,112 +100,114 @@ export const AppNavigator = () => {
       onReady={onReady}
       ref={navRef}
     >
-      <ModalProvider>
-        <Stack.Navigator
-          screenOptions={{
-            ...navOptions,
-            headerShown: false /* used only for transition */,
-          }}
-        >
-          {/* Not Authenticated */}
-
-          {isLoggedOut && (
-            <Stack.Group>
-              {firstAction === 'first-run' && (
-                <Stack.Screen name="first-run">
-                  {() => (
-                    <SearchProvider>
-                      <InitializationNavigator />
-                    </SearchProvider>
-                  )}
-                </Stack.Screen>
-              )}
-
-              {firstAction === 'show-agreement-changed-notice' && (
-                <Stack.Screen name="agreement-changed-notice">{() => <AgreementChangedNavigator />}</Stack.Screen>
-              )}
-
-              {firstAction === 'auth-with-pin' && (
-                <Stack.Screen
-                  name="custom-pin-auth"
-                  component={PinLoginScreen}
-                  options={{title: strings.loginPinTitle}}
-                />
-              )}
-
-              {firstAction === 'auth-with-os' && (
-                <Stack.Screen name="bio-auth-initial" component={OsLoginScreen} options={{headerShown: false}} />
-              )}
-
-              {firstAction === 'request-new-pin' && (
-                <Stack.Screen //
-                  name="enable-login-with-pin"
-                  component={CreatePinScreenWrapper}
-                  options={{title: strings.customPinTitle}}
-                />
-              )}
-            </Stack.Group>
-          )}
-
-          {/* Authenticated */}
-
-          {isLoggedIn && (
-            <>
+      <ClipboardProvider>
+        <ModalProvider>
+          <Stack.Navigator
+            screenOptions={{
+              ...navOptions,
+              headerShown: false /* used only for transition */,
+            }}
+          >
+            {/* Not Authenticated */}
+
+            {isLoggedOut && (
               <Stack.Group>
-                {afterLoginAction === 'choose-biometric-login' && (
-                  <Stack.Screen //
-                    name="choose-biometric-login"
-                    options={{headerShown: false}}
-                    component={ChooseBiometricLoginScreen}
-                  />
+                {firstAction === 'first-run' && (
+                  <Stack.Screen name="first-run">
+                    {() => (
+                      <SearchProvider>
+                        <InitializationNavigator />
+                      </SearchProvider>
+                    )}
+                  </Stack.Screen>
                 )}
 
-                {afterLoginAction === 'dark-theme-announcement' && (
-                  <Stack.Screen //
-                    name="dark-theme-announcement"
-                    options={{headerShown: false}}
-                    component={DarkThemeAnnouncement}
-                  />
+                {firstAction === 'show-agreement-changed-notice' && (
+                  <Stack.Screen name="agreement-changed-notice">{() => <AgreementChangedNavigator />}</Stack.Screen>
                 )}
 
-                {afterLoginAction === 'setup-wallet' && (
-                  <Stack.Screen //
-                    name="setup-wallet"
-                    options={{headerShown: false}}
-                    component={SetupWalletNavigator}
+                {firstAction === 'auth-with-pin' && (
+                  <Stack.Screen
+                    name="custom-pin-auth"
+                    component={PinLoginScreen}
+                    options={{title: strings.loginPinTitle}}
                   />
                 )}
 
-                {afterLoginAction === 'manage-wallets' && (
-                  <Stack.Screen name="manage-wallets" getComponent={() => WalletNavigator} />
+                {firstAction === 'auth-with-os' && (
+                  <Stack.Screen name="bio-auth-initial" component={OsLoginScreen} options={{headerShown: false}} />
                 )}
-              </Stack.Group>
 
-              <Stack.Group
-                screenOptions={{
-                  presentation: 'transparentModal',
-                  ...(Platform.OS === 'android' && {...TransitionPresets.DefaultTransition}), // overriding general navigation settings
-                  cardStyle: {backgroundColor: 'transparent'}, // this is needed for the modal to be transparent
-                }}
-              >
-                <Stack.Screen name="modal" component={ModalScreen} />
+                {firstAction === 'request-new-pin' && (
+                  <Stack.Screen //
+                    name="enable-login-with-pin"
+                    component={CreatePinScreenWrapper}
+                    options={{title: strings.customPinTitle}}
+                  />
+                )}
               </Stack.Group>
-            </>
-          )}
+            )}
+
+            {/* Authenticated */}
+
+            {isLoggedIn && (
+              <>
+                <Stack.Group>
+                  {afterLoginAction === 'choose-biometric-login' && (
+                    <Stack.Screen //
+                      name="choose-biometric-login"
+                      options={{headerShown: false}}
+                      component={ChooseBiometricLoginScreen}
+                    />
+                  )}
+
+                  {afterLoginAction === 'dark-theme-announcement' && (
+                    <Stack.Screen //
+                      name="dark-theme-announcement"
+                      options={{headerShown: false}}
+                      component={DarkThemeAnnouncement}
+                    />
+                  )}
 
-          {/* Development */}
+                  {afterLoginAction === 'setup-wallet' && (
+                    <Stack.Screen //
+                      name="setup-wallet"
+                      options={{headerShown: false}}
+                      component={SetupWalletNavigator}
+                    />
+                  )}
 
-          {__DEV__ && (
-            <Stack.Group>
-              <Stack.Screen name="developer" component={DeveloperScreen} options={{headerShown: false}} />
+                  {afterLoginAction === 'manage-wallets' && (
+                    <Stack.Screen name="manage-wallets" getComponent={() => WalletNavigator} />
+                  )}
+                </Stack.Group>
+
+                <Stack.Group
+                  screenOptions={{
+                    presentation: 'transparentModal',
+                    ...(Platform.OS === 'android' && {...TransitionPresets.DefaultTransition}), // overriding general navigation settings
+                    cardStyle: {backgroundColor: 'transparent'}, // this is needed for the modal to be transparent
+                  }}
+                >
+                  <Stack.Screen name="modal" component={ModalScreen} />
+                </Stack.Group>
+              </>
+            )}
+
+            {/* Development */}
+
+            {__DEV__ && (
+              <Stack.Group>
+                <Stack.Screen name="developer" component={DeveloperScreen} options={{headerShown: false}} />
 
-              <Stack.Screen name="storybook" component={StorybookScreen} />
+                <Stack.Screen name="storybook" component={StorybookScreen} />
 
-              <Stack.Screen name="playground" component={Playground} />
-            </Stack.Group>
-          )}
-        </Stack.Navigator>
-      </ModalProvider>
+                <Stack.Screen name="playground" component={Playground} />
+              </Stack.Group>
+            )}
+          </Stack.Navigator>
+        </ModalProvider>
+      </ClipboardProvider>
     </NavigationContainer>
   )
 }

apps/wallet-mobile/src/components/Analytics/Analytics.tsx

@@ -4,12 +4,12 @@ import {defineMessages, useIntl} from 'react-intl'
 import {StyleSheet, TextStyle, TouchableOpacity, useWindowDimensions, View} from 'react-native'
 import {ScrollView} from 'react-native-gesture-handler'
 
-import {Button} from '../../components/Button/Button'
 import {Spacer} from '../../components/Spacer/Spacer'
 import {Text} from '../../components/Text'
 import {YoroiLogo} from '../../components/YoroiLogo/YoroiLogo'
 import {SettingsSwitch} from '../../features/Settings/common/SettingsSwitch'
 import {useMetrics} from '../../kernel/metrics/metricsManager'
+import {Button, ButtonType} from '../Button/Button'
 import {AnalyticsImage} from './AnalyticsImage'
 
 type Props = {
@@ -64,15 +64,13 @@ const Notice = ({onClose, onReadMore}: {onClose?: () => void; onReadMore?: () =>
           <CommonContent onReadMore={onReadMore} showLogo />
 
           <Button // skip button
-            block
-            outlineShelley
+            size="S"
+            type={ButtonType.Text}
             onPress={() => {
               metrics.disable()
               onClose?.()
             }}
             title={strings.skip}
-            style={styles.skip}
-            textStyles={styles.skipText}
           />
         </View>
       </ScrollView>
@@ -90,8 +88,7 @@ const Notice = ({onClose, onReadMore}: {onClose?: () => void; onReadMore?: () =>
         ]}
       >
         <Button // accept button
-          block
-          shelleyTheme
+          size="S"
           onPress={() => {
             metrics.enable()
             onClose?.()
@@ -219,12 +216,6 @@ const useStyles = () => {
       ...atoms.heading_3_medium,
       textAlign: 'center',
     },
-    skip: {
-      borderWidth: 0,
-    },
-    skipText: {
-      color: color.primary_900,
-    },
     tick: {
       color: color.primary_700,
       paddingRight: 8,

apps/wallet-mobile/src/components/Boundary/Boundary.tsx

@@ -133,7 +133,6 @@ const FullErrorFallback = ({error, resetErrorBoundary, reset = true, debug}: Err
       {reset && (
         <Button
           title="Try again"
-          shelleyTheme
           onPress={() => {
             LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut)
             resetErrorBoundary()
@@ -163,7 +162,6 @@ const LargeErrorFallback = ({error, resetErrorBoundary, reset = true, debug}: Er
       {reset && (
         <Button
           title="Try again"
-          shelleyTheme
           onPress={() => {
             LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut)
             resetErrorBoundary()
@@ -190,7 +188,6 @@ const SmallErrorFallback = ({error, resetErrorBoundary, reset = true, debug}: Er
 
       {reset && (
         <Button
-          shelleyTheme
           title="Try again"
           onPress={() => {
             LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut)