diff --git a/package.json b/package.json index 8998d22cb..87691a897 100644 --- a/package.json +++ b/package.json @@ -71,6 +71,7 @@ "eslint-plugin-react": "7.19.0", "eslint-plugin-react-hooks": "^1.6.1", "eth-block-tracker-es5": "2.3.2", + "ethereum-blockies": "0.1.0", "file-loader": "4.3.0", "fontfaceobserver": "2.1.0", "fs-extra": "^8.1.0", diff --git a/src/app/containers/WalletConnector/index.tsx b/src/app/containers/WalletConnector/index.tsx index 5212360b2..2425dcbf8 100644 --- a/src/app/containers/WalletConnector/index.tsx +++ b/src/app/containers/WalletConnector/index.tsx @@ -2,6 +2,7 @@ import React, { useCallback } from 'react'; import { useTranslation } from 'react-i18next'; import { reactLocalStorage } from 'reactjs-localstorage'; import { Icon, Menu, MenuItem, Popover, Spinner } from '@blueprintjs/core'; +import blockies from 'ethereum-blockies'; import styled from 'styled-components/macro'; import { actions } from 'app/containers/EngageWalletDialog/slice'; import { useSelector, useDispatch } from 'react-redux'; @@ -43,6 +44,20 @@ const WalletConnectorContainer: React.FC = props => { Sovryn.disconnect().then(() => {}); }; + const getWalletAddrBlockieImg = (): string => { + return blockies + .create({ + // All options are optional + seed: address, // seed used to generate icon data, default: random + color: '#dfe', // to manually specify the icon color, default: random + bgcolor: '#aaa', // choose a different background color, default: random + size: 8, // width/height of the icon in blocks, default: 8 + scale: 3, // width/height of each block in pixels, default: 4 + spotcolor: '#000', // each pixel has a 13% chance of being of a third color, + }) + .toDataURL(); + }; + return (
{!connected && !address ? ( @@ -82,6 +97,13 @@ const WalletConnectorContainer: React.FC = props => {
{prettyTx(address, 4, 4)} + + wallet address +