certusone
/
oyster
mirror of https://github.com/certusone/oyster.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Merge pull request #14 from yamijuan/transfer-ui 

Added icons and addresses for sollet and metamask wallets
This commit is contained in:
B 2021-03-08 16:48:02 -06:00 committed by GitHub
parent d926ee2425 6d94797e11
commit 2820b3f22e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 119 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
assets/wallets/metamask.svg Normal file
View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 6.1 KiB

31
packages/bridge/src/assets/metamask.svg Normal file
View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 6.1 KiB

5
packages/bridge/src/components/Layout/index.less Normal file
View File

@ -0,0 +1,5 @@
.metamask-icon {
background-position: 50%;
background-repeat: no-repeat;
background-image: url(/assets/metamask.svg);
}

21
packages/bridge/src/components/Layout/index.tsx
View File

@ -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>

9
packages/common/src/components/AppBar/index.tsx
View File

@ -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"

27
packages/common/src/components/CurrentUserWalletBadge/index.tsx Normal file
View File

@ -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>
);
};