Skip to content

Commit

Permalink
add qrcodedisplay
Browse files Browse the repository at this point in the history
  • Loading branch information
pedrouid committed May 2, 2019
1 parent 48a45ab commit a7e682d
Show file tree
Hide file tree
Showing 12 changed files with 2,667 additions and 253 deletions.
77 changes: 77 additions & 0 deletions example/public/blockies.min.js
@@ -0,0 +1,77 @@
!(function() {
function e(e) {
for (var o = 0; o < c.length; o++) c[o] = 0
for (var o = 0; o < e.length; o++)
c[o % 4] = (c[o % 4] << 5) - c[o % 4] + e.charCodeAt(o)
}
function o() {
var e = c[0] ^ (c[0] << 11)
return (
(c[0] = c[1]),
(c[1] = c[2]),
(c[2] = c[3]),
(c[3] = c[3] ^ (c[3] >> 19) ^ e ^ (e >> 8)),
(c[3] >>> 0) / ((1 << 31) >>> 0)
)
}
function r() {
var e = Math.floor(360 * o()),
r = 60 * o() + 40 + '%',
t = 25 * (o() + o() + o() + o()) + '%',
l = 'hsl(' + e + ',' + r + ',' + t + ')'
return l
}
function t(e) {
for (
var r = e, t = e, l = Math.ceil(r / 2), n = r - l, a = [], c = 0;
t > c;
c++
) {
for (var i = [], f = 0; l > f; f++) i[f] = Math.floor(2.3 * o())
var s = i.slice(0, n)
s.reverse(), (i = i.concat(s))
for (var h = 0; h < i.length; h++) a.push(i[h])
}
return a
}
function l(o) {
var t = {}
return (
(t.seed =
o.seed || Math.floor(Math.random() * Math.pow(10, 16)).toString(16)),
e(t.seed),
(t.size = o.size || 8),
(t.scale = o.scale || 4),
(t.color = o.color || r()),
(t.bgcolor = o.bgcolor || r()),
(t.spotcolor = o.spotcolor || r()),
t
)
}
function n(e, o) {
var r = t(e.size),
l = Math.sqrt(r.length)
o.width = o.height = e.size * e.scale
var n = o.getContext('2d')
;(n.fillStyle = e.bgcolor),
n.fillRect(0, 0, o.width, o.height),
(n.fillStyle = e.color)
for (var a = 0; a < r.length; a++)
if (r[a]) {
var c = Math.floor(a / l),
i = a % l
;(n.fillStyle = 1 == r[a] ? e.color : e.spotcolor),
n.fillRect(i * e.scale, c * e.scale, e.scale, e.scale)
}
return o
}
function a(e) {
var e = l(e || {}),
o = document.createElement('canvas')
return n(e, o), o
}
var c = new Array(4),
i = { create: a, render: n }
'undefined' != typeof module && (module.exports = i),
'undefined' != typeof window && (window.blockies = i)
})()
2 changes: 1 addition & 1 deletion example/public/index.html
Expand Up @@ -10,7 +10,7 @@
<meta name="theme-color" content="#000000" />
<script src="/blockies.min.js"></script>
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<title>WalletConnect Example</title>
<title>Web3Connect Example</title>
</head>
<body>
<noscript> You need to enable JavaScript to run this app. </noscript>
Expand Down
4 changes: 2 additions & 2 deletions example/public/manifest.json
@@ -1,6 +1,6 @@
{
"short_name": "WalletConnect Example",
"name": "WalletConnect Example",
"short_name": "Web3Connect Example",
"name": "Web3Connect Example",
"icons": [
{
"src": "favicon.ico",
Expand Down
37 changes: 36 additions & 1 deletion example/src/App.tsx
Expand Up @@ -65,6 +65,8 @@ const INITIAL_STATE: IAppState = {
assets: []
}

let injectedWeb3Interval: any = null

class App extends React.Component<any, any> {
public state: IAppState = {
...INITIAL_STATE
Expand All @@ -75,6 +77,12 @@ class App extends React.Component<any, any> {
const accounts = await web3Instance.eth.getAccounts()
const networkId = await web3Instance.eth.net.getId()
const chainId = getChainIdFromNetworkId(networkId)

injectedWeb3Interval = setInterval(
() => this.checkInjectedWeb3Account(),
100
)

await this.setState({
web3Instance,
connected: true,
Expand All @@ -85,6 +93,23 @@ class App extends React.Component<any, any> {
await this.getAccountAssets()
}

public checkInjectedWeb3Account = async () => {
const { web3Instance, address, chainId } = this.state
if (!web3Instance) {
return
}
const accounts = await web3Instance.eth.getAccounts()
if (accounts[0] !== address) {
this.onSessionUpdate(accounts, chainId)
}
}

public onSessionUpdate = async (accounts: string[], chainId: number) => {
const address = accounts[0]
await this.setState({ chainId, accounts, address })
await this.getAccountAssets()
}

public getAccountAssets = async () => {
const { address, chainId } = this.state
this.setState({ fetching: true })
Expand All @@ -99,12 +124,22 @@ class App extends React.Component<any, any> {
}
}

public resetApp = () => {
clearInterval(injectedWeb3Interval)
this.setState({ ...INITIAL_STATE })
}

public render = () => {
const { fetching, connected, address, chainId, assets } = this.state
return (
<SLayout>
<Column maxWidth={1000} spanHeight>
<Header connected={connected} address={address} chainId={chainId} />
<Header
connected={connected}
address={address}
chainId={chainId}
killSession={this.resetApp}
/>
<SContent>
{fetching ? (
<Column center>
Expand Down
44 changes: 44 additions & 0 deletions example/src/components/Blockie.tsx
@@ -0,0 +1,44 @@
import * as React from 'react'
import styled from 'styled-components'

interface IBlockieStyleProps {
size?: number
}

interface IBlockieProps extends IBlockieStyleProps {
address: string
}

const SBlockieWrapper = styled.div<IBlockieStyleProps>`
width: ${({ size }) => `${size}px`};
height: ${({ size }) => `${size}px`};
display: flex;
align-items: center;
justify-content: center;
border-radius: 6px;
overflow: hidden;
& img {
width: 100%;
}
`

const Blockie = (props: IBlockieProps) => {
const seed = props.address.toLowerCase() || ''
const imgUrl = window.blockies
.create({
seed
})
.toDataURL()
return (
<SBlockieWrapper size={props.size} {...props}>
<img src={imgUrl} alt={props.address} />
</SBlockieWrapper>
)
}

Blockie.defaultProps = {
address: '0x0000000000000000000000000000000000000000',
size: 30
}

export default Blockie
73 changes: 52 additions & 21 deletions example/src/components/Header.tsx
@@ -1,9 +1,10 @@
import * as React from "react";
import styled from "styled-components";
import * as PropTypes from "prop-types";
import Banner from "./Banner";
import { ellipseAddress, getChainData } from "../helpers/utilities";
import { transitions } from "../styles";
import * as React from 'react'
import styled from 'styled-components'
import * as PropTypes from 'prop-types'
import Blockie from './Blockie'
import Banner from './Banner'
import { ellipseAddress, getChainData } from '../helpers/utilities'
import { transitions } from '../styles'

const SHeader = styled.div`
margin-top: -1px;
Expand All @@ -14,14 +15,14 @@ const SHeader = styled.div`
align-items: center;
justify-content: space-between;
padding: 0 16px;
`;
`

const SActiveAccount = styled.div`
display: flex;
align-items: center;
position: relative;
font-weight: 500;
`;
`

const SActiveChain = styled(SActiveAccount)`
flex-direction: column;
Expand All @@ -35,27 +36,52 @@ const SActiveChain = styled(SActiveAccount)`
& p:nth-child(2) {
font-weight: bold;
}
`;
`

const SBlockie = styled(Blockie)`
margin-right: 10px;
`

interface IHeaderStyle {
connected: boolean;
connected: boolean
}

const SAddress = styled.p<IHeaderStyle>`
transition: ${transitions.base};
font-weight: bold;
margin: ${({ connected }) => (connected ? "-2px auto 0.7em" : "0")};
`;
margin: ${({ connected }) => (connected ? '-2px auto 0.7em' : '0')};
`

const SDisconnect = styled.div<IHeaderStyle>`
transition: ${transitions.button};
font-size: 12px;
font-family: monospace;
position: absolute;
right: 0;
top: 20px;
opacity: 0.7;
cursor: pointer;
opacity: ${({ connected }) => (connected ? 1 : 0)};
visibility: ${({ connected }) => (connected ? 'visible' : 'hidden')};
pointer-events: ${({ connected }) => (connected ? 'auto' : 'none')};
&:hover {
transform: translateY(-1px);
opacity: 0.5;
}
`

interface IHeaderProps {
connected: boolean;
address: string;
chainId: number;
killSession: () => void
connected: boolean
address: string
chainId: number
}

const Header = (props: IHeaderProps) => {
const { connected, address, chainId } = props;
const activeChain = chainId ? getChainData(chainId).name : null;
const { connected, address, chainId, killSession } = props
const activeChain = chainId ? getChainData(chainId).name : null
return (
<SHeader {...props}>
{connected && activeChain ? (
Expand All @@ -68,15 +94,20 @@ const Header = (props: IHeaderProps) => {
)}
{address && (
<SActiveAccount>
<SBlockie address={address} />
<SAddress connected={connected}>{ellipseAddress(address)}</SAddress>
<SDisconnect connected={connected} onClick={killSession}>
{'Disconnect'}
</SDisconnect>
</SActiveAccount>
)}
</SHeader>
);
};
)
}

Header.propTypes = {
killSession: PropTypes.func.isRequired,
address: PropTypes.string
};
}

export default Header;
export default Header
1 change: 1 addition & 0 deletions index.d.ts
@@ -1,3 +1,4 @@
declare module "@walletconnect/web3-provider";
declare module "*.svg" {
export default "" as string;
}
Expand Down

0 comments on commit a7e682d

Please sign in to comment.