Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Notify window #1490

Merged
merged 8 commits into from
Mar 21, 2023
Merged

Notify window #1490

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
d2de5dd
initial notify window
floating Mar 17, 2023
af4ae19
place window
floating Mar 17, 2023
78fe9e1
wire up
floating Mar 17, 2023
1678bd2
cleanup
floating Mar 17, 2023
9717ad1
update package lock
mholtzman Mar 20, 2023
1ba9116
delay onboard until after notify, cleanup
floating Mar 21, 2023
804144c
update copy and fix scrollbars
floating Mar 21, 2023
a9d8ac8
tweak
floating Mar 21, 2023
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
51 changes: 51 additions & 0 deletions app/notify/App/Notification/MoveToPylon/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,51 @@
import React, { useEffect } from 'react'

import link from '../../../../../resources/link'

import { Body, Item, Title, PylonConfirm, PylonConfirmButton, PylonConfirmButtonSub } from '../../styled'

const MoveToPylon = () => {
return (
<>
<Title>{'Chain preset updates'}</Title>
<Body>
<Item>
<div>We are retiring our open Infura and Alchemy endpoints.</div>
</Item>
<Item>
<div>Chains that use our built-in Infura and Alchemy presets will</div>
<div>be migrated to our new JSON-RPC proxy called Pylon.</div>
</Item>
<Item>
<div>Pylon gives us greater control over the quality and </div>
<div>privacy of the default connections we offer in Frame.</div>
</Item>
<Item>
<div>To continue using Infura or Alchemy directly, please visit their</div>
<div>website to create an account and use the "custom" preset.</div>
</Item>
</Body>
<PylonConfirm>
<PylonConfirmButton
onClick={() => {
link.send('tray:action', 'migrateToPylonConnections')
link.send('tray:action', 'mutePylonMigrationNotice')
link.send('frame:close')
}}
>
{'Got It'}
</PylonConfirmButton>
<PylonConfirmButtonSub
onClick={() => {
link.send('tray:action', 'mutePylonMigrationNotice')
link.send('frame:close')
}}
>
{'Use Custom Preset'}
</PylonConfirmButtonSub>
</PylonConfirm>
</>
)
}

export default MoveToPylon
9 changes: 9 additions & 0 deletions app/notify/App/Notification/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
import React, { useState } from 'react'

import MoveToPylon from './MoveToPylon'

const Notification = ({ platform }) => {
return <MoveToPylon />
}

export default Notification
23 changes: 23 additions & 0 deletions app/notify/App/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
import React from 'react'
import Restore from 'react-restore'

import Native from '../../../resources/Native'

import { Onboard, Container } from './styled'

import Notification from './Notification'

class App extends React.Component {
render() {
return (
<Onboard>
<Native />
<div className='frameOverlay' />
<Container>
<Notification platform={this.store('platform')} />
</Container>
</Onboard>
)
}
}
export default Restore.connect(App)
13 changes: 13 additions & 0 deletions app/notify/App/index.styl
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
body
width 100%
height 100%
margin 0
padding 0px
font-family 'MainFont'
font-weight 300
background var(--ghostZ)

::-webkit-scrollbar
width 0px
background transparent

118 changes: 118 additions & 0 deletions app/notify/App/styled/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,118 @@
import styled from 'styled-components'

export const Onboard = styled.div`
position: absolute;
top: 0px;
right: 0;
bottom: 0;
left: 0;
color: var(--outerspace);
background: var(--ghostZ);
font-family: 'MainFont';
font-size: 20px;
overflow: hidden;
`

export const Container = styled.div`
position: absolute;
top: 32px;
right: 0;
bottom: 0;
left: 0;
border-top: 1px solid var(--ghostX);
overflow-y: scroll;
`

export const Item = styled.div`
display: 'flex';
flex-direction: column;
div {
padding-bottom: 0px;
}
`

export const Body = styled.div`
max-width: 500px;
animation: cardShow 400ms linear both;
animation-delay: 200ms;
font-weight: 300;
font-size: 15px;
padding: 8px;
margin: auto;
text-align: center;
${Item} {
padding-bottom: 20px;
line-height: 20px;
}
${Item}:last-child {
padding-bottom: 0px;
}
`

export const Title = styled.div`
font-size: 24px;
font-weight: 400;
animation: cardShow 400ms linear both;
animation-delay: 0s;
height: 100px;
display: flex;
justify-content: center;
align-items: center;
`

export const PylonConfirm = styled.div`
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
height: 160px;
font-size: 32px;
font-weight: 500;
animation: cardShow 400ms linear both;
animation-delay: 0s;
`
export const PylonConfirmButton = styled.div`
display: flex;
justify-content: center;
align-items: center;
width: 240px;
height: 40px;
cursor: pointer;
border-radius: 20px;
box-sizing: border-box;
text-transform: uppercase;
background: var(--ghostA);
font-size: 16px;
font-weight: 400;
transform: translateY(0px);
box-shadow: 0px 4px 4px -2px var(--ghostX);
transition: var(--standardFast);
* {
pointer-events: none;
}
&:first-child {
margin-bottom: 10px;
}

&:hover {
background: var(--ghostB);
transform: translateY(-1px);
color: var(--mint);
box-shadow: 0px 6px 6px -3px var(--ghostX);
}

&:active {
background: var(--ghostB);
transform: translateY(1px);
color: var(--mint);
box-shadow: 0px 2px 2px -1px var(--ghostX);
}
`

export const PylonConfirmButtonSub = styled(PylonConfirmButton)`
font-size: 10px;
width: 180px;
height: 30px;
border-radius: 52px;
box-shadow: 0px 1px 2px var(--ghostX);
`
25 changes: 25 additions & 0 deletions app/notify/index.dev.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
<html>
<head>
<meta charset="utf-8" />
<meta

Check warning

Code scanning / Electronegativity

One or more CSP directives detected are vulnerable

One or more CSP directives detected are vulnerable
http-equiv="Content-Security-Policy"
content="
script-src 'strict-dynamic' 'nonce-6dd477b2-5b83-4ca7-ace0-b1a397fb1612' http://localhost:1234 'unsafe-eval';
base-uri 'self';
connect-src *;
img-src *;
frame-src 'none';
style-src 'self' http://localhost:1234 'unsafe-inline';
object-src 'none';
"
/>
<title>Notify</title>
<link rel="stylesheet" href="../../resources/base.styl" type="text/css" />
<link rel="stylesheet" href="./App/index.styl" type="text/css" />
</head>
<body>
<div class="frameOverlay"></div>
<div id="notify"></div>
<script type="module" src="./index.js" nonce="6dd477b2-5b83-4ca7-ace0-b1a397fb1612"></script>
</body>
</html>
26 changes: 26 additions & 0 deletions app/notify/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
<html>
<head>
<meta charset="utf-8" />
<meta
http-equiv="Content-Security-Policy"
content="
script-src 'strict-dynamic' 'nonce-5cf424b8-b272-4a67-a8c8-ca66eea8ca62';
base-uri 'self';
connect-src *;
img-src *;
frame-src 'none';
style-src 'self' 'unsafe-inline';
object-src 'none';
require-trusted-types-for 'script';
"
/>
<title>Notify</title>
<link rel="stylesheet" href="../../resources/base.styl" type="text/css" />
<link rel="stylesheet" href="./App/index.styl" type="text/css" />
</head>
<body>
<div class="frameOverlay"></div>
<div id="notify"></div>
<script type="module" src="./index.js" nonce="5cf424b8-b272-4a67-a8c8-ca66eea8ca62"></script>
</body>
</html>
43 changes: 43 additions & 0 deletions app/notify/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
import * as Sentry from '@sentry/electron'
import React from 'react'
import { createRoot } from 'react-dom/client'
import Restore from 'react-restore'

import App from './App'

import link from '../../resources/link'
import appStore from '../store'

Sentry.init({ dsn: 'https://[email protected]/6331069' })

document.addEventListener('dragover', (e) => e.preventDefault())
document.addEventListener('drop', (e) => e.preventDefault())

if (process.env.NODE_ENV !== 'development') {
window.eval = global.eval = () => {
throw new Error(`This app does not support window.eval()`)
} // eslint-disable-line
}

function AppComponent() {
return <App />
}

link.rpc('getState', (err, state) => {
if (err) return console.error('Could not get initial state from main')
const store = appStore(state)
window.store = store
store.observer(() => {
document.body.classList.remove('dark', 'light')
document.body.classList.add('clip', store('main.colorway'))
setTimeout(() => {
document.body.classList.remove('clip')
}, 100)
})

const root = createRoot(document.getElementById('notify'))
const Notify = Restore.connect(AppComponent, store)
root.render(<Notify />)
})

document.addEventListener('contextmenu', (e) => link.send('*:contextmenu', e.clientX, e.clientY))
52 changes: 0 additions & 52 deletions app/tray/Notify/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,52 +11,6 @@ import ExtensionConnectNotification from './ExtensionConnect'

const FEE_WARNING_THRESHOLD_USD = 50

const MigrateToPylon = ({ store }) => {
return (
<div className='notifyBoxWrap' onMouseDown={(e) => e.stopPropagation()}>
<div className='notifyBoxSlide'>
<div className='notifyBox'>
<div className='notifyFrameIcon'>
<img src={frameIcon} />
</div>
<div className='notifyTitle'>New RPCs</div>
<div className='notifyBody'>
<div className='notifyBodyBlock'>
<div className='notifySection'>
We're migrating our built-in Infura and Alchemy connection presets to our internal RPC
infrastructure called Pylon. If you'd prefer not to have your existing Infura and Alchemy
connections migrated to use Pylon, you will need to obtain an API key from these providers and
set the corresponding URL using the "custom" preset for these connections.
</div>
</div>
</div>
<div className='notifyInput'>
<div
className='notifyInputOption notifyInputSingleButton'
onMouseDown={() => {
link.send('tray:action', 'migrateToPylonConnections')
link.send('tray:action', 'mutePylonMigrationNotice')
store.notify()
}}
>
<div className='notifyInputOptionText notifyBetaGo'>Enable Pylon</div>
</div>
<div
className='notifyInputOption notifyInputSingleButton'
onMouseDown={() => {
link.send('tray:action', 'mutePylonMigrationNotice')
store.notify()
}}
>
<div className='notifyInputOptionText notifyBetaGo'>Use custom connections</div>
</div>
</div>
</div>
</div>
</div>
)
}

class Notify extends React.Component {
mainnet() {
return (
Expand Down Expand Up @@ -555,12 +509,6 @@ class Notify extends React.Component {
)
} else if (notify === 'betaDisclosure') {
return <div className='notify cardShow'>{this.betaDisclosure()}</div>
} else if (notify === 'migrateToPylon') {
return (
<div className='notify cardShow'>
<MigrateToPylon store={this.store} />
</div>
)
} else if (notify === 'updateOriginChain') {
return (
<div className='notify cardShow' onMouseDown={() => this.store.notify()}>
Expand Down
2 changes: 0 additions & 2 deletions app/tray/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,8 +29,6 @@ link.rpc('getState', (err, state) => {
link.send('tray:ready') // turn on api
link.send('tray:refreshMain')

if (!store('main.mute.migrateToPylon')) store.notify('migrateToPylon')

store.observer(() => {
document.body.classList.remove('dark', 'light')
document.body.classList.add('clip', store('main.colorway'))
Expand Down
Loading