diff --git a/assets/wallets/metamask.svg b/assets/wallets/metamask.svg new file mode 100644 index 0000000..a04dcfe --- /dev/null +++ b/assets/wallets/metamask.svg @@ -0,0 +1,31 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/bridge/src/assets/metamask.svg b/packages/bridge/src/assets/metamask.svg new file mode 100644 index 0000000..a04dcfe --- /dev/null +++ b/packages/bridge/src/assets/metamask.svg @@ -0,0 +1,31 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/bridge/src/components/Layout/index.less b/packages/bridge/src/components/Layout/index.less new file mode 100644 index 0000000..a210227 --- /dev/null +++ b/packages/bridge/src/components/Layout/index.less @@ -0,0 +1,5 @@ +.metamask-icon { + background-position: 50%; + background-repeat: no-repeat; + background-image: url(/assets/metamask.svg); +} \ No newline at end of file diff --git a/packages/bridge/src/components/Layout/index.tsx b/packages/bridge/src/components/Layout/index.tsx index 594bada..aa43839 100644 --- a/packages/bridge/src/components/Layout/index.tsx +++ b/packages/bridge/src/components/Layout/index.tsx @@ -1,10 +1,12 @@ import React, { useState } from 'react'; import './../../App.less'; +import './index.less'; import { Layout } from 'antd'; import { Link, useLocation } from 'react-router-dom'; +import metamaskIcon from "../../assets/metamask.svg" import { LABELS } from '../../constants'; -import { contexts, AppBar } from '@oyster/common'; +import { contexts, AppBar, shortenAddress } from '@oyster/common'; import Wormhole from '../Wormhole'; import { useEthereum } from '../../contexts'; @@ -35,9 +37,22 @@ export const AppLayout = React.memo((props: any) => {

WORMHOLE

- -
{accounts[0]}
+ {accounts[0] && ( +
+ {"metamask-icon"} + {shortenAddress(accounts[0], 4)} +
+ )} } /> diff --git a/packages/common/src/components/AppBar/index.tsx b/packages/common/src/components/AppBar/index.tsx index 95354ea..09f30e3 100644 --- a/packages/common/src/components/AppBar/index.tsx +++ b/packages/common/src/components/AppBar/index.tsx @@ -1,20 +1,25 @@ import React from 'react'; import { Button, Popover } from 'antd'; import { CurrentUserBadge } from '../CurrentUserBadge'; +import { CurrentUserWalletBadge } from '../CurrentUserWalletBadge'; import { SettingOutlined } from '@ant-design/icons'; import { Settings } from '../Settings'; import { LABELS } from '../../constants/labels'; import { ConnectButton } from '..'; import { useWallet } from '../../contexts/wallet'; import './style.css'; -export const AppBar = (props: { left?: JSX.Element; right?: JSX.Element }) => { +export const AppBar = (props: { + left?: JSX.Element; + right?: JSX.Element; + useWalletBadge?: boolean; +}) => { const { connected, wallet } = useWallet(); const TopBar = (
{props.left} {connected ? ( - + props.useWalletBadge ? : ) : ( { + const { wallet } = useWallet(); + + if (!wallet || !wallet.publicKey) { + return null; + } + + return ( +
+
+ {"icon"} p.name === "Sollet")[0]?.icon} + style={{ marginRight: 8 }} + /> + {shortenAddress(`${wallet.publicKey}`)} +
+
+ ); +};