shared/devices/add-device.tsx - master - githubmirror/client

shared/devices/add-device.tsx
135 строк4 KB
chrisnojima
refactor(styles): theme via hooks, no android remount (#29515)
08 авг 2026, 02:24
08 авг 2026, 02:24a41d38e
import * as C from '@/constants'
import * as Kb from '@/common-adapters'
import {startAddNewDevice} from '@/provision/flow'
import * as T from '@/constants/types'
import {getDeviceIconType} from './device-icon'
import {useRPCLoad} from '@/util/use-rpc-load'

type AddDeviceProps = {
  highlight?: Array<'computer' | 'phone' | 'paper key'>
}
const noHighlight = new Array<'computer' | 'phone' | 'paper key'>()
const defaultIconNumbers = {
  desktop: 1 as T.Devices.IconNumber,
  mobile: 1 as T.Devices.IconNumber,
} as const

export default function AddDevice(ownProps: AddDeviceProps) {
  const styles = useStyles()
  const highlight = ownProps.highlight ?? noHighlight
  const {data: iconNumbers = defaultIconNumbers} = useRPCLoad(
    T.RPCGen.deviceDeviceHistoryListRpcPromise,
    [undefined, C.waitingKeyDevices],
    {
      map: results =>
        T.Devices.nextDeviceIconNumbers(
          results?.map(result => ({
            deviceNumberOfType: result.device.deviceNumberOfType,
            type: T.Devices.stringToDeviceType(result.device.type),
          })) ?? []
        ),
    }
  )

  const onAddComputer = () => {
    startAddNewDevice('desktop')
  }

  const navigateAppend = C.Router2.navigateAppend

  const onAddPaperKey = () => {
    // repeat taps are deduped by navigateAppend
    navigateAppend({name: 'devicePaperKey', params: {}})
  }

  const onAddPhone = () => {
    startAddNewDevice('mobile')
  }
  return (
    <Kb.ScrollView alwaysBounceVertical={false}>
      <Kb.Box2
        direction="vertical"
        gap="medium"
        alignItems="center"
        padding="small"
        gapStart={true}
        gapEnd={true}
      >
        <Kb.Text type="Body" center={true}>
          Protect your account by having more devices and paper keys.
        </Kb.Text>
        <Kb.Box2 direction="vertical" gap="mediumLarge" style={styles.deviceOptions} gapEnd={true}>
          <DeviceOption
            iconNumber={iconNumbers.desktop}
            onClick={onAddComputer}
            type="computer"
            highlight={highlight.includes('computer')}
          />
          <DeviceOption
            iconNumber={iconNumbers.mobile}
            onClick={onAddPhone}
            type="phone"
            highlight={highlight.includes('phone')}
          />
          <DeviceOption
            onClick={onAddPaperKey}
            type="paper key"
            highlight={highlight.includes('paper key')}
          />
        </Kb.Box2>
      </Kb.Box2>
    </Kb.ScrollView>
  )
}

type DeviceOptionProps = {
  highlight?: boolean
  iconNumber?: T.Devices.IconNumber
  onClick: () => void
  type: 'computer' | 'paper key' | 'phone'
}
const bigIcon = C.isLargeScreen && isMobile
const deviceOptionTypeMap = {
  computer: 'desktop',
  'paper key': 'backup',
  phone: 'mobile',
} as const
const DeviceOption = ({highlight, iconNumber, onClick, type}: DeviceOptionProps) => {
  const styles = useStyles()
  return (
    <Kb.ClickableBox
      onClick={onClick}
      className="hover_background_color_blueLighter2"
      style={Kb.Styles.collapseStyles([
        styles.deviceOption,
        isMobile && highlight && styles.deviceOptionHighlighted,
      ])}
      direction="vertical"
      centerChildren={true}
      gap="xtiny"
      gapEnd={!isMobile}
      padding="tiny"
    >
      <Kb.ImageIcon type={getDeviceIconType(deviceOptionTypeMap[type], iconNumber ?? (1 as T.Devices.IconNumber), bigIcon ? 96 : 64)} />
      <Kb.Text type="BodySemibold">
        {type === 'paper key' ? 'Create' : 'Add'} a {type === 'phone' ? 'phone or tablet' : type}
      </Kb.Text>
    </Kb.ClickableBox>
  )
}

const useStyles = Kb.Styles.createStyleHook(theme => ({
  deviceOption: Kb.Styles.platformStyles({
    common: {
      ...Kb.Styles.border(theme.black_05, 1, Kb.Styles.borderRadius),
      width: isMobile ? 192 : 168,
    },
    isElectron: {
      ...Kb.Styles.transition('background-color'),
    },
  }),
  deviceOptionHighlighted: {backgroundColor: theme.blueLighter2},
  deviceOptions: Kb.Styles.platformStyles({
    isMobile: {paddingTop: Kb.Styles.globalMargins.medium},
  }),
}))