@initia/react-components v0.14.0

Num

<Num amount="1234567890" denom="uini" decimalClassName="small" fixedByAmount />

Percent

<Percent>0.98</Percent>

Flex

<Flex justifyContent="center" alignItems="center" gap={4} inline column wrap>
  <Component />
  <Component />
</Flex>

Grid

<Grid gap={4}>
  <Component />
  <Component />
</Grid>

createContext

import { createContext } from "@initia/react-components"

export const [useSharedValue, SharedValueProvider] = createContext<{ value: any }>("SharedValue")

const Component = () => {
  const { value } = useSharedValue()
  // ...
  return null
}

const Wrapper = () => {
  return (
    <SharedValueProvider value={{ value }}>
      <Component />
    </SharedValueProvider>
  )
}

browserStorage

import { browserStorage as storage } from "@initia/react-components"

storage.set("connected", true)
storage.get<boolean>("connected") // true
storage.remove("connected")

storage.set("address", "ini1wlvk4e083pd3nddlfe5quy56e68atra33gzv8h")
storage.get<string>("address") // "ini1wlvk4e083pd3nddlfe5quy56e68atra33gzv8h"
storage.remove("address")

storage.set("network", { name: "mainnet" })
storage.get<{ name: string }>("network") // { name: "mainnet" }
storage.remove("network")

storage.clear()