communitas 0.2.6

A diagnostic chat application for the P2P Foundation network
Documentation 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146

import React from 'react'
import {
  Card,
  CardContent,
  Typography,
  Box,
  Chip,
  IconButton,
  Tooltip,
  Stack,
} from '@mui/material'
import {
  ContentCopy as CopyIcon,
  Verified as VerifiedIcon,
  Person as PersonIcon,
} from '@mui/icons-material'
import { IdentityInfo } from '../../types'

interface IdentityCardProps {
  identity: IdentityInfo
  onCopyAddress?: () => void
}

const IdentityCard: React.FC<IdentityCardProps> = ({ identity, onCopyAddress }) => {
  const handleCopyAddress = async () => {
    try {
      await navigator.clipboard.writeText(identity.four_word_address)
      if (onCopyAddress) {
        onCopyAddress()
      }
    } catch (err) {
      console.error('Failed to copy address:', err)
    }
  }

  const getVerificationColor = (status: string) => {
    switch (status.toLowerCase()) {
      case 'verified':
        return 'success'
      case 'generated':
        return 'info'
      case 'loaded':
        return 'primary'
      default:
        return 'default'
    }
  }

  const formatCreatedDate = (dateString: string) => {
    try {
      return new Date(dateString).toLocaleDateString()
    } catch {
      return 'Unknown'
    }
  }

  return (
    <Card elevation={2}>
      <CardContent>
        <Stack spacing={2}>
          {/* Header */}
          <Box display="flex" alignItems="center" justifyContent="space-between">
            <Box display="flex" alignItems="center" gap={1}>
              <PersonIcon color="primary" />
              <Typography variant="h6">
                {identity.display_name || 'My Identity'}
              </Typography>
              {identity.is_primary && (
                <Chip size="small" label="Primary" color="primary" />
              )}
            </Box>
            <Chip
              icon={<VerifiedIcon />}
              label={identity.verification_status}
              color={getVerificationColor(identity.verification_status)}
              size="small"
            />
          </Box>

          {/* Four-word address */}
          <Box>
            <Typography variant="body2" color="text.secondary" gutterBottom>
              Network Address
            </Typography>
            <Box display="flex" alignItems="center" gap={1}>
              <Typography
                variant="h5"
                component="div"
                sx={{
                  fontFamily: 'monospace',
                  wordBreak: 'break-all',
                  color: 'primary.main',
                  fontWeight: 'bold',
                }}
              >
                {identity.four_word_address}
              </Typography>
              <Tooltip title="Copy address to clipboard">
                <IconButton
                  size="small"
                  onClick={handleCopyAddress}
                  sx={{ ml: 1 }}
                >
                  <CopyIcon fontSize="small" />
                </IconButton>
              </Tooltip>
            </Box>
          </Box>

          {/* Additional info */}
          <Box display="flex" justifyContent="space-between">
            <Box>
              <Typography variant="body2" color="text.secondary">
                Created
              </Typography>
              <Typography variant="body2">
                {formatCreatedDate(identity.created_at)}
              </Typography>
            </Box>
            {identity.public_key_hex && (
              <Box>
                <Typography variant="body2" color="text.secondary">
                  Public Key
                </Typography>
                <Typography
                  variant="body2"
                  sx={{
                    fontFamily: 'monospace',
                    fontSize: '0.75rem',
                    maxWidth: '120px',
                    overflow: 'hidden',
                    textOverflow: 'ellipsis',
                  }}
                >
                  {identity.public_key_hex.slice(0, 16)}...
                </Typography>
              </Box>
            )}
          </Box>
        </Stack>
      </CardContent>
    </Card>
  )
}

export default IdentityCard