Newer
Older
import { AccountJson } from '@polkadot/extension-base/background/types'
import { KeypairType } from '@polkadot/util-crypto/types'
import { useStore } from 'nanostores/react'
import React, { useEffect, useState } from 'react'
import styled from 'styled-components'
import { accounts as accountsStore } from '../stores/accounts'
import { BaseProps } from '../types'
import { DEFAULT_TYPE } from '../utils/defaultType'
import { findAccountByAddress } from '../utils/findAccountByAddress'
import { recodeAddress, Recoded } from '../utils/recodeAddress'
address?: string
genesisHash?: string | null
name?: string
type?: KeypairType
}
const defaultRecoded = {
account: null,
formatted: null,
prefix: 42,
type: DEFAULT_TYPE,
}
const Address: React.FC<Props> = ({
address,
children,
className,
genesisHash,
name,
type: givenType,
}) => {
const [{ account, formatted, genesisHash: recodedGenesis }, setRecoded] =
useState<Recoded>(defaultRecoded)
const chain = useMetadata(genesisHash || recodedGenesis, true)
const onCopy = () => {
navigator.clipboard.writeText(formatted || '').catch(console.error)
}
const forget = () => goTo(`/account/forget/${address}`)
useEffect(() => {
if (!address) return
const accountByAddress = findAccountByAddress(accounts, address)
const isEthereum =
chain?.definition.chainType === 'ethereum' ||
accountByAddress?.type === 'ethereum' ||
(!accountByAddress && givenType === 'ethereum')
const recoded = isEthereum
? ({
account: accountByAddress,
formatted: address,
type: 'ethereum',
} as Recoded)
return (
<div className={className}>
<div className='infoRow'>
<div className='name' data-field='name'>
<span title={name || account?.name || '<unknown>'}>
{name || account?.name || '<unknown>'}
</span>
</div>
{chain?.genesisHash && (
<div
className='banner chain'
data-field='chain'
style={
chain.definition.color
? { backgroundColor: chain.definition.color }
: undefined
}
>
{chain.name.replace(' Relay Chain', '')}
</div>
)}
<div className='addressDisplay'>
{formatted || address || '<unknown>'}
</div>
<div className='actions'>
<button onClick={onCopy}>{'Copy address'}</button>
<button onClick={forget}>{'Forget Account'}</button>
</div>
</div>
{children}
</div>
)
}
export default styled(Address)`
background: ${({ theme }: Props) => theme.accountBackground};
border: 1px solid ${({ theme }: Props) => theme.boxBorderColor};
box-sizing: border-box;
border-radius: 4px;
margin-bottom: 8px;
position: relative;
.banner {
font-size: 12px;
line-height: 16px;
position: absolute;
top: 0;
&.chain {
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
border-radius: 0 0 0 10px;
color: white;
padding: 0.1rem 0.5rem 0.1rem 0.75rem;
right: 0;
z-index: 1;
}
}
.addressDisplay {
display: flex;
justify-content: space-between;
position: relative;
}
.infoRow {
height: 72px;
border-radius: 4px;
}
.name {
font-size: 16px;
line-height: 22px;
margin: 2px 0;
overflow: hidden;
text-overflow: ellipsis;
width: 300px;
white-space: nowrap;
}
`