diff --git a/packages/extension-koni-ui/src/Popup/Home/MyProfile/WalletInfoArea.tsx b/packages/extension-koni-ui/src/Popup/Home/MyProfile/WalletInfoArea.tsx index cb7c510733..050b4d5213 100644 --- a/packages/extension-koni-ui/src/Popup/Home/MyProfile/WalletInfoArea.tsx +++ b/packages/extension-koni-ui/src/Popup/Home/MyProfile/WalletInfoArea.tsx @@ -3,9 +3,11 @@ import { BookaSdk } from '@subwallet/extension-koni-ui/connector/booka/sdk'; import { MythicalWallet } from '@subwallet/extension-koni-ui/connector/booka/types'; +import { useNotification } from '@subwallet/extension-koni-ui/hooks'; import { ThemeProps } from '@subwallet/extension-koni-ui/types'; -import { toDisplayNumber } from '@subwallet/extension-koni-ui/utils'; -import React, { useEffect } from 'react'; +import { copyToClipboard, toDisplayNumber } from '@subwallet/extension-koni-ui/utils'; +import { shortenString } from '@subwallet/extension-koni-ui/utils/string'; +import React, { useCallback, useEffect } from 'react'; import { useTranslation } from 'react-i18next'; import styled from 'styled-components'; @@ -15,6 +17,7 @@ const apiSDK = BookaSdk.instance; const Component = ({ className }: Props): React.ReactElement => { const { t } = useTranslation(); const [mythicalWallet, setMythicalWallet] = React.useState(apiSDK.getMythicalWallet()); + const notify = useNotification(); useEffect(() => { const walletSub = apiSDK.subscribeMythicalWallet().subscribe((data) => { @@ -26,14 +29,24 @@ const Component = ({ className }: Props): React.ReactElement => { }; }, []); + const onCopy = useCallback(() => { + copyToClipboard(mythicalWallet?.address || ''); + notify({ + message: t('Copied to clipboard') + }); + }, [mythicalWallet?.address, notify, t]); + return (
{t('Your Wallet')}
-
${mythicalWallet?.address}
+
{shortenString(mythicalWallet?.address || '')}
-