Skip to content

Commit

Permalink
Chrome version 0.01
Browse files Browse the repository at this point in the history
  • Loading branch information
@creeep123
creeep123 committed Jun 6, 2022
1 parent c1c43d9 commit eff023a
Show file tree
Hide file tree
Showing 6 changed files with 159 additions and 103 deletions.
157 changes: 91 additions & 66 deletions src/content-scripts-proxy-ethereum/DrawerDemo/DrawerDemo.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import React, { useEffect, useState } from 'react';
import {
Modal, Drawer, Button, Alert, notification, Col, Row,
Typography
Typography, Tooltip
} from 'antd';
import { ExclamationOutlined, StopOutlined, LinkOutlined } from '@ant-design/icons';
import { useTranslation, Trans } from 'react-i18next';
Expand All @@ -16,13 +16,14 @@ import i18n from '../../i18n/config';
const { Title, Link, Text } = Typography;

const DrawerDemo = ({
type, message, verification, contractAddress, domain, method, params
type, message, verification, contractAddress, domain, method, params, actionName, assetValue
}) => {
const { t } = useTranslation();
const [loading, setLoading] = useState(false);
const [visible, setVisible] = useState(true);

const getContainer = () => document.querySelector('#chrome-extension-content-base-element-ethereum');
const getModalContainer = () => document.querySelector('#chrome-extension-content-base-element-ethereum-notification-content');

const hideContainer = () => {
document.querySelector('#chrome-extension-content-base-element-ethereum').setAttribute('style', 'display: none');
Expand Down Expand Up @@ -82,7 +83,6 @@ const DrawerDemo = ({
if (renderType === 'warning') {
return (
<>
<p style={{ marginBottom: '4px', color: 'rgba(52, 48, 46, 1)' }}>{t('drawer.you_are_authorizing')}</p>
<p style={{ marginBottom: '12px' }}>
<a href={`https://etherscan.io/address/${contractAddress}`} style={{ color: '#8c8c8c' }} target="_blank" rel="noreferrer">
<Text type="secondary">{contractAddress}</Text>
Expand All @@ -101,7 +101,6 @@ const DrawerDemo = ({
}
return (
<>
<p style={{ marginBottom: '0px', color: 'rgba(52, 48, 46, 1)' }}>{t('drawer.you_are_authorizing')}</p>
<p style={{ marginBottom: '12px', color: 'rgba(52, 48, 46, 1)' }}>
<a href={`https://etherscan.io/address/${contractAddress}`} style={{ color: '#8c8c8c' }} target="_blank" rel="noreferrer">
<Text type="secondary">
Expand Down Expand Up @@ -155,6 +154,10 @@ const DrawerDemo = ({

if (type === 'warning' || type === 'danger') {
const primaryColor = type === 'warning' ? '#ffd600' : '#fe5200';
// const tryingFontColor = type === 'warning' ? 'rgba(52, 48, 46, 1)' : '#fe5200';
const assetVal = actionName === 'transfer' ? <Text code>{assetValue}</Text> : t('drawer.assets');
const action = actionName === 'transfer' ? t('drawer.transfer') : t('drawer.authorize');
const explanation = actionName === 'transfer' ? t('drawer.transfer_explanation') : t('drawer.authorize_explanation');
return (
<Modal
closable={false}
Expand All @@ -165,72 +168,94 @@ const DrawerDemo = ({
footer={null}
className={`notification-${i18n.language}`}
>
<Row justify="space-between" style={{ backgroundColor: primaryColor, height: '52px', margin: '-24px -24px 24px -24px' }}>
<Col
span={4}
style={{
display: 'flex', justifyContent: 'left', alignItems: 'center', marginLeft: '47px'
}}
>
{/* <p><b><ExclamationOutlined style={{ color: '#ffffff', fontSize: '20px' }} /></b></p> */}
<img src={ExclamationBold} style={{ width: '3px' }} alt=""></img>
</Col>
<Col
span={7}
style={{
display: 'flex', justifyContent: 'right', alignItems: 'center', color: '#ffffff', marginRight: '47px'
}}
>
<img src={MetaShieldWhite} style={{ width: '100px' }} alt=""></img>
</Col>
</Row>
<div style={{ margin: '0px 12px 32px 12px' }}>
<div
className={`careful-auth-${i18n.language}`}
style={{
color: type === 'warning' ? '' : primaryColor, display: 'flex', justifyContent: 'center', marginTop: '30px', marginBottom: '36px'
}}
>
{type === 'warning' ? t('drawer.please_authorize_carefully') : t('drawer.high_risk_transaction')}
&nbsp;
{t('exclamation_mark')}
</div>
{getModalContent(type)}
</div>
<Row justify="space-between" style={{ height: '80px', margin: '0px 12px' }}>
<Col
span={12}
style={{ display: 'flex', justifyContent: 'start', alignItems: 'center' }}
>
<button
className={`${type}-button`}
onClick={() => {
postMessageToCurrentPage('block');
handleCancel();
<div id="chrome-extension-content-base-element-ethereum-notification-content">
<Row justify="space-between" style={{ backgroundColor: primaryColor, height: '52px', margin: '-24px -24px 24px -24px' }}>
<Col
span={4}
style={{
display: 'flex', justifyContent: 'left', alignItems: 'center', marginLeft: '47px'
}}
type="button"
>
{type === 'warning'
? t('drawer.cancel_authorization')
: t('drawer.i_got_it')}
</button>
</Col>
<Col
span={12}
style={{ display: 'flex', justifyContent: 'end', alignItems: 'center' }}
>
<button
className="secondary-button"
type="button"
onClick={() => {
postMessageToCurrentPage('continue');
handleCancel();
{/* <p><b><ExclamationOutlined style={{ color: '#ffffff', fontSize: '20px' }} /></b></p> */}
<img src={ExclamationBold} style={{ width: '3px' }} alt=""></img>
</Col>
<Col
span={7}
style={{
display: 'flex', justifyContent: 'right', alignItems: 'center', color: '#ffffff', marginRight: '47px'
}}
>
{t('drawer.continue_authorization')}
</button>
</Col>
</Row>
<img src={MetaShieldWhite} style={{ width: '100px' }} alt=""></img>
</Col>
</Row>
<div style={{ margin: '0px 12px 32px 12px' }}>
<div
className={`careful-auth-${i18n.language}`}
style={{
color: type === 'warning' ? '' : primaryColor, display: 'flex', justifyContent: 'center', marginTop: '30px', marginBottom: '36px'
}}
>
{type === 'warning' ? t('drawer.please_authorize_carefully') : t('drawer.high_risk_transaction')}
&nbsp;
{t('exclamation_mark')}
</div>
{/* 您正在试图…… */}
<p style={{ marginBottom: '4px', color: 'rgba(52, 48, 46, 1)' }}>
{t('drawer.you_are_trying_to')}
{i18n.language === 'zh' ? assetVal : ''}
{i18n.language === 'zh' ? '' : ' '}
<Tooltip
getPopupContainer={() => getModalContainer()}
title={(
<div style={{ fontSize: '8px', color: '#767676' }}>
<p>{explanation}</p>
</div>
)}
color="#ffffff"
>
<Text underline strong style={{ color: type === 'danger' ? primaryColor : '' }}>{action}</Text>
</Tooltip>
{i18n.language === 'zh' ? '' : ' '}
{i18n.language !== 'zh' ? assetVal : ''}
{t('drawer.to_address')}
</p>
{getModalContent(type)}
</div>
<Row justify="space-between" style={{ height: '80px', margin: '0px 12px' }}>
<Col
span={12}
style={{ display: 'flex', justifyContent: 'start', alignItems: 'center' }}
>
<button
className={`${type}-button`}
onClick={() => {
postMessageToCurrentPage('block');
handleCancel();
}}
type="button"
>
{type === 'warning'
? t('drawer.cancel_authorization')
: t('drawer.i_got_it')}
</button>
</Col>
<Col
span={12}
style={{ display: 'flex', justifyContent: 'end', alignItems: 'center' }}
>
<button
className="secondary-button"
type="button"
onClick={() => {
postMessageToCurrentPage('continue');
handleCancel();
}}
>
{t('drawer.continue_authorization')}
</button>
</Col>
</Row>
</div>
</Modal>
);
}
Expand Down
12 changes: 6 additions & 6 deletions src/content-scripts-proxy-ethereum/DrawerDemo/DrawerDemo.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -60,7 +60,7 @@
display: inline-flex;
font-family: system-ui, -apple-system, system-ui, 'Helvetica Neue', Helvetica,
Arial, sans-serif;
font-size: 16px;
font-size: 14px;
font-weight: 600;
justify-content: center;
line-height: 1.25;
Expand All @@ -74,7 +74,7 @@
-webkit-user-select: none;
touch-action: manipulation;
vertical-align: baseline;
width: 160px;
width: 168px;
}

.warning-button:hover,
Expand Down Expand Up @@ -107,7 +107,7 @@
display: inline-flex;
font-family: system-ui, -apple-system, system-ui, 'Helvetica Neue', Helvetica,
Arial, sans-serif;
font-size: 16px;
font-size: 14px;
font-weight: 600;
justify-content: center;
line-height: 1.25;
Expand All @@ -121,7 +121,7 @@
-webkit-user-select: none;
touch-action: manipulation;
vertical-align: baseline;
width: 160px;
width: 168px;
}

.danger-button:hover,
Expand Down Expand Up @@ -153,7 +153,7 @@
display: inline-flex;
font-family: system-ui, -apple-system, system-ui, 'Helvetica Neue', Helvetica,
Arial, sans-serif;
font-size: 16px;
font-size: 14px;
font-weight: 600;
justify-content: center;
line-height: 1.25;
Expand All @@ -167,7 +167,7 @@
-webkit-user-select: none;
touch-action: manipulation;
vertical-align: baseline;
width: 160px;
width: 168px;
}

.secondary-button:hover,
Expand Down
41 changes: 27 additions & 14 deletions src/content-scripts-proxy-ethereum/ProxyEthereum.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,8 @@ import './ProxyEthereum.scss';

const dictionary = {
'0x095ea7b3': 'approve',
'0xa22cb465': 'setApprovalForAll'
'0xa22cb465': 'setApprovalForAll',
'0x0752881a': 'transfer'
};

export default class ProxyEthereum {
Expand All @@ -23,16 +24,16 @@ export default class ProxyEthereum {

isNotableAction(constList) {
// 检查是否为关注的交易
const notableActionList = ['approve', 'setApprovalForAll'];
const notableActionList = ['approve', 'setApprovalForAll', 'transfer'];
if (typeof constList.method !== 'undefined') {
if (constList.method === 'eth_sendTransaction') {
const functionName = dictionary[constList.params[0].data.substring(0, 10)];
if (notableActionList.includes(functionName)) {
return true;
return { result: true, action: functionName };
}
}
}
return false;
return { result: false };
}

getDrawerType(verificationData) {
Expand All @@ -44,13 +45,19 @@ export default class ProxyEthereum {
return 'warning';
}

renderDrawer(type, verification, contractAddress, domain, constList) {
getAssetValue(constList) {
return `${(parseInt(constList.params[0].value, 16) / (10 ** 18)).toFixed(4)} ETH`;
}

renderDrawer(type, verification, contractAddress, domain, constList, actionName, assetValue) {
this.showContainer();
render(
<DrawerDemo
style={{ width: '50%' }}
type={type}
contractAddress={contractAddress}
actionName={actionName}
assetValue={assetValue}
domain={domain}
verification={verification}
method={constList.method}
Expand All @@ -69,8 +76,10 @@ export default class ProxyEthereum {
const handler = {
async apply(target, thisArg, argumentsList) {
const constList = [...argumentsList][0];
// console.log('constList :>> ', constList);
if (that.isNotableAction(constList)) {
console.log('constList :>> ', constList);
const isNotable = that.isNotableAction(constList).result;
const actionName = that.isNotableAction(constList).action;
if (isNotable) {
const contractAddress = constList.params[0].to;
// 获取一级域名
const domain = document.domain.split('.').slice(-2).join('.');
Expand All @@ -81,10 +90,11 @@ export default class ProxyEthereum {
});
if (verificationData.status && verificationData.status === 'success') {
const verification = verificationData.data;
const type = (domain === 'looksrare.org') ? 'danger' : that.getDrawerType(verificationData.data);
// const type = 'warning';
// const type = (domain === 'looksrare.org') ? 'danger' : that.getDrawerType(verificationData.data);
const type = that.getDrawerType(verificationData.data);
const assetValue = actionName === 'transfer' ? that.getAssetValue(constList) : 0;
// 获取验证信息，渲染消息框
that.renderDrawer(type, verification, contractAddress, domain, constList);
that.renderDrawer(type, verification, contractAddress, domain, constList, actionName, assetValue);
if (type === 'success') {
return target(...argumentsList);
}
Expand All @@ -97,24 +107,27 @@ export default class ProxyEthereum {
}
// 检查合约和域名安全性时出错
const type = 'error';
that.renderDrawer(type, 'verification', 'contractAddress', domain, constList);
that.renderDrawer(type, 'verification', 'contractAddress', domain, constList, actionName);
}
return target(...argumentsList);
}
};
// eslint-disable-next-line no-use-before-define
const proxyInterval = setInterval(proxyETH(), 1000);
function proxyETH() {
if (typeof window.ethereum !== 'undefined') {
console.log('window.web3 :>> ', window.web3);
if (typeof window.ethereum !== 'undefined' || typeof window.web3 !== 'undefined') {
console.log('Found ethereum');
const proxy1 = new Proxy(window.ethereum.request, handler);
const proxy2 = new Proxy(window.web3.currentProvider, handler);
window.ethereum.request = proxy1;
window.web3.currentProvider = proxy2;
clearInterval(proxyInterval);
} else {
console.log('Did not find ethereum');
}
}
// setTimeout(() => { proxyETH(); }, 1500);
setTimeout(() => { clearInterval(proxyInterval); }, 10000);
}

// 封装 fetch 请求： 检验合约和域名安全性
Expand Down Expand Up @@ -177,7 +190,7 @@ export default class ProxyEthereum {
init() {
this.initContainer();
this.initEthereumProxy();
this.test();
// this.test();
// 注意，必须设置了run_at=document_start 此段代码才会生效
// document.addEventListener('DOMContentLoaded', () => {
// // this.initContainer();
Expand Down
Loading

0 comments on commit eff023a

Please sign in to comment.