antd#Alert JavaScript Examples
The following examples show how to use
antd#Alert.
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: index.jsx From vpp with MIT License | 6 votes |
|
LoginMessage = ({ content }) => (
<Alert
style={{
marginBottom: 24,
}}
message={content}
type="error"
showIcon
/>
)
Example #2
| Source File: index.js From react_management_template with Apache License 2.0 | 6 votes |
|
render() {
return (
<Row>
<Card title="Spin的用法" className="card-wrap">
<Spin size="small"/>
<Spin/>
<Spin size="large"/>
</Card>
<Card title="内容遮罩" className="card-wrap">
<Alert message="React" description="Antd Pro Design of React教程学习" type="info">
</Alert>
<Alert message="React" description="Antd Pro Design of React教程学习" type="warning">
</Alert>
<Spin tip="加载中">
<Alert message="React" description="Antd Pro Design of React教程学习" type="warning">
</Alert>
</Spin>
</Card>
</Row>
);
}
Example #3
| Source File: SelectionPanel.js From websocket-demo with MIT License | 6 votes |
|
function SelectionPanel({ actions, selectedStream }) {
const descriptions = (
<>
<p>{i18n.t('message.restriction1')}</p>
<p>{i18n.t('message.restriction2')}</p>
</>
);
return (
<>
<Alert
message={i18n.t('label.info')}
description={descriptions}
type="info"
showIcon
closable
style={{ marginBottom: '10px' }}
/>
<ErrorBoundary>
<UserStreamPanel actions={actions} />
</ErrorBoundary>
<Divider orientation="left" plain />
<ErrorBoundary>
<MarketStreamPanel actions={actions} selectedStream={selectedStream} />
</ErrorBoundary>
</>
);
}
Example #4
| Source File: Cluster.js From kafka-map with Apache License 2.0 | 6 votes |
|
content = (
<div>
<Alert style={{marginTop: 5, marginBottom: 10}} message={<FormattedMessage id="delay-message-information1"/>} type="info" showIcon/>
<p><FormattedMessage id="delay-message-information2"/></p>
<p><FormattedMessage id="delay-message-information3"/></p>
<pre>
{JSON.stringify({
"level": 0,
"topic": "target",
"key": "key",
"value": "value"
}, null, 4)}
</pre>
</div>
)
Example #5
| Source File: Application.js From YApi-X with MIT License | 6 votes |
|
alertContent = () => {
const ua = window.navigator.userAgent
const isChrome = ua.indexOf('Chrome') && window.chrome
if (!isChrome) {
return (
<Alert
style={{zIndex: 99}}
message={'YApi 的接口测试等功能仅支持 Chrome 浏览器，请使用 Chrome 浏览器获得完整功能。'}
banner={true}
closable={true}
/>
)
}
}
Example #6
| Source File: index.js From gobench with Apache License 2.0 | 6 votes |
|
render() {
return (
<div>
<h5 className="mb-3">
<strong>Basic</strong>
</h5>
<div className="mb-5">
<Spin tip="Loading...">
<Alert
message="Alert message title"
description="Further details about the context of this alert."
type="info"
/>
</Spin>
</div>
</div>
)
}
Example #7
| Source File: BrowserAlert.jsx From ui with MIT License | 6 votes |
|
BrowserAlert = () => {
const renderContent = () => {
if (navigator.userAgent.match('Chrome')) return <></>;
return (
<Alert
showIcon
message={(
<>
<b>Browser not supported.</b>
{' '}
We recommend switching to Google Chrome for the best Cellenics experience.
</>
)}
banner
closable
style={{
position: 'fixed',
top: 0,
zIndex: 100,
width: '100%',
borderBottom: '1px solid #FFF0A3',
}}
/>
);
};
return renderContent();
}
Example #8
| Source File: SystemConfig.js From kite-admin with MIT License | 6 votes |
|
render () {
return (
<div className="layout-main" id="system-config">
<div className="layout-main-title">
<Breadcrumb>
<Breadcrumb.Item href="#/manager/index">
<Icon type="home" />
</Breadcrumb.Item>
<Breadcrumb.Item href="#/manager/index">
<span>主页</span>
</Breadcrumb.Item>
<Breadcrumb.Item href="#">
<span>系统管理</span>
</Breadcrumb.Item>
<Breadcrumb.Item>系统配置</Breadcrumb.Item>
</Breadcrumb>
</div>
<EmailBind />
<WebsiteInfo />
<WebConfig />
<Oauth />
<Theme />
<Storage />
<Alert
message="备注"
description="由于是系统配置，修改时请谨慎，修改成功某些配置后，如果未生效或者出现错误，请务必重启服务"
type="warning"
showIcon
/>
</div>
)
}
Example #9
| Source File: router-4.jsx From virtuoso-design-system with MIT License | 6 votes |
|
Home = withRouter(props => {
const { location } = props;
const pathSnippets = location.pathname.split('/').filter(i => i);
const extraBreadcrumbItems = pathSnippets.map((_, index) => {
const url = `/${pathSnippets.slice(0, index + 1).join('/')}`;
return (
<Breadcrumb.Item key={url}>
<Link to={url}>{breadcrumbNameMap[url]}</Link>
</Breadcrumb.Item>
);
});
const breadcrumbItems = [
<Breadcrumb.Item key="home">
<Link to="/">Home</Link>
</Breadcrumb.Item>,
].concat(extraBreadcrumbItems);
return (
<div className="demo">
<div className="demo-nav">
<Link to="/">Home</Link>
<Link to="/apps">Application List</Link>
</div>
<Switch>
<Route path="/apps" component={Apps} />
<Route render={() => <span>Home Page</span>} />
</Switch>
<Alert style={{ margin: '16px 0' }} message="Click the navigation above to switch:" />
<Breadcrumb>{breadcrumbItems}</Breadcrumb>
</div>
);
})
Example #10
| Source File: index.js From acy-dex-interface with MIT License | 5 votes |
|
render() {
const { selectedRowKeys, needTotalList } = this.state;
const { data = {}, rowKey, ...rest } = this.props;
const { list = [], pagination } = data;
const paginationProps = {
showSizeChanger: true,
showQuickJumper: true,
...pagination,
};
const rowSelection = {
selectedRowKeys,
onChange: this.handleRowSelectChange,
getCheckboxProps: record => ({
disabled: record.disabled,
}),
};
return (
<div className={styles.standardTable}>
<div className={styles.tableAlert}>
<Alert
message={
<Fragment>
已选择 <a style={{ fontWeight: 600 }}>{selectedRowKeys.length}</a> 项
{needTotalList.map(item => (
<span style={{ marginLeft: 8 }} key={item.dataIndex}>
{item.title}
总计
<span style={{ fontWeight: 600 }}>
{item.render ? item.render(item.total) : item.total}
</span>
</span>
))}
<a onClick={this.cleanSelectedKeys} style={{ marginLeft: 24 }}>
清空
</a>
</Fragment>
}
type="info"
showIcon
/>
</div>
<Table
rowKey={rowKey || 'key'}
rowSelection={rowSelection}
dataSource={list}
pagination={paginationProps}
onChange={this.handleTableChange}
{...rest}
/>
</div>
);
}
Example #11
| Source File: Login.jsx From node-project-manager with Apache License 2.0 | 5 votes |
|
Login = ({logUser}) => {
const [userName, setUserName] = useState("");
const [password, setPassword] = useState("");
const [errorMsg, setErrorMsg] = useState(null);
const handleSignIn = async () => {
const data = await logIn({
nickname: userName,
password: password
});
if (data.succes) {
const data = await whoAmI();
if (data.auth) {
logUser(data.user);
}
}
else {
setErrorMsg(data.message);
}
};
const enterPressed = (event) => {
if(event.key === "Enter"){
handleSignIn();
}
}
return (
<div className="login" >
<div className="title">
<h3>Login</h3>
<GiPadlock className="iconLogin" />
</div>
{
(errorMsg)?
<Alert
className="errorMsg"
description={errorMsg}
type="error"
showIcon
/>:null
}
<Input
size="large"
placeholder="Introduce un usuario"
prefix={<UserOutlined />}
onChange={e => setUserName(e.target.value.trim())}
/>
<Input.Password
size="large"
placeholder="Introuce una contraseña"
className="inputPassword"
onChange={e => setPassword(e.target.value)}
onKeyPress={enterPressed}
/>
<Button onClick={handleSignIn} className="btnLogin">
Entrar
</Button>
</div>
);
}
Example #12
| Source File: monitor.jsx From juno with Apache License 2.0 | 5 votes |
|
render() {
const { env, versionKey, userConfig } = this.props;
const { monitorType = 0, dashboardPath } = this.state;
const { version } = this.props.setting.settings;
const { dashboards: dashboardList = [] } =
(Array.isArray(version) && version.find((item) => item.versionKey === versionKey)) || {};
console.log('监控 --- version', version);
console.log('监控 --- versionKey', versionKey);
console.log('>>>>>>>>> this.props.userConfig', userConfig);
console.log('监控 --- dashboardList', dashboardList);
console.log('dashboardPath', dashboardPath);
console.log('this.props.location.query', this.props.location.query);
if (!env) {
return (
<div style={{ marginTop: 10 }}>
<Alert message="Warning" description="请选择环境." type="warning" showIcon />
</div>
);
}
return (
<div style={{ backgroundColor: '#f7f8fa' }}>
<div
style={{
// marginLeft: 10,
// marginTop: 10,
// marginRight: 10,
// marginBottom: 10,
paddingTop: 5,
paddingBottom: 5,
flexDirection: 'column',
display: 'flex',
flex: 'auto',
height: '100%',
}}
>
<Row gutter={24} className="top">
<Col
span={24}
className={styles.monitorTab}
style={{ marginLeft: '10px', paddingBottom: '10px' }}
>
{Array.isArray(dashboardList) && dashboardList.length ? (
<RadioGroup
defaultValue={dashboardPath}
value={dashboardPath}
onChange={this.monitorTypeTChange}
optionType="button"
buttonStyle="solid"
>
{dashboardList.map((item) => (
<Radio.Button key={item.name} value={item.value}>
{item.name}
</Radio.Button>
))}
</RadioGroup>
) : (
<span>请在设置界面设置监控面板地址</span>
)}
</Col>
</Row>
{this.renderGrafana()}
</div>
</div>
);
}
Example #13
| Source File: index.js From gobench with Apache License 2.0 | 5 votes |
|
render() {
return (
<div>
<h5 className="mb-3">
<strong>Basic</strong>
</h5>
<div className="mb-5">
<div className="mb-3">
<Alert closable message="Success Tips" type="success" showIcon />
</div>
<div className="mb-3">
<Alert closable message="Informational Notes" type="info" showIcon />
</div>
<div className="mb-3">
<Alert closable message="Warning" type="warning" showIcon />
</div>
<div className="mb-3">
<Alert closable message="Error" type="error" showIcon />
</div>
</div>
<h5 className="mb-3">
<strong>Advanced</strong>
</h5>
<div className="mb-3">
<Alert
closable
message="Success Tips"
description="Detailed description and advice about successful copywriting."
type="success"
showIcon
/>
</div>
<div className="mb-5">
<div className="mb-3">
<Alert
closable
message="Informational Notes"
description="Additional description and information about copywriting."
type="info"
showIcon
/>
</div>
<div className="mb-3">
<Alert
closable
message="Warning"
description="This is a warning notice about copywriting."
type="warning"
showIcon
/>
</div>
<div className="mb-3">
<Alert
closable
message="Error"
description="This is an error message about copywriting."
type="error"
showIcon
/>
</div>
</div>
</div>
)
}
Example #14
| Source File: index.js From camel-store-admin with Apache License 2.0 | 5 votes |
|
render() {
const { selectedRowKeys, needTotalList } = this.state;
const {
data: { list, pagination },
loading,
columns,
rowKey,
} = this.props;
const paginationProps = {
showSizeChanger: true,
showQuickJumper: true,
...pagination,
};
const rowSelection = {
selectedRowKeys,
onChange: this.handleRowSelectChange,
getCheckboxProps: record => ({
disabled: record.disabled,
}),
};
return (
<div className={styles.standardTable}>
<div className={styles.tableAlert}>
<Alert
message={
<Fragment>
已选择 <a style={{ fontWeight: 600 }}>{selectedRowKeys.length}</a> 项
{needTotalList.map(item => (
<span style={{ marginLeft: 8 }} key={item.dataIndex}>
{item.title}
总计
<span style={{ fontWeight: 600 }}>
{item.render ? item.render(item.total) : item.total}
</span>
</span>
))}
<a onClick={this.cleanSelectedKeys} style={{ marginLeft: 24 }}>
清空
</a>
</Fragment>
}
type="info"
showIcon
/>
</div>
<Table
loading={loading}
rowKey={rowKey || 'key'}
rowSelection={rowSelection}
dataSource={list}
columns={columns}
pagination={paginationProps}
onChange={this.handleTableChange}
/>
</div>
);
}
Example #15
| Source File: FormDemo2.js From discern with BSD 3-Clause "New" or "Revised" License | 5 votes |
|
render(){
const {getFieldDecorator} = this.props.form
return (
<div>
<Form className='stepForm' id='step2'>
<Alert closable showIcon message="确认转账后，资金将直接打入对方账户，无法退回。" style={{ marginBottom: 24 }}/>
<Form.Item {...formItemLayout} className='setFormText' label="付款账户">
{this.props.stepFormStore.info.payAccount}
</Form.Item>
<Form.Item {...formItemLayout} label="收款账户">
{this.props.stepFormStore.info.receiverAccount}
</Form.Item>
<Form.Item {...formItemLayout} className='setFormText' label="收款人姓名">
{this.props.stepFormStore.info.receiverName}
</Form.Item>
<Form.Item {...formItemLayout} className='setFormText' label="转账金额">
<span className='money'>{this.props.stepFormStore.info.amount}</span>
<span>（{digitUppercase(this.props.stepFormStore.info.amount)}）</span>
</Form.Item>
<Divider/>
<Form.Item {...formItemLayout} label="支付密码" required={false}>
{getFieldDecorator('password', {
initialValue: '123456',
rules: [
{
required: true,
message: '需要支付密码才能进行支付',
},
],
})(<Input type="password" autoComplete="off" style={{ width: '80%' }} />)}
</Form.Item>
<Form.Item
style={{ marginBottom: 8 }}
wrapperCol={{
xs: { span: 24, offset: 0 },
sm: {
span: formItemLayout.wrapperCol.span,
offset: formItemLayout.labelCol.span,
},
}}
label=""
>
<Button type="primary" onClick={this.handleSubmit} loading={this.state.loading}>提交</Button>
<Button onClick={()=>this.props.stepFormStore.setCurrent(0)} style={{ marginLeft: 8 }}>上一步</Button>
</Form.Item>
</Form>
</div>
)
}
Example #16
| Source File: CalculationConfigContainer.jsx From ui with MIT License | 5 votes |
|
CalculationConfigContainer = (props) => {
const {
filterUuid, sampleId, plotType, sampleIds, onConfigChange, children, stepDisabled,
} = props;
const { auto, filterSettings: config } = useSelector(
(state) => (state.experimentSettings.processing[filterUuid][sampleId]),
);
const dispatch = useDispatch();
const [displayIndividualChangesWarning, setDisplayIndividualChangesWarning] = useState(false);
const copySettingsToAllSamples = () => {
setDisplayIndividualChangesWarning(false);
dispatch(
copyFilterSettingsToAllSamples(
filterUuid,
sampleId,
sampleIds,
),
);
onConfigChange();
};
const onFilterSettingsChange = () => {
setDisplayIndividualChangesWarning(true);
onConfigChange();
};
return (
<div>
<Space direction='vertical' style={{ width: '100%' }} />
{displayIndividualChangesWarning && sampleIds.length > 1 && (
<Alert
message='To copy these new settings to the rest of your samples, click Copy to all samples.'
type='info'
showIcon
/>
)}
<Radio.Group
value={auto ? 'automatic' : 'manual'}
onChange={(e) => {
onFilterSettingsChange();
dispatch(setSampleFilterSettingsAuto(filterUuid, sampleId, e.target.value === 'automatic'));
}}
style={{ marginTop: '5px', marginBottom: '30px' }}
disabled={stepDisabled}
>
<Radio value='automatic'>
Automatic
</Radio>
<Radio value='manual'>
Manual
</Radio>
</Radio.Group>
{React.cloneElement(children, {
config,
plotType,
updateSettings: (diff) => {
dispatch(updateFilterSettings(filterUuid, diff, sampleId));
onFilterSettingsChange();
},
disabled: stepDisabled || auto,
})}
{
sampleIds.length > 1 ? (
<Button onClick={copySettingsToAllSamples} disabled={auto === 'automatic'}>Copy to all samples</Button>
) : <></>
}
</div>
);
}
Example #17
| Source File: alert.js From art-dashboard-ui with Apache License 2.0 | 5 votes |
|
render() {
return (
<Alert message={this.props.message} type={this.props.type} closable onClick={this.props.close_func}/>
)
}
Example #18
| Source File: ChangePassword.jsx From reactjs-functions with MIT License | 5 votes |
|
LoginForm = ({signup, authReducer}) => {
const [values, setValues ] = React.useState({
old_pass: "",
new_pass: "",
status: "",
loading: false
})
const onFinishFailed = errorInfo => {
console.log('Failed:', errorInfo);
};
const [form] = Form.useForm();
const handleChange = (event)=>{
setValues({
...values,
[event.target.name]: event.target.value
})
}
const onFinish =async values => {
setValues({...values,loading: true})
await ChangePassword(values).then(message => {
if(message === "success") {
setValues({ status:"success", errMessage: "",new_pass:"", old_pass:"", loading: false});
form.resetFields()
} else {
setValues({ status:"error", errMessage: message,new_pass:"", old_pass:"", loading: false});
}
})
};
return (
<Col span={12} style={{ textAlign: "center" }}>
{ values.status==="success" ? <Alert message="Password Changed Successfully" type="success" /> : null }
<br/>
<Form name="basic" form={form} onFinish={onFinish}
onFinishFailed={onFinishFailed}>
<Form.Item
label="Old Password"
name="old_pass"
rules={[{required: true, message: 'Please input your password!'}]}
validateStatus={values.status}
hasFeedback
>
<Input.Password name="old_pass" value={values.old_pass} onChange={handleChange} />
</Form.Item>
<Form.Item
label="New Password"
name="new_pass"
rules={[{required: true, message: 'Please input your password!'}]}
validateStatus={values.status}
help={values.errMessage}
hasFeedback
>
<Input.Password name="new_pass" value={values.new_pass} onChange={handleChange} />
</Form.Item>
<Form.Item >
<Button type="primary" htmlType="submit" loading={values.loading}>
Change Password
</Button>
</Form.Item>
</Form>
</Col>
)
}
Example #19
| Source File: index.jsx From stack-labs-site with MIT License | 5 votes |
|
{ ErrorBoundary } = Alert
Example #20
| Source File: index.js From ant-back with MIT License | 5 votes |
|
render() {
const { selectedRowKeys, needTotalList, pagination } = this.state;
const realPagination = this.props.pagination ? this.props.pagination : pagination;
const { data, selectedRows, rowKey, ...rest } = this.props;
const rowSelection = selectedRows
? {
selectedRowKeys,
onChange: this.handleRowSelectChange,
getCheckboxProps: record => ({
disabled: record.disabled,
}),
}
: null;
return (
<div className={styles.standardTable}>
{rowSelection ? (
<div className={styles.tableAlert}>
<Alert
message={
<Fragment>
已选择 <a style={{ fontWeight: 600 }}>{selectedRowKeys.length}</a> 项
{needTotalList.map(item => (
<span style={{ marginLeft: 8 }} key={item.dataIndex}>
{item.title}
总计
<span style={{ fontWeight: 600 }}>
{item.render ? item.render(item.total) : item.total}
</span>
</span>
))}
<a onClick={this.cleanSelectedKeys} style={{ marginLeft: 24 }}>
清空
</a>
</Fragment>
}
type="info"
showIcon
/>
</div>
) : null}
<Table
rowKey={rowKey || 'key'}
rowSelection={rowSelection}
dataSource={data}
pagination={realPagination}
onChange={this.handleTableChange}
{...rest}
/>
</div>
);
}
Example #21
| Source File: launchpad.js From acy-dex-interface with MIT License | 4 votes |
|
LaunchpadComponent = () => {
const recordNum = 10;
const [chartData,setChartData] = useState([]);
const [pendingEnd,setPending]= useState(false);
const [fetchEnd,setFetchEnd] = useState(false);
const [transferData,setTransferData] = useState([]);
const ellipsisCenter = (str, preLength=6, endLength=4, skipStr='...') => {
const totalLength = preLength + skipStr.length + endLength;
if (str.length > totalLength) {
return str.substr(0, preLength) + skipStr + str.substr(str.length-endLength, str.length);
}
return str;
}
useEffect(async () => {
const [newTransferData, newChartData] = await getTransferData();
// ellipsis center address
newTransferData.forEach(data => {
data['participant'] = ellipsisCenter(data['participant']);
})
// console.log('NewTransferData', newTransferData);
// console.log('NewChartData', newChartData);
newChartData.splice(0, newChartData.length - recordNum);
console.log(newChartData);
setTransferData(newTransferData);
setChartData(newChartData);
}, [])
const links = [
"https://google.com",
"https://youtube.com",
"https://t.me/acyfinance",
"https://twitter.com/acyfinance?lang=en",
"https://medium.com/acy-finance",
"https://github.com/ACY-Labs",
"https://www.linkedin.com/company/acy-finance/"
];
const tableColumns = [
{
title: 'Round',
dataIndex: 'round',
width: 80,
align: 'center'
},
{
title: 'Date',
dataIndex: 'openDate',
className: 'column-date',
width: 100,
align: 'center'
},
{
title: 'Price',
dataIndex: 'price',
width: 70,
align: 'center'
},
{
title: 'Raise Size',
dataIndex: 'raiseSize',
width: 100,
align: 'center'
},
{
title: 'Amount',
dataIndex: 'amount',
width: 85,
align: 'center'
},
{
title: 'Market Cap',
dataIndex: 'marketCap',
width: 100,
align: 'center'
},
{
title: 'Max Allocation',
dataIndex: 'maxAllocations',
width: 100,
align: 'center'
},
{
title: 'Max Winners',
dataIndex: 'maxWinners',
width: 100,
align: 'center'
},
{
title: 'Filled',
dataIndex: 'filled',
width: 100,
align: 'center'
},
{
title: 'Yield',
dataIndex: 'yieldPer',
width: 100,
align: 'center'
},
];
const testData = [
{
dateTime:"2018-12-01",
participant: "0x253584",
quantity:'9999',
token:'acy'
}
]
const transferTableHeader = [
{
title: 'Date Time(UTC)',
dataIndex: 'dateTime',
className: 'column-date',
width: 80,
align: 'left'
},
{
title: 'Participants',
dataIndex: 'participant',
width: 80,
align: 'center',
ellipsis: true
},
{
title: 'USDT',
dataIndex: 'quantity',
width: 60,
align: 'center',
ellipsis: true
},
{
title: 'Ticket',
dataIndex: 'Amount',
width: 60,
align: 'center',
ellipsis: true
},
];
const tableData = [
{
round: "Round 1",
openDate: "2021-10-30",
closeDate: "2021-11-01",
price: ACY_PRICE.toString() + ' USDT',
raiseSize: "1000000 ACY",
amount: 2500,
marketCap:"$10M",
maxAllocations:'100',
maxWinners: "10000",
filled: "1379%",
yieldPer:"+223%",
totalTickets: "82795 Tickets",
perWinTicket: "100 USDT",
get maxAllocation() {
return this.quantity * ACY_PRICE;
}
},
{
round: "Round 2",
openDate: "2021-10-13",
closeDate: "2021-10-20",
price: ACY_PRICE.toString() + ' USDT',
raiseSize: "1000000 ACY",
amount: 3000,
marketCap:"$20M",
maxAllocations:'200',
maxWinners: "10000",
filled: "1579%",
yieldPer:"+203%",
totalTickets: "82700 Tickets",
perWinTicket: "110 USDT",
get maxAllocation() {
return this.quantity * ACY_PRICE;
}
},
{
round: "Round 3",
openDate: "2021-10-28",
closeDate: "2021-11-03",
price: ACY_PRICE.toString() + ' USDT',
raiseSize: "1000000 ACY",
amount: 5000,
marketCap:"$30M",
maxAllocations:'300',
maxWinners: "10000",
filled: "1379%",
yieldPer:"-",
totalTickets: "82790 Tickets",
perWinTicket: "120 USDT",
get maxAllocation() {
return this.quantity * ACY_PRICE;
}
},
];
const token = {
color:'#C4C4C4',
textAlign:'left',
fontFamily:'Inter, sans-serif'
}
const tokenContent = {
fontWeight:'bold',
textAlign:'left',
color:'#fff'
}
const tokenContent1 = {
fontWeight:'bold',
textAlign:'center',
color:'#000'
}
const hashtagText = {
color: '#C4C4C4',
position: 'relative',
top: '12px',
marginTop: '14px',
fontSize: '15px'
}
const buttonCustomStyle = {
border: '#eb5c20',
color: 'white',
height: "2em",
marginRight:"0.8em",
marginTop:"0.8em"
}
const buttonCustomStyle1 = {
background: 'transparent',
border: '#eb5c20',
color: 'white',
height: "2em",
marginRight:"0.8em",
marginTop:"0.8em"
}
const buttonCustomStyle2 = {
background: 'transparent',
border: '#eb5c20',
color: 'white',
height: "2em",
marginLeft:"0.2em",
marginTop:"0.8em"
}
const copyButton = {
background: 'transparent',
border: '#eb5c20',
color: 'var(--color-light-neutral-5)',
height: "2em",
marginLeft:"0.2em",
marginTop:"0.8em"
}
const [showCopied, setShowCopied] = useState(false);
useEffect(() => {
let timeout
if (showCopied) {
timeout = setTimeout(() => setShowCopied(false), 1000);
}
return () => clearTimeout(timeout);
}, [showCopied]);
const menu = (
<Menu>
<Menu.Item className={styles.dropdownItem} id="drop1">
<img src={ethIcon} alt="" style={{height:'25px', width:'10.8px', objectFit:'contain', margin: '0px 8px 0 0', float:'left'}} />
<a
target="_blank"
rel="noopener noreferrer"
href="https://cn.etherscan.com/token/0xaf9db9e362e306688af48c4acb9618c06db38ac3"
style={{
color:'#000',
display:'flex',
flexDirection: "column"
}}
>
<span>Etherscan.io</span>
<span style={{color: 'rgba(16, 112, 224, 0.85)'}}>0xaf9d...db38ac3</span>
</a>
<Button
style={copyButton}
onClick={()=> {
navigator.clipboard.writeText("https://cn.etherscan.com/token/0xaf9db9e362e306688af48c4acb9618c06db38ac3");
setShowCopied(true);
}}
>
<Icon type='copy' />
</Button>
</Menu.Item>
<Menu.Item className={styles.dropdownItem} id="drop2">
<img src={polygonIcon} alt="" style={{height:'25px', width:'10.8px', objectFit:'contain', margin: '0px 8px 0 0', float:'left'}} />
<a
target="_blank"
rel="noopener noreferrer"
href="https://polygonscan.com/token/0x8b1f836491903743fe51acd13f2cc8ab95b270f6"
style={{
color:'#000',display:'flex',flexDirection: "column"
}}
>
<span>Polygonscan</span>
<span style={{color: 'rgba(16, 112, 224, 0.85)'}}>0xaf9d...db38ac3</span>
</a>
<Button
style={copyButton}
onClick={()=> {
navigator.clipboard.writeText("https://polygonscan.com/token/0x8b1f836491903743fe51acd13f2cc8ab95b270f6");
setShowCopied(true);
}}
>
<Icon type='copy' />
</Button>
</Menu.Item>
<Menu.Item className={styles.dropdownItem} id="drop3">
<img src={confluxIcon} alt="" style={{height:'25px', width:'10.8px', objectFit:'contain', margin: '0px 8px 0 0', float:'left'}} />
<a
target="_blank"
rel="noopener noreferrer"
href="https://confluxscan.io/token/cfx:accyf3j7s23x5j62hwt619k01un9bzn9u2mc6gavzb"
style={{
color:'#000',
display:'flex',
flexDirection: "column"}}
>
<span>Conflux.io</span>
<span style={{color: 'rgba(16, 112, 224, 0.85)'}}>0xaf9d...db38ac3</span>
</a>
<Button
style={copyButton}
onClick={()=> {
navigator.clipboard.writeText("https://confluxscan.io/token/cfx:accyf3j7s23x5j62hwt619k01un9bzn9u2mc6gavzb");
setShowCopied(true);
}}
>
<Icon type='copy' />
</Button>
</Menu.Item>
</Menu>
);
const [selectedForm, setSelectedForm] = useState(0)
return(
<div className={styles.launchRoot}>
<div className={styles.alertBanner}>
{showCopied ? <Alert message="Address Copied To Clipboard" type="success" showIcon banner /> : ""}
</div>
<div className={styles.topContainer}>
<div className={styles.tokenContainer}>
<div className={styles.snsContainer}>
<div className={styles.snsBox1}>
<Button type="link" href={links[0]} target="_blank" style={buttonCustomStyle2} icon="link">Website</Button>
<br />
<Button type="link" href={links[4]} target="_blank" style={buttonCustomStyle2} icon="file-ppt">Deck</Button>
<br />
<Button type="link" href={links[2]} target="_blank" style={buttonCustomStyle}>
<img src={telegramWIcon} alt="" style={{height:'1.2em', width:'auto', objectFit:'contain', margin: '8px 8px 0 0', float:'left'}} /> Telegram
</Button>
<br />
<Button type="link" href={links[4]} target="_blank" style={buttonCustomStyle2} icon="medium">Medium</Button>
<br />
<Button type="link" href={links[4]} target="_blank" style={buttonCustomStyle2} icon="message">Forum</Button>
<br />
<Dropdown overlay={menu} trigger={['click']}>
<Button onClick={e => e.preventDefault()} style={buttonCustomStyle1} icon="profile">
Address <Icon type="down" />
</Button>
</Dropdown>
</div>
<div className={styles.snsBox2}>
<Button type="link" href={links[1]} target="_blank" style={buttonCustomStyle} icon="file">Whitepaper</Button>
<br />
<Button type="link" href={links[3]} target="_blank" style={buttonCustomStyle} icon="twitter">Twitter</Button>
<br />
<Button type="link" href={links[6]} target="_blank" style={buttonCustomStyle} icon="linkedin">LinkedIn</Button>
<br />
<Button type="link" href={links[5]} target="_blank" style={buttonCustomStyle} icon="github">Github</Button>
<br />
<Button type="link" href={links[1]} target="_blank" style={buttonCustomStyle}>
<Icon type="youtube" theme="filled" />
YouTube
</Button>
</div>
</div>
<div className={styles.hashtagBox}>
<img src={hashtagIcon} alt="" className={styles.hashtagImage} />
<span style={hashtagText}>DeFi, AMM, DEX</span>
</div>
</div>
<div className={styles.moreInfoContainer}>
<div className={styles.contentStyle}>
<div className={styles.carouselBlock}>
<div className={styles.stepBlock} id="block">
<div className={styles.cntBlock}>
{/* <div className={styles.labelBlock}>
<div className={styles.countLabelBlock}>
<div className={styles.countLabel}>
ROUND 1
</div>
</div>
<div className={styles.tokenIDODate}>
<p style={{color:'#b5b5b6', fontSize:"13px"}}>Open: {selectedTableRow.openDate} 10:00 UST</p>
<p style={{color:'#b5b5b6', fontSize:"13px"}}>Close: {selectedTableRow.closeDate} 10:00 UST</p>
</div>
</div> */}
<CountDown />
<StepBar />
</div>
</div>
</div>
</div>
</div>
</div>
<div className={styles.midContainer}>
<div className={styles.tokenInfoBox}>
<div className={styles.tokenInfoContainer}>
<div className={styles.tokenInfoBoxTop}>
<div className={styles.tokenSym}>
<img src={AcyIcon} alt="ACY Token" className={styles.mainImage} />
<h2 style={{color:'#eb5c20'}} className={styles.tokenName}> ACY </h2>
</div>
{/* { selectedForm === 2 && (
<div className={styles.tokenIDOStatus}>
<Tag style={{float:'right', backgroundColor: '#C4C4C4', color: 'black', borderRadius:'10px', width:'auto', height:'auto', textAlign:"center", fontSize:'16px', fontFamily:'Inter, sans-serif'}}>Your Max Allocation : 100 USDT</Tag>
</div>
)} */}
</div>
</div>
<div className={styles.tokenProgress}>
<Progress strokeColor={{'0%': '#eb5c20','100%': '#c6224e'}} percent={90} status='active' />
</div>
<div className={styles.tokenDetails}>
<div className={styles.tokenPrice}>
<p style={token}>Per ACY</p>
<h3 style={tokenContent}>0.2 USDT</h3>
</div>
<div className={styles.ticketAllocation}>
<p style={token}>Raise Size</p>
<h3 style={tokenContent}>1000000 ACY</h3>
</div>
<div className={styles.tokenTotalRaise}>
<p style={token}>Amount</p>
<h3 style={tokenContent}>200000</h3>
</div>
<div className={styles.tokenMarketCap}>
<p style={token}>Market Cap</p>
<h3 style={tokenContent}>$5M</h3>
</div>
</div>
<span className={styles.line} />
<div className={styles.tokenMoreInfo}>
<div className={styles.totalTickets}>
<p style={token}>Allocation/Winning Ticket</p>
<h3 style={tokenContent}>120 USDT</h3>
</div>
<div className={styles.totalTicketsDeposited}>
<p>Total Tickets Deposited</p>
<h3 style={tokenContent}>20000 Tickets</h3>
</div>
<div className={styles.tokenMaxAllo}>
<p>Max Allocation</p>
<h3 style={tokenContent}>20000</h3>
</div>
<div className={styles.tokenMaxWinners}>
<p>Max Winners</p>
<h3 style={tokenContent}>10000</h3>
</div>
</div>
</div>
<div className={styles.ticketBox}>
{ selectedForm === 0 && (
<div className={styles.showTicketContainer}>
<div className={styles.showTicketBox}>
<div className={styles.showTicketBox1}>
<div className={styles.userEligibleTickets}>
<p>Your Eligible Tickets</p>
<h3 style={tokenContent1}>0 Ticket(s)</h3>
</div>
<div className={styles.userDepositedTickets}>
<p>Your Eligible Amount</p>
<h3 style={tokenContent1}>10 USDT</h3>
</div>
</div>
<div className={styles.showTicketBox2}>
<div className={styles.userWinningTickets}>
<p>Your Winning Tickets</p>
<h3 style={tokenContent1}>0 Ticket(s)</h3>
</div>
<div className={styles.userTicketsAllo}>
<p>Your Allocation</p>
<h3 style={tokenContent1}>0 ACY</h3>
</div>
</div>
</div>
<div className={styles.whitelistBox}>
<Button className={styles.whiteListToggleButton} shape="round" onClick={() => setSelectedForm(2)}>Participate</Button>
</div>
</div>
)}
{selectedForm === 1 && (
<WhitelistTask
setSelectedForm={setSelectedForm}
/>
)}
{ selectedForm === 2 && (
<SwapTicket />
)}
</div>
</div>
{/* <div className={styles.dateTableBox}>
<Table
style={{marginTop:'20px', textAlign:'center'}} // position: 'relative', display: 'flex', justifyContent: 'space-between', width: '100%', flexWrap:'wrap'
columns={tableColumns}
dataSource={tableData}
onRow={(record, rowIndex) => {
return {
onClick: event => {
setSelectedTableRow(record);
}, // click row
};
}}
/>
</div> */}
<div className={styles.bottomContainer}>
<div className={styles.chartWrapper} id="chartdata">
<LaunchChart
data={chartData}
showXAxis
showYAxis
showGradient
lineColor="#e29227"
bgColor="#2f313500"
/>
</div>
<div className={styles.transferTable}>
<Table
style={{marginTop:'20px',textAlign:'center', height: '425px'}}
id="transferTable"
columns={transferTableHeader}
dataSource={transferData}
pagination={false}
scroll={{ y: 425 }}
rowClassName={(record, index) => styles.rowExpanded}
/>
</div>
</div>
</div>
);
}
Example #22
| Source File: Upload.js From video-journal-for-teams-fe with MIT License | 4 votes |
|
Upload = ({ updateUProfilePicture, user_id, imageUpload, clearPhotoUpload}) => {
const [file, setFile] = useState({})
const [showModal, setShowModal] = useState(false)
const onFileAdded = (file) => {
setFile(file[0]);
setShowModal(true)
}
const renderProgress = (file) => {
if (imageUpload.isUploading || imageUpload.progress === 100) {
return (
<div className="ProgressWrapper">
<Progress progress={imageUpload.progress ? imageUpload.progress : 0} />
<Icon type="check-circle"
className="CheckIcon"
alt="done"
src="baseline-check_circle_outline-24px.svg"
style={{
opacity:
imageUpload.progress && imageUpload.progress === 100 ? 0.5 : 0
}}/>
</div>
);
}
}
const handleOk = () => {
if (imageUpload.progress === 100){
toggleModal()
} else {
sendRequest(file)
}
}
const toggleModal = () => {
setShowModal(!showModal)
setFile({})
clearPhotoUpload();
}
const sendRequest = (file) => {
const formData = new FormData();
formData.append("photo", file, file.name);
updateUProfilePicture(user_id, formData);
}
return (
<div className="Upload">
<div className="Content">
<Dropzone
onFileAdded={onFileAdded}
// disabled={imageUpload.isUploading || imageUpload.progress === 100}
/>
</div>
<Modal
className="upload-modal"
title="Upload Profile Picture"
visible={showModal}
onOk={handleOk}
onCancel={toggleModal}
// okText={imageUpload.progress === 100 ? "Done" : "Upload"}
footer={[
<Button key="submit" type="primary" loading={imageUpload.isUploading} onClick={handleOk}>
{imageUpload.progress === 100 ? "Done" : "Upload"}
</Button>,
]}
>{imageUpload.error ? <Alert message={imageUpload.error} type="error" /> : null}
<div className="Files">
{file ? <div key={file.name} className="Row">
<img src={file.path}/>
<span className="Filename">{file.name}</span>
{renderProgress(file)}
</div> : null
}
</div>
</Modal>
</div>
);
}
Example #23
| Source File: index.jsx From VisGeo-ETL with MIT License | 4 votes |
|
ModalConnection = ({ open, close }) => {
const [error, setError] = useState(false);
const [errorMessage, setErrorMessage] = useState(false);
const [username, setUsername] = useState('');
const [password, setPassword] = useState('');
const [host, setHost] = useState('');
const [port, setPort] = useState('');
const [database, setDatabase] = useState('');
async function handleConnect() {
const data = {
username,
password,
host,
port,
database,
};
if (username && password && host && port && database) {
try {
const response = await api.post('/auth', data);
const { isConnected } = response?.data;
if (isConnected) close(true);
} catch (err) {
setError(true);
setErrorMessage('Ocorreu um erro ao tentar se conectar com o servidor');
}
return;
}
setError(true);
setErrorMessage('Campos não podem estar nulos');
}
const handleClose = () => {
close(true);
};
return (
<Modal show={!open}>
<Modal.Header>
<h1>ACESSE O BANCO DE DADOS DESEJADO</h1>
<CloseIcon onClick={handleClose} />
</Modal.Header>
{error && (
<Alert
message="Erro"
description={errorMessage}
type="error"
closable
showIcon
onClose={() => setError(false)}
/>
)}
<div className="cred-info-container">
<section>
<span className="cred-meta-info">
<UserIcon className="white-icon" />
Username
</span>
<span className="cred-meta-info">
<Lock className="white-icon" />
Senha
</span>
<input onChange={(e) => setUsername(e.target.value)} type="text" className="cred-input-info" />
<input onChange={(e) => setPassword(e.target.value)} type="password" className="cred-input-info" />
</section>
<section>
<span className="cred-meta-info">
<HostIcon className="white-icon" />
Host
</span>
<span className="cred-meta-info">
<PortIcon className="white-icon" />
Port
</span>
<span className="cred-meta-info">
<DatabaseIcon className="white-icon" />
Database
</span>
<input onChange={(e) => setHost(e.target.value)} type="text" className="cred-input-info" />
<input onChange={(e) => setPort(e.target.value)} type="text" className="cred-input-info" />
<input onChange={(e) => setDatabase(e.target.value)} type="text" className="cred-input-info" />
</section>
</div>
<Modal.Footer>
<button
type="button"
onClick={handleConnect}
className="handle-button"
>
Conectar
</button>
</Modal.Footer>
</Modal>
);
}
Example #24
| Source File: index.jsx From react-antd-admin-template with MIT License | 4 votes |
|
RightPanel = (props) => {
const {
settingPanelVisible,
toggleSettingPanel,
changeSetting,
sidebarLogo: defaultSidebarLogo,
fixedHeader: defaultFixedHeader,
tagsView: defaultTagsView,
} = props;
const [sidebarLogo, setSidebarLogo] = useState(defaultSidebarLogo);
const [fixedHeader, setFixedHeader] = useState(defaultFixedHeader);
const [tagsView, setTagsView] = useState(defaultTagsView);
const sidebarLogoChange = (checked) => {
setSidebarLogo(checked);
changeSetting({ key: "sidebarLogo", value: checked });
};
const fixedHeaderChange = (checked) => {
setFixedHeader(checked);
changeSetting({ key: "fixedHeader", value: checked });
};
const tagsViewChange = (checked) => {
setTagsView(checked);
changeSetting({ key: "tagsView", value: checked });
};
const handleCopy = (e) => {
let config = `
export default {
showSettings: true,
sidebarLogo: ${sidebarLogo},
fixedHeader: ${fixedHeader},
tagsView: ${tagsView},
}
`;
clip(config, e);
};
return (
<div className="rightSettings">
<Drawer
title="系统设置"
placement="right"
width={350}
onClose={toggleSettingPanel}
visible={settingPanelVisible}
>
<Row>
<Col span={12}>
<span>侧边栏 Logo</span>
</Col>
<Col span={12}>
<Switch
checkedChildren="开"
unCheckedChildren="关"
defaultChecked={sidebarLogo}
onChange={sidebarLogoChange}
/>
</Col>
</Row>
<Divider dashed />
<Row>
<Col span={12}>
<span>固定 Header</span>
</Col>
<Col span={12}>
<Switch
checkedChildren="开"
unCheckedChildren="关"
defaultChecked={fixedHeader}
onChange={fixedHeaderChange}
/>
</Col>
</Row>
<Divider dashed />
<Row>
<Col span={12}>
<span>开启 Tags-View</span>
</Col>
<Col span={12}>
<Switch
checkedChildren="开"
unCheckedChildren="关"
defaultChecked={tagsView}
onChange={tagsViewChange}
/>
</Col>
</Row>
<Divider dashed />
<Row>
<Col span={24}>
<Alert
message="开发者请注意:"
description="配置栏只在开发环境用于预览，生产环境不会展现，请拷贝后手动修改/src/defaultSettings.js配置文件"
type="warning"
showIcon
icon={<Icon type="notification" />}
style={{ marginBottom: "16px" }}
/>
<Button style={{ width: "100%" }} icon="copy" onClick={handleCopy}>
拷贝配置
</Button>
</Col>
</Row>
</Drawer>
</div>
);
}
Example #25
| Source File: App.jsx From Tai-Shang-NFT-Wallet with MIT License | 4 votes |
|
function App() {
const mainnetProvider = scaffoldEthProvider && scaffoldEthProvider._network ? scaffoldEthProvider : mainnetInfura;
console.log("mainnetProvider:", mainnetProvider);
const [injectedProvider, setInjectedProvider] = useState();
const [address, setAddress] = useState();
/* ? This hook will get the price of ETH from ? Uniswap: */
const price = useExchangeEthPrice(targetNetwork, mainnetProvider);
/* ? This hook will get the price of Gas from ⛽️ EtherGasStation */
const gasPrice = useGasPrice(targetNetwork, "fast");
// Use your injected provider from ? Metamask or if you don't have it then instantly generate a ? burner wallet.
const userProviderAndSigner = useUserProviderAndSigner(injectedProvider, localProvider);
const userSigner = userProviderAndSigner.signer;
const nftGet = new URLSearchParams(window.location.search)
const nftGetQuery = nftGet.get("id");
useEffect(() => {
async function getAddress() {
if (userSigner) {
const newAddress = await userSigner.getAddress();
setAddress(newAddress);
}
}
getAddress();
}, [userSigner]);
// You can warn the user if you would like them to be on a specific network
const localChainId = localProvider && localProvider._network && localProvider._network.chainId;
const selectedChainId =
userSigner && userSigner.provider && userSigner.provider._network && userSigner.provider._network.chainId;
// For more hooks, check out ?eth-hooks at: https://www.npmjs.com/package/eth-hooks
// The transactor wraps transactions and provides notificiations
const tx = Transactor(userSigner, gasPrice);
// Faucet Tx can be used to send funds from the faucet
const faucetTx = Transactor(localProvider, gasPrice);
// ? scaffold-eth is full of handy hooks like this one to get your balance:
const yourLocalBalance = useBalance(localProvider, address);
// Just plug in different ? providers to get your balance on different chains:
const yourMainnetBalance = useBalance(mainnetProvider, address);
// Load in your local ? contract and read a value from it:
const readContracts = useContractLoader(localProvider);
// If you want to make ? write transactions to your contracts, use the userSigner:
const writeContracts = useContractLoader(userSigner, { chainId: localChainId });
// EXTERNAL CONTRACT EXAMPLE:
//
// If you want to bring in the mainnet DAI contract it would look like:
const mainnetContracts = useContractLoader(mainnetProvider);
// If you want to call a function on a new block
useOnBlock(mainnetProvider, () => {
console.log(`⛓ A new mainnet block is here: ${mainnetProvider._lastBlockNumber}`);
});
// Then read your DAI balance like:
// const myMainnetDAIBalance = useContractReader(mainnetContracts, "DAI", "balanceOf", [
// "0x34aA3F359A9D614239015126635CE7732c18fDF3",
// ]);
// keep track of a variable from the contract in the local React state:
const balance = useContractReader(readContracts, "N", "balanceOf", [address]);
console.log("? read_contracts:", readContracts);
// ? Listen for broadcast events
const transferEvents = useEventListener(readContracts, "N", "Transfer", localProvider, 1);
console.log("? Transfer events:", transferEvents);
//
// ? This effect will update Ns by polling when your balance changes
//
const yourBalance = balance && balance.toNumber && balance.toNumber();
const [Ns, setNs] = useState();
useEffect(() => {
const updateNs = async () => {
const collectibleUpdate = [];
for (let tokenIndex = 0; tokenIndex < balance; tokenIndex++) {
try {
console.log("Getting token index", tokenIndex);
const tokenId = await readContracts.N.tokenOfOwnerByIndex(address, tokenIndex);
console.log("tokenId", tokenId);
const tokenURI = await readContracts.N.tokenURI(tokenId);
console.log("tokenURI", tokenURI);
// TODO: Optimize
let svg;
// const svg = get_svg(tokenURI);
// const svg = decodeTokenURI(tokenURI);
// const ipfsHash = tokenURI.replace("https://ipfs.io/ipfs/", "");
// console.log("ipfsHash", ipfsHash);
axios({
method: "post",
url: backend,
data: {
token_uri: tokenURI,
base_url: baseURL,
},
headers: {
"Content-Type": "application/json",
},
})
.then(response => {
console.log("svg fetched: ", response.data.result.image);
svg = window.atob(response.data.result.image.slice(26));
console.log("svg fetched: ", svg);
try {
// const jsonManifest = JSON.parse(jsonManifestBuffer.toString());
// console.log("jsonManifest", jsonManifest);
collectibleUpdate.push({ id: tokenId, uri: tokenURI, svg: svg, owner: address });
} catch (e) {
console.log("error in svg fetched:", e);
}
})
.catch(error => {
console.log("error in svg fetched:", error);
});
// const jsonManifestBuffer = await getFromIPFS(ipfsHash);
} catch (e) {
console.log(e);
}
}
setNs(collectibleUpdate);
};
updateNs();
}, [address, yourBalance]);
/*
const addressFromENS = useResolveName(mainnetProvider, "austingriffith.eth");
console.log("? Resolved austingriffith.eth as:",addressFromENS)
*/
//
// ? DEBUG ???
//
useEffect(() => {
if (
DEBUG &&
mainnetProvider &&
address &&
selectedChainId &&
yourLocalBalance &&
yourMainnetBalance &&
readContracts &&
writeContracts &&
mainnetContracts
) {
console.log("_____________________________________ ? scaffold-eth _____________________________________");
console.log("? mainnetProvider", mainnetProvider);
console.log("? localChainId", localChainId);
console.log("?? selected address:", address);
console.log("??♂️ selectedChainId:", selectedChainId);
console.log("? yourLocalBalance", yourLocalBalance ? ethers.utils.formatEther(yourLocalBalance) : "...");
console.log("? yourMainnetBalance", yourMainnetBalance ? ethers.utils.formatEther(yourMainnetBalance) : "...");
console.log("? readContracts", readContracts);
console.log("? DAI contract on mainnet:", mainnetContracts);
console.log("? writeContracts", writeContracts);
}
}, [
mainnetProvider,
address,
selectedChainId,
yourLocalBalance,
yourMainnetBalance,
readContracts,
writeContracts,
mainnetContracts,
]);
let networkDisplay = "";
if (NETWORKCHECK && localChainId && selectedChainId && localChainId !== selectedChainId) {
const networkSelected = NETWORK(selectedChainId);
const networkLocal = NETWORK(localChainId);
if (selectedChainId === 1337 && localChainId === 31337) {
networkDisplay = (
<div style={{ zIndex: 2, position: "absolute", right: 0, top: 60, padding: 16 }}>
<Alert
message="⚠️ Wrong Network ID"
description={
<div>
You have <b>chain id 1337</b> for localhost and you need to change it to <b>31337</b> to work with
HardHat.
<div>(MetaMask -> Settings -> Networks -> Chain ID -> 31337)</div>
</div>
}
type="error"
closable={false}
/>
</div>
);
} else {
networkDisplay = (
<div style={{ zIndex: 2, position: "absolute", right: 0, top: 60, padding: 16 }}>
<Alert
message="⚠️ Wrong Network"
description={
<div>
You have <b>{networkSelected && networkSelected.name}</b> selected and you need to be on{" "}
<Button
onClick={async () => {
const ethereum = window.ethereum;
const data = [
{
chainId: "0x" + targetNetwork.chainId.toString(16),
chainName: targetNetwork.name,
nativeCurrency: targetNetwork.nativeCurrency,
rpcUrls: [targetNetwork.rpcUrl],
blockExplorerUrls: [targetNetwork.blockExplorer],
},
];
console.log("data", data);
const tx = await ethereum.request({ method: "wallet_addEthereumChain", params: data }).catch();
if (tx) {
console.log(tx);
}
}}
>
<b>{networkLocal && networkLocal.name}</b>
</Button>
.
</div>
}
type="error"
closable={false}
/>
</div>
);
}
} else {
networkDisplay = (
<div style={{ zIndex: -1, position: "absolute", right: 154, top: 28, padding: 16, color: targetNetwork.color }}>
{targetNetwork.name}
</div>
);
}
const loadWeb3Modal = useCallback(async () => {
const provider = await web3Modal.connect();
setInjectedProvider(new ethers.providers.Web3Provider(provider));
provider.on("chainChanged", chainId => {
console.log(`chain changed to ${chainId}! updating providers`);
setInjectedProvider(new ethers.providers.Web3Provider(provider));
});
provider.on("accountsChanged", () => {
console.log(`account changed!`);
setInjectedProvider(new ethers.providers.Web3Provider(provider));
});
// Subscribe to session disconnection
provider.on("disconnect", (code, reason) => {
console.log(code, reason);
logoutOfWeb3Modal();
});
}, [setInjectedProvider]);
useEffect(() => {
if (web3Modal.cachedProvider) {
loadWeb3Modal();
}
}, [loadWeb3Modal]);
const [route, setRoute] = useState();
useEffect(() => {
setRoute(window.location.pathname);
}, [setRoute]);
let faucetHint = "";
const [faucetClicked, setFaucetClicked] = useState(false);
if (
!faucetClicked &&
localProvider &&
localProvider._network &&
localProvider._network.chainId == 31337 &&
yourLocalBalance &&
ethers.utils.formatEther(yourLocalBalance) <= 0
) {
faucetHint = (
<div style={{ padding: 16 }}>
<Button
type="primary"
onClick={() => {
faucetTx({
to: address,
value: ethers.utils.parseEther("0.01"),
});
setFaucetClicked(true);
}}
>
? Grab funds from the faucet ⛽️
</Button>
</div>
);
}
const [transferToAddresses, setTransferToAddresses] = useState({});
nProgress.done();
return (
<div className="App">
{/* ✏️ Edit the header and change the title to your project name */}
<Header />
{networkDisplay}
<BrowserRouter>
{nftGetQuery ? (
<SingleNFT nftGetQuery={nftGetQuery} readContracts={readContracts} address={address} />
) : (
<Menu style={{ textAlign: "center" }} selectedKeys={[route]} mode="horizontal">
<Menu.Item key="/">
<Link
// onClick={() => {
// setRoute("/");
// }}
to="/Tai-Shang-NFT-Wallet"
>
Ns
</Link>
</Menu.Item>
<Menu.Item key="/contract-interactor">
<Link
// onClick={() => {
// setRoute("/contract-interactor");
// }}
to="/Tai-Shang-NFT-Wallet/contract-interactor"
>
Contract Interactor
</Link>
</Menu.Item>
<Menu.Item key="/transfers">
<Link
// onClick={() => {
// setRoute("/transfers");
// }}
to="/Tai-Shang-NFT-Wallet/transfers"
>
Transfers
</Link>
</Menu.Item>
{/* <Menu.Item key="/ipfsup">
<Link
onClick={() => {
setRoute("/ipfsup");
}}
to="/ipfsup"
>
IPFS Upload
</Link>
</Menu.Item>
<Menu.Item key="/ipfsdown">
<Link
onClick={() => {
setRoute("/ipfsdown");
}}
to="/ipfsdown"
>
IPFS Download
</Link>
</Menu.Item>
<Menu.Item key="/debugcontracts">
<Link
onClick={() => {
setRoute("/debugcontracts");
}}
to="/debugcontracts"
>
Debug Contracts
</Link>
</Menu.Item> */}
</Menu>
)}
<Switch>
<Route exact path="/Tai-Shang-NFT-Wallet">
{/*
? this scaffolding is full of commonly used components
this <Contract/> component will automatically parse your ABI
and give you a form to interact with it locally
*/}
<div style={{ width: 640, margin: "auto", marginTop: 32, paddingBottom: 32 }}>
<List
bordered
dataSource={Ns}
renderItem={item => {
const id = item.id.toNumber();
return (
<List.Item key={id + "_" + item.uri + "_" + item.owner}>
<Card
title={
<div>
<span style={{ fontSize: 16, marginRight: 8 }}>#{id}</span> {item.name}
</div>
}
>
<div style={{ width: "300px", height: "300px" }} id={"nft_" + item.id}>
<div dangerouslySetInnerHTML={{ __html: item.svg }} />
{/* {item.svg} */}
{/* <img src={item.image} style={{ maxWidth: 150 }} /> */}
</div>
<div>{item.description}</div>
<a
download={item.id + ".svg"}
href={`data:text/plain;charset=utf-8,${encodeURIComponent(item.svg)}`}
// href={item.uri}
// IMPORTANT: DOWNLOAD BUTTON HERE
>
<Button
type="primary"
shape="round"
icon={<DownloadOutlined />}
style={{ marginTop: "16px" }}
>
download .svg
</Button>
</a>
{/* <a download={item.id + ".json"} href={item.uri}>
<Button
type="primary"
shape="round"
icon={<DownloadOutlined />}
style={{ marginTop: "16px" }}
>
download json
</Button>
</a> */}
</Card>
<div>
owner:{" "}
<Address
address={item.owner}
ensProvider={mainnetProvider}
blockExplorer={blockExplorer}
fontSize={16}
/>
<AddressInput
ensProvider={mainnetProvider}
placeholder="transfer to address"
value={transferToAddresses[id]}
onChange={newValue => {
const update = {};
update[id] = newValue;
setTransferToAddresses({ ...transferToAddresses, ...update });
}}
/>
<Button
onClick={() => {
console.log("writeContracts", writeContracts);
tx(writeContracts.N.transferFrom(address, transferToAddresses[id], id));
}}
>
Transfer
</Button>
</div>
</List.Item>
);
}}
/>
</div>
</Route>
{/* IMPORTANT PLACE */}
<Route exact path="/Tai-Shang-NFT-Wallet/contract-interactor">
{/*
? this scaffolding is full of commonly used components
this <Contract/> component will automatically parse your ABI
and give you a form to interact with it locally
*/}
<Contract
name="N"
signer={userSigner}
provider={localProvider}
address={address}
blockExplorer={blockExplorer}
/>
</Route>
<Route path="/Tai-Shang-NFT-Wallet/transfers">
<div style={{ width: 600, margin: "auto", marginTop: 32, paddingBottom: 32 }}>
<List
bordered
dataSource={transferEvents}
renderItem={item => {
return (
<List.Item key={item[0] + "_" + item[1] + "_" + item.blockNumber + "_" + item[2].toNumber()}>
<span style={{ fontSize: 16, marginRight: 8 }}>#{item[2].toNumber()}</span>
<Address address={item[0]} ensProvider={mainnetProvider} fontSize={16} /> =>
<Address address={item[1]} ensProvider={mainnetProvider} fontSize={16} />
</List.Item>
);
}}
/>
</div>
</Route>
{/* <Route path="/ipfsup">
<div style={{ paddingTop: 32, width: 740, margin: "auto", textAlign: "left" }}>
<ReactJson
style={{ padding: 8 }}
src={yourJSON}
theme="pop"
enableClipboard={false}
onEdit={(edit, a) => {
setYourJSON(edit.updated_src);
}}
onAdd={(add, a) => {
setYourJSON(add.updated_src);
}}
onDelete={(del, a) => {
setYourJSON(del.updated_src);
}}
/>
</div>
<Button
style={{ margin: 8 }}
loading={sending}
size="large"
shape="round"
type="primary"
onClick={async () => {
console.log("UPLOADING...", yourJSON);
setSending(true);
setIpfsHash();
const result = await ipfs.add(JSON.stringify(yourJSON)); // addToIPFS(JSON.stringify(yourJSON))
if (result && result.path) {
setIpfsHash(result.path);
}
setSending(false);
console.log("RESULT:", result);
}}
>
Upload to IPFS
</Button>
<div style={{ padding: 16, paddingBottom: 150 }}>{ipfsHash}</div>
</Route>
<Route path="/ipfsdown">
<div style={{ paddingTop: 32, width: 740, margin: "auto" }}>
<Input
value={ipfsDownHash}
placeHolder="IPFS hash (like QmadqNw8zkdrrwdtPFK1pLi8PPxmkQ4pDJXY8ozHtz6tZq)"
onChange={e => {
setIpfsDownHash(e.target.value);
}}
/>
</div>
<Button
style={{ margin: 8 }}
loading={sending}
size="large"
shape="round"
type="primary"
onClick={async () => {
console.log("DOWNLOADING...", ipfsDownHash);
setDownloading(true);
setIpfsContent();
const result = await getFromIPFS(ipfsDownHash); // addToIPFS(JSON.stringify(yourJSON))
if (result && result.toString) {
setIpfsContent(result.toString());
}
setDownloading(false);
}}
>
Download from IPFS
</Button>
<pre style={{ padding: 16, width: 500, margin: "auto", paddingBottom: 150 }}>{ipfsContent}</pre>
</Route>
<Route path="/debugcontracts">
<Contract
name="BeWater N"
signer={userSigner}
provider={localProvider}
address={address}
blockExplorer={blockExplorer}
/>
</Route> */}
</Switch>
</BrowserRouter>
<ThemeSwitch />
{/* ?? Your account is in the top right with a wallet at connect options */}
<div style={{ position: "fixed", textAlign: "right", right: 0, top: 0, padding: 10 }}>
<Account
address={address}
localProvider={localProvider}
userSigner={userSigner}
mainnetProvider={mainnetProvider}
price={price}
web3Modal={web3Modal}
loadWeb3Modal={loadWeb3Modal}
logoutOfWeb3Modal={logoutOfWeb3Modal}
blockExplorer={blockExplorer}
/>
{faucetHint}
</div>
</div>
);
}
Example #26
| 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 #27
| Source File: index.js From online-test-platform with Apache License 2.0 | 4 votes |
|
render() {
const { setting } = this.props;
const { navTheme, primaryColor, layout, colorWeak } = setting;
const { collapse } = this.state;
return (
<Drawer
visible={collapse}
width={300}
onClose={this.togglerContent}
placement="right"
handler={
<div className={styles.handle} onClick={this.togglerContent}>
<Icon
type={collapse ? 'close' : 'setting'}
style={{
color: '#fff',
fontSize: 20,
}}
/>
</div>
}
style={{
zIndex: 999,
}}
>
<div className={styles.content}>
<Body title={formatMessage({ id: 'app.setting.pagestyle' })}>
<BlockCheckbox
list={[
{
key: 'dark',
url: 'https://gw.alipayobjects.com/zos/rmsportal/LCkqqYNmvBEbokSDscrm.svg',
title: formatMessage({ id: 'app.setting.pagestyle.dark' }),
},
{
key: 'light',
url: 'https://gw.alipayobjects.com/zos/rmsportal/jpRkZQMyYRryryPNtyIC.svg',
title: formatMessage({ id: 'app.setting.pagestyle.light' }),
},
]}
value={navTheme}
onChange={value => this.changeSetting('navTheme', value)}
/>
</Body>
<ThemeColor
title={formatMessage({ id: 'app.setting.themecolor' })}
value={primaryColor}
onChange={color => this.changeSetting('primaryColor', color)}
/>
<Divider />
<Body title={formatMessage({ id: 'app.setting.navigationmode' })}>
<BlockCheckbox
list={[
{
key: 'sidemenu',
url: 'https://gw.alipayobjects.com/zos/rmsportal/JopDzEhOqwOjeNTXkoje.svg',
title: formatMessage({ id: 'app.setting.sidemenu' }),
},
{
key: 'topmenu',
url: 'https://gw.alipayobjects.com/zos/rmsportal/KDNDBbriJhLwuqMoxcAr.svg',
title: formatMessage({ id: 'app.setting.topmenu' }),
},
]}
value={layout}
onChange={value => this.changeSetting('layout', value)}
/>
</Body>
<List
split={false}
dataSource={this.getLayoutSetting()}
renderItem={this.renderLayoutSettingItem}
/>
<Divider />
<Body title={formatMessage({ id: 'app.setting.othersettings' })}>
<List
split={false}
renderItem={this.renderLayoutSettingItem}
dataSource={[
{
title: formatMessage({ id: 'app.setting.weakmode' }),
action: (
<Switch
size="small"
checked={!!colorWeak}
onChange={checked => this.changeSetting('colorWeak', checked)}
/>
),
},
]}
/>
</Body>
<Divider />
<CopyToClipboard
text={JSON.stringify(omit(setting, ['colorWeak']), null, 2)}
onCopy={() => message.success(formatMessage({ id: 'app.setting.copyinfo' }))}
>
<Button block icon="copy">
{formatMessage({ id: 'app.setting.copy' })}
</Button>
</CopyToClipboard>
<Alert
type="warning"
className={styles.productionHint}
message={
<div>
{formatMessage({ id: 'app.setting.production.hint' })}{' '}
<a
href="https://u.ant.design/pro-v2-default-settings"
target="_blank"
rel="noopener noreferrer"
>
src/defaultSettings.js
</a>
</div>
}
/>
</div>
</Drawer>
);
}
Example #28
| Source File: Moonshot.jsx From moonshot with MIT License | 4 votes |
|
function Moonshot(props) {
const mainnetProvider = scaffoldEthProvider && scaffoldEthProvider._network ? scaffoldEthProvider : mainnetInfura;
const [injectedProvider, setInjectedProvider] = useState();
/* ? This hook will get the price of ETH from ? Uniswap: */
const price = useExchangePrice(targetNetwork, mainnetProvider);
/* ? This hook will get the price of Gas from ⛽️ EtherGasStation */
const gasPrice = useGasPrice(targetNetwork, "fast");
// Use your injected provider from ? Metamask or if you don't have it then instantly generate a ? burner wallet.
const userProvider = useUserProvider(injectedProvider, localProvider);
const address = useUserAddress(userProvider);
// You can warn the user if you would like them to be on a specific network
const localChainId = localProvider && localProvider._network && localProvider._network.chainId;
const selectedChainId = userProvider && userProvider._network && userProvider._network.chainId;
// For more hooks, check out ?eth-hooks at: https://www.npmjs.com/package/eth-hooks
// The transactor wraps transactions and provides notificiations
const tx = Transactor(userProvider, gasPrice);
// Faucet Tx can be used to send funds from the faucet
const faucetTx = Transactor(localProvider, gasPrice);
// ? scaffold-eth is full of handy hooks like this one to get your balance:
const yourLocalBalance = useBalance(localProvider, address);
// Just plug in different ? providers to get your balance on different chains:
// const yourMainnetBalance = useBalance(mainnetProvider, address);
// Load in your local ? contract and read a value from it:
// const readContracts = useContractLoader(localProvider)
// If you want to make ? write transactions to your contracts, use the userProvider:
// const writeContracts = useContractLoader(userProvider)
// EXTERNAL CONTRACT EXAMPLE:
//
// If you want to bring in the mainnet DAI contract it would look like:
// const mainnetDAIContract = useExternalContractLoader(mainnetProvider, DAI_ADDRESS, DAI_ABI)
// If you want to call a function on a new block
useOnBlock(mainnetProvider, () => {
console.log(`⛓ A new mainnet block is here: ${mainnetProvider._lastBlockNumber}`);
});
// Then read your DAI balance like:
// const myMainnetDAIBalance = useContractReader({DAI: mainnetDAIContract},"DAI", "balanceOf",["0x34aA3F359A9D614239015126635CE7732c18fDF3"])
// keep track of a variable from the contract in the local React state:
// const purpose = useContractReader(readContracts,"YourContract", "purpose")
// ? Listen for broadcast events
// const setPurposeEvents = useEventListener(readContracts, "YourContract", "SetPurpose", localProvider, 1);
/*
const addressFromENS = useResolveName(mainnetProvider, "austingriffith.eth");
console.log("? Resolved austingriffith.eth as:",addressFromENS)
*/
//
// ? DEBUG ???
//
useEffect(() => {
if (
DEBUG &&
mainnetProvider &&
address &&
selectedChainId &&
yourLocalBalance /* && yourMainnetBalance &&readContracts && writeContracts && mainnetDAIContract */
) {
console.log("_____________________________________ ? scaffold-eth _____________________________________");
console.log("? mainnetProvider", mainnetProvider);
console.log("? localChainId", localChainId);
console.log("?? selected address:", address);
console.log("??♂️ selectedChainId:", selectedChainId);
console.log("? yourLocalBalance", yourLocalBalance ? formatEther(yourLocalBalance) : "...");
/* console.log("? yourMainnetBalance",yourMainnetBalance?formatEther(yourMainnetBalance):"...") */
/* console.log("? readContracts",readContracts) */
/* console.log("? DAI contract on mainnet:",mainnetDAIContract) */
/* console.log("? writeContracts",writeContracts) */
}
}, [
mainnetProvider,
address,
selectedChainId,
yourLocalBalance /* yourMainnetBalance, readContracts, writeContracts, mainnetDAIContract */,
]);
let networkDisplay = "";
if (localChainId && selectedChainId && localChainId != selectedChainId) {
networkDisplay = (
<div style={{ zIndex: 2, position: "absolute", right: 0, top: 0, padding: 16 }}>
<Alert
message="⚠️ Wrong Network"
description={
<div>
You have <b>{NETWORK(selectedChainId).name}</b> selected and you need to be on{" "}
<b>{NETWORK(localChainId).name}</b>.
</div>
}
type="error"
closable={false}
/>
</div>
);
} else {
networkDisplay = (
<div style={{ zIndex: -1, position: "absolute", right: 154, top: 8, padding: 16, color: targetNetwork.color }}>
{targetNetwork.name}
</div>
);
}
const loadWeb3Modal = useCallback(async () => {
const provider = await web3Modal.connect();
setInjectedProvider(new Web3Provider(provider));
}, [setInjectedProvider]);
useEffect(() => {
if (web3Modal.cachedProvider) {
loadWeb3Modal();
}
}, [loadWeb3Modal]);
const [route, setRoute] = useState();
useEffect(() => {
setRoute(window.location.pathname);
}, [setRoute]);
let faucetHint = "";
const faucetAvailable = localProvider && localProvider.connection && targetNetwork.name == "localhost";
const [faucetClicked, setFaucetClicked] = useState(false);
if (
!faucetClicked &&
localProvider &&
localProvider._network &&
localProvider._network.chainId == 31337 &&
yourLocalBalance &&
formatEther(yourLocalBalance) <= 0
) {
faucetHint = (
<div style={{ padding: 16 }}>
<Button
type="primary"
onClick={() => {
faucetTx({
to: address,
value: parseEther("0.01"),
});
setFaucetClicked(true);
}}
>
? Grab funds from the faucet ⛽️
</Button>
</div>
);
}
const isSigner = injectedProvider && injectedProvider.getSigner && injectedProvider.getSigner()._isSigner;
const [loading, setLoading] = useState();
const [result, setResult] = useState();
const [email, setEmail] = useState();
let display = "";
if (result) {
// maybe you want to check of the backend supplied a transaction id to look up?
// let possibleTxId = result.substr(-66)
// console.log("possibleTxId",possibleTxId)
// let extraLink = ""
// if(possibleTxId.indexOf("0x")==0){
// extraLink = <a href={blockExplorer+"tx/"+possibleTxId} target="_blank">view transaction on etherscan</a>
// }else{
// possibleTxId=""
// }
// maybe you want to parse and display a youtube if the link is to a video?
if (result.indexOf("https://youtu.be/") == 0) {
display = (
<div style={{ marginTop: 32 }}>
<div className="video-responsive">
<iframe
width="853"
height="480"
src={`https://www.youtube.com/embed/${result.replace("https://youtu.be/", "")}`}
frameBorder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowFullScreen
title="Embedded youtube"
/>
</div>
</div>
);
} else {
display = (
<div style={{ marginTop: 32 }}>
<ReactMarkdown>{result}</ReactMarkdown>
</div>
);
}
} else if (isSigner) {
display = (
<div>
<div style={{ width: 400, margin: "auto", marginTop: 32 }}>
<div>Enter your email to receive updates:</div>
<Input
placeholder="[email protected]"
value={email}
onChange={e => {
setEmail(e.target.value);
}}
/>
</div>
<Button
disabled={!email}
loading={loading}
style={{ marginTop: 32 }}
type="primary"
onClick={async () => {
setLoading(true);
try {
const msgToSign = await axios.get(serverUrl);
console.log("msgToSign", msgToSign);
if (msgToSign.data && msgToSign.data.length > 32) {
// <--- traffic escape hatch?
let currentLoader = setTimeout(() => {
setLoading(false);
}, 4000);
const message = msgToSign.data.replace("**EMAIL**", email);
const sig = await userProvider.send("personal_sign", [message, address]);
clearTimeout(currentLoader);
currentLoader = setTimeout(() => {
setLoading(false);
}, 4000);
console.log("sig", sig);
const res = await axios.post(serverUrl, {
email,
address,
message,
signature: sig,
});
clearTimeout(currentLoader);
setLoading(false);
console.log("RESULT:", res);
if (res.data) {
setResult(res.data);
}
} else {
setLoading(false);
setResult(
"? Sorry, the server is overloaded. ⏳ Maybe just email [email protected] and I'll add you to the list manually ?",
);
}
} catch (e) {
message.error(" Sorry, the server is overloaded. ???");
console.log("FAILED TO GET...");
}
}}
>
<span style={{ marginRight: 8 }}>?</span> <span style={{ marginRight: 8 }}>sign as </span>
<Address noLink style={{ zIndex: -1 }} value={address} fontSize={16} ensProvider={mainnetProvider} />
</Button>
</div>
);
}
return (
<div className="App">
{/* ✏️ Edit the header and change the title to your project name */}
<Header />
{networkDisplay}
<div style={{ width: 500, margin: "auto", marginTop: 32 }}>
<img src="./moonshot.gif" style={{ minWidth: 524 }} />
<div style={{ marginTop: 16 }}>
For the first time ever it's possible to program our values into our money. We value coordination, so why not
use programmable money to create better coordination tools?
</div>
<div style={{ marginTop: 16 }}>
The moonshot collective is a group of builders & web3 community members who are looking to prototype
experiments in coordination (whether thats public goods, private goods, governance tools).
</div>
<div style={{ marginTop: 16 }}>Got dev skills + want to help build the future? Get Involved:</div>
</div>
<div style={{ textAlign: "center", padding: 10, marginTop: 32 }}>
<Account
connectText={
<div>
<img src="./rocket_3.svg" style={{ position: "absolute", left: -54, top: -4, maxHeight: 48 }} />
Connect Ethereum Wallet
</div>
}
onlyShowButton={!isSigner}
address={address}
localProvider={localProvider}
userProvider={userProvider}
mainnetProvider={mainnetProvider}
price={price}
web3Modal={web3Modal}
loadWeb3Modal={loadWeb3Modal}
logoutOfWeb3Modal={logoutOfWeb3Modal}
blockExplorer={blockExplorer}
/>
{faucetHint}
</div>
{display}
<div style={{ paddingTop: 64 }}>
<h1>First Meeting: Monday, July 19!!!</h1>
</div>
<div>
Please support the:
<a href="https://gitcoin.co/grants/3004/moonshot-collective" target="_blank">
Gitcoin Grant
</a>
</div>
</div>
);
}
Example #29
| Source File: ExchangeForm.js From bonded-stablecoin-ui with MIT License | 4 votes |
|
ExchangeForm = () => {
const { exchanges_recepient, formInit, referrer } = useSelector(
(state) => state.settings
);
const dispatch = useDispatch();
const { t } = useTranslation();
const params = useParams();
const [width] = useWindowSize();
const { data, loaded } = useSelector((state) => state.list);
const [activeCurrency, setActiveCurrency] = useState("btc");
const [amountCurrency, setAmountCurrency] = useState(0.1);
const [index, setIndex] = useState(0);
const [isCreated, setIsCreated] = useState(false);
const [amountToken, setAmountToken] = useState(undefined);
let tokens = getTokens(data);
const [activeTokenAdr, setActiveTokenAdr] = useState(
config.TESTNET ? "2SEBEEDTEC7LTDVZ765MGQXJW33GSRUD" : "VLKI3XMMX5YULOBA6ZXBXDPI6TXF6V3D"
);
const [oraclePrice, setOraclePrice] = useState(undefined);
const [inited, setInited] = useState(false);
const [recipient, setRecipient] = useState(
exchanges_recepient
? { value: exchanges_recepient, valid: true }
: {
value: undefined,
valid: undefined,
}
);
const provider = activeCurrency && (config.oswapccCurrencies.includes(activeCurrency.toUpperCase()) ? "oswapcc" : "simpleswap");
useEffect(() => {
const id = setInterval(() => setIndex((i) => i + 1), 1000 * 60 * 5);
return () => {
clearInterval(id);
};
}, []);
useEffect(() => {
if (loaded) {
if (params.address) {
setAmountCurrency(formInit?.amountCurrency || "0.1");
setActiveCurrency(formInit?.currentCurrency || "btc");
setActiveTokenAdr(params.address);
} else {
// if (formInit?.currentCurrency === "gbyte") {
// setAmountToken(formInit?.amountToken);
// setActiveCurrency("gbyte");
// setActiveTokenAdr(formInit.currentToken);
// } else if (formInit?.currentCurrency !== undefined) {
// setActiveCurrency(formInit.currentCurrency);
if (formInit?.amountCurrency && formInit?.currentToken) {
setAmountCurrency(formInit.amountCurrency);
setActiveTokenAdr(formInit.currentToken);
}
// setActiveTokenAdr(formInit.currentToken);
// }
}
setInited(true);
}
}, [loaded]);
const buyForGbyteRef = useRef(null);
const buyRef = useRef(null);
const currentTokenData = activeTokenAdr ? data[activeTokenAdr] : undefined;
const reservePrice = useGetReservePrice(currentTokenData && currentTokenData.params.reserve_asset);
useEffect(() => {
(async () => {
if (currentTokenData && inited) {
const { bonded_state, params } = currentTokenData;
const price = await getOraclePrice(bonded_state, params);
setOraclePrice(price);
}
})();
}, [currentTokenData, setOraclePrice, inited]);
// const allCurrencies = useGetCurrency();
const ranges = useGetRanges(activeCurrency);
const exchangeRates = useGetRate(activeCurrency, index, provider === "oswapcc" ? amountCurrency : 1, inited);
const compensation = useGetCompensation(
amountCurrency,
activeCurrency,
exchangeRates
);
const handleAmountCurrency = (ev) => {
const value = ev.target.value;
const reg = /^[0-9.]+$/;
if (
(~(value + "").indexOf(".") ? (value + "").split(".")[1].length : 0) <= 9
) {
if (reg.test(String(value)) || value === "") {
setAmountCurrency(value);
}
}
};
const handleAmountTokens = (ev, decimals) => {
const value = ev.target.value;
const reg = /^[0-9.]+$/;
if (
!currentTokenData ||
(~(value + "").indexOf(".") ? (value + "").split(".")[1].length : 0) <=
decimals
) {
if (reg.test(String(value)) || value === "") {
setAmountToken(value);
}
}
};
useEffect(() => {
(async () => {
if (!currentTokenData) return undefined;
const { bonded_state, params, fund } = currentTokenData;
const result =
currentTokenData &&
oraclePrice &&
oraclePrice !== undefined &&
!isEmpty(bonded_state) &&
$get_exchange_result({
tokens1: 0,
tokens2: amountToken * 10 ** params.decimals2,
params: params,
vars: bonded_state,
oracle_price: oraclePrice,
timestamp: Math.floor(Date.now() / 1000),
reservePrice,
isV2: !!fund
});
if (result && activeCurrency === "gbyte" && inited) {
setAmountCurrency(((result.reserve_needed * 1.01) / 1e9).toFixed(9));
}
})();
}, [
amountToken,
currentTokenData,
activeCurrency,
exchangeRates,
oraclePrice,
]);
useEffect(() => {
const newData = {
currentToken: activeTokenAdr,
amountToken,
currentCurrency: activeCurrency,
amountCurrency: amountCurrency,
};
if (
JSON.stringify(newData) !== JSON.stringify(formInit) &&
inited
) {
dispatch(updateExchangesForm(newData));
}
}, [activeTokenAdr, amountToken, activeCurrency, amountCurrency]);
useEffect(() => {
if (!currentTokenData) return undefined;
const { bonded_state, params, fund } = currentTokenData;
const result =
bonded_state &&
params &&
oraclePrice &&
activeCurrency !== "gbyte" &&
$get_exchange_result({
tokens1: 0,
tokens2: 0,
params: params,
vars: bonded_state,
oracle_price: oraclePrice,
timestamp: Math.floor(Date.now() / 1000),
reservePrice,
isV2: !!fund
});
if (result && activeCurrency !== "gbyte" && inited) {
const expectT2 =
(1 / result.target_p2) *
(Number(amountCurrency) * Number(exchangeRates) + (compensation || 0));
setAmountToken(expectT2.toFixed(params.decimals2));
}
}, [
amountCurrency,
currentTokenData,
activeCurrency,
exchangeRates,
compensation,
oraclePrice
]);
const handleClickExchange = () => {
createExchange({
address: recipient.value,
currency_from: activeCurrency,
asset: currentTokenData.asset_2,
symbol: currentTokenData.symbol,
amount_currency: amountCurrency,
amount_token: amountToken,
active_currency: activeCurrency,
recipient,
curve_address: activeTokenAdr,
ref: referrer,
after: ({ isError, clear = true }) => {
if (!isError) {
message.success(t("buy.exchange_success", "The exchange was successfully added to the list and is waiting for payment"));
dispatch(addExchangeRecipient(recipient.value));
} else {
message.error(t("buy.exchange_error", "An error occurred, please try again later"));
}
ReactGA.event({
category: "Stablecoin",
action: "Buy interest tokens for currency",
});
if (!isError || (isError && clear)) {
setAmountCurrency(amountCurrency);
setAmountToken(undefined);
}
setIsCreated(false);
},
});
};
const handleChange = (value) => {
if (obyte.utils.isValidAddress(value)) {
setRecipient({ value, valid: true });
} else {
setRecipient({ value, valid: false });
}
};
useEffect(() => {
if (inited && activeCurrency !== "gbyte") {
setAmountToken(undefined);
}
}, [activeCurrency]);
const getResult = () =>
$get_exchange_result({
tokens1: 0,
tokens2: amountToken * 10 ** currentTokenData.params.decimals2,
params: currentTokenData.params,
vars: currentTokenData.bonded_state,
oracle_price: oraclePrice,
timestamp: Math.floor(Date.now() / 1000),
reservePrice,
isV2: currentTokenData.fund
});
if (!inited) return <Spin />;
return (
<div>
{exchangeRates === null && activeCurrency !== "gbyte" && <Alert
message={t("buy.exchange_warning", "{{currency}}-to-GBYTE exchange service is currently unavailable, please pay with another currency or try again later.", { currency: String(activeCurrency).toUpperCase() })}
type="warning"
style={{ marginTop: 10 }}
/>}
<Row style={{ marginBottom: 20, marginTop: 50 }}>
<Col lg={{ span: 9, offset: 2 }} xs={{ span: 24, offset: 0 }} md={{ span: 16, offset: 4 }}>
<div style={{ marginBottom: 5 }}>
<Text type="secondary">
<Trans i18nKey="buy.you_send">
You <b>send</b>
</Trans>
</Text>
</div>
<Input.Group compact>
<Input
style={{ width: "50%" }}
size="large"
placeholder={`${t("buy.amount", "Amount")} ${ranges && ranges.min ? "Min. " + ranges.min : ""
} ${ranges && ranges.max ? " Max. " + ranges.max : ""}`}
onChange={handleAmountCurrency}
value={isNaN(amountCurrency) ? undefined : amountCurrency}
disabled={activeCurrency === "gbyte" || isCreated}
onKeyPress={(ev) => {
if (ev.key === "Enter") {
if (activeCurrency === "gbyte") {
buyForGbyteRef.current.click();
} else {
buyRef.current.click();
}
}
}}
/>
<Select
style={{ width: "50%" }}
size="large"
showSearch
placeholder={t("buy.currency_to_pay", "Currency to pay")}
onChange={(c) => {
setActiveCurrency(c);
}}
disabled={true} //isCreated
value={activeCurrency}
>
{/* <Select.OptGroup label={t("buy.popular_cryptocurrencies", "Popular cryptocurrencies")}> */}
{/* <Select.Option value="gbyte" key="c-gbyte">
GBYTE
</Select.Option> */}
{popularCurrencies.filter(
(c) => 1 // allCurrencies.includes(c)
).sort().map((c) => (
<Select.Option key={"c-" + c} value={c}>
<BtcLogo width="1em" height="1em" style={{ marginRight: 3, marginBottom: -1.5 }} /> {c.toUpperCase()}
</Select.Option>
))}
{/* </Select.OptGroup> */}
{/* <Select.OptGroup label={t("buy.others", "Others")}>
{allCurrencies.filter(
(c) => !popularCurrencies.includes(c)
).sort().map((c) => (
<Select.Option key={"c-" + c} value={c}>
{c.toUpperCase()}
</Select.Option>
))}{" "}
</Select.OptGroup> */}
</Select>
</Input.Group>
{/* {activeCurrency && activeCurrency !== "gbyte" && (
<span style={{ fontSize: 10 }}>
{t("buy.better_rate", "You get a better rate if you pay in GBYTE")}
</span>
)} */}
</Col>
<Col lg={{ span: 2, offset: 0 }} xs={{ span: 24, offset: 0 }} md={{ span: 24, offset: 0 }}>
<div
style={{
marginTop: width < 990 ? 10 : 27,
textAlign: "center",
height: 38,
boxSizing: "border-box",
fontSize: "1.5em",
}}
>
{width < 990 ? <ArrowDownOutlined /> : <ArrowRightOutlined />}
</div>
</Col>
<Col lg={{ span: 9, offset: 0 }} xs={{ span: 24, offset: 0 }} md={{ span: 16, offset: 4 }}>
{!amountCurrency ||
(amountToken && compensation !== undefined) ||
activeCurrency === "gbyte" ? (
<>
<div style={{ marginBottom: 5 }}>
<Text type="secondary">
<Trans i18nKey="buy.you_get">
You <b>get</b>
</Trans>
</Text>
</div>
<Input.Group compact>
<Input
style={{ width: width > 500 ? "50%" : "100%" }}
size="large"
suffix={
(exchangeRates || activeCurrency === "gbyte") &&
reservePrice &&
amountCurrency &&
oraclePrice &&
amountToken ? (
<span style={{ color: "#ccc" }}>
≈{" "}
{activeCurrency === "gbyte"
? getResult().amountTokens2InCurrency.toFixed(2)
: (
Number(amountCurrency) *
exchangeRates *
reservePrice
).toFixed(2)}{" "}
USD
</span>
) : (
<span />
)
}
placeholder={t("buy.amount", "Amount")}
prefix={activeCurrency !== "gbyte" ? "≈" : ""}
value={isNaN(amountToken) ? undefined : amountToken}
onChange={(ev) =>
handleAmountTokens(
ev,
currentTokenData && currentTokenData.params.decimals2
)
}
disabled={activeCurrency !== "gbyte" || isCreated}
onKeyPress={(ev) => {
if (ev.key === "Enter") {
if (activeCurrency === "gbyte") {
if (!isNaN(amountToken) && !(Number(amountToken) === 0)) {
buyForGbyteRef.current.click();
}
} else {
buyRef.current.click();
}
}
}}
/>
<Select
style={{ width: width > 500 ? "50%" : "100%" }}
size="large"
showSearch
disabled={isCreated}
optionFilterProp="children"
placeholder={t("buy.will_receive", "The token you will receive")}
onChange={(c) => setActiveTokenAdr(c)}
value={activeTokenAdr}
>
{tokens.map((t) => (
<Select.Option key={"t-" + t.asset} value={t.address}>
<CoinIcon width="1em" style={{ marginRight: 5, marginBottom: -1.5 }} height="1em" type={2} pegged={t.pegged} /> {t.symbol || t.asset}{" "}
{" (" +
Decimal.mul(t.interest_rate, 100).toNumber() +
"% interest)"}
</Select.Option>
))}
</Select>
</Input.Group>
{activeCurrency !== "gbyte" && currentTokenData && (
<>
<Text type="secondary">
<Trans i18nKey="buy.first_exchanged" activeCurrency={activeCurrency} symbol={currentTokenData.symbol || currentTokenData.asset_2.slice(0, 5) + "..."}>
Your <span style={{ textTransform: "uppercase" }}>{{ activeCurrency }}</span>{" "}
will be first exchanged for GBYTE, then GBYTE converted to {" "}
{{
symbol: currentTokenData.symbol ||
currentTokenData.asset_2.slice(0, 5) + "..."
}}.{" "}
<span style={{ textTransform: "uppercase" }}>
{{ activeCurrency }}
</span>{" "}
to GBYTE exchange is performed by{" "}
<a
href={provider === "oswapcc" ? "https://www.oswap.cc" : "https://simpleswap.io/"}
target="_blank"
rel="noopener"
>
{{ providerName: provider === "oswapcc" ? "oswap.cc" : "simpleswap.io" }}
</a>.
</Trans>
</Text>
{amountCurrency &&
(typeof compensation === "number" ? (
<div>
<Text type="secondary">
{t("buy.compensates", "Obyte compensates part of the exchange fees.")}
</Text>
</div>
) : (
<div style={{ marginTop: 5 }}>
<Text type="secondary">
{t("buy.compensates_depleted", "Obyte compensates part of the exchange fees but today's quota is already depleted and the quoted price includes the full fees. To get a better rate, try again after the quota resets at midnight UTC or buy with GBYTE now.")}
</Text>
</div>
))}
</>
)}
<Row>
{activeCurrency !== "gbyte" && (
<Form.Item
hasFeedback
style={{ width: "100%", marginTop: 20 }}
extra={
<span>
<Trans i18nKey="buy.install">
<a
href="https://obyte.org/#download"
target="_blank"
rel="noopener"
onClick={
() => {
ReactGA.event({
category: "Stablecoin",
action: "Install wallet (buy for other currency)",
label: activeCurrency
})
}
}>Install Obyte wallet</a> if you don't have one yet, and copy/paste your address here.
</Trans>
</span>
}
validateStatus={
recipient.valid !== undefined
? recipient.valid
? "success"
: "error"
: undefined
}
>
<Input
size="large"
disabled={isCreated}
value={recipient.value}
placeholder="Your Obyte wallet address"
onChange={(ev) => handleChange(ev.target.value)}
/>
</Form.Item>
)}
</Row>
</>
) : (
<Row justify="center" align="middle">
{(amountCurrency < ranges.min) ? <Result status="error" subTitle="Please check the amount to be sent BTC" /> : <Spin size="large" style={{ padding: 25 }} />}
{/* {!exchangeRates ? <Result status="warning" /> : */}
{/* <Spin size="large" style={{ padding: 25 }} /> */}
</Row>
)}
</Col>
</Row>
{activeCurrency === "gbyte" ? (
<>
<Row justify="center" style={{ marginTop: 40 }}>
<QRButton
type="primary"
size="large"
disabled={
isNaN(amountToken) ||
!Number(amountToken) ||
!amountCurrency ||
amountCurrency === "" ||
Number(amountCurrency) === 0
}
key="btn-buy-gbyte"
onClick={() =>
ReactGA.event({
category: "Stablecoin",
action: "Buy interest tokens for gbyte",
})
}
ref={buyForGbyteRef}
href={
currentTokenData &&
amountCurrency &&
generateLink(
Number(Number(amountCurrency).toFixed(9) * 1e9).toFixed(0),
{
tokens2:
amountToken * 10 ** currentTokenData.params.decimals2,
ref: referrer
},
undefined,
activeTokenAdr
)
}
>
{t("buy.buy", "Buy")}
</QRButton>
</Row>
{amountCurrency &&
amountCurrency !== "" &&
Number(amountCurrency) !== 0 ? (
<div style={{ textAlign: "center" }}>
<Text type="secondary" style={{ fontSize: 10 }}>
{t("buy.volatility", "1% was added to protect against price volatility, you'll get this amount back if the prices don't change.")}
</Text>
<Text type="secondary" style={{ fontSize: 14, display: "block" }}>
<Trans i18nKey="buy.open_wallet">
Clicking "Buy" will open your Obyte wallet. <a
href="https://obyte.org/#download"
target="_blank"
rel="noopener"
onClick={
() => {
ReactGA.event({
category: "Stablecoin",
action: "Install wallet (buy for GBYTE)",
label: "GBYTE"
})
}
}>Install</a> it if you don't have one yet.
</Trans>
</Text>
</div>
) : null}
</>
) : (
<>
<Row justify="center">
<Button
type="primary"
size="large"
ref={buyRef}
loading={isCreated || ranges.min === undefined}
key="btn-buy-currency"
disabled={
!recipient.valid ||
!amountCurrency ||
!amountToken ||
compensation === undefined ||
ranges === undefined ||
ranges.min === undefined ||
Number(ranges.min) > amountCurrency
}
onClick={() => {
setIsCreated(true);
handleClickExchange();
}}
>
{t("buy.buy", "Buy")}
</Button>
</Row>
{activeCurrency &&
ranges &&
ranges.min &&
Number(ranges.min) > amountCurrency ? (
<div style={{ textAlign: "center" }}>
<Text type="secondary" style={{ fontSize: 12, color: "red" }}>
<Trans i18nKey="buy.min" activeCurrency={String(activeCurrency).toUpperCase()} min={ranges.min}>
Sorry, the minimum {{ activeCurrency: String(activeCurrency).toUpperCase() }} amount is {{ min: ranges.min }}. Please increase the {{ activeCurrency: String(activeCurrency).toUpperCase() }} amount.
</Trans>
</Text>
</div>
) : null}
</>
)}
<div style={{ fontSize: 16, textAlign: "center", padding: 10 }}>
<Trans i18nKey="buy.buying_v2">
For buying stable tokens (OUSD, OBIT, etc), fund tokens (SFUSD, SFGB, etc), and redemption, go to the{" "}
<Link to="/trade">trading page</Link>.
</Trans>
</div>
</div>
);
}
