Add link copy component to claims form

Author: markharding

apps/polycentric/src/features/verifications/CopyLinkComponent.tsx

@@ -0,0 +1,51 @@
+import { Text } from '@/src/common/components';
+import Icon from '@/src/common/components/Icon';
+import { Atoms, useTheme } from '@/src/common/theme';
+import * as Clipboard from 'expo-clipboard';
+import { useEffect, useRef, useState } from 'react';
+import { Pressable } from 'react-native';
+
+export function CopyLinkComponent({ link }: { link: string }) {
+  const { theme } = useTheme();
+  const [copied, setCopied] = useState(false);
+  const timeout = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);
+
+  useEffect(() => () => clearTimeout(timeout.current), []);
+
+  const onCopy = () => {
+    void Clipboard.setStringAsync(link);
+    setCopied(true);
+    clearTimeout(timeout.current);
+    timeout.current = setTimeout(() => setCopied(false), 2000);
+  };
+
+  return (
+    <Pressable
+      onPress={onCopy}
+      style={({ hovered }) => [
+        Atoms.flex_row,
+        Atoms.items_center,
+        Atoms.gap_sm,
+        Atoms.p_md,
+        Atoms.rounded_md,
+        {
+          backgroundColor: hovered
+            ? theme.palette.neutral_200
+            : theme.palette.neutral_100,
+        },
+      ]}
+    >
+      <Text
+        variant="body"
+        style={[Atoms.flex_1, theme.atoms.text, { fontFamily: 'monospace' }]}
+      >
+        {link}
+      </Text>
+      <Icon
+        name={copied ? 'checkmark' : 'copy'}
+        size={18}
+        color={copied ? 'positive_500' : 'neutral_500'}
+      />
+    </Pressable>
+  );
+}

apps/polycentric/src/features/verifications/PlatformPicker.tsx

@@ -9,6 +9,7 @@ import Animated, {
   FadeOutDown,
   useAnimatedRef,
 } from 'react-native-reanimated';
+import { CopyLinkComponent } from './CopyLinkComponent';
 import { SelectChip } from './SelectChip';
 import { useScrollIntoView } from './VerificationsScrollContext';
 
@@ -192,21 +193,7 @@ export function PlatformPicker() {
           />
 
           {/* Loop-back link the user adds to their profile. */}
-          <View
-            style={[
-              Atoms.p_md,
-              Atoms.rounded_md,
-              { backgroundColor: theme.palette.neutral_100 },
-            ]}
-          >
-            <Text
-              variant="body"
-              style={[theme.atoms.text, { fontFamily: 'monospace' }]}
-              selectable={true}
-            >
-              {loopbackLink}
-            </Text>
-          </View>
+          <CopyLinkComponent link={loopbackLink} />
           <Text variant="small" style={theme.atoms.text_neutral_medium}>
             {selected.generic
               ? 'Add this link anywhere on your website.'