Skip to content
This repository was archived by the owner on Jun 10, 2021. It is now read-only.

Feature/network switch notification #111

Open
peculiarity wants to merge 2 commits into
base: release/simpson
Choose a base branch
from
Open

Feature/network switch notification #111

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
a0b5402
Introduce component that will indicate immediately to the user that h…
Sep 17, 2018
93da4e4
Display the Network Switch Notification view when the user switched t…
Sep 18, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
29 changes: 29 additions & 0 deletions src/components/NetworkSwitchNotification.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
import React, { Component } from 'react';

class NetworkSwitchNotification extends Component {
render = () => {
return <div className="frame network-switch-notification">
<div className="heading">
<h2>You have switched Networks</h2>
</div>
<div className="content">
<div>
<svg width='158' height='135' viewBox='0 0 158 135' xmlns='http://www.w3.org/2000/svg'>
<g id='Messages-Copy' fill='green' fillRule='evenodd'>
<path
d='M25.5,65 L37.5,65 L37.5,38 L11.5,38 L11.5,25.8471036 C5.26981987,24.8850933 0.5,19.4995722 0.5,13 C0.5,5.82029825 6.32029825,0 13.5,0 C20.6797017,0 26.5,5.82029825 26.5,13 C26.5,19.4995722 21.7301801,24.8850933 15.5,25.8471036 L15.5,34 L37.5,34 L37.5,24 L120.5,24 L120.5,34 L142.5,34 L142.5,25.8471036 C136.26982,24.8850933 131.5,19.4995722 131.5,13 C131.5,5.82029825 137.320298,0 144.5,0 C151.679702,0 157.5,5.82029825 157.5,13 C157.5,19.4995722 152.73018,24.8850933 146.5,25.8471036 L146.5,38 L120.5,38 L120.5,65 L132.5,65 L132.5,55 L156.5,55 L156.5,79 L132.5,79 L132.5,69 L120.5,69 L120.5,97 L146.5,97 L146.5,109.152896 C152.73018,110.114907 157.5,115.500428 157.5,122 C157.5,129.179702 151.679702,135 144.5,135 C137.320298,135 131.5,129.179702 131.5,122 C131.5,115.500428 136.26982,110.114907 142.5,109.152896 L142.5,101 L120.5,101 L120.5,111 L37.5,111 L37.5,101 L15.5,101 L15.5,109.152896 C21.7301801,110.114907 26.5,115.500428 26.5,122 C26.5,129.179702 20.6797017,135 13.5,135 C6.32029825,135 0.5,129.179702 0.5,122 C0.5,115.500428 5.26981987,110.114907 11.5,109.152896 L11.5,97 L37.5,97 L37.5,69 L25.5,69 L25.5,79 L1.5,79 L1.5,55 L25.5,55 L25.5,65 Z M41.5,41 L41.5,107 L116.5,107 L116.5,41 L41.5,41 Z M41.5,28 L41.5,37 L116.5,37 L116.5,28 L41.5,28 Z M106.5,30.5 L110.5,30.5 L110.5,34.5 L106.5,34.5 L106.5,30.5 Z M98.5,30.5 L102.5,30.5 L102.5,34.5 L98.5,34.5 L98.5,30.5 Z M90.5,30.5 L94.5,30.5 L94.5,34.5 L90.5,34.5 L90.5,30.5 Z M78.9967506,94.5 L67,77.4166667 L78.9967506,84.5757721 L91,77.4166667 L78.9967506,94.5 Z M79,80.8333333 L67,73.6545498 L79,53.5 L91,73.6545498 L79,80.8333333 Z M13.5,131 C18.4705627,131 22.5,126.970563 22.5,122 C22.5,117.029437 18.4705627,113 13.5,113 C8.52943725,113 4.5,117.029437 4.5,122 C4.5,126.970563 8.52943725,131 13.5,131 Z M13.5,4 C8.52943725,4 4.5,8.02943725 4.5,13 C4.5,17.9705627 8.52943725,22 13.5,22 C18.4705627,22 22.5,17.9705627 22.5,13 C22.5,8.02943725 18.4705627,4 13.5,4 Z M144.5,131 C149.470563,131 153.5,126.970563 153.5,122 C153.5,117.029437 149.470563,113 144.5,113 C139.529437,113 135.5,117.029437 135.5,122 C135.5,126.970563 139.529437,131 144.5,131 Z M144.5,4 C139.529437,4 135.5,8.02943725 135.5,13 C135.5,17.9705627 139.529437,22 144.5,22 C149.470563,22 153.5,17.9705627 153.5,13 C153.5,8.02943725 149.470563,4 144.5,4 Z M152.5,59 L136.5,59 L136.5,75 L152.5,75 L152.5,59 Z M5.5,59 L5.5,75 L21.5,75 L21.5,59 L5.5,59 Z'
id='Combined-Shape' fill={this.props.network === 'main' ? "#66BB6A" : "#AB47BC"}/>
</g>
</svg>
</div>
<p>
You are now connected to the <br/>
<strong><span style={{textTransform:'capitalize'}}>{this.props.network}</span> Ethereum Network</strong>
</p>
</div>
<button type="button" onClick={this.props.onAck}> Continue</button>
</div>
}
}

export default NetworkSwitchNotification;
Loading