A - Signals

To provide reactivity, the sdk uses preact signals.

It provides reactivity for both node.js and browser based javascript.

There is also a react hooks to use signals within react.

For more information about signals see preact/signals

For more information about react integration see singals-react

Performance (React)

In order to get the best performance it is recommended to use the 'useComputed' hook, rather than calling the <signal>.value directly.

useComputed can be seen as micro component and supports returning jsx.

For arrays, it is recommended to use the pack/unpack functions.

const tokens = useComputed(() => 
  pack(service.tokens.wallet.data.fmt.list.value)
)
return (<>
  { unpack(tokens.value).map((id) => (
          <TokenRow key={id} id={id} isVault={true} />
  ))}
</>)

The row component should get the id and retrieve the raw via the auto mapping

function TokenRow({ id }: { id: string }) {
  const token = useComputed(() => 
    service.tokens.wallet.data.fmt.map.value[i]
  )
  const amount = useComputed(() => token?.amount)
  const name = useComputed(() => token?.name)
  const symbol = useComputed(() => token?.symbol)
  const logoURL = useComputed(() => token?.logo)
  const logo = useComputed(() => (
    <>
      <Image width={20} height={20} src={logoURL.value || ''} alt={name.value} />
    </>
  )
 return (
  <Center>
    <Stack direction="row" width="700px" fontSize={['sm', 'sm', 'md']}>
      <Box textAlign="left" width="40px">
        <>{logo}</>
      </Box>
      <Box textAlign="left" width="120px">
        <Text>
          <>{symbol}</>
        </Text>
      </Box>
      <Box textAlign="left" width="100%">
        <Text>
          <>{name}</>
        </Text>
      </Box>
      <Box textAlign="left" width="80%">
        <Text>
          <>{amount}</>
        </Text>
      </Box>
    </Stack>
  </Center>
) 

Last updated