mirror of https://github.com/certusone/oyster.git
feat: add blockchain logos
This commit is contained in:
parent
1fa4cdfa90
commit
75e48fefe4
|
@ -0,0 +1,10 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" viewBox="0 0 26 26">
|
||||
<g fill="none">
|
||||
<path fill="#343434" d="M7.978 0L7.804 0.592 7.804 17.78 7.978 17.954 15.957 13.238z" transform="translate(4.875)"/>
|
||||
<path fill="#8C8C8C" d="M7.978 0L0 13.238 7.978 17.954 7.978 9.612z" transform="translate(4.875)"/>
|
||||
<path fill="#3C3C3B" d="M7.978 19.465L7.88 19.585 7.88 25.707 7.978 25.994 15.962 14.751z" transform="translate(4.875)"/>
|
||||
<path fill="#8C8C8C" d="M7.978 25.994L7.978 19.465 0 14.751z" transform="translate(4.875)"/>
|
||||
<path fill="#141414" d="M7.978 17.954L15.957 13.238 7.978 9.612z" transform="translate(4.875)"/>
|
||||
<path fill="#393939" d="M0 13.238L7.978 17.954 7.978 9.612z" transform="translate(4.875)"/>
|
||||
</g>
|
||||
</svg>
|
After Width: | Height: | Size: 799 B |
Binary file not shown.
After Width: | Height: | Size: 1.2 KiB |
|
@ -1,5 +1,15 @@
|
|||
import { useConnectionConfig } from '@oyster/common';
|
||||
import { TokenInfo } from '@solana/spl-token-registry';
|
||||
import { debug } from 'console';
|
||||
import React from 'react';
|
||||
import { useEthereum } from '../../contexts';
|
||||
import { ASSET_CHAIN } from "../../models/bridge/constants";
|
||||
import './style.less';
|
||||
|
||||
export const TokenDisplay = ({ asset, chain }: { asset: string, chain: ASSET_CHAIN }) => {
|
||||
return '';
|
||||
export const TokenDisplay = ({ asset, chain, token }: { asset?: string, chain?: ASSET_CHAIN, token?: TokenInfo }) => {
|
||||
|
||||
return <div className="token-chain-logo">
|
||||
<img className="token-logo" alt="" src={token?.logoURI} />
|
||||
<img className="chain-logo" alt="" src={chain === ASSET_CHAIN.Ethereum ? '/blockchains/ETH.svg' : '/blockchains/solana.webp'} />
|
||||
</div>;
|
||||
}
|
||||
|
|
|
@ -0,0 +1,23 @@
|
|||
.token-chain-logo {
|
||||
position: relative
|
||||
}
|
||||
|
||||
.token-logo {
|
||||
border: 1px solid hsla(0,0%,50.2%,.5);
|
||||
border-radius: 50px;
|
||||
background: #fff;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
padding: 2px;
|
||||
}
|
||||
|
||||
.chain-logo {
|
||||
order: 1px solid hsla(0, 0%, 50.2%, 0.5);
|
||||
border-radius: 20px;
|
||||
position: absolute;
|
||||
background: #fff;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
bottom: 9px;
|
||||
right: -5px;
|
||||
}
|
|
@ -13,6 +13,7 @@ import { BigNumber } from 'ethers/utils';
|
|||
import { Erc20Factory } from '../../contracts/Erc20Factory';
|
||||
import { ProgressUpdate, transfer, TransferRequest } from '../../models/bridge';
|
||||
import { useEthereum } from '../../contexts';
|
||||
import { TokenDisplay } from './../TokenDisplay';
|
||||
|
||||
const { useConnection } = contexts.Connection;
|
||||
const { useWallet } = contexts.Wallet;
|
||||
|
@ -32,7 +33,7 @@ export const typeToIcon = (type: string, isLast: boolean) => {
|
|||
export const Transfer = () => {
|
||||
const connection = useConnection();
|
||||
const { wallet } = useWallet();
|
||||
const { provider } = useEthereum();
|
||||
const { provider, tokenMap } = useEthereum();
|
||||
const [request, setRequest] = useState<TransferRequest>({
|
||||
// TODO: update based on selected asset
|
||||
from: ASSET_CHAIN.Ethereum,
|
||||
|
@ -88,11 +89,16 @@ export const Transfer = () => {
|
|||
}, [setActiveSteps]);
|
||||
|
||||
return <div>
|
||||
<div>
|
||||
<div style={{ display: 'flex' }}>
|
||||
<div>
|
||||
<h6>{`ETH Mainnet -> Solana Mainnet`}</h6>
|
||||
<h5>{`ETH Mainnet -> Solana Mainnet`}</h5>
|
||||
<h2>{formatAmount(request.amount || 0, 2)} {request.info?.name}</h2>
|
||||
</div>
|
||||
<div style={{ display: 'flex', marginLeft: 'auto', marginRight: 10 }}>
|
||||
<TokenDisplay asset={request.asset} chain={request.from} token={tokenMap.get(request.asset || '')} />
|
||||
<span style={{ margin: 15 }}>{'➔'}</span>
|
||||
<TokenDisplay asset={request.asset} chain={request.toChain} token={tokenMap.get(request.asset || '')} />
|
||||
</div>
|
||||
</div>
|
||||
<div style={{ textAlign: 'left', display: 'flex', flexDirection: 'column' }}>
|
||||
{(() => {
|
||||
|
@ -119,7 +125,7 @@ export const Transfer = () => {
|
|||
description: <NotificationContent />,
|
||||
className: 'custom-class',
|
||||
style: {
|
||||
width: 600,
|
||||
width: 500,
|
||||
},
|
||||
});
|
||||
|
||||
|
|
|
@ -144,7 +144,6 @@ export const transfer = async (
|
|||
)
|
||||
)[0];
|
||||
|
||||
console.log('Recipient: ', recipient.toBase58());
|
||||
request.recipient = recipient.toBuffer();
|
||||
|
||||
const accounts = await getMultipleAccounts(
|
||||
|
@ -152,7 +151,6 @@ export const transfer = async (
|
|||
[mintKey.toBase58(), recipient.toBase58()],
|
||||
'single',
|
||||
);
|
||||
debugger;
|
||||
const instructions: TransactionInstruction[] = [];
|
||||
const signers: Account[] = [];
|
||||
|
||||
|
|
Loading…
Reference in New Issue