feat(system): add CopyInput component

packages/status-react/src/system/copy-input/copy-input.docs.mdx

@@ -0,0 +1,5 @@
+# TextInput
+
+```tsx
+import { TextInput } from '@status-im/components'
+```

packages/status-react/src/system/copy-input/copy-input.tsx

@@ -0,0 +1,44 @@
+import React, { forwardRef, useRef } from 'react'
+
+import { composeRefs } from '@radix-ui/react-compose-refs'
+
+import { TextInput } from '../text-input'
+import { CopyButton, Wrapper } from './styles'
+
+import type { Ref } from 'react'
+
+interface Props {
+  value: string
+  label?: string
+}
+
+const CopyInput = (props: Props, ref: Ref<HTMLInputElement>) => {
+  const { value, label } = props
+
+  const inputRef = useRef<HTMLInputElement>(null)
+
+  const handleCopy = () => {
+    navigator.clipboard.writeText(value)
+    inputRef.current?.select()
+  }
+
+  return (
+    <Wrapper>
+      <TextInput
+        ref={composeRefs(inputRef, ref)}
+        readOnly
+        defaultValue={value}
+        onClick={() => inputRef.current?.select()}
+        label={label}
+      />
+      <CopyButton type="button" onClick={handleCopy}>
+        Copy
+      </CopyButton>
+    </Wrapper>
+  )
+}
+
+const _CopyInput = forwardRef(CopyInput)
+
+export { _CopyInput as CopyInput }
+export type { Props as CopyInputProps }

packages/status-react/src/system/copy-input/index.tsx

@@ -0,0 +1,2 @@
+export type { CopyInputProps } from './copy-input'
+export { CopyInput } from './copy-input'

packages/status-react/src/system/copy-input/styles.tsx

@@ -0,0 +1,23 @@
+import { styled } from '~/src/styles/config'
+
+export const Wrapper = styled('div', {
+  position: 'relative',
+})
+
+export const CopyButton = styled('button', {
+  fontFamily: '$sans',
+  position: 'absolute',
+  right: 8,
+  bottom: 8,
+  fontSize: 12,
+  lineHeight: 1.2,
+  borderRadius: '$8',
+  padding: '6px 12px',
+  background: '$primary-3',
+  color: '$primary-1',
+  border: '1px solid $primary-1',
+
+  '&:hover': {
+    background: '$primary-2',
+  },
+})

packages/status-react/src/system/index.tsx

@@ -2,6 +2,7 @@ export { Avatar } from './avatar'
 export { Box } from './box'
 export { Button } from './button'
 export { ContextMenu, ContextMenuTrigger } from './context-menu'
+export { CopyInput } from './copy-input'
 export {
   AlertDialog,
   AlertDialogTrigger,