@ant-design/icons#WalletOutlined JavaScript Examples
The following examples show how to use
@ant-design/icons#WalletOutlined.
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: CreateStep.js From bonded-stablecoin-ui with MIT License | 5 votes |
|
CreateStep = ({ data, setCurrent, type }) => {
const pendings = useSelector((state) => state.pendings.stablecoin);
const { sendReq, addressIssued } = pendings;
const dispatch = useDispatch();
const { t } = useTranslation();
const link = generateLink(1.5e4, data, undefined, config.FACTORY_AAS[config.FACTORY_AAS.length + (type === 2 ? -1 : -4)]);
useEffect(() => {
dispatch(pendingIssue(data));
}, [dispatch, data]);
if (addressIssued) {
// dispatch(changeActive(addressIssued));
dispatch(resetIssueStablecoin());
}
if (sendReq) {
return (
<Result
icon={<LoadingOutlined />}
title={t("create.received.title", "Request received")}
subTitle={t("create.received.subTitle", "Once the transaction is stable, you'll be redirected to the page of the new stablecoin")}
extra={[
<Button
onClick={() => {
setCurrent(0);
dispatch(resetIssueStablecoin());
}}
type="danger"
key="CreateStep-reset-req"
>
{t("create.received.close", "Close")}
</Button>,
]}
/>
);
}
return (
<Result
status="info"
icon={<WalletOutlined />}
title={t("create.sending_request.title", "Almost ready!")}
subTitle={t("create.sending_request.subTitle", "Please click the «Create» button below, this will open your Obyte wallet and you'll send a transaction that will create the new stablecoin.")}
extra={[
<QRButton
href={link}
type="primary"
key="CreateStep-create"
onClick={() => {
ReactGA.event({
category: "Stablecoin",
action: "Create stablecoin",
});
}}
>
{t("create.sending_request.create", "Create")}
</QRButton>,
<Button
onClick={() => {
setCurrent(0);
}}
type="danger"
key="CreateStep-reset"
>
{t("create.sending_request.reset", "Reset")}
</Button>,
]}
/>
);
}
Example #2
| Source File: index.js From bank-client with MIT License | 5 votes |
|
items = [
{
id: 1,
name: routes.dashboard.name,
path: routes.dashboard.path,
icon: <DesktopOutlined />,
disabled: false,
},
{
id: 2,
name: routes.payment.name,
path: routes.payment.path,
icon: <WalletOutlined />,
disabled: false,
},
{
id: 3,
name: routes.history.name,
path: routes.history.path,
icon: <HistoryOutlined />,
disabled: false,
},
{
id: 4,
name: 'Cards',
path: '4',
icon: <CreditCardOutlined />,
disabled: true,
},
{
id: 5,
name: 'Credits',
path: '5',
icon: <LineChartOutlined />,
disabled: true,
},
{
id: 6,
name: 'Deposits',
path: '6',
icon: <BankOutlined />,
disabled: true,
},
{
id: 7,
name: routes.settings.name,
path: routes.settings.path,
icon: <SettingOutlined />,
disabled: false,
},
]
Example #3
| Source File: Wallet.jsx From Tai-Shang-NFT-Wallet with MIT License | 4 votes |
|
/*
~ What it does? ~
Displays a wallet where you can specify address and send USD/ETH, with options to
scan address, to convert between USD and ETH, to see and generate private keys,
to send, receive and extract the burner wallet
~ How can I use? ~
<Wallet
provider={userProvider}
address={address}
ensProvider={mainnetProvider}
price={price}
color='red'
/>
~ Features ~
- Provide provider={userProvider} to display a wallet
- Provide address={address} if you want to specify address, otherwise
your default address will be used
- Provide ensProvider={mainnetProvider} and your address will be replaced by ENS name
(ex. "0xa870" => "user.eth") or you can enter directly ENS name instead of address
- Provide price={price} of ether and easily convert between USD and ETH
- Provide color to specify the color of wallet icon
*/
export default function Wallet(props) {
const [signerAddress, setSignerAddress] = useState();
useEffect(() => {
async function getAddress() {
if (props.signer) {
const newAddress = await props.signer.getAddress();
setSignerAddress(newAddress);
}
}
getAddress();
}, [props.signer]);
const selectedAddress = props.address || signerAddress;
const [open, setOpen] = useState();
const [qr, setQr] = useState();
const [amount, setAmount] = useState();
const [toAddress, setToAddress] = useState();
const [pk, setPK] = useState();
const providerSend = props.signer ? (
<Tooltip title="Wallet">
<WalletOutlined
onClick={() => {
setOpen(!open);
}}
rotate={-90}
style={{
padding: 7,
color: props.color ? props.color : "",
cursor: "pointer",
fontSize: 28,
verticalAlign: "middle",
}}
/>
</Tooltip>
) : (
""
);
let display;
let receiveButton;
let privateKeyButton;
if (qr) {
display = (
<div>
<div>
<Text copyable>{selectedAddress}</Text>
</div>
<QR
value={selectedAddress}
size="450"
level="H"
includeMargin
renderAs="svg"
imageSettings={{ excavate: false }}
/>
</div>
);
receiveButton = (
<Button
key="hide"
onClick={() => {
setQr("");
}}
>
<QrcodeOutlined /> Hide
</Button>
);
privateKeyButton = (
<Button
key="hide"
onClick={() => {
setPK(selectedAddress);
setQr("");
}}
>
<KeyOutlined /> Private Key
</Button>
);
} else if (pk) {
const pk = localStorage.getItem("metaPrivateKey");
const wallet = new ethers.Wallet(pk);
if (wallet.address !== selectedAddress) {
display = (
<div>
<b>*injected account*, private key unknown</b>
</div>
);
} else {
const extraPkDisplayAdded = {};
const extraPkDisplay = [];
extraPkDisplayAdded[wallet.address] = true;
extraPkDisplay.push(
<div style={{ fontSize: 16, padding: 2, backgroundStyle: "#89e789" }}>
<a href={"/pk#" + pk}>
<Address minimized address={wallet.address} ensProvider={props.ensProvider} /> {wallet.address.substr(0, 6)}
</a>
</div>,
);
for (const key in localStorage) {
if (key.indexOf("metaPrivateKey_backup") >= 0) {
console.log(key);
const pastpk = localStorage.getItem(key);
const pastwallet = new ethers.Wallet(pastpk);
if (!extraPkDisplayAdded[pastwallet.address] /* && selectedAddress!=pastwallet.address */) {
extraPkDisplayAdded[pastwallet.address] = true;
extraPkDisplay.push(
<div style={{ fontSize: 16 }}>
<a href={"/pk#" + pastpk}>
<Address minimized address={pastwallet.address} ensProvider={props.ensProvider} />{" "}
{pastwallet.address.substr(0, 6)}
</a>
</div>,
);
}
}
}
display = (
<div>
<b>Private Key:</b>
<div>
<Text copyable>{pk}</Text>
</div>
<hr />
<i>
Point your camera phone at qr code to open in
<a target="_blank" href={"https://xdai.io/" + pk} rel="noopener noreferrer">
burner wallet
</a>
:
</i>
<QR
value={"https://xdai.io/" + pk}
size="450"
level="H"
includeMargin
renderAs="svg"
imageSettings={{ excavate: false }}
/>
<Paragraph style={{ fontSize: "16" }} copyable>
{"https://xdai.io/" + pk}
</Paragraph>
{extraPkDisplay ? (
<div>
<h3>Known Private Keys:</h3>
{extraPkDisplay}
<Button
onClick={() => {
const currentPrivateKey = window.localStorage.getItem("metaPrivateKey");
if (currentPrivateKey) {
window.localStorage.setItem("metaPrivateKey_backup" + Date.now(), currentPrivateKey);
}
const randomWallet = ethers.Wallet.createRandom();
const privateKey = randomWallet._signingKey().privateKey;
window.localStorage.setItem("metaPrivateKey", privateKey);
window.location.reload();
}}
>
Generate
</Button>
</div>
) : (
""
)}
</div>
);
}
receiveButton = (
<Button
key="receive"
onClick={() => {
setQr(selectedAddress);
setPK("");
}}
>
<QrcodeOutlined /> Receive
</Button>
);
privateKeyButton = (
<Button
key="hide"
onClick={() => {
setPK("");
setQr("");
}}
>
<KeyOutlined /> Hide
</Button>
);
} else {
const inputStyle = {
padding: 10,
};
display = (
<div>
<div style={inputStyle}>
<AddressInput
autoFocus
ensProvider={props.ensProvider}
placeholder="to address"
address={toAddress}
onChange={setToAddress}
/>
</div>
<div style={inputStyle}>
<EtherInput
price={props.price}
value={amount}
onChange={value => {
setAmount(value);
}}
/>
</div>
</div>
);
receiveButton = (
<Button
key="receive"
onClick={() => {
setQr(selectedAddress);
setPK("");
}}
>
<QrcodeOutlined /> Receive
</Button>
);
privateKeyButton = (
<Button
key="hide"
onClick={() => {
setPK(selectedAddress);
setQr("");
}}
>
<KeyOutlined /> Private Key
</Button>
);
}
return (
<span>
{providerSend}
<Modal
visible={open}
title={
<div>
{selectedAddress ? <Address address={selectedAddress} ensProvider={props.ensProvider} /> : <Spin />}
<div style={{ float: "right", paddingRight: 25 }}>
<Balance address={selectedAddress} provider={props.provider} dollarMultiplier={props.price} />
</div>
</div>
}
onOk={() => {
setQr();
setPK();
setOpen(!open);
}}
onCancel={() => {
setQr();
setPK();
setOpen(!open);
}}
footer={[
privateKeyButton,
receiveButton,
<Button
key="submit"
type="primary"
disabled={!amount || !toAddress || qr}
loading={false}
onClick={() => {
const tx = Transactor(props.signer);
let value;
try {
value = ethers.utils.parseEther("" + amount);
} catch (e) {
// failed to parseEther, try something else
value = ethers.utils.parseEther("" + parseFloat(amount).toFixed(8));
}
tx({
to: toAddress,
value,
});
setOpen(!open);
setQr();
}}
>
<SendOutlined /> Send
</Button>,
]}
>
{display}
</Modal>
</span>
);
}
Example #4
| Source File: Wallet.jsx From moonshot with MIT License | 4 votes |
|
/*
~ What it does? ~
Displays a wallet where you can specify address and send USD/ETH, with options to
scan address, to convert between USD and ETH, to see and generate private keys,
to send, receive and extract the burner wallet
~ How can I use? ~
<Wallet
provider={userProvider}
address={address}
ensProvider={mainnetProvider}
price={price}
color='red'
/>
~ Features ~
- Provide provider={userProvider} to display a wallet
- Provide address={address} if you want to specify address, otherwise
your default address will be used
- Provide ensProvider={mainnetProvider} and your address will be replaced by ENS name
(ex. "0xa870" => "user.eth") or you can enter directly ENS name instead of address
- Provide price={price} of ether and easily convert between USD and ETH
- Provide color to specify the color of wallet icon
*/
export default function Wallet(props) {
const signerAddress = useUserAddress(props.provider);
const selectedAddress = props.address || signerAddress;
const [open, setOpen] = useState();
const [qr, setQr] = useState();
const [amount, setAmount] = useState();
const [toAddress, setToAddress] = useState();
const [pk, setPK] = useState()
const providerSend = props.provider ? (
<Tooltip title="Wallet">
<WalletOutlined
onClick={() => {
setOpen(!open);
}}
rotate={-90}
style={{
padding: 7,
color: props.color ? props.color : "",
cursor: "pointer",
fontSize: 28,
verticalAlign: "middle",
}}
/>
</Tooltip>
) : (
""
);
let display;
let receiveButton;
let privateKeyButton
if (qr) {
display = (
<div>
<div>
<Text copyable>{selectedAddress}</Text>
</div>
<QR
value={selectedAddress}
size="450"
level="H"
includeMargin
renderAs="svg"
imageSettings={{ excavate: false }}
/>
</div>
);
receiveButton = (
<Button
key="hide"
onClick={() => {
setQr("");
}}
>
<QrcodeOutlined /> Hide
</Button>
);
privateKeyButton = (
<Button key="hide" onClick={()=>{setPK(selectedAddress);setQr("")}}>
<KeyOutlined /> Private Key
</Button>
)
}else if(pk){
let pk = localStorage.getItem("metaPrivateKey")
let wallet = new ethers.Wallet(pk)
if(wallet.address!==selectedAddress){
display = (
<div>
<b>*injected account*, private key unknown</b>
</div>
)
}else{
let extraPkDisplayAdded = {}
let extraPkDisplay = []
extraPkDisplayAdded[wallet.address] = true
extraPkDisplay.push(
<div style={{fontSize:16,padding:2,backgroundStyle:"#89e789"}}>
<a href={"/pk#"+pk}>
<Address minimized={true} address={wallet.address} ensProvider={props.ensProvider} /> {wallet.address.substr(0,6)}
</a>
</div>
)
for (var key in localStorage){
if(key.indexOf("metaPrivateKey_backup")>=0){
console.log(key)
let pastpk = localStorage.getItem(key)
let pastwallet = new ethers.Wallet(pastpk)
if(!extraPkDisplayAdded[pastwallet.address] /*&& selectedAddress!=pastwallet.address*/){
extraPkDisplayAdded[pastwallet.address] = true
extraPkDisplay.push(
<div style={{fontSize:16}}>
<a href={"/pk#"+pastpk}>
<Address minimized={true} address={pastwallet.address} ensProvider={props.ensProvider} /> {pastwallet.address.substr(0,6)}
</a>
</div>
)
}
}
}
display = (
<div>
<b>Private Key:</b>
<div>
<Text copyable>{pk}</Text>
</div>
<hr/>
<i>Point your camera phone at qr code to open in
<a target="_blank" href={"https://xdai.io/"+pk} rel="noopener noreferrer">burner wallet</a>:
</i>
<QR value={"https://xdai.io/"+pk} size={"450"} level={"H"} includeMargin={true} renderAs={"svg"} imageSettings={{excavate:false}}/>
<Paragraph style={{fontSize:"16"}} copyable>{"https://xdai.io/"+pk}</Paragraph>
{extraPkDisplay?(
<div>
<h3>
Known Private Keys:
</h3>
{extraPkDisplay}
<Button onClick={()=>{
let currentPrivateKey = window.localStorage.getItem("metaPrivateKey");
if(currentPrivateKey){
window.localStorage.setItem("metaPrivateKey_backup"+Date.now(),currentPrivateKey);
}
const randomWallet = ethers.Wallet.createRandom()
const privateKey = randomWallet._signingKey().privateKey
window.localStorage.setItem("metaPrivateKey",privateKey);
window.location.reload()
}}>
Generate
</Button>
</div>
):""}
</div>
)
}
receiveButton = (
<Button key="receive" onClick={()=>{setQr(selectedAddress);setPK("")}}>
<QrcodeOutlined /> Receive
</Button>
)
privateKeyButton = (
<Button key="hide" onClick={()=>{setPK("");setQr("")}}>
<KeyOutlined /> Hide
</Button>
)
} else {
const inputStyle = {
padding: 10,
};
display = (
<div>
<div style={inputStyle}>
<AddressInput
autoFocus
ensProvider={props.ensProvider}
placeholder="to address"
address={toAddress}
onChange={setToAddress}
/>
</div>
<div style={inputStyle}>
<EtherInput
price={props.price}
value={amount}
onChange={value => {
setAmount(value);
}}
/>
</div>
</div>
);
receiveButton = (
<Button
key="receive"
onClick={() => {
setQr(selectedAddress);
setPK("");
}}
>
<QrcodeOutlined /> Receive
</Button>
);
privateKeyButton = (
<Button key="hide" onClick={()=>{setPK(selectedAddress);setQr("")}}>
<KeyOutlined /> Private Key
</Button>
);
}
return (
<span>
{providerSend}
<Modal
visible={open}
title={
<div>
{selectedAddress ? <Address address={selectedAddress} ensProvider={props.ensProvider} /> : <Spin />}
<div style={{ float: "right", paddingRight: 25 }}>
<Balance address={selectedAddress} provider={props.provider} dollarMultiplier={props.price} />
</div>
</div>
}
onOk={() => {
setQr();
setPK();
setOpen(!open);
}}
onCancel={() => {
setQr();
setPK();
setOpen(!open);
}}
footer={[
privateKeyButton, receiveButton,
<Button
key="submit"
type="primary"
disabled={!amount || !toAddress || qr}
loading={false}
onClick={() => {
const tx = Transactor(props.provider);
let value;
try {
value = parseEther("" + amount);
} catch (e) {
// failed to parseEther, try something else
value = parseEther("" + parseFloat(amount).toFixed(8));
}
tx({
to: toAddress,
value,
});
setOpen(!open);
setQr();
}}
>
<SendOutlined /> Send
</Button>,
]}
>
{display}
</Modal>
</span>
);
}
Example #5
| Source File: MainLayout.js From bonded-stablecoin-ui with MIT License | 4 votes |
|
MainLayout = ({ children, walletModalVisible, setWalletModalVisibility }) => {
const { pathname, search, hash } = useLocation();
const dispatch = useDispatch();
const [width] = useWindowSize();
const { t } = useTranslation();
const [activeMenu, setActiveMenu] = useState(false);
const {visitedBefore, lang} = useSelector(state => state.settings);
const loading = useSelector(state => state.active.loading);
useEffect(() => {
const unlisten = historyInstance.listen((location, action) => {
if(!location.pathname.includes("governance")){
window.scrollTo(0, 0);
}
if (action === "PUSH" || action === "POP") {
ReactGA.pageview(location.pathname);
}
});
ReactGA.pageview(pathname);
return () => {
unlisten();
};
}, []);
useEffect(()=>{
if (search && !visitedBefore){
const [name, address] = search.slice(1).split("=");
if (name === "r" && address && obyte.utils.isValidAddress(address)){
dispatch(addReferrer(address));
}
dispatch(firstVisit());
if (!hash){
historyInstance.replace(pathname, { search: undefined })
}
} else if (!visitedBefore){
dispatch(firstVisit());
} else if (visitedBefore && search && !hash){
historyInstance.replace(pathname, { search: undefined })
}
}, []);
const pageIsSingle = pathname.includes("stableplus");
return (
<Layout style={{ minHeight: "100vh" }}>
<Header
style={{
background: "#fff",
paddingLeft: 20,
paddingRight: 20,
height: "100%"
}}
>
<Row
justify={width < 990 ? "space-between" : undefined}
align="middle"
>
<NavLink to={lang !== "en" ? `/${lang}`: "/"} className={styles.navLink}>
<img className={styles.logo} src={logo} alt="Bonded stablecoins" />
{width > 440 && <div style={{ paddingLeft: 10 }}>
<span>Bonded stablecoins</span>
<sup style={{ fontSize: 8 }}>Beta</sup>
</div>}
</NavLink>
{!pageIsSingle && <>
{width >= 990 ? (
<MainMenu pathname={pathname} width={width} mode="horizontal" />
) : (
<div style={{ display: "flex", alignItems: "center" }}>
<Drawer
title={
<span>
Bonded stablecoins <sup style={{ fontSize: 10 }}>Beta</sup>
</span>
}
placement="left"
closable={true}
onClose={() => setActiveMenu(false)}
visible={activeMenu}
bodyStyle={{ padding: 0, overflowX: "hidden" }}
>
<MainMenu
pathname={pathname}
onClose={() => setActiveMenu(false)}
mode="vertical"
/>
<div style={{ paddingLeft: 7 }}><SocialIcons size="short" gaLabel="Mobile menu" /></div>
</Drawer>
{width < 990 && width >= 320 && pathname !== "/" && (
<WalletOutlined
onClick={() => setWalletModalVisibility(true)}
className={styles.iconWallet}
style={{ marginLeft: "auto" }}
/>
)}
<Button onClick={() => setActiveMenu(true)}>{t("main_menu.menu", "Menu")}</Button>
<div style={{ width: 70, marginLeft: "auto" }}><SelectLanguage /></div>
</div>
)}
{width >= 990 && pathname !== "/" && !langs.find((lang) => "/" + lang.name === pathname) && (
<div style={{ marginLeft: "auto", display: "flex"}}>
<SelectWallet />
<div style={{ width: 70, marginLeft: "auto" }}><SelectLanguage /></div>
</div>
)}
</>}
{(((pathname === "/" || langs.find((lang) => "/" + lang.name === pathname)) && width >= 990) || pageIsSingle) && <div style={{ width: 70, marginLeft: "auto" }}><SelectLanguage /></div>}
</Row>
</Header>
<Content
className={styles.content}
style={
pathname === "/" || pageIsSingle || langs.find((lang) => "/" + lang.name === pathname) || width < 1240
? { padding: 0 }
: { padding: "20px 20px" }
}
>
<SelectWalletModal
visible={walletModalVisible}
onCancel={() => setWalletModalVisibility(false)}
/>
<Route path="/:lang?/trade/:address?/:tab?" exact>
<SelectStablecoin />
{!loading && <Statistics windowWidth={width} />}
</Route>
{children !== undefined && children !== null && (
<div style={{ background: "#fff", padding: 20 }}>
{children}
</div>
)}
</Content>
<Footer>
<SocialIcons centered gaLabel="Footer" />
</Footer>
</Layout>
);
}
Example #6
| Source File: Wallet.jsx From quadratic-diplomacy with MIT License | 4 votes |
|
/*
~ What it does? ~
Displays a wallet where you can specify address and send USD/ETH, with options to
scan address, to convert between USD and ETH, to see and generate private keys,
to send, receive and extract the burner wallet
~ How can I use? ~
<Wallet
provider={userProvider}
address={address}
ensProvider={mainnetProvider}
price={price}
color='red'
/>
~ Features ~
- Provide provider={userProvider} to display a wallet
- Provide address={address} if you want to specify address, otherwise
your default address will be used
- Provide ensProvider={mainnetProvider} and your address will be replaced by ENS name
(ex. "0xa870" => "user.eth") or you can enter directly ENS name instead of address
- Provide price={price} of ether and easily convert between USD and ETH
- Provide color to specify the color of wallet icon
*/
export default function Wallet(props) {
const [signerAddress, setSignerAddress] = useState();
useEffect(() => {
async function getAddress() {
if (props.signer) {
const newAddress = await props.signer.getAddress();
setSignerAddress(newAddress);
}
}
getAddress();
}, [props.signer]);
const selectedAddress = props.address || signerAddress;
const [open, setOpen] = useState();
const [qr, setQr] = useState();
const [amount, setAmount] = useState();
const [toAddress, setToAddress] = useState();
const [pk, setPK] = useState();
const providerSend = props.provider ? (
<Tooltip title="Wallet">
<WalletOutlined
onClick={() => {
setOpen(!open);
}}
rotate={-90}
style={{
padding: 7,
color: props.color ? props.color : "",
cursor: "pointer",
fontSize: 28,
verticalAlign: "middle",
}}
/>
</Tooltip>
) : (
""
);
let display;
let receiveButton;
let privateKeyButton;
if (qr) {
display = (
<div>
<div>
<Text copyable>{selectedAddress}</Text>
</div>
<QR
value={selectedAddress}
size="450"
level="H"
includeMargin
renderAs="svg"
imageSettings={{ excavate: false }}
/>
</div>
);
receiveButton = (
<Button
key="hide"
onClick={() => {
setQr("");
}}
>
<QrcodeOutlined /> Hide
</Button>
);
privateKeyButton = (
<Button
key="hide"
onClick={() => {
setPK(selectedAddress);
setQr("");
}}
>
<KeyOutlined /> Private Key
</Button>
);
} else if (pk) {
const pk = localStorage.getItem("metaPrivateKey");
const wallet = new ethers.Wallet(pk);
if (wallet.address !== selectedAddress) {
display = (
<div>
<b>*injected account*, private key unknown</b>
</div>
);
} else {
const extraPkDisplayAdded = {};
const extraPkDisplay = [];
extraPkDisplayAdded[wallet.address] = true;
extraPkDisplay.push(
<div style={{ fontSize: 16, padding: 2, backgroundStyle: "#89e789" }}>
<a href={"/pk#" + pk}>
<Address minimized address={wallet.address} ensProvider={props.ensProvider} /> {wallet.address.substr(0, 6)}
</a>
</div>,
);
for (const key in localStorage) {
if (key.indexOf("metaPrivateKey_backup") >= 0) {
console.log(key);
const pastpk = localStorage.getItem(key);
const pastwallet = new ethers.Wallet(pastpk);
if (!extraPkDisplayAdded[pastwallet.address] /* && selectedAddress!=pastwallet.address */) {
extraPkDisplayAdded[pastwallet.address] = true;
extraPkDisplay.push(
<div style={{ fontSize: 16 }}>
<a href={"/pk#" + pastpk}>
<Address minimized address={pastwallet.address} ensProvider={props.ensProvider} />{" "}
{pastwallet.address.substr(0, 6)}
</a>
</div>,
);
}
}
}
display = (
<div>
<b>Private Key:</b>
<div>
<Text copyable>{pk}</Text>
</div>
<hr />
<i>
Point your camera phone at qr code to open in
<a target="_blank" href={"https://xdai.io/" + pk} rel="noopener noreferrer">
burner wallet
</a>
:
</i>
<QR
value={"https://xdai.io/" + pk}
size="450"
level="H"
includeMargin
renderAs="svg"
imageSettings={{ excavate: false }}
/>
<Paragraph style={{ fontSize: "16" }} copyable>
{"https://xdai.io/" + pk}
</Paragraph>
{extraPkDisplay ? (
<div>
<h3>Known Private Keys:</h3>
{extraPkDisplay}
<Button
onClick={() => {
const currentPrivateKey = window.localStorage.getItem("metaPrivateKey");
if (currentPrivateKey) {
window.localStorage.setItem("metaPrivateKey_backup" + Date.now(), currentPrivateKey);
}
const randomWallet = ethers.Wallet.createRandom();
const privateKey = randomWallet._signingKey().privateKey;
window.localStorage.setItem("metaPrivateKey", privateKey);
window.location.reload();
}}
>
Generate
</Button>
</div>
) : (
""
)}
</div>
);
}
receiveButton = (
<Button
key="receive"
onClick={() => {
setQr(selectedAddress);
setPK("");
}}
>
<QrcodeOutlined /> Receive
</Button>
);
privateKeyButton = (
<Button
key="hide"
onClick={() => {
setPK("");
setQr("");
}}
>
<KeyOutlined /> Hide
</Button>
);
} else {
const inputStyle = {
padding: 10,
};
display = (
<div>
<div style={inputStyle}>
<AddressInput
autoFocus
ensProvider={props.ensProvider}
placeholder="to address"
address={toAddress}
onChange={setToAddress}
/>
</div>
<div style={inputStyle}>
<EtherInput
price={props.price}
value={amount}
onChange={value => {
setAmount(value);
}}
/>
</div>
</div>
);
receiveButton = (
<Button
key="receive"
onClick={() => {
setQr(selectedAddress);
setPK("");
}}
>
<QrcodeOutlined /> Receive
</Button>
);
privateKeyButton = (
<Button
key="hide"
onClick={() => {
setPK(selectedAddress);
setQr("");
}}
>
<KeyOutlined /> Private Key
</Button>
);
}
return (
<span>
{providerSend}
<Modal
visible={open}
title={
<div>
{selectedAddress ? <Address address={selectedAddress} ensProvider={props.ensProvider} /> : <Spin />}
<div style={{ float: "right", paddingRight: 25 }}>
<Balance address={selectedAddress} provider={props.provider} dollarMultiplier={props.price} />
</div>
</div>
}
onOk={() => {
setQr();
setPK();
setOpen(!open);
}}
onCancel={() => {
setQr();
setPK();
setOpen(!open);
}}
footer={[
privateKeyButton,
receiveButton,
<Button
key="submit"
type="primary"
disabled={!amount || !toAddress || qr}
loading={false}
onClick={() => {
const tx = Transactor(props.signer || props.provider);
let value;
try {
value = ethers.utils.parseEther("" + amount);
} catch (e) {
// failed to parseEther, try something else
value = ethers.utils.parseEther("" + parseFloat(amount).toFixed(8));
}
tx({
to: toAddress,
value,
});
setOpen(!open);
setQr();
}}
>
<SendOutlined /> Send
</Button>,
]}
>
{display}
</Modal>
</span>
);
}
Example #7
| Source File: Wallet.jsx From nft-e2e-example with MIT License | 4 votes |
|
/*
~ What it does? ~
Displays a wallet where you can specify address and send USD/ETH, with options to
scan address, to convert between USD and ETH, to see and generate private keys,
to send, receive and extract the burner wallet
~ How can I use? ~
<Wallet
provider={userProvider}
address={address}
ensProvider={mainnetProvider}
price={price}
color='red'
/>
~ Features ~
- Provide provider={userProvider} to display a wallet
- Provide address={address} if you want to specify address, otherwise
your default address will be used
- Provide ensProvider={mainnetProvider} and your address will be replaced by ENS name
(ex. "0xa870" => "user.eth") or you can enter directly ENS name instead of address
- Provide price={price} of ether and easily convert between USD and ETH
- Provide color to specify the color of wallet icon
*/
export default function Wallet(props) {
const signerAddress = useUserAddress(props.provider);
const selectedAddress = props.address || signerAddress;
const [open, setOpen] = useState();
const [qr, setQr] = useState();
const [amount, setAmount] = useState();
const [toAddress, setToAddress] = useState();
const [pk, setPK] = useState();
const providerSend = props.provider ? (
<Tooltip title="Wallet">
<WalletOutlined
onClick={() => {
setOpen(!open);
}}
rotate={-90}
style={{
padding: 7,
color: props.color ? props.color : "",
cursor: "pointer",
fontSize: 28,
verticalAlign: "middle",
}}
/>
</Tooltip>
) : (
""
);
let display;
let receiveButton;
let privateKeyButton;
if (qr) {
display = (
<div>
<div>
<Text copyable>{selectedAddress}</Text>
</div>
<QR
value={selectedAddress}
size="450"
level="H"
includeMargin
renderAs="svg"
imageSettings={{ excavate: false }}
/>
</div>
);
receiveButton = (
<Button
key="hide"
onClick={() => {
setQr("");
}}
>
<QrcodeOutlined /> Hide
</Button>
);
privateKeyButton = (
<Button
key="hide"
onClick={() => {
setPK(selectedAddress);
setQr("");
}}
>
<KeyOutlined /> Private Key
</Button>
);
} else if (pk) {
const pk = localStorage.getItem("metaPrivateKey");
const wallet = new ethers.Wallet(pk);
if (wallet.address !== selectedAddress) {
display = (
<div>
<b>*injected account*, private key unknown</b>
</div>
);
} else {
const extraPkDisplayAdded = {};
const extraPkDisplay = [];
extraPkDisplayAdded[wallet.address] = true;
extraPkDisplay.push(
<div style={{ fontSize: 16, padding: 2, backgroundStyle: "#89e789" }}>
<a href={"/pk#" + pk}>
<Address minimized address={wallet.address} ensProvider={props.ensProvider} /> {wallet.address.substr(0, 6)}
</a>
</div>,
);
for (const key in localStorage) {
if (key.indexOf("metaPrivateKey_backup") >= 0) {
console.log(key);
const pastpk = localStorage.getItem(key);
const pastwallet = new ethers.Wallet(pastpk);
if (!extraPkDisplayAdded[pastwallet.address] /* && selectedAddress!=pastwallet.address */) {
extraPkDisplayAdded[pastwallet.address] = true;
extraPkDisplay.push(
<div style={{ fontSize: 16 }}>
<a href={"/pk#" + pastpk}>
<Address minimized address={pastwallet.address} ensProvider={props.ensProvider} />{" "}
{pastwallet.address.substr(0, 6)}
</a>
</div>,
);
}
}
}
display = (
<div>
<b>Private Key:</b>
<div>
<Text copyable>{pk}</Text>
</div>
<hr />
<i>
Point your camera phone at qr code to open in
<a target="_blank" href={"https://xdai.io/" + pk} rel="noopener noreferrer">
burner wallet
</a>
:
</i>
<QR
value={"https://xdai.io/" + pk}
size="450"
level="H"
includeMargin
renderAs="svg"
imageSettings={{ excavate: false }}
/>
<Paragraph style={{ fontSize: "16" }} copyable>
{"https://xdai.io/" + pk}
</Paragraph>
{extraPkDisplay ? (
<div>
<h3>Known Private Keys:</h3>
{extraPkDisplay}
<Button
onClick={() => {
const currentPrivateKey = window.localStorage.getItem("metaPrivateKey");
if (currentPrivateKey) {
window.localStorage.setItem("metaPrivateKey_backup" + Date.now(), currentPrivateKey);
}
const randomWallet = ethers.Wallet.createRandom();
const privateKey = randomWallet._signingKey().privateKey;
window.localStorage.setItem("metaPrivateKey", privateKey);
window.location.reload();
}}
>
Generate
</Button>
</div>
) : (
""
)}
</div>
);
}
receiveButton = (
<Button
key="receive"
onClick={() => {
setQr(selectedAddress);
setPK("");
}}
>
<QrcodeOutlined /> Receive
</Button>
);
privateKeyButton = (
<Button
key="hide"
onClick={() => {
setPK("");
setQr("");
}}
>
<KeyOutlined /> Hide
</Button>
);
} else {
const inputStyle = {
padding: 10,
};
display = (
<div>
<div style={inputStyle}>
<AddressInput
autoFocus
ensProvider={props.ensProvider}
placeholder="to address"
address={toAddress}
onChange={setToAddress}
/>
</div>
<div style={inputStyle}>
<EtherInput
price={props.price}
value={amount}
onChange={value => {
setAmount(value);
}}
/>
</div>
</div>
);
receiveButton = (
<Button
key="receive"
onClick={() => {
setQr(selectedAddress);
setPK("");
}}
>
<QrcodeOutlined /> Receive
</Button>
);
privateKeyButton = (
<Button
key="hide"
onClick={() => {
setPK(selectedAddress);
setQr("");
}}
>
<KeyOutlined /> Private Key
</Button>
);
}
return (
<span>
{providerSend}
<Modal
visible={open}
title={
<div>
{selectedAddress ? <Address address={selectedAddress} ensProvider={props.ensProvider} /> : <Spin />}
<div style={{ float: "right", paddingRight: 25 }}>
<Balance address={selectedAddress} provider={props.provider} dollarMultiplier={props.price} />
</div>
</div>
}
onOk={() => {
setQr();
setPK();
setOpen(!open);
}}
onCancel={() => {
setQr();
setPK();
setOpen(!open);
}}
footer={[
privateKeyButton,
receiveButton,
<Button
key="submit"
type="primary"
disabled={!amount || !toAddress || qr}
loading={false}
onClick={() => {
const tx = Transactor(props.provider);
let value;
try {
value = parseEther("" + amount);
} catch (e) {
// failed to parseEther, try something else
value = parseEther("" + parseFloat(amount).toFixed(8));
}
tx({
to: toAddress,
value,
});
setOpen(!open);
setQr();
}}
>
<SendOutlined /> Send
</Button>,
]}
>
{display}
</Modal>
</span>
);
}
