antd#Descriptions JavaScript Examples
The following examples show how to use
antd#Descriptions.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: utils.js From the-eye-knows-the-garbage with MIT License | 7 votes |
|
renderForeignKey = (text, VerboseNameMap) => {
console.log(text);
console.log(VerboseNameMap);
let items = [];
for (let key in text) {
if (key !== 'ty_options_display_txt') {
let one = <Descriptions.Item label={VerboseNameMap[key]}>{text[key]}</Descriptions.Item>;
items.push(one);
}
}
return <Space>
<span>{text.ty_options_display_txt}</span>
<Popover trigger="click" content={<Descriptions>
{items}
</Descriptions>} title="外键数据">
<InfoCircleTwoTone size="small" />
</Popover>
</Space>;
}
Example #2
| Source File: LiquidityMiningDescription.js From dexwebapp with Apache License 2.0 | 6 votes |
|
render() {
const theme = this.props.theme;
const tokens = this.props.exchange.tokens;
const tokenId = this.props.config.tokenId;
const token = config.getTokenByTokenId(tokenId, tokens);
const amount = config.fromWEI(
token.symbol,
this.props.config.amount,
tokens,
{
precision: 0,
}
);
const rewardTokenId = this.props.config.rewardTokenId;
const rewardToken = config.getTokenByTokenId(rewardTokenId, tokens);
return (
<BackgroundDiv>
<Descriptions column={1} title={`${this.props.market}`} size={'small'}>
<Descriptions.Item label={<I s="Reward" />}>
{amount} {token.symbol}
</Descriptions.Item>
<Descriptions.Item label={<I s="Reward Token" />}>
{rewardToken ? rewardToken.symbol : ''}
</Descriptions.Item>
<Descriptions.Item label={<I s="Max Spread" />}>
{this.props.config.maxSpread > 0
? `${this.props.config.maxSpread * 100}%`
: '-'}
</Descriptions.Item>
<Descriptions.Item label={<I s="Activity Time" />}>
{Moment(this.props.config.rangeFrom).format(theme.timeFormat)} -{' '}
{Moment(this.props.config.rangeTo).format(theme.timeFormat)}
</Descriptions.Item>
</Descriptions>
</BackgroundDiv>
);
}
Example #3
| Source File: TracksStagesCard.js From codeclannigeria-frontend with MIT License | 6 votes |
|
TracksStagesCard = ({ trackData, stageData }) => {
const avgTasksPerStage = stageData
? Math.round(
stageData.items
.map(stage => stage.taskCount)
.reduce(function (accumulator, currentValue) {
return accumulator + currentValue;
}, 0) / stageData.length
)
: 0;
const { description, title } = trackData;
return (
<div>
<Descriptions
title="Track Descripton"
bordered
size="small"
// column={{ xxl: 4, xl: 2, lg: 3, md: 3, sm: 1, xs: 1 }}
>
<Descriptions.Item label="Track Name">{title}</Descriptions.Item>
<Descriptions.Item label="No of Stages">
{stageData.length}
</Descriptions.Item>
<Descriptions.Item label="Certificate upon Completion">
Yes
</Descriptions.Item>
<Descriptions.Item label="Amount">Free</Descriptions.Item>
<Descriptions.Item label="Average Tasks per Stage">
{avgTasksPerStage}
</Descriptions.Item>
<Descriptions.Item label="Description">{description}</Descriptions.Item>
</Descriptions>
</div>
);
}
Example #4
| Source File: MyFile.js From next-terminal with GNU Affero General Public License v3.0 | 6 votes |
|
render() {
let storage = this.state.storage;
let contentClassName = isAdmin() ? 'page-content' : 'page-content-user';
return (
<div>
<Content key='page-content' className={["site-layout-background", contentClassName]}>
<div style={{marginBottom: 20}}>
<Row justify="space-around" align="middle" gutter={24}>
<Col span={16} key={1}>
<Title level={3}>我的文件</Title>
</Col>
<Col span={8} key={2} style={{textAlign: 'right'}}>
<Descriptions title="" column={2}>
<Descriptions.Item label={<div><FireOutlined/> 大小限制</div>}>
<strong>{storage['limitSize'] < 0 ? '无限制' : renderSize(storage['limitSize'])}</strong>
</Descriptions.Item>
<Descriptions.Item label={<div><HeartOutlined/> 已用大小</div>}>
<strong>{renderSize(storage['usedSize'])}</strong>
</Descriptions.Item>
</Descriptions>
</Col>
</Row>
</div>
<FileSystem storageId={getCurrentUser()['id']}
storageType={'storages'}
callback={this.getDefaultStorage}
upload={true}
download={true}
delete={true}
rename={true}
edit={true}
minHeight={window.innerHeight - 203}/>
</Content>
</div>
);
}
Example #5
| Source File: advisory_description.js From art-dashboard-ui with Apache License 2.0 | 6 votes |
|
render() {
return (
<div>
<Descriptions title={this.state.data.id}>
<Descriptions.Item label={"Advisory Type"}>
{this.state.data.advisory_type}
</Descriptions.Item>
<Descriptions.Item label={"Advisory Status"}>
{this.state.data.status}
</Descriptions.Item>
<Descriptions.Item label={"Advisory Synopsis"}>
{this.state.data.synopsis}
</Descriptions.Item>
<Descriptions.Item label={"QA Status"}>
{this.state.data.qa_complete}
</Descriptions.Item>
<Descriptions.Item label={"Docs Status"}>
{this.state.data.doc_complete}
</Descriptions.Item>
<Descriptions.Item label={"Security Approval"}>
{this.state.data.security_approved}
</Descriptions.Item>
<Descriptions.Item label={"Release Date"}>
{this.state.data.release_date}
</Descriptions.Item>
</Descriptions>
</div>
);
}
Example #6
| Source File: loan.js From credit with Apache License 2.0 | 6 votes |
|
render() {
return (
<Descriptions title="个人信用及贷款记录" bordered>
<Descriptions.Item label="客户">李明</Descriptions.Item>
<Descriptions.Item label="信用分">85</Descriptions.Item>
<Descriptions.Item label="上次评估日期">2021/1/26</Descriptions.Item>
<Descriptions.Item label="目前信用状况" span={3}>
<Badge status="processing" text="良好" />
</Descriptions.Item>
<Descriptions.Item label="最大贷款金额">￥80000</Descriptions.Item>
<Descriptions.Item label="目前贷款金额">￥40000</Descriptions.Item>
<Descriptions.Item label="可用贷款金额">￥40000</Descriptions.Item>
<Descriptions.Item label="贷款记录">
1.日期:2020/2/15 金额：￥50000
<br />
状况：还款完毕
<br />
<br />
2.日期：2020/11/13 金额：￥40000
<br />
状况：未还款
<br />
<br />
</Descriptions.Item>
<Space direction="vertical">
<Search placeholder="输入贷款金额" enterButton="确认" onSearch={this.addLoan} style={{ width: 500 }} />
</Space>
</Descriptions>
)
}
Example #7
| Source File: Detail.js From ant-back with MIT License | 6 votes |
|
render() {
const { current, loading } = this.state;
return (
<PageHeaderWrapper title="详情">
<Card loading={loading}>
<Descriptions size="large" title="基本信息">
<Descriptions.Item label="存放路径">{current.url} </Descriptions.Item>
<Descriptions.Item label="访问链接">
<a target="_blank" href={imgUrl + current.url}>
{imgUrl + current.url}{' '}
</a>
</Descriptions.Item>
</Descriptions>
<Divider dashed />
<Descriptions size="large" title="其他信息">
<Descriptions.Item label="创建时间">
{moment(current.createdAt).format('YYYY-MM-DD HH:mm:ss')}{' '}
</Descriptions.Item>
<Descriptions.Item label="上次修改时间">
{moment(current.updatedAt).format('YYYY-MM-DD HH:mm:ss')}{' '}
</Descriptions.Item>
</Descriptions>
<Divider dashed />
<Descriptions size="remark" title="备注">
<Descriptions.Item> {current.remark}</Descriptions.Item>
</Descriptions>
<Divider dashed />
<img src={imgUrl + current.url} className={styles.detailImg} alt="img" />
<Row className="marginTop textRight">
<Button type="primary" onClick={() => router.go(-1)}>
返回
</Button>
</Row>
</Card>
</PageHeaderWrapper>
);
}
Example #8
| Source File: utils.js From the-eye-knows-the-garbage with MIT License | 6 votes |
|
renderManyToMany = (text) => {
const color_arr = [
'green',
'cyan',
'blue',
'geekblue',
'purple',
'magenta',
'red',
'volcano',
'orange',
'gold',
'lime',
];
const child = [];
let items = [];
console.log(text);
for (let key in text) {
let value = text[key];
let one = <Descriptions.Item>
<Tag color={'blue'}>{value.ty_options_display_txt}</Tag>
</Descriptions.Item>;
items.push(one);
}
text.forEach((value, index, arr) => {
if (index < 15) {
child.push(<Col xs={24} sm={12} md={12} lg={8} xl={6} style={{paddingRight: 4, paddingTop: 4}}>
<Tag
color={color_arr[index % 10]}>
<Ellipsis style={{overflow: 'visible'}} tooltip
length={25}>{value.ty_options_display_txt}</Ellipsis>
</Tag>
</Col>);
} else if (index === 15) {
child.push(<Popover trigger="click" content={<Descriptions>
{items}
</Descriptions>} title="多对多数据">
<Col span={3} style={{paddingTop: 4}}>
<Tag
color={color_arr[index % 10]}>...
</Tag>
</Col>
</Popover>);
}
});
return <Row col={12}>{child}</Row>;
}
Example #9
| Source File: basic.jsx From virtuoso-design-system with MIT License | 6 votes |
|
storiesOf('antd/descriptions', module).add('basic', () =>
<Descriptions title="User Info">
<Descriptions.Item label="UserName">Zhou Maomao</Descriptions.Item>
<Descriptions.Item label="Telephone">1810000000</Descriptions.Item>
<Descriptions.Item label="Live">Hangzhou, Zhejiang</Descriptions.Item>
<Descriptions.Item label="Remark">empty</Descriptions.Item>
<Descriptions.Item label="Address">
No. 18, Wantang Road, Xihu District, Hangzhou, Zhejiang, China
</Descriptions.Item>
</Descriptions>,
{ docs: { page: () => (<><h1 id="enus">en-US</h1>
<p>Simplest Usage.</p></>) } });
Example #10
| Source File: Profile.jsx From ResoBin with MIT License | 6 votes |
|
StyledDescriptions = styled(Descriptions)`
padding: 0.75rem 0.75rem 0;
background: ${({ theme }) => theme.darksecondary};
border-radius: ${({ theme }) => theme.borderRadius};
.ant-descriptions-item {
padding-bottom: 0.25rem;
}
.ant-descriptions-item-label {
color: ${({ theme }) => theme.primary};
font-weight: 400;
font-size: 0.75rem;
}
.ant-descriptions-item-content {
margin-bottom: 0.5rem;
color: ${({ theme }) => theme.textColor};
}
`
Example #11
| Source File: index copy.jsx From prometheusPro with MIT License | 6 votes |
|
description = (
<RouteContext.Consumer>
{({ isMobile }) => (
<Descriptions className={styles.headerList} size="small" column={isMobile ? 1 : 2}>
{/* <Descriptions.Item label="其他信息"></Descriptions.Item> */}
</Descriptions>
)}
</RouteContext.Consumer>
)
Example #12
| Source File: index.jsx From micro-front-template with MIT License | 5 votes |
|
Status = () => {
const [userInfo, setUserInfo] = useState();
useEffect(() => {
if (!token) return;
(async () => {
setUserInfo({
nickname: "shadows",
avatarUrl: "",
gender: 1,
country: "中国",
province: "广东",
city: "深圳",
});
})();
}, []);
if (!userInfo) return null;
return (
<section>
<Descriptions title={`欢迎你，${userInfo.nickname}`}>
<Descriptions.Item label="Avatar">
<Avatar src={userInfo.avatarUrl} />
</Descriptions.Item>
<Descriptions.Item label="UserName">
{userInfo.nickname}
</Descriptions.Item>
<Descriptions.Item label="Gender">
{userInfo.gender ? "boy" : "girl"}
</Descriptions.Item>
<Descriptions.Item label="Live">{`${userInfo.country} ${userInfo.province} ${userInfo.city}`}</Descriptions.Item>
</Descriptions>
<style jsx>{`
section {
padding: 20px;
}
`}</style>
</section>
);
}
Example #13
| Source File: GradingModal.js From codeclannigeria-frontend with MIT License | 5 votes |
|
GradingModal = ({ visible, onCancel, onCreate, taskId }) => {
const dispatch = useDispatch();
useEffect(() => {
if (taskId && visible) {
dispatch(getTaskSubmissionAction(taskId));
}
}, [dispatch, taskId, visible]);
const task = useSelector(state => state.tasks.singleMenteeSubmittedTask);
return (
<React.Fragment>
<Modal visible={visible} cancelText="Done" onCancel={onCancel}>
{task.data ? (
<Descriptions
title={`Task ${taskId} `}
size="small"
layout="vertical"
bordered={true}
// column={{ xxl: 4, xl: 3, lg: 3, md: 3, sm: 2, xs: 1 }}
>
<Descriptions.Item label="Task Id">
#{task.data.id}
</Descriptions.Item>
<Descriptions.Item label="Task Url">
<a href={task.data.taskUrl}>{task.data.taskUrl}</a>
</Descriptions.Item>
<Descriptions.Item label="Grade %">
{task.data.gradePercentage} %
</Descriptions.Item>
<Descriptions.Item label="Your Comment" span={3}>
{task.data.menteeComment}
</Descriptions.Item>
<Descriptions.Item label="Mentor Comment" span={3}>
{task.data.mentorComment}
</Descriptions.Item>
</Descriptions>
) : null}
{task.loading ? <CustomLoader /> : null}
</Modal>
</React.Fragment>
);
}
Example #14
| Source File: Header.js From react-perspective-cropper with MIT License | 5 votes |
|
Header = () => {
return (
<div className='site-page-header'>
<PageHeader ghost={false} title='react-perspective-cropper'>
<Descriptions size='small' column={2}>
<Descriptions.Item label='Package'>
<a href='https://www.npmjs.com/package/react-perspective-cropper'>
<img
alt='npm'
src='https://img.shields.io/npm/v/react-perspective-cropper.svg'
/>
</a>
<a href='https://standardjs.com'>
<img
alt='standardjs'
src='https://img.shields.io/badge/code_style-standard-brightgreen.svg'
/>
</a>
</Descriptions.Item>
<Descriptions.Item label='Description'>
<Paragraph>
React component performing border detection, perspective
correction and simple image filters over a provided image ? ?
</Paragraph>
</Descriptions.Item>
<Descriptions.Item label='Created by'>
Giacomo Cerquone from
<span
aria-label='italy flag'
role='img'
style={{ margin: '0 10px' }}
>
??
</span>
with{' '}
<span aria-label='heart' role='img' style={{ margin: '0 10px' }}>
❤️
</span>
</Descriptions.Item>
<Descriptions.Item label='Info'>
<Paragraph>
Make sure to only use HiRes images!
<br />
<b>
<a
rel='noreferrer'
target='_blank'
href='https://github.com/giacomocerquone/react-perspective-cropper/blob/master/gifs/example-img.jpg?raw=true'
>
You could use this image for example.
</a>
</b>
</Paragraph>
</Descriptions.Item>
</Descriptions>
</PageHeader>
</div>
)
}
Example #15
| Source File: ProjectCard.jsx From ui with MIT License | 5 votes |
|
{ Item } = Descriptions
Example #16
| Source File: CompanyProfileModal.js From placement-portal with MIT License | 5 votes |
|
render() {
const { data, modalState, onClose, isMobile} = this.props;
return (
<Modal
title={data.email}
visible={modalState}
onCancel={onClose}
onOk={onClose}
width= {isMobile ?'90vw' : '50vw'}
>
<Layout
style={{background: '#fff'}}
>
<Row type="flex" justify="center" style={{background: '#fff'}}>
<Col md={16} xs={24} sm={24} style={{margin: 10}}>
<Content
style={{
background: "#fff"
}}
>
<Avatar src={data.logo_link} size={100} style={{margin: 10}}/>
<Descriptions column={1}>
<Descriptions.Item label="Company Name" >{data.company_name}</Descriptions.Item>
<Descriptions.Item label="Email" >{data.email}</Descriptions.Item>
<Descriptions.Item label="Website" >{data.website}</Descriptions.Item>
<Descriptions.Item label="Address" >{data.company_address}</Descriptions.Item>
<Descriptions.Item label="Introduction">{data.company_introduction}</Descriptions.Item>
<Descriptions.Item label="Last Modified">{new Date(data.last_modified_date).toDateString()}</Descriptions.Item>
</Descriptions>
{data.contact_details.map((contact, index) =>
(<Descriptions key={index}>
<Descriptions.Item lable="Designation">{contact.designation}</Descriptions.Item>
<Descriptions.Item lable="Email">{contact.email}</Descriptions.Item>
<Descriptions.Item label="Contact number">{contact.phone}</Descriptions.Item>
</Descriptions>
)
)
}
</Content>
</Col>
</Row>
</Layout>
</Modal>
);
}
Example #17
| Source File: UserDashboard.js From credit with Apache License 2.0 | 5 votes |
|
render() {
return (
<div className="user-background">
<h3 className="title">个人信息</h3>
<Row justify="space-between">
<Col span={6}>
<Card style={{ width: 300, marginTop: 16 }} bordered={false}>
<Meta
avatar={
<Avatar src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2586243650,1628445668&fm=26&gp=0.jpg" />
}
title="欢迎回来，Chris"
description="这里是您的详情信息"
/>
</Card>
</Col>
<Col span={6}>
<Card style={{ width: 300, marginTop: 16 }} bordered={false}>
<Statistic
title="当前信用分"
value={710}
precision={2}
valueStyle={{ color: '#3f8600' }}
/>
</Card>
</Col>
<Col span={6}>
</Col>
<Col span={6}>
</Col>
<Col span={6}>
</Col>
</Row>
<Row>
<Descriptions bordered>
<Descriptions.Item label="用户姓名">Chris</Descriptions.Item>
<Descriptions.Item label="性别">男</Descriptions.Item>
<Descriptions.Item label="年龄">25</Descriptions.Item>
<Descriptions.Item label="信息录入时间">2021-03-15 18:03:15</Descriptions.Item>
<Descriptions.Item label="信用评分时间" span={2}>
2021-03-15 18:15:08
</Descriptions.Item>
<Descriptions.Item label="账户地址" span={3}>
<a>0x10a12eB389B0Df756C63778E522C3463B7B60BD0</a>
</Descriptions.Item>
<Descriptions.Item label="当前数据状态" span={3}>
<Badge status="processing" text="尚未授权机构使用" />
</Descriptions.Item>
<Descriptions.Item label="名下房产数量">1</Descriptions.Item>
<Descriptions.Item label="贷款余额">￥200000.00</Descriptions.Item>
<Descriptions.Item label="月收入">￥15000.00</Descriptions.Item>
<Descriptions.Item label="信用历史">
三个月内信用卡逾期次数：<span className="normal">0</span>
<br />
半年内信用卡逾期次数: <span className="warning">1</span>
<br />
一年内信用卡逾期次数: <span className="warning">1</span>
<br />
两年内信用卡逾期次数: <span className="warning">2</span>
<br />
</Descriptions.Item>
</Descriptions>
</Row>
<a>{'>>'}更多</a>
</div>
)
}
Example #18
| Source File: size.jsx From virtuoso-design-system with MIT License | 5 votes |
|
render() {
return (
<div>
<Radio.Group onChange={this.onChange} value={this.state.size}>
<Radio value="default">default</Radio>
<Radio value="middle">middle</Radio>
<Radio value="small">small</Radio>
</Radio.Group>
<br />
<br />
<Descriptions
bordered
title="Custom Size"
size={this.state.size}
extra={<Button type="primary">Edit</Button>}
>
<Descriptions.Item label="Product">Cloud Database</Descriptions.Item>
<Descriptions.Item label="Billing">Prepaid</Descriptions.Item>
<Descriptions.Item label="time">18:00:00</Descriptions.Item>
<Descriptions.Item label="Amount">$80.00</Descriptions.Item>
<Descriptions.Item label="Discount">$20.00</Descriptions.Item>
<Descriptions.Item label="Official">$60.00</Descriptions.Item>
<Descriptions.Item label="Config Info">
Data disk type: MongoDB
<br />
Database version: 3.4
<br />
Package: dds.mongo.mid
<br />
Storage space: 10 GB
<br />
Replication factor: 3
<br />
Region: East China 1<br />
</Descriptions.Item>
</Descriptions>
<br />
<br />
<Descriptions
title="Custom Size"
size={this.state.size}
extra={<Button type="primary">Edit</Button>}
>
<Descriptions.Item label="Product">Cloud Database</Descriptions.Item>
<Descriptions.Item label="Billing">Prepaid</Descriptions.Item>
<Descriptions.Item label="time">18:00:00</Descriptions.Item>
<Descriptions.Item label="Amount">$80.00</Descriptions.Item>
<Descriptions.Item label="Discount">$20.00</Descriptions.Item>
<Descriptions.Item label="Official">$60.00</Descriptions.Item>
</Descriptions>
</div>
);
}
Example #19
| Source File: Profile.jsx From ResoBin with MIT License | 5 votes |
|
Profile = () => {
const profile = useSelector(selectUserProfile)
return (
<FlexVerticalGap>
<UserAvatar size={72} src={profile?.profilePicture} />
<UserInfo>
<h2>{profile.name}</h2>
<span>({profile.ldapId})</span>
</UserInfo>
<StyledDescriptions column={1} layout="vertical">
<Descriptions.Item label="Email">{profile.email}</Descriptions.Item>
<Descriptions.Item label="Department">
{profile.department}
</Descriptions.Item>
</StyledDescriptions>
<StyledDescriptions column={1} layout="vertical">
<Descriptions.Item label="Favorites courses">
{profile.favoriteCourses.length
? profile.favoriteCourses.join(', ')
: 'None'}
</Descriptions.Item>
<Descriptions.Item label="Resources requested for">
{profile.resourcesRequested.length
? profile.resourcesRequested.join(', ')
: 'None'}
</Descriptions.Item>
<Descriptions.Item label="Reviews requested for">
{profile.reviewsRequested.length
? profile.reviewsRequested.join(', ')
: 'None'}
</Descriptions.Item>
</StyledDescriptions>
</FlexVerticalGap>
)
}
Example #20
| Source File: index.jsx From prometheusPro with MIT License | 5 votes |
|
Step3 = props => {
const { data, dispatch } = props;
if (!data) {
return null;
}
const { payAccount, receiverAccount, receiverName, amount } = data;
const onFinish = () => {
if (dispatch) {
dispatch({
type: 'formAndstepForm/saveCurrentStep',
payload: 'info',
});
}
};
const information = (
<div className={styles.information}>
<Descriptions column={1}>
<Descriptions.Item label="付款账户"> {payAccount}</Descriptions.Item>
<Descriptions.Item label="收款账户"> {receiverAccount}</Descriptions.Item>
<Descriptions.Item label="收款人姓名"> {receiverName}</Descriptions.Item>
<Descriptions.Item label="转账金额">
<Statistic value={amount} suffix="元" />
</Descriptions.Item>
</Descriptions>
</div>
);
const extra = (
<>
<Button type="primary" onClick={onFinish}>
再转一笔
</Button>
<Button>查看账单</Button>
</>
);
return (
<Result
status="success"
title="操作成功"
subTitle="预计两小时内到账"
extra={extra}
className={styles.result}
>
{information}
</Result>
);
}
Example #21
| Source File: Swap.jsx From Tai-Shang-NFT-Wallet with MIT License | 4 votes |
|
function Swap({ selectedProvider, tokenListURI }) {
const [tokenIn, setTokenIn] = useState(defaultToken);
const [tokenOut, setTokenOut] = useState(defaultTokenOut);
const [exact, setExact] = useState();
const [amountIn, setAmountIn] = useState();
const [amountInMax, setAmountInMax] = useState();
const [amountOut, setAmountOut] = useState();
const [amountOutMin, setAmountOutMin] = useState();
const [trades, setTrades] = useState();
const [routerAllowance, setRouterAllowance] = useState();
const [balanceIn, setBalanceIn] = useState();
const [balanceOut, setBalanceOut] = useState();
const [slippageTolerance, setSlippageTolerance] = useState(
new Percent(Math.round(defaultSlippage * 100).toString(), "10000"),
);
const [timeLimit, setTimeLimit] = useState(defaultTimeLimit);
const [swapping, setSwapping] = useState(false);
const [approving, setApproving] = useState(false);
const [settingsVisible, setSettingsVisible] = useState(false);
const [swapModalVisible, setSwapModalVisible] = useState(false);
const [tokenList, setTokenList] = useState([]);
const [tokens, setTokens] = useState();
const [invertPrice, setInvertPrice] = useState(false);
const blockNumber = useBlockNumber(selectedProvider, 3000);
const signer = selectedProvider.getSigner();
const routerContract = new ethers.Contract(ROUTER_ADDRESS, IUniswapV2Router02ABI, signer);
const _tokenListUri = tokenListURI || "https://gateway.ipfs.io/ipns/tokens.uniswap.org";
const debouncedAmountIn = useDebounce(amountIn, 500);
const debouncedAmountOut = useDebounce(amountOut, 500);
const activeChainId = process.env.REACT_APP_NETWORK === "kovan" ? ChainId.KOVAN : ChainId.MAINNET;
useEffect(() => {
const getTokenList = async () => {
console.log(_tokenListUri);
try {
const tokenList = await fetch(_tokenListUri);
const tokenListJson = await tokenList.json();
const filteredTokens = tokenListJson.tokens.filter(function (t) {
return t.chainId === activeChainId;
});
const ethToken = WETH[activeChainId];
ethToken.name = "Ethereum";
ethToken.symbol = "ETH";
ethToken.logoURI =
"https://raw.githubusercontent.com/trustwallet/assets/master/blockchains/ethereum/assets/0xC02aaA39b223FE8D0A0e5C4F27eAD9083C756Cc2/logo.png";
const _tokenList = [ethToken, ...filteredTokens];
setTokenList(_tokenList);
const _tokens = tokenListToObject(_tokenList);
setTokens(_tokens);
} catch (e) {
console.log(e);
}
};
getTokenList();
}, [tokenListURI]);
const getTrades = async () => {
if (tokenIn && tokenOut && (amountIn || amountOut)) {
const pairs = arr => arr.map((v, i) => arr.slice(i + 1).map(w => [v, w])).flat();
const baseTokens = tokenList
.filter(function (t) {
return ["DAI", "USDC", "USDT", "COMP", "ETH", "MKR", "LINK", tokenIn, tokenOut].includes(t.symbol);
})
.map(el => {
return new Token(el.chainId, el.address, el.decimals, el.symbol, el.name);
});
const listOfPairwiseTokens = pairs(baseTokens);
const getPairs = async list => {
const listOfPromises = list.map(item => Fetcher.fetchPairData(item[0], item[1], selectedProvider));
return Promise.all(listOfPromises.map(p => p.catch(() => undefined)));
};
const listOfPairs = await getPairs(listOfPairwiseTokens);
let bestTrade;
if (exact === "in") {
setAmountInMax();
bestTrade = Trade.bestTradeExactIn(
listOfPairs.filter(item => item),
new TokenAmount(tokens[tokenIn], ethers.utils.parseUnits(amountIn.toString(), tokens[tokenIn].decimals)),
tokens[tokenOut],
{ maxNumResults: 3, maxHops: 1 },
);
if (bestTrade[0]) {
setAmountOut(bestTrade[0].outputAmount.toSignificant(6));
} else {
setAmountOut();
}
} else if (exact === "out") {
setAmountOutMin();
bestTrade = Trade.bestTradeExactOut(
listOfPairs.filter(item => item),
tokens[tokenIn],
new TokenAmount(tokens[tokenOut], ethers.utils.parseUnits(amountOut.toString(), tokens[tokenOut].decimals)),
{ maxNumResults: 3, maxHops: 1 },
);
if (bestTrade[0]) {
setAmountIn(bestTrade[0].inputAmount.toSignificant(6));
} else {
setAmountIn();
}
}
setTrades(bestTrade);
console.log(bestTrade);
}
};
useEffect(() => {
getTrades();
}, [tokenIn, tokenOut, debouncedAmountIn, debouncedAmountOut, slippageTolerance, selectedProvider]);
useEffect(() => {
if (trades && trades[0]) {
if (exact === "in") {
setAmountOutMin(trades[0].minimumAmountOut(slippageTolerance));
} else if (exact === "out") {
setAmountInMax(trades[0].maximumAmountIn(slippageTolerance));
}
}
}, [slippageTolerance, amountIn, amountOut, trades]);
const getBalance = async (_token, _account, _contract) => {
let newBalance;
if (_token === "ETH") {
newBalance = await selectedProvider.getBalance(_account);
} else {
newBalance = await makeCall("balanceOf", _contract, [_account]);
}
return newBalance;
};
const getAccountInfo = async () => {
if (tokens) {
const accountList = await selectedProvider.listAccounts();
if (tokenIn) {
const tempContractIn = new ethers.Contract(tokens[tokenIn].address, erc20Abi, selectedProvider);
const newBalanceIn = await getBalance(tokenIn, accountList[0], tempContractIn);
setBalanceIn(newBalanceIn);
let allowance;
if (tokenIn === "ETH") {
setRouterAllowance();
} else {
allowance = await makeCall("allowance", tempContractIn, [accountList[0], ROUTER_ADDRESS]);
setRouterAllowance(allowance);
}
}
if (tokenOut) {
const tempContractOut = new ethers.Contract(tokens[tokenOut].address, erc20Abi, selectedProvider);
const newBalanceOut = await getBalance(tokenOut, accountList[0], tempContractOut);
setBalanceOut(newBalanceOut);
}
}
};
usePoller(getAccountInfo, 6000);
const route = trades
? trades.length > 0
? trades[0].route.path.map(function (item) {
return item.symbol;
})
: []
: [];
const updateRouterAllowance = async newAllowance => {
setApproving(true);
try {
const tempContract = new ethers.Contract(tokens[tokenIn].address, erc20Abi, signer);
const result = await makeCall("approve", tempContract, [ROUTER_ADDRESS, newAllowance]);
console.log(result);
setApproving(false);
return true;
} catch (e) {
notification.open({
message: "Approval unsuccessful",
description: `Error: ${e.message}`,
});
}
};
const approveRouter = async () => {
const approvalAmount =
exact === "in"
? ethers.utils.hexlify(ethers.utils.parseUnits(amountIn.toString(), tokens[tokenIn].decimals))
: amountInMax.raw.toString();
console.log(approvalAmount);
const approval = updateRouterAllowance(approvalAmount);
if (approval) {
notification.open({
message: "Token transfer approved",
description: `You can now swap up to ${amountIn} ${tokenIn}`,
});
}
};
const removeRouterAllowance = async () => {
const approvalAmount = ethers.utils.hexlify(0);
console.log(approvalAmount);
const removal = updateRouterAllowance(approvalAmount);
if (removal) {
notification.open({
message: "Token approval removed",
description: `The router is no longer approved for ${tokenIn}`,
});
}
};
const executeSwap = async () => {
setSwapping(true);
try {
let args;
const metadata = {};
let call;
const deadline = Math.floor(Date.now() / 1000) + timeLimit;
const path = trades[0].route.path.map(function (item) {
return item.address;
});
console.log(path);
const accountList = await selectedProvider.listAccounts();
const address = accountList[0];
if (exact === "in") {
const _amountIn = ethers.utils.hexlify(ethers.utils.parseUnits(amountIn.toString(), tokens[tokenIn].decimals));
const _amountOutMin = ethers.utils.hexlify(ethers.BigNumber.from(amountOutMin.raw.toString()));
if (tokenIn === "ETH") {
call = "swapExactETHForTokens";
args = [_amountOutMin, path, address, deadline];
metadata.value = _amountIn;
} else {
call = tokenOut === "ETH" ? "swapExactTokensForETH" : "swapExactTokensForTokens";
args = [_amountIn, _amountOutMin, path, address, deadline];
}
} else if (exact === "out") {
const _amountOut = ethers.utils.hexlify(
ethers.utils.parseUnits(amountOut.toString(), tokens[tokenOut].decimals),
);
const _amountInMax = ethers.utils.hexlify(ethers.BigNumber.from(amountInMax.raw.toString()));
if (tokenIn === "ETH") {
call = "swapETHForExactTokens";
args = [_amountOut, path, address, deadline];
metadata.value = _amountInMax;
} else {
call = tokenOut === "ETH" ? "swapTokensForExactETH" : "swapTokensForExactTokens";
args = [_amountOut, _amountInMax, path, address, deadline];
}
}
console.log(call, args, metadata);
const result = await makeCall(call, routerContract, args, metadata);
console.log(result);
notification.open({
message: "Swap complete ?",
description: (
<>
<Text>{`Swapped ${tokenIn} for ${tokenOut}, transaction: `}</Text>
<Text copyable>{result.hash}</Text>
</>
),
});
setSwapping(false);
} catch (e) {
console.log(e);
setSwapping(false);
notification.open({
message: "Swap unsuccessful",
description: `Error: ${e.message}`,
});
}
};
const showSwapModal = () => {
setSwapModalVisible(true);
};
const handleSwapModalOk = () => {
setSwapModalVisible(false);
executeSwap();
};
const handleSwapModalCancel = () => {
setSwapModalVisible(false);
};
const insufficientBalance = balanceIn
? parseFloat(ethers.utils.formatUnits(balanceIn, tokens[tokenIn].decimals)) < amountIn
: null;
const inputIsToken = tokenIn !== "ETH";
const insufficientAllowance = !inputIsToken
? false
: routerAllowance
? parseFloat(ethers.utils.formatUnits(routerAllowance, tokens[tokenIn].decimals)) < amountIn
: null;
const formattedBalanceIn = balanceIn
? parseFloat(ethers.utils.formatUnits(balanceIn, tokens[tokenIn].decimals)).toPrecision(6)
: null;
const formattedBalanceOut = balanceOut
? parseFloat(ethers.utils.formatUnits(balanceOut, tokens[tokenOut].decimals)).toPrecision(6)
: null;
const metaIn =
tokens && tokenList && tokenIn
? tokenList.filter(function (t) {
return t.address === tokens[tokenIn].address;
})[0]
: null;
const metaOut =
tokens && tokenList && tokenOut
? tokenList.filter(function (t) {
return t.address === tokens[tokenOut].address;
})[0]
: null;
const cleanIpfsURI = uri => {
try {
return uri.replace("ipfs://", "https://ipfs.io/ipfs/");
} catch (e) {
console.log(e, uri);
return uri;
}
};
const logoIn = metaIn ? cleanIpfsURI(metaIn.logoURI) : null;
const logoOut = metaOut ? cleanIpfsURI(metaOut.logoURI) : null;
const rawPrice = trades && trades[0] ? trades[0].executionPrice : null;
const price = rawPrice ? rawPrice.toSignificant(7) : null;
const priceDescription = rawPrice
? invertPrice
? `${rawPrice.invert().toSignificant(7)} ${tokenIn} per ${tokenOut}`
: `${price} ${tokenOut} per ${tokenIn}`
: null;
const priceWidget = (
<Space>
<Text type="secondary">{priceDescription}</Text>
<Button
type="text"
onClick={() => {
setInvertPrice(!invertPrice);
}}
>
<RetweetOutlined />
</Button>
</Space>
);
const swapModal = (
<Modal title="Confirm swap" visible={swapModalVisible} onOk={handleSwapModalOk} onCancel={handleSwapModalCancel}>
<Row>
<Space>
<img src={logoIn} alt={tokenIn} width="30" />
{amountIn}
{tokenIn}
</Space>
</Row>
<Row justify="center" align="middle" style={{ width: 30 }}>
<span>↓</span>
</Row>
<Row>
<Space>
<img src={logoOut} alt={tokenOut} width="30" />
{amountOut}
{tokenOut}
</Space>
</Row>
<Divider />
<Row>{priceWidget}</Row>
<Row>
{trades && ((amountOutMin && exact === "in") || (amountInMax && exact === "out"))
? exact === "in"
? `Output is estimated. You will receive at least ${amountOutMin.toSignificant(
6,
)} ${tokenOut} or the transaction will revert.`
: `Input is estimated. You will sell at most ${amountInMax.toSignificant(
6,
)} ${tokenIn} or the transaction will revert.`
: null}
</Row>
</Modal>
);
return (
<Card
title={
<Space>
<img src="https://ipfs.io/ipfs/QmXttGpZrECX5qCyXbBQiqgQNytVGeZW5Anewvh2jc4psg" width="40" alt="uniswapLogo" />
<Typography>Uniswapper</Typography>
</Space>
}
extra={
<Button
type="text"
onClick={() => {
setSettingsVisible(true);
}}
>
<SettingOutlined />
</Button>
}
>
<Space direction="vertical">
<Row justify="center" align="middle">
<Card
size="small"
type="inner"
title={`From${exact === "out" && tokenIn && tokenOut ? " (estimate)" : ""}`}
extra={
<>
<img src={logoIn} alt={tokenIn} width="30" />
<Button
type="link"
onClick={() => {
setAmountOut();
setAmountIn(ethers.utils.formatUnits(balanceIn, tokens[tokenIn].decimals));
setAmountOutMin();
setAmountInMax();
setExact("in");
}}
>
{formattedBalanceIn}
</Button>
</>
}
style={{ width: 400, textAlign: "left" }}
>
<InputNumber
style={{ width: "160px" }}
min={0}
size="large"
value={amountIn}
onChange={e => {
setAmountOut();
setTrades();
setAmountIn(e);
setExact("in");
}}
/>
<Select
showSearch
value={tokenIn}
style={{ width: "120px" }}
size="large"
bordered={false}
defaultValue={defaultToken}
onChange={value => {
console.log(value);
if (value === tokenOut) {
console.log("switch!", tokenIn);
setTokenOut(tokenIn);
setAmountOut(amountIn);
setBalanceOut(balanceIn);
}
setTokenIn(value);
setTrades();
setAmountIn();
setExact("out");
setBalanceIn();
}}
filterOption={(input, option) => option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
optionFilterProp="children"
>
{tokenList.map(token => (
<Option key={token.symbol} value={token.symbol}>
{token.symbol}
</Option>
))}
</Select>
</Card>
</Row>
<Row justify="center" align="middle">
<Tooltip title={route.join("->")}>
<span>↓</span>
</Tooltip>
</Row>
<Row justify="center" align="middle">
<Card
size="small"
type="inner"
title={`To${exact === "in" && tokenIn && tokenOut ? " (estimate)" : ""}`}
extra={
<>
<img src={logoOut} width="30" alt={tokenOut} />
<Button type="text">{formattedBalanceOut}</Button>
</>
}
style={{ width: 400, textAlign: "left" }}
>
<InputNumber
style={{ width: "160px" }}
size="large"
min={0}
value={amountOut}
onChange={e => {
setAmountOut(e);
setAmountIn();
setTrades();
setExact("out");
}}
/>
<Select
showSearch
value={tokenOut}
style={{ width: "120px" }}
size="large"
bordered={false}
onChange={value => {
console.log(value, tokenIn, tokenOut);
if (value === tokenIn) {
console.log("switch!", tokenOut);
setTokenIn(tokenOut);
setAmountIn(amountOut);
setBalanceIn(balanceOut);
}
setTokenOut(value);
setExact("in");
setAmountOut();
setTrades();
setBalanceOut();
}}
filterOption={(input, option) => option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
optionFilterProp="children"
>
{tokenList.map(token => (
<Option key={token.symbol} value={token.symbol}>
{token.symbol}
</Option>
))}
</Select>
</Card>
</Row>
<Row justify="center" align="middle">
{priceDescription ? priceWidget : null}
</Row>
<Row justify="center" align="middle">
<Space>
{inputIsToken ? (
<Button size="large" loading={approving} disabled={!insufficientAllowance} onClick={approveRouter}>
{!insufficientAllowance && amountIn && amountOut ? "Approved" : "Approve"}
</Button>
) : null}
<Button
size="large"
loading={swapping}
disabled={insufficientAllowance || insufficientBalance || !amountIn || !amountOut}
onClick={showSwapModal}
>
{insufficientBalance ? "Insufficient balance" : "Swap!"}
</Button>
{swapModal}
</Space>
</Row>
</Space>
<Drawer
visible={settingsVisible}
onClose={() => {
setSettingsVisible(false);
}}
width={500}
>
<Descriptions title="Details" column={1} style={{ textAlign: "left" }}>
<Descriptions.Item label="blockNumber">{blockNumber}</Descriptions.Item>
<Descriptions.Item label="routerAllowance">
<Space>
{routerAllowance ? ethers.utils.formatUnits(routerAllowance, tokens[tokenIn].decimals) : null}
{routerAllowance > 0 ? <Button onClick={removeRouterAllowance}>Remove Allowance</Button> : null}
</Space>
</Descriptions.Item>
<Descriptions.Item label="route">{route.join("->")}</Descriptions.Item>
<Descriptions.Item label="exact">{exact}</Descriptions.Item>
<Descriptions.Item label="bestPrice">
{trades ? (trades.length > 0 ? trades[0].executionPrice.toSignificant(6) : null) : null}
</Descriptions.Item>
<Descriptions.Item label="nextMidPrice">
{trades ? (trades.length > 0 ? trades[0].nextMidPrice.toSignificant(6) : null) : null}
</Descriptions.Item>
<Descriptions.Item label="priceImpact">
{trades ? (trades.length > 0 ? trades[0].priceImpact.toSignificant(6) : null) : null}
</Descriptions.Item>
<Descriptions.Item label="slippageTolerance">
<InputNumber
defaultValue={defaultSlippage}
min={0}
max={100}
precision={2}
formatter={value => `${value}%`}
parser={value => value.replace("%", "")}
onChange={value => {
console.log(value);
const slippagePercent = new Percent(Math.round(value * 100).toString(), "10000");
setSlippageTolerance(slippagePercent);
}}
/>
</Descriptions.Item>
<Descriptions.Item label="amountInMax">{amountInMax ? amountInMax.toExact() : null}</Descriptions.Item>
<Descriptions.Item label="amountOutMin">{amountOutMin ? amountOutMin.toExact() : null}</Descriptions.Item>
<Descriptions.Item label="timeLimitInSeconds">
<InputNumber
min={0}
max={3600}
defaultValue={defaultTimeLimit}
onChange={value => {
console.log(value);
setTimeLimit(value);
}}
/>
</Descriptions.Item>
</Descriptions>
</Drawer>
</Card>
);
}
Example #22
| Source File: ProjectDescription.jsx From node-project-manager with Apache License 2.0 | 4 votes |
|
ProjectDescription = ({ project,projects,removeProject,selectedProject}) => {
const [edited, setEdited] = useState(false);
const [name, setName] = useState(project.nombre);
const [description, setDescription] = useState(project.descripcion);
const [editName, setEditName] = useState(true);
const [editDesc, setEditDesc] = useState(true);
const [showUserEditForm, setShowUserEditForm] = useState(false);
const [showTeacherForm, setShowTeacherForm] = useState(false);
const [showTechForm, setShowTechForm] = useState(false);
const [showSaved, setShowSaved] = useState(true);
const [alertMessage, setAlertMessage] = useState("");
const [typeMessage, setTypeMessage] = useState("");
const openNotification = result => {
// TODO :
switch (result.type){
case "success":
notification.success({
message: `${result.message}`,
placement:'bottomRight'
});
break;
default:
notification.error({
message: `Something went wrong`,
placement:'bottomRight'
});
}
};
const saveProject = async () => {
project.nombre=name;
project.descripcion=description;
const result = await Http.post(project,'/api/projects/updateProject/'+project.id);
if(result){
openNotification(result);
}
setEdited(false);
setEditDesc(true);
setEditName(true);
}
const deleteProject = async() =>{
const result = await Http.get('/api/projects/deleteProject/'+project.id);
if(result){
console.log(result);
selectedProject(projects[1]);
removeProject(project.id);
}
}
//Cada vez que cambiamos de proyecto, seteamos las variables al valor de cada proyecto
useEffect(() => {
setEditName(true);
setEditDesc(true);
setShowSaved(false);
setName(project.nombre);
setDescription(project.descripcion);
setAlertMessage(" ");
setTypeMessage(" ");
}, [project]);
return (
<div className="descripciones">
<Descriptions className="itemsDescripciones"
title={
<span className="titulo">
{project.nombre}
<div className="projectActions">
<Button
type="danger"
onClick={deleteProject}
>
<DeleteOutlined /> Borrar</Button>
</div>
{showSaved ? <div> <Modal
title="Usuario editado"
visible={showSaved}
destroyOnClose={true}
okText="Salir"
onOk={() => {
setShowSaved(!showSaved);
}}
cancelText="Cancelar"
onCancel={() => {
setShowSaved(!showSaved);
}}
><Alert className="alertaUpdate" message={alertMessage} type={typeMessage} /> </Modal></div>:""}
{edited ? (
<span className="botonsitoGuardar">
<Button
type="primary"
shape="round"
icon={<SaveOutlined />}
onClick={saveProject}
>
Guardar
</Button>
</span>
) : (
""
)}
</span>
}
bordered
column={{ xxl: 4, xl: 4, lg: 3, md: 3, sm: 2, xs: 2 }}
>
<Descriptions.Item
className="nombreProyecto"
label={
<span>
Nombre Proyecto
<EditOutlined
onClick={() => {
project.seleccionado = "";
setEditName(!editName);
}}
/>
</span>
}
>
{editName ? (
<span onDoubleClick={()=>{project.seleccionado="";setEditName(!editName)}}>{project.nombre}</span>
) : (
<Input
defaultValue={project.nombre}
onChange={(e) => {
setName(e.target.value);
setEdited(true);
}}
size="small"
/>
)}
</Descriptions.Item>
<Descriptions.Item className="alumnos" label={<span> Alumnos <EditOutlined
onClick={()=>{
setShowUserEditForm(!showUserEditForm);
}}/></span>}>
<Modal
title="Editar Alumnos"
visible={showUserEditForm}
destroyOnClose={true}
okText="Salir"
onOk={() => {
setEdited(true);
setShowUserEditForm(!showUserEditForm);
}}
cancelText="Cancelar"
onCancel={() => {
setShowUserEditForm(!showUserEditForm);
}}
>
<TransferFormStudents/>
</Modal>
{project.usuarios.alumnos
? project.usuarios.alumnos.map((usr) => {
usr.icon = require("../../img/" + usr.avatar);
return (
<Popover content={contentPopOverUsers(usr)} key={usr.id}>
<Avatar src={usr.icon} />
</Popover>
);
})
: ""}
</Descriptions.Item>
<Descriptions.Item className="profesores"label={<span>Profesores <EditOutlined
onClick={()=>{
setShowTeacherForm(!showTeacherForm);
}}/></span>}>
<Modal
title="Editar Alumnos"
visible={showTeacherForm}
destroyOnClose={true}
okText="Salir"
onOk={() => {
setEdited(true);
setShowTeacherForm(!showTeacherForm);
}}
cancelText="Cancelar"
onCancel={() => {
setShowTeacherForm(!showTeacherForm);
}}
>
<TransferFormTeachers/>
</Modal>
{project.usuarios.profesores
? project.usuarios.profesores.map((usr) => {
usr.icon = require("../../img/" + usr.avatar);
return (
<Popover content={contentPopOverUsers(usr)} key={usr.id}>
<Avatar src={usr.icon} />
</Popover>
);
})
: ""}
</Descriptions.Item>
<Descriptions.Item className="tecnologias" label={<span>Tecnologías <EditOutlined
onClick={()=>{
setShowTechForm(!showTechForm);
}}/></span>}>
<Modal
title="Editar usuarios"
visible={showTechForm}
destroyOnClose={true}
okText="Salir"
onOk={() => {
setEdited(true);
setShowTechForm(!showTechForm);
}}
cancelText="Cancelar"
onCancel={() => {
setShowTechForm(!showTechForm);
}}
>
<TransferTechForm/>
</Modal>
{project.tecnologias
? project.tecnologias.map((tech) => {
tech.icon = require("../../img/techs/" + tech.logo);
return (
<Popover content={contentPopOverTechs(tech)} key={tech.id}>
<Avatar src={tech.icon} />
</Popover>
);
})
: ""}
</Descriptions.Item>
<Descriptions.Item
className="descripciones"
label={
<span>
Descripcion
<EditOutlined
onClick={() => {
project.seleccionado = "";
setEditDesc(!editDesc);
}}
/>
</span>
}
>
{editDesc ? (
<pre onDoubleClick={()=>{project.seleccionado = ""; setEditDesc(!editDesc)}}>{project.descripcion}</pre>
) : (
<Input.TextArea
defaultValue={project.descripcion}
onChange={(e) => {
setDescription(e.target.value);
setEdited(true);
}
}
size="small"
/>
)}
</Descriptions.Item>
</Descriptions>
</div>
);
}
Example #23
| Source File: Swap.jsx From moonshot with MIT License | 4 votes |
|
function Swap({ selectedProvider, tokenListURI }) {
const [tokenIn, setTokenIn] = useState(defaultToken)
const [tokenOut, setTokenOut] = useState(defaultTokenOut)
const [exact, setExact] = useState()
const [amountIn, setAmountIn] = useState()
const [amountInMax, setAmountInMax] = useState()
const [amountOut, setAmountOut] = useState()
const [amountOutMin, setAmountOutMin] = useState()
const [trades, setTrades] = useState()
const [routerAllowance, setRouterAllowance] = useState()
const [balanceIn, setBalanceIn] = useState()
const [balanceOut, setBalanceOut] = useState()
const [slippageTolerance, setSlippageTolerance] = useState(new Percent(Math.round(defaultSlippage*100).toString(), "10000"))
const [timeLimit, setTimeLimit] = useState(defaultTimeLimit)
const [swapping, setSwapping] = useState(false)
const [approving, setApproving] = useState(false)
const [settingsVisible, setSettingsVisible] = useState(false)
const [swapModalVisible, setSwapModalVisible] = useState(false)
const [tokenList, setTokenList] = useState([])
const [tokens, setTokens] = useState()
const [invertPrice, setInvertPrice] = useState(false)
let blockNumber = useBlockNumber(selectedProvider, 3000)
let signer = selectedProvider.getSigner()
let routerContract = new ethers.Contract(ROUTER_ADDRESS, IUniswapV2Router02ABI, signer);
let _tokenListUri = tokenListURI ? tokenListURI : 'https://gateway.ipfs.io/ipns/tokens.uniswap.org'
const debouncedAmountIn = useDebounce(amountIn, 500);
const debouncedAmountOut = useDebounce(amountOut, 500);
const activeChainId = (process.env.REACT_APP_NETWORK === 'kovan' ? ChainId.KOVAN : ChainId.MAINNET)
useEffect(() => {
const getTokenList = async () => {
console.log(_tokenListUri)
try {
let tokenList = await fetch(_tokenListUri)
let tokenListJson = await tokenList.json()
let filteredTokens = tokenListJson.tokens.filter(function (t) {
return t.chainId === activeChainId
})
let ethToken = WETH[activeChainId]
ethToken.name = 'Ethereum'
ethToken.symbol = 'ETH'
ethToken.logoURI = "https://raw.githubusercontent.com/trustwallet/assets/master/blockchains/ethereum/assets/0xC02aaA39b223FE8D0A0e5C4F27eAD9083C756Cc2/logo.png"
let _tokenList = [ethToken, ...filteredTokens]
setTokenList(_tokenList)
let _tokens = tokenListToObject(_tokenList)
setTokens(_tokens)
} catch (e) {
console.log(e)
}
}
getTokenList()
},[tokenListURI])
const getTrades = async () => {
if(tokenIn && tokenOut && (amountIn || amountOut)) {
let pairs = (arr) => arr.map( (v, i) => arr.slice(i + 1).map(w => [v,w]) ).flat();
let baseTokens = tokenList.filter(function (t) {
return ['DAI', 'USDC', 'USDT', 'COMP', 'ETH', 'MKR', 'LINK', tokenIn, tokenOut].includes(t.symbol)
}).map((el) => {
return new Token(el.chainId, el.address, el.decimals, el.symbol, el.name)
})
let listOfPairwiseTokens = pairs(baseTokens)
const getPairs = async (list) => {
let listOfPromises = list.map(item => Fetcher.fetchPairData(item[0], item[1], selectedProvider))
return Promise.all(listOfPromises.map(p => p.catch(() => undefined)));
}
let listOfPairs = await getPairs(listOfPairwiseTokens)
let bestTrade
if(exact === 'in') {
setAmountInMax()
bestTrade = Trade.bestTradeExactIn(
listOfPairs.filter(item => item),
new TokenAmount(tokens[tokenIn], parseUnits(amountIn.toString(), tokens[tokenIn].decimals)),
tokens[tokenOut], { maxNumResults: 3, maxHops: 1 })
if(bestTrade[0]) {
setAmountOut(bestTrade[0].outputAmount.toSignificant(6))
} else { setAmountOut() }
} else if (exact === 'out') {
setAmountOutMin()
bestTrade = Trade.bestTradeExactOut(
listOfPairs.filter(item => item),
tokens[tokenIn],
new TokenAmount(tokens[tokenOut], parseUnits(amountOut.toString(), tokens[tokenOut].decimals)),
{ maxNumResults: 3, maxHops: 1 })
if(bestTrade[0]) {
setAmountIn(bestTrade[0].inputAmount.toSignificant(6))
} else { setAmountIn() }
}
setTrades(bestTrade)
console.log(bestTrade)
}
}
useEffect(() => {
getTrades()
},[tokenIn, tokenOut, debouncedAmountIn, debouncedAmountOut, slippageTolerance, selectedProvider])
useEffect(() => {
if(trades && trades[0]) {
if(exact === 'in') {
setAmountOutMin(trades[0].minimumAmountOut(slippageTolerance))
} else if (exact === 'out') {
setAmountInMax(trades[0].maximumAmountIn(slippageTolerance))
}
}
}, [slippageTolerance, amountIn, amountOut, trades])
const getBalance = async (_token, _account, _contract) => {
let newBalance
if(_token === 'ETH') {
newBalance = await selectedProvider.getBalance(_account)
} else {
newBalance = await makeCall('balanceOf', _contract, [_account])
}
return newBalance
}
const getAccountInfo = async () => {
if(tokens) {
let accountList = await selectedProvider.listAccounts()
if(tokenIn) {
let tempContractIn = new ethers.Contract(tokens[tokenIn].address, erc20Abi, selectedProvider);
let newBalanceIn = await getBalance(tokenIn, accountList[0], tempContractIn)
setBalanceIn(newBalanceIn)
let allowance
if(tokenIn === 'ETH') {
setRouterAllowance()
} else {
allowance = await makeCall('allowance',tempContractIn,[accountList[0],ROUTER_ADDRESS])
setRouterAllowance(allowance)
}
}
if(tokenOut) {
let tempContractOut = new ethers.Contract(tokens[tokenOut].address, erc20Abi, selectedProvider);
let newBalanceOut = await getBalance(tokenOut, accountList[0], tempContractOut)
setBalanceOut(newBalanceOut)
}
}
}
usePoller(getAccountInfo, 6000)
let route = trades ? (trades.length > 0 ? trades[0].route.path.map(function(item) {
return item['symbol'];
}) : []) : []
const updateRouterAllowance = async (newAllowance) => {
setApproving(true)
try {
let tempContract = new ethers.Contract(tokens[tokenIn].address, erc20Abi, signer);
let result = await makeCall('approve', tempContract, [ROUTER_ADDRESS, newAllowance])
console.log(result)
setApproving(false)
return true
} catch(e) {
notification.open({
message: 'Approval unsuccessful',
description:
`Error: ${e.message}`,
});
}
}
const approveRouter = async () => {
let approvalAmount = exact === 'in' ? ethers.utils.hexlify(parseUnits(amountIn.toString(), tokens[tokenIn].decimals)) : amountInMax.raw.toString()
console.log(approvalAmount)
let approval = updateRouterAllowance(approvalAmount)
if(approval) {
notification.open({
message: 'Token transfer approved',
description:
`You can now swap up to ${amountIn} ${tokenIn}`,
});
}
}
const removeRouterAllowance = async () => {
let approvalAmount = ethers.utils.hexlify(0)
console.log(approvalAmount)
let removal = updateRouterAllowance(approvalAmount)
if(removal) {
notification.open({
message: 'Token approval removed',
description:
`The router is no longer approved for ${tokenIn}`,
});
}
}
const executeSwap = async () => {
setSwapping(true)
try {
let args
let metadata = {}
let call
let deadline = Math.floor(Date.now() / 1000) + timeLimit
let path = trades[0].route.path.map(function(item) {
return item['address'];
})
console.log(path)
let accountList = await selectedProvider.listAccounts()
let address = accountList[0]
if (exact === 'in') {
let _amountIn = ethers.utils.hexlify(parseUnits(amountIn.toString(), tokens[tokenIn].decimals))
let _amountOutMin = ethers.utils.hexlify(ethers.BigNumber.from(amountOutMin.raw.toString()))
if (tokenIn === 'ETH') {
call = 'swapExactETHForTokens'
args = [_amountOutMin, path, address, deadline]
metadata['value'] = _amountIn
} else {
call = tokenOut === 'ETH' ? 'swapExactTokensForETH' : 'swapExactTokensForTokens'
args = [_amountIn, _amountOutMin, path, address, deadline]
}
} else if (exact === 'out') {
let _amountOut = ethers.utils.hexlify(parseUnits(amountOut.toString(), tokens[tokenOut].decimals))
let _amountInMax = ethers.utils.hexlify(ethers.BigNumber.from(amountInMax.raw.toString()))
if (tokenIn === 'ETH') {
call = 'swapETHForExactTokens'
args = [_amountOut, path, address, deadline]
metadata['value'] = _amountInMax
} else {
call = tokenOut === 'ETH' ? 'swapTokensForExactETH' : 'swapTokensForExactTokens'
args = [_amountOut, _amountInMax, path, address, deadline]
}
}
console.log(call, args, metadata)
let result = await makeCall(call, routerContract, args, metadata)
console.log(result)
notification.open({
message: 'Swap complete ?',
description:
<><Text>{`Swapped ${tokenIn} for ${tokenOut}, transaction: `}</Text><Text copyable>{result.hash}</Text></>,
});
setSwapping(false)
} catch (e) {
console.log(e)
setSwapping(false)
notification.open({
message: 'Swap unsuccessful',
description:
`Error: ${e.message}`,
});
}
}
const showSwapModal = () => {
setSwapModalVisible(true);
};
const handleSwapModalOk = () => {
setSwapModalVisible(false);
executeSwap()
};
const handleSwapModalCancel = () => {
setSwapModalVisible(false);
};
let insufficientBalance = balanceIn ? parseFloat(formatUnits(balanceIn,tokens[tokenIn].decimals)) < amountIn : null
let inputIsToken = tokenIn !== 'ETH'
let insufficientAllowance = !inputIsToken ? false : routerAllowance ? parseFloat(formatUnits(routerAllowance,tokens[tokenIn].decimals)) < amountIn : null
let formattedBalanceIn = balanceIn?parseFloat(formatUnits(balanceIn,tokens[tokenIn].decimals)).toPrecision(6):null
let formattedBalanceOut = balanceOut?parseFloat(formatUnits(balanceOut,tokens[tokenOut].decimals)).toPrecision(6):null
let metaIn = tokens && tokenList && tokenIn ? tokenList.filter(function (t) {
return t.address === tokens[tokenIn].address
})[0] : null
let metaOut = tokens && tokenList && tokenOut ? tokenList.filter(function (t) {
return t.address === tokens[tokenOut].address
})[0] : null
const cleanIpfsURI = (uri) => {
try {
return (uri).replace('ipfs://','https://ipfs.io/ipfs/')
} catch(e) {
console.log(e, uri)
return uri
}
}
let logoIn = metaIn?cleanIpfsURI(metaIn.logoURI):null
let logoOut = metaOut?cleanIpfsURI(metaOut.logoURI):null
let rawPrice = trades&&trades[0]?trades[0].executionPrice:null
let price = rawPrice?rawPrice.toSignificant(7):null
let priceDescription = rawPrice ? (invertPrice ? `${(rawPrice.invert()).toSignificant(7)} ${tokenIn} per ${tokenOut}` : `${price} ${tokenOut} per ${tokenIn}`) : null
let priceWidget = (
<Space>
<Text type="secondary">{priceDescription}</Text>
<Button type="text" onClick={() => {setInvertPrice(!invertPrice)}}><RetweetOutlined /></Button>
</Space>
)
let swapModal = (
<Modal title="Confirm swap" visible={swapModalVisible} onOk={handleSwapModalOk} onCancel={handleSwapModalCancel}>
<Row><Space><img src={logoIn} alt={tokenIn} width='30'/>{amountIn}{tokenIn}</Space></Row>
<Row justify='center' align='middle' style={{width:30}}><span>↓</span></Row>
<Row><Space><img src={logoOut} alt={tokenOut} width='30'/>{amountOut}{tokenOut}</Space></Row>
<Divider/>
<Row>{priceWidget}</Row>
<Row>{trades&&((amountOutMin && exact==='in') || (amountInMax && exact==='out'))?(exact==='in'?`Output is estimated. You will receive at least ${amountOutMin.toSignificant(6)} ${tokenOut} or the transaction will revert.`:`Input is estimated. You will sell at most ${amountInMax.toSignificant(6)} ${tokenIn} or the transaction will revert.`):null}</Row>
</Modal>
)
return (
<Card title={<Space><img src="https://ipfs.io/ipfs/QmXttGpZrECX5qCyXbBQiqgQNytVGeZW5Anewvh2jc4psg" width='40' alt='uniswapLogo'/><Typography>Uniswapper</Typography></Space>} extra={<Button type="text" onClick={() => {setSettingsVisible(true)}}><SettingOutlined /></Button>}>
<Space direction="vertical">
<Row justify="center" align="middle">
<Card size="small" type="inner" title={`From${exact==='out' && tokenIn && tokenOut?' (estimate)':''}`} extra={<><img src={logoIn} alt={tokenIn} width='30'/><Button type="link" onClick={() => {
setAmountOut()
setAmountIn(formatUnits(balanceIn,tokens[tokenIn].decimals))
setAmountOutMin()
setAmountInMax()
setExact('in')
}}>{formattedBalanceIn}</Button></>} style={{ width: 400, textAlign: 'left' }}>
<InputNumber style={{width: '160px'}} min={0} size={'large'} value={amountIn} onChange={(e) => {
setAmountOut()
setTrades()
setAmountIn(e)
setExact('in')
}}/>
<Select showSearch value={tokenIn} style={{width: '120px'}} size={'large'} bordered={false} defaultValue={defaultToken} onChange={(value) => {
console.log(value)
if(value===tokenOut) {
console.log('switch!', tokenIn)
setTokenOut(tokenIn)
setAmountOut(amountIn)
setBalanceOut(balanceIn)
}
setTokenIn(value)
setTrades()
setAmountIn()
setExact('out')
setBalanceIn()
}} filterOption={(input, option) =>
option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
} optionFilterProp="children">
{tokenList.map(token => (
<Option key={token.symbol} value={token.symbol}>{token.symbol}</Option>
))}
</Select>
</Card>
</Row>
<Row justify="center" align="middle">
<Tooltip title={route.join("->")}><span>↓</span></Tooltip>
</Row>
<Row justify="center" align="middle">
<Card size="small" type="inner" title={`To${exact==='in' && tokenIn && tokenOut?' (estimate)':''}`} extra={<><img src={logoOut} width='30' alt={tokenOut}/><Button type="text">{formattedBalanceOut}</Button></>} style={{ width: 400, textAlign: 'left' }}>
<InputNumber style={{width: '160px'}} size={'large'} min={0} value={amountOut} onChange={(e) => {
setAmountOut(e)
setAmountIn()
setTrades()
setExact('out')
}}/>
<Select showSearch value={tokenOut} style={{width: '120px'}} size={'large'} bordered={false} onChange={(value) => {
console.log(value, tokenIn, tokenOut)
if(value===tokenIn) {
console.log('switch!', tokenOut)
setTokenIn(tokenOut)
setAmountIn(amountOut)
setBalanceIn(balanceOut)
}
setTokenOut(value)
setExact('in')
setAmountOut()
setTrades()
setBalanceOut()
}} filterOption={(input, option) =>
option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
} optionFilterProp="children">
{tokenList.map(token => (
<Option key={token.symbol} value={token.symbol}>{token.symbol}</Option>
))}
</Select>
</Card>
</Row>
<Row justify="center" align="middle">
{priceDescription?priceWidget:null}
</Row>
<Row justify="center" align="middle">
<Space>
{inputIsToken?<Button size="large" loading={approving} disabled={!insufficientAllowance} onClick={approveRouter}>{(!insufficientAllowance&&amountIn&&amountOut)?'Approved':'Approve'}</Button>:null}
<Button size="large" loading={swapping} disabled={insufficientAllowance || insufficientBalance || !amountIn || !amountOut} onClick={showSwapModal}>{insufficientBalance?'Insufficient balance':'Swap!'}</Button>
{swapModal}
</Space>
</Row>
</Space>
<Drawer visible={settingsVisible} onClose={() => { setSettingsVisible(false) }} width={500}>
<Descriptions title="Details" column={1} style={{textAlign: 'left'}}>
<Descriptions.Item label="blockNumber">{blockNumber}</Descriptions.Item>
<Descriptions.Item label="routerAllowance"><Space>{routerAllowance?formatUnits(routerAllowance,tokens[tokenIn].decimals):null}{routerAllowance>0?<Button onClick={removeRouterAllowance}>Remove Allowance</Button>:null}</Space></Descriptions.Item>
<Descriptions.Item label="route">{route.join("->")}</Descriptions.Item>
<Descriptions.Item label="exact">{exact}</Descriptions.Item>
<Descriptions.Item label="bestPrice">{trades ? (trades.length > 0 ? trades[0].executionPrice.toSignificant(6) : null) : null}</Descriptions.Item>
<Descriptions.Item label="nextMidPrice">{trades ? (trades.length > 0 ? trades[0].nextMidPrice.toSignificant(6) : null) : null}</Descriptions.Item>
<Descriptions.Item label="priceImpact">{trades ? (trades.length > 0 ? trades[0].priceImpact.toSignificant(6) : null) : null}</Descriptions.Item>
<Descriptions.Item label="slippageTolerance">{<InputNumber
defaultValue={defaultSlippage}
min={0}
max={100}
precision={2}
formatter={value => `${value}%`}
parser={value => value.replace('%', '')}
onChange={(value) => {
console.log(value)
let slippagePercent = new Percent(Math.round(value*100).toString(), "10000")
setSlippageTolerance(slippagePercent)
}}
/>}</Descriptions.Item>
<Descriptions.Item label="amountInMax">{amountInMax?amountInMax.toExact():null}</Descriptions.Item>
<Descriptions.Item label="amountOutMin">{amountOutMin?amountOutMin.toExact():null}</Descriptions.Item>
<Descriptions.Item label="timeLimitInSeconds">{<InputNumber
min={0}
max={3600}
defaultValue={defaultTimeLimit}
onChange={(value) => {
console.log(value)
setTimeLimit(value)
}}
/>}</Descriptions.Item>
</Descriptions>
</Drawer>
</Card>
)
}
Example #24
| Source File: index.jsx From juno with Apache License 2.0 | 4 votes |
|
render() {
const { appInfo = {}, appIdcList = [], appList = [], minervaVersion, switchIdc } = this.props;
const {
aid,
gid,
name,
appName,
createTime,
updateTime,
level,
lang,
bizDomain,
createdBy,
updatedBy,
httpPort,
rpcPort,
healthPort,
gitUrl,
users,
} = appInfo || {};
let { env, app, idcCode } = this.state;
if (app === ':app') {
app = '选择应用';
}
if (env === ':env') {
env = '选择环境';
}
let dataSource = [];
appList.forEach((value) => {
dataSource.push(<Option value={value.appName}>{value.appName}</Option>);
});
let envOpt = [];
let idcOpt = [];
let envRepeatMap = [];
envRepeatMap.push('prod');
envOpt.push(
<Option value="prod">
<Tag color="#f50">prod</Tag>
</Option>,
);
appIdcList.forEach((value) => {
if (!this.isRepeat(envRepeatMap, value.env)) {
envRepeatMap.push(value.env);
switch (value.env) {
case 'dev':
envOpt.push(
<Option value={value.env}>
<Tag color="#87d068">{value.env}</Tag>
</Option>,
);
break;
case 'live':
envOpt.push(
<Option value={value.env}>
<Tag color="#2db7f5">{value.env}</Tag>
</Option>,
);
break;
case 'pre':
envOpt.push(
<Option value={value.env}>
<Tag color="#108ee9">{value.env}</Tag>
</Option>,
);
break;
case 'stress':
envOpt.push(
<Option value={value.env}>
<Tag color="#f50">{value.env}</Tag>
</Option>,
);
break;
case 'gray':
envOpt.push(
<Option value={value.env}>
<Tag color="#f50">{value.env}</Tag>
</Option>,
);
break;
case 'pub':
envOpt.push(
<Option value={value.env}>
<Tag color="#f50">{value.env}</Tag>
</Option>,
);
break;
case 'prod':
envOpt.push(
<Option value={value.env}>
<Tag color="#f50">{value.env}</Tag>
</Option>,
);
break;
default:
envOpt.push(<Option value={value.env}>{value.env}</Option>);
}
}
if (value.env === env) {
if (IdcCodeMap[value.idcCode] !== undefined) {
idcOpt.push(<Option value={value.idcCode}>{IdcCodeMap[value.idcCode]}</Option>);
}
}
});
return (
<Row>
<Col span={11} style={{ float: 'right' }}>
<Descriptions size="small" column={5}>
<Descriptions.Item label="应用ID">{aid}</Descriptions.Item>
<Descriptions.Item label="项目域">{bizDomain}</Descriptions.Item>
<Descriptions.Item label="HTTP">{httpPort}</Descriptions.Item>
<Descriptions.Item label="gRPC">{rpcPort}</Descriptions.Item>
<Descriptions.Item label="Govern">{healthPort}</Descriptions.Item>
<Descriptions.Item label="超链接">
<a href={gitUrl} target="_blank">
<Icon type="gitlab" />
</a>
</Descriptions.Item>
<Descriptions.Item label="负责人">{users}</Descriptions.Item>
<Descriptions.Item label="Minerva">{minervaVersion}</Descriptions.Item>
<Descriptions.Item>
<Tooltip title={name}>
<span>{appName}</span>
</Tooltip>
</Descriptions.Item>
</Descriptions>
</Col>
</Row>
);
}
Example #25
| Source File: Stats.js From next-terminal with GNU Affero General Public License v3.0 | 4 votes |
|
render() {
const upDays = parseInt((this.state.stats.uptime / 1000 / 60 / 60 / 24).toString());
const memUsage = ((this.state.stats.memTotal - this.state.stats.memAvailable) * 100 / this.state.stats.memTotal).toFixed(2);
let network = this.state.stats.network;
let fileSystems = this.state.stats.fileSystems;
let swapUsage = 0;
if (this.state.stats.swapTotal !== 0) {
swapUsage = ((this.state.stats.swapTotal - this.state.stats.swapFree) * 100 / this.state.stats.swapTotal).toFixed(2)
}
return (
<div>
<Descriptions title="系统信息" column={4}>
<Descriptions.Item label="主机名称">{this.state.stats.hostname}</Descriptions.Item>
<Descriptions.Item label="运行时长">{upDays}天</Descriptions.Item>
</Descriptions>
<Row justify="center" align="middle">
<Col>
<Descriptions title="负载" column={4}>
<Descriptions.Item label='Load1'>
<div className='description-content'>
<Progress percent={this.state.stats.load1} steps={20} size={'small'}/>
</div>
</Descriptions.Item>
<Descriptions.Item label='Load5'>
<div className='description-content'>
<Progress percent={this.state.stats.load5} steps={20} size={'small'}/>
</div>
</Descriptions.Item>
<Descriptions.Item label='Load10'>
<div className='description-content'>
<Progress percent={this.state.stats.load10} steps={20} size={'small'}/>
</div>
</Descriptions.Item>
</Descriptions>
</Col>
</Row>
<Descriptions title="CPU" column={4}>
<Descriptions.Item label="用户">
{this.state.stats.cpu['user'].toFixed(2)}%
</Descriptions.Item>
<Descriptions.Item label="系统">
{this.state.stats.cpu['system'].toFixed(2)}%
</Descriptions.Item>
<Descriptions.Item label="空闲">
{this.state.stats.cpu['idle'].toFixed(2)}%
</Descriptions.Item>
<Descriptions.Item label="IO等待">
{this.state.stats.cpu['ioWait'].toFixed(2)}%
</Descriptions.Item>
<Descriptions.Item label="硬中断">
{this.state.stats.cpu['irq'].toFixed(2)}%
</Descriptions.Item>
<Descriptions.Item label="软中断">
{this.state.stats.cpu['softIrq'].toFixed(2)}%
</Descriptions.Item>
<Descriptions.Item label="nice">
{this.state.stats.cpu['nice'].toFixed(2)}%
</Descriptions.Item>
<Descriptions.Item label="guest">
{this.state.stats.cpu['guest'].toFixed(2)}%
</Descriptions.Item>
</Descriptions>
<Descriptions title="内存" column={4}>
<Descriptions.Item label="物理内存大小">{renderSize(this.state.stats.memTotal)}</Descriptions.Item>
<Descriptions.Item label="剩余内存大小">{renderSize(this.state.stats.memFree)}</Descriptions.Item>
<Descriptions.Item label="可用内存大小">{renderSize(this.state.stats.memAvailable)}</Descriptions.Item>
<Descriptions.Item label="使用占比">
<div className='description-content'>
<Progress percent={memUsage} steps={20} size={'small'}/>
</div>
</Descriptions.Item>
<Descriptions.Item
label="Buffers/Cached">{renderSize(this.state.stats.memBuffers)} / {renderSize(this.state.stats.memCached)}</Descriptions.Item>
<Descriptions.Item
label="交换内存大小">{renderSize(this.state.stats.swapTotal)}</Descriptions.Item>
<Descriptions.Item
label="交换内存剩余">{renderSize(this.state.stats.swapFree)}</Descriptions.Item>
<Descriptions.Item label="使用占比">
<div className='description-content'>
<Progress percent={swapUsage} steps={20} size={'small'}/>
</div>
</Descriptions.Item>
</Descriptions>
<Descriptions title="磁盘" column={4}>
{
fileSystems.map((item, index) => {
return (
<React.Fragment key={'磁盘' + index}>
<Descriptions.Item label="挂载路径" key={'挂载路径' + index}>
{item['mountPoint']}
</Descriptions.Item>
<Descriptions.Item label="已经使用" key={'已经使用' + index}>
{renderSize(item['used'])}
</Descriptions.Item>
<Descriptions.Item label="剩余空间" key={'剩余空间' + index}>
{renderSize(item['free'])}
</Descriptions.Item>
<Descriptions.Item label="使用占比" key={'使用占比' + index}>
<div className='description-content'>
<Progress
percent={(item['used'] * 100 / (item['used'] + item['free'])).toFixed(2)}
steps={20} size={'small'}/>
</div>
</Descriptions.Item>
</React.Fragment>
);
})
}
</Descriptions>
<Descriptions title="网络" column={4}>
{
Object.keys(network).map((key, index) => {
let prevNetwork = this.state.prevStats.network;
let rxOfSeconds = 0, txOfSeconds = 0;
if (prevNetwork[key] !== undefined) {
rxOfSeconds = (network[key]['rx'] - prevNetwork[key]['rx']) / 5;
}
if (prevNetwork[key] !== undefined) {
txOfSeconds = (network[key]['tx'] - prevNetwork[key]['tx']) / 5;
}
return (
<React.Fragment key={'网络' + index}>
<Descriptions.Item label="网卡" key={'网卡' + index}>{key}</Descriptions.Item>
<Descriptions.Item label="IPv4" key={'IPv4' + index}>
{network[key]['ipv4']}
</Descriptions.Item>
<Descriptions.Item label="接收" key={'接收' + index}>
{renderSize(network[key]['rx'])} {renderSize(rxOfSeconds)}/秒
</Descriptions.Item>
<Descriptions.Item label="发送" key={'发送' + index}>
{renderSize(network[key]['tx'])} {renderSize(txOfSeconds)}/秒
</Descriptions.Item>
</React.Fragment>
);
})
}
</Descriptions>
</div>
);
}
Example #26
| Source File: ProjectCard.jsx From ui with MIT License | 4 votes |
|
ProjectCard = (props) => {
const { experimentId } = props;
const dispatch = useDispatch();
const experiments = useSelector((state) => state.experiments);
const [deleteModalVisible, setDeleteModalVisible] = useState(false);
const { activeExperimentId } = experiments.meta;
const experimentCardStyle = activeExperimentId === experimentId
? activeExperimentStyle : inactiveExperimentStyle;
const experiment = experiments[experimentId];
const experimentNames = experiments.ids.map((id) => experiments[id].name);
const validationParams = {
existingNames: experimentNames,
};
const updateExperimentName = (newName) => {
dispatch(updateExperiment(experiment.id, { name: newName.trim() }));
};
const deleteExperiment = () => {
setDeleteModalVisible(true);
};
return (
<>
{deleteModalVisible && (
<ProjectDeleteModal
key={`${experiment.id}-name`}
experimentId={experiment.id}
onCancel={() => { setDeleteModalVisible(false); }}
onDelete={() => { setDeleteModalVisible(false); }}
/>
)}
<Card
data-test-class={integrationTestConstants.classes.PROJECT_CARD}
key={experimentId}
type='primary'
style={experimentCardStyle}
onClick={() => {
dispatch(setActiveExperiment(experiment.id));
}}
>
<Descriptions
layout='horizontal'
size='small'
column={1}
>
<Item contentStyle={{ fontWeight: 700, fontSize: 16 }}>
<EditableField
value={experiment.name}
onAfterSubmit={updateExperimentName}
onDelete={deleteExperiment}
validationFunc={
(newName) => validateInputs(
newName,
validationChecks,
validationParams,
).isValid
}
/>
</Item>
<Item
labelStyle={itemTextStyle}
label='Samples'
>
{experiment.sampleIds.length}
</Item>
<Item
labelStyle={itemTextStyle}
label='Created'
>
<PrettyTime isoTime={experiment.createdAt} />
</Item>
<Item
labelStyle={itemTextStyle}
label='Modified'
>
<PrettyTime isoTime={experiment.updatedAt} />
</Item>
</Descriptions>
</Card>
</>
);
}
Example #27
| Source File: Payment.jsx From erp-crm with MIT License | 4 votes |
|
export default function Payment({ config }) {
const { entity, ENTITY_NAME } = config;
const { erpContextAction } = useErpContext();
const { current: currentItem } = useSelector(selectRecordPaymentItem);
const { readPanel, recordPanel } = erpContextAction;
const money = useMoney();
const [itemslist, setItemsList] = useState([]);
const [currentErp, setCurrentErp] = useState({
status: '',
client: {
company: '',
email: '',
phone: '',
address: '',
},
subTotal: 0,
taxTotal: 0,
taxRate: 0,
total: 0,
credit: 0,
number: 0,
year: 0,
});
useEffect(() => {
if (currentItem) {
const { items } = currentItem;
setItemsList(items);
setCurrentErp(currentItem);
}
}, [currentItem]);
useEffect(() => {
console.info('itemslist', itemslist);
}, [itemslist]);
return (
<>
<Row gutter={[12, 12]}>
<Col
className="gutter-row"
xs={{ span: 24 }}
sm={{ span: 24 }}
md={{ span: 24 }}
lg={{ span: 20, push: 2 }}
>
<PageHeader
onBack={() => readPanel.close()}
title={`Record Payment for ${ENTITY_NAME} # ${currentErp.number}/${
currentErp.year || ''
}`}
ghost={false}
tags={<Tag color="volcano">{currentErp.status}</Tag>}
// subTitle="This is cuurent erp page"
extra={[
<Button
key={`${uniqueId()}`}
onClick={() => recordPanel.close()}
icon={<CloseCircleOutlined />}
>
Cancel
</Button>,
<Button
key={`${uniqueId()}`}
onClick={() => readPanel.open()}
icon={<FileTextOutlined />}
>
Show Invoice
</Button>,
]}
style={{
padding: '20px 0px',
}}
></PageHeader>
<Divider dashed />
</Col>
</Row>
<Row gutter={[12, 12]}>
<Col
className="gutter-row"
xs={{ span: 24, order: 2 }}
sm={{ span: 24, order: 2 }}
md={{ span: 10, order: 2, push: 2 }}
lg={{ span: 10, order: 2, push: 4 }}
>
<div className="space50"></div>
<Descriptions title={`Client : ${currentErp.client.company}`} column={1}>
<Descriptions.Item label="E-mail">{currentErp.client.email}</Descriptions.Item>
<Descriptions.Item label="Phone">{currentErp.client.phone}</Descriptions.Item>
<Divider dashed />
<Descriptions.Item label="Payment Status">{currentErp.paymentStatus}</Descriptions.Item>
<Descriptions.Item label="SubTotal">
{money.amountFormatter({ amount: currentErp.subTotal })}
</Descriptions.Item>
<Descriptions.Item label="Total">
{money.amountFormatter({ amount: currentErp.total })}
</Descriptions.Item>
<Descriptions.Item label="Discount">
{money.amountFormatter({ amount: currentErp.discount })}
</Descriptions.Item>
<Descriptions.Item label="Balance">
{money.amountFormatter({ amount: currentErp.credit })}
</Descriptions.Item>
</Descriptions>
</Col>
<Col
className="gutter-row"
xs={{ span: 24, order: 1 }}
sm={{ span: 24, order: 1 }}
md={{ span: 12, order: 1 }}
lg={{ span: 10, order: 1, push: 2 }}
>
<RecordPayment config={config} />
</Col>
</Row>
</>
);
}
Example #28
| Source File: Keyboard.js From network-rc with Apache License 2.0 | 4 votes |
|
export default function Keyboard({
playAudio,
serverConfig,
onEnter,
changeChannel,
channelList = [],
channelStatus = {},
}) {
const { audioList = [] } = serverConfig;
// channel
useKeyPress(
() => true,
({ type: keyType, key }) => {
console.log(key, keyType);
// channel
channelList.forEach((channel) => {
const { pin, keyboard = [], type } = channel;
keyboard.forEach((pressedKey) => {
const { name, speed, method, autoReset } = pressedKey;
if (name.toLocaleLowerCase() === key.toLocaleLowerCase()) {
if (type === "switch") {
if (keyType === "keydown") {
const value = !channelStatus[pin];
changeChannel({ pin, value });
return;
}
if (keyType === "keyup" && autoReset) {
changeChannel({ pin, value: 0 });
return;
}
} else {
if (method === "step") {
if (keyType === "keydown") {
pressedKeyAndChannel.push({ pressedKey, channel });
}
if (keyType === "keyup") {
pressedKeyAndChannel = pressedKeyAndChannel.filter(
({ pressedKey }) => pressedKey.key === key
);
}
} else {
if (keyType === "keydown") {
changeChannel({ pin, value: speed });
}
if (keyType === "keyup" && autoReset) {
changeChannel({ pin, value: 0 });
}
}
}
}
});
});
},
{
events: ["keydown", "keyup"],
}
);
useKeyPress(
() => true,
({ key }) => {
audioList.forEach(({ path, text, keyboard = "", type }) => {
if (keyboard.toLocaleLowerCase() === key.toLocaleLowerCase())
switch (type) {
case "audio":
playAudio({ path });
break;
case "text":
playAudio({ text });
break;
case "stop":
playAudio({ stop: true });
break;
default:
break;
}
});
},
{ events: ["keydown"] }
);
useKeyPress("enter", onEnter);
useEffect(() => {
console.log("changeChannel change");
const interval = 100;
const timerId = setInterval(() => {
pressedKeyAndChannel.forEach(
({ pressedKey: { positive, speed = 0.5 }, channel: { pin } }) => {
let value =
(localChannelStatus[pin] || 0) +
((positive ? 1 : -1) * speed) / (1000 / interval);
if (value > 1) value = 1;
if (value < -1) value = -1;
changeChannel({ pin, value });
}
);
}, interval);
return () => {
clearInterval(timerId);
};
}, [changeChannel]);
return (
<Popover
placement="topLeft"
overlayClassName="popovertip"
content={
<Descriptions title="键盘" bordered>
<Descriptions.Item label="播放声音">
{audioList.map(({ name, keyboard = "", type }, index) => (
<p key={`${name}-${index}`}>
{type === "stop" ? (
"停止播放"
) : (
<>
播放 <Text code>{name}</Text>
</>
)}
:<Text keyboard>{keyboard}</Text>
</p>
))}
</Descriptions.Item>
{channelList.map(({ pin, name, keyboard = [], type }) => (
<Descriptions.Item
key={pin}
label={
<>
{name} <Text code>通道:{pin}</Text>
</>
}
>
{keyboard.map(({ name: key, speed, autoReset }) => (
<p key={key}>
{name}
<Text code>
{type}:{speed}
</Text>
:<Text keyboard>{key}</Text>
{autoReset && <Text type="secondary">释放归位</Text>}
</p>
))}
</Descriptions.Item>
))}
<Descriptions.Item label="发送文字转语音">
<Text keyboard>回车</Text>
</Descriptions.Item>
<Descriptions.Item label="发送语音/开关控制端麦克风">
<Text keyboard>空格</Text>
</Descriptions.Item>
</Descriptions>
}
>
<Button shape="round">⌨️</Button>
</Popover>
);
}
Example #29
| Source File: Profile.js From placement-portal with MIT License | 4 votes |
|
render() {
let profile = null;
const {profileData, commonConstants} = this.props;
profile = (
<div>
<Content
style={{
padding: 24,
background: "#fff"
}}
>
<Content style={{textAlign: "center"}}>
<Title level={3} style={{marginBottom: 0}}>
{
profileData.middle_name && profileData.middle_name.length > 0 ?
profileData["first_name"] + " " + profileData["middle_name"] + " " + profileData["last_name"]
:
profileData["first_name"] + " " + profileData["last_name"]
}
</Title>
<Text type="secondary">
{commonConstants.branchToTextMap[profileData["branch"]]}
</Text>
</Content>
<List split={false}>
<Item style={{paddingBottom: 0}}>
<Icon type="mail"/>
<Text>
{profileData["email"]}
</Text>
</Item>
<Item style={{paddingTop: 0, paddingBottom: 0}}>
<Icon type="phone"/>
<Text>
{profileData["phone_a"]}
</Text>
</Item>
<Item style={{paddingTop: 0, paddingBottom: 0}}>
<Icon type="environment"/>
<Text>
{profileData["address_line_a"]}
</Text>
</Item>
<Item style={{paddingTop: 0}}>
<Icon type="environment"/>
<Text>
{profileData["address_line_b"]}
</Text>
</Item>
</List>
<Divider dashed style={{margin: "10px 0 10px 0"}}/>
<Text strong>
Interests
</Text>
<br/><br/>
{
profileData.interests ? profileData["interests"].map(item =>
<Tag key={item} color='blue' style={{margin: 5}}>{item}</Tag>
) : null
}
<Divider dashed style={{margin: "20px 0 10px 0"}}/>
<Text strong>
Skills
</Text>
<br/><br/>
{
profileData.skills ? profileData["skills"].map(item =>
<Tag key={item} color='blue' style={{margin: 5}}>{item}</Tag>
) : null
}
<Divider dashed style={{margin: "20px 0 10px 0"}}/>
<Text strong>
Academic Details
</Text>
<br/><br/>
<Descriptions column={1}>
<Descriptions.Item label="CPI">{profileData["cpi"]}</Descriptions.Item>
<Descriptions.Item label="Course">{profileData["course_type"]}</Descriptions.Item>
<Descriptions.Item label="Year of Study">{profileData["year_of_study"]}</Descriptions.Item>
{
profileData.cv[0] ? <Descriptions.Item label="Link to CV 1"><a href={profileData.cv[0].link} target={"_blank"}>Click Here</a></Descriptions.Item> : null
}
{
profileData.cv[1] ? <Descriptions.Item label="Link to CV 2"><a href={profileData.cv[1].link} target={"_blank"}>Click Here</a></Descriptions.Item> : null
}
{
profileData.cv[2] ? <Descriptions.Item label="Link to CV 3"><a href={profileData.cv[2].link} target={"_blank"}>Click Here</a></Descriptions.Item> : null
}
</Descriptions>
</Content>
</div>
);
return (
<Layout>
<Content>
{profile}
</Content>
</Layout>
);
}
