mirror of https://github.com/certusone/oyster.git
Merge pull request #14 from yamijuan/transfer-ui
Added icons and addresses for sollet and metamask wallets
This commit is contained in:
commit
2820b3f22e
|
@ -0,0 +1,31 @@
|
|||
<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M28.4229 1.17953L16.7889 9.82025L18.9403 4.72235L28.4229 1.17953Z" fill="#E2761B" stroke="#E2761B" stroke-width="0.116924" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M1.56537 1.17953L13.1058 9.9021L11.0596 4.72235L1.56537 1.17953Z" fill="#E4761B" stroke="#E4761B" stroke-width="0.116924" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M24.237 21.2087L21.1385 25.9558L27.7682 27.7798L29.674 21.3139L24.237 21.2087Z" fill="#E4761B" stroke="#E4761B" stroke-width="0.116924" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M0.337646 21.3139L2.23182 27.7798L8.86144 25.9558L5.76294 21.2087L0.337646 21.3139Z" fill="#E4761B" stroke="#E4761B" stroke-width="0.116924" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M8.48724 13.1877L6.63983 15.9822L13.2227 16.2745L12.9888 9.20056L8.48724 13.1877Z" fill="#E4761B" stroke="#E4761B" stroke-width="0.116924" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M21.5009 13.1877L16.9409 9.11871L16.7889 16.2745L23.36 15.9822L21.5009 13.1877Z" fill="#E4761B" stroke="#E4761B" stroke-width="0.116924" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M8.86145 25.9558L12.8135 24.0266L9.3993 21.3607L8.86145 25.9558Z" fill="#E4761B" stroke="#E4761B" stroke-width="0.116924" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M17.1748 24.0266L21.1385 25.9558L20.589 21.3607L17.1748 24.0266Z" fill="#E4761B" stroke="#E4761B" stroke-width="0.116924" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M21.1385 25.9558L17.1748 24.0266L17.4905 26.6106L17.4554 27.698L21.1385 25.9558Z" fill="#D7C1B3" stroke="#D7C1B3" stroke-width="0.116924" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M8.86145 25.9558L12.5446 27.698L12.5212 26.6106L12.8135 24.0266L8.86145 25.9558Z" fill="#D7C1B3" stroke="#D7C1B3" stroke-width="0.116924" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M12.603 19.6536L9.30573 18.6831L11.6325 17.6191L12.603 19.6536Z" fill="#233447" stroke="#233447" stroke-width="0.116924" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M17.3852 19.6536L18.3557 17.6191L20.6942 18.6831L17.3852 19.6536Z" fill="#233447" stroke="#233447" stroke-width="0.116924" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M8.86144 25.9558L9.42267 21.2087L5.76294 21.3139L8.86144 25.9558Z" fill="#CD6116" stroke="#CD6116" stroke-width="0.116924" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M20.5773 21.2087L21.1385 25.9558L24.237 21.3139L20.5773 21.2087Z" fill="#CD6116" stroke="#CD6116" stroke-width="0.116924" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M23.36 15.9821L16.7889 16.2745L17.3969 19.6536L18.3674 17.6191L20.7058 18.6831L23.36 15.9821Z" fill="#CD6116" stroke="#CD6116" stroke-width="0.116924" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M9.30498 18.6831L11.6435 17.6191L12.6022 19.6536L13.2219 16.2745L6.6391 15.9821L9.30498 18.6831Z" fill="#CD6116" stroke="#CD6116" stroke-width="0.116924" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M6.63983 15.9821L9.39925 21.3607L9.30571 18.6831L6.63983 15.9821Z" fill="#E4751F" stroke="#E4751F" stroke-width="0.116924" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M20.7059 18.6831L20.589 21.3607L23.3601 15.9821L20.7059 18.6831Z" fill="#E4751F" stroke="#E4751F" stroke-width="0.116924" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M13.2227 16.2745L12.603 19.6536L13.3747 23.6407L13.5501 18.3908L13.2227 16.2745Z" fill="#E4751F" stroke="#E4751F" stroke-width="0.116924" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M16.7889 16.2745L16.4732 18.3791L16.6135 23.6407L17.3969 19.6536L16.7889 16.2745Z" fill="#E4751F" stroke="#E4751F" stroke-width="0.116924" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M17.3969 19.6536L16.6135 23.6407L17.1748 24.0266L20.589 21.3607L20.7059 18.6831L17.3969 19.6536Z" fill="#F6851B" stroke="#F6851B" stroke-width="0.116924" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M9.30573 18.6831L9.39927 21.3607L12.8135 24.0266L13.3747 23.6407L12.603 19.6536L9.30573 18.6831Z" fill="#F6851B" stroke="#F6851B" stroke-width="0.116924" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M17.4554 27.698L17.4905 26.6106L17.1982 26.3534H12.7901L12.5212 26.6106L12.5446 27.698L8.86145 25.9558L10.1476 27.0081L12.755 28.8205H17.2332L19.8523 27.0081L21.1385 25.9558L17.4554 27.698Z" fill="#C0AD9E" stroke="#C0AD9E" stroke-width="0.116924" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M17.1747 24.0266L16.6135 23.6407H13.3747L12.8134 24.0266L12.5211 26.6106L12.79 26.3534H17.1981L17.4904 26.6106L17.1747 24.0266Z" fill="#161616" stroke="#161616" stroke-width="0.116924" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M28.914 10.3815L29.9079 5.61097L28.4229 1.17953L17.1748 9.52794L21.501 13.1877L27.6162 14.9766L28.9725 13.3981L28.3879 12.9772L29.3233 12.1237L28.5983 11.5624L29.5337 10.8492L28.914 10.3815Z" fill="#763D16" stroke="#763D16" stroke-width="0.116924" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M0.0921021 5.61097L1.08596 10.3815L0.454568 10.8492L1.38996 11.5624L0.676724 12.1237L1.61212 12.9772L1.0275 13.3981L2.37213 14.9766L8.48728 13.1877L12.8135 9.52794L1.56535 1.17953L0.0921021 5.61097Z" fill="#763D16" stroke="#763D16" stroke-width="0.116924" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M27.6162 14.9766L21.501 13.1877L23.3601 15.9821L20.589 21.3607L24.237 21.3139H29.674L27.6162 14.9766Z" fill="#F6851B" stroke="#F6851B" stroke-width="0.116924" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M8.48728 13.1877L2.37213 14.9766L0.337646 21.3139H5.76294L9.39929 21.3607L6.63988 15.9821L8.48728 13.1877Z" fill="#F6851B" stroke="#F6851B" stroke-width="0.116924" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M16.7889 16.2745L17.1748 9.52795L18.952 4.72235H11.0596L12.8135 9.52795L13.2227 16.2745L13.363 18.4025L13.3747 23.6407H16.6135L16.6369 18.4025L16.7889 16.2745Z" fill="#F6851B" stroke="#F6851B" stroke-width="0.116924" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
After Width: | Height: | Size: 6.1 KiB |
|
@ -0,0 +1,31 @@
|
|||
<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M28.4229 1.17953L16.7889 9.82025L18.9403 4.72235L28.4229 1.17953Z" fill="#E2761B" stroke="#E2761B" stroke-width="0.116924" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M1.56537 1.17953L13.1058 9.9021L11.0596 4.72235L1.56537 1.17953Z" fill="#E4761B" stroke="#E4761B" stroke-width="0.116924" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M24.237 21.2087L21.1385 25.9558L27.7682 27.7798L29.674 21.3139L24.237 21.2087Z" fill="#E4761B" stroke="#E4761B" stroke-width="0.116924" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M0.337646 21.3139L2.23182 27.7798L8.86144 25.9558L5.76294 21.2087L0.337646 21.3139Z" fill="#E4761B" stroke="#E4761B" stroke-width="0.116924" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M8.48724 13.1877L6.63983 15.9822L13.2227 16.2745L12.9888 9.20056L8.48724 13.1877Z" fill="#E4761B" stroke="#E4761B" stroke-width="0.116924" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M21.5009 13.1877L16.9409 9.11871L16.7889 16.2745L23.36 15.9822L21.5009 13.1877Z" fill="#E4761B" stroke="#E4761B" stroke-width="0.116924" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M8.86145 25.9558L12.8135 24.0266L9.3993 21.3607L8.86145 25.9558Z" fill="#E4761B" stroke="#E4761B" stroke-width="0.116924" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M17.1748 24.0266L21.1385 25.9558L20.589 21.3607L17.1748 24.0266Z" fill="#E4761B" stroke="#E4761B" stroke-width="0.116924" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M21.1385 25.9558L17.1748 24.0266L17.4905 26.6106L17.4554 27.698L21.1385 25.9558Z" fill="#D7C1B3" stroke="#D7C1B3" stroke-width="0.116924" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M8.86145 25.9558L12.5446 27.698L12.5212 26.6106L12.8135 24.0266L8.86145 25.9558Z" fill="#D7C1B3" stroke="#D7C1B3" stroke-width="0.116924" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M12.603 19.6536L9.30573 18.6831L11.6325 17.6191L12.603 19.6536Z" fill="#233447" stroke="#233447" stroke-width="0.116924" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M17.3852 19.6536L18.3557 17.6191L20.6942 18.6831L17.3852 19.6536Z" fill="#233447" stroke="#233447" stroke-width="0.116924" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M8.86144 25.9558L9.42267 21.2087L5.76294 21.3139L8.86144 25.9558Z" fill="#CD6116" stroke="#CD6116" stroke-width="0.116924" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M20.5773 21.2087L21.1385 25.9558L24.237 21.3139L20.5773 21.2087Z" fill="#CD6116" stroke="#CD6116" stroke-width="0.116924" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M23.36 15.9821L16.7889 16.2745L17.3969 19.6536L18.3674 17.6191L20.7058 18.6831L23.36 15.9821Z" fill="#CD6116" stroke="#CD6116" stroke-width="0.116924" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M9.30498 18.6831L11.6435 17.6191L12.6022 19.6536L13.2219 16.2745L6.6391 15.9821L9.30498 18.6831Z" fill="#CD6116" stroke="#CD6116" stroke-width="0.116924" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M6.63983 15.9821L9.39925 21.3607L9.30571 18.6831L6.63983 15.9821Z" fill="#E4751F" stroke="#E4751F" stroke-width="0.116924" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M20.7059 18.6831L20.589 21.3607L23.3601 15.9821L20.7059 18.6831Z" fill="#E4751F" stroke="#E4751F" stroke-width="0.116924" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M13.2227 16.2745L12.603 19.6536L13.3747 23.6407L13.5501 18.3908L13.2227 16.2745Z" fill="#E4751F" stroke="#E4751F" stroke-width="0.116924" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M16.7889 16.2745L16.4732 18.3791L16.6135 23.6407L17.3969 19.6536L16.7889 16.2745Z" fill="#E4751F" stroke="#E4751F" stroke-width="0.116924" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M17.3969 19.6536L16.6135 23.6407L17.1748 24.0266L20.589 21.3607L20.7059 18.6831L17.3969 19.6536Z" fill="#F6851B" stroke="#F6851B" stroke-width="0.116924" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M9.30573 18.6831L9.39927 21.3607L12.8135 24.0266L13.3747 23.6407L12.603 19.6536L9.30573 18.6831Z" fill="#F6851B" stroke="#F6851B" stroke-width="0.116924" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M17.4554 27.698L17.4905 26.6106L17.1982 26.3534H12.7901L12.5212 26.6106L12.5446 27.698L8.86145 25.9558L10.1476 27.0081L12.755 28.8205H17.2332L19.8523 27.0081L21.1385 25.9558L17.4554 27.698Z" fill="#C0AD9E" stroke="#C0AD9E" stroke-width="0.116924" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M17.1747 24.0266L16.6135 23.6407H13.3747L12.8134 24.0266L12.5211 26.6106L12.79 26.3534H17.1981L17.4904 26.6106L17.1747 24.0266Z" fill="#161616" stroke="#161616" stroke-width="0.116924" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M28.914 10.3815L29.9079 5.61097L28.4229 1.17953L17.1748 9.52794L21.501 13.1877L27.6162 14.9766L28.9725 13.3981L28.3879 12.9772L29.3233 12.1237L28.5983 11.5624L29.5337 10.8492L28.914 10.3815Z" fill="#763D16" stroke="#763D16" stroke-width="0.116924" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M0.0921021 5.61097L1.08596 10.3815L0.454568 10.8492L1.38996 11.5624L0.676724 12.1237L1.61212 12.9772L1.0275 13.3981L2.37213 14.9766L8.48728 13.1877L12.8135 9.52794L1.56535 1.17953L0.0921021 5.61097Z" fill="#763D16" stroke="#763D16" stroke-width="0.116924" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M27.6162 14.9766L21.501 13.1877L23.3601 15.9821L20.589 21.3607L24.237 21.3139H29.674L27.6162 14.9766Z" fill="#F6851B" stroke="#F6851B" stroke-width="0.116924" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M8.48728 13.1877L2.37213 14.9766L0.337646 21.3139H5.76294L9.39929 21.3607L6.63988 15.9821L8.48728 13.1877Z" fill="#F6851B" stroke="#F6851B" stroke-width="0.116924" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M16.7889 16.2745L17.1748 9.52795L18.952 4.72235H11.0596L12.8135 9.52795L13.2227 16.2745L13.363 18.4025L13.3747 23.6407H16.6135L16.6369 18.4025L16.7889 16.2745Z" fill="#F6851B" stroke="#F6851B" stroke-width="0.116924" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
After Width: | Height: | Size: 6.1 KiB |
|
@ -0,0 +1,5 @@
|
|||
.metamask-icon {
|
||||
background-position: 50%;
|
||||
background-repeat: no-repeat;
|
||||
background-image: url(/assets/metamask.svg);
|
||||
}
|
|
@ -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) => {
|
|||
<div className="app-title">
|
||||
<Link to="/"><h2>WORMHOLE</h2></Link>
|
||||
</div>
|
||||
<AppBar left={
|
||||
<AppBar
|
||||
useWalletBadge={true}
|
||||
left={
|
||||
<>
|
||||
<div>{accounts[0]}</div>
|
||||
{accounts[0] && (
|
||||
<div>
|
||||
<img
|
||||
alt={"metamask-icon"}
|
||||
width={20}
|
||||
height={20}
|
||||
src={metamaskIcon}
|
||||
style={{ marginRight: 8 }}
|
||||
/>
|
||||
{shortenAddress(accounts[0], 4)}
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
} />
|
||||
</Header>
|
||||
|
|
|
@ -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 = (
|
||||
<div className="App-Bar-right">
|
||||
{props.left}
|
||||
{connected ? (
|
||||
<CurrentUserBadge />
|
||||
props.useWalletBadge ? <CurrentUserWalletBadge /> : <CurrentUserBadge />
|
||||
) : (
|
||||
<ConnectButton
|
||||
type="text"
|
||||
|
|
|
@ -0,0 +1,27 @@
|
|||
import React from 'react';
|
||||
|
||||
import { useWallet, WALLET_PROVIDERS } from '../../contexts/wallet';
|
||||
import { shortenAddress } from '../../utils';
|
||||
|
||||
export const CurrentUserWalletBadge = (props: {}) => {
|
||||
const { wallet } = useWallet();
|
||||
|
||||
if (!wallet || !wallet.publicKey) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="wallet-wrapper">
|
||||
<div className="wallet-key">
|
||||
<img
|
||||
alt={"icon"}
|
||||
width={20}
|
||||
height={20}
|
||||
src={WALLET_PROVIDERS.filter(p => p.name === "Sollet")[0]?.icon}
|
||||
style={{ marginRight: 8 }}
|
||||
/>
|
||||
{shortenAddress(`${wallet.publicKey}`)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
Loading…
Reference in New Issue