Notify window (#1490)

* Initial notify window * Pylon migration notification
floating · Jun 23, 2023 · 486bab7 · 486bab7
1 parent 2284479
commit 486bab7
Show file tree

Hide file tree

Showing 15 changed files with 716 additions and 329 deletions.
diff --git a/app/notify/App/Notification/MoveToPylon/index.jsx b/app/notify/App/Notification/MoveToPylon/index.jsx
@@ -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
diff --git a/app/notify/App/Notification/index.jsx b/app/notify/App/Notification/index.jsx
@@ -0,0 +1,9 @@
+import React, { useState } from 'react'
+
+import MoveToPylon from './MoveToPylon'
+
+const Notification = ({ platform }) => {
+  return <MoveToPylon />
+}
+
+export default Notification
diff --git a/app/notify/App/index.jsx b/app/notify/App/index.jsx
@@ -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)
diff --git a/app/notify/App/index.styl b/app/notify/App/index.styl
@@ -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
+
diff --git a/app/notify/App/styled/index.jsx b/app/notify/App/styled/index.jsx
@@ -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);
+`
diff --git a/app/notify/index.dev.html b/app/notify/index.dev.html
@@ -0,0 +1,25 @@
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <meta
+      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>
diff --git a/app/notify/index.html b/app/notify/index.html
@@ -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>
diff --git a/app/notify/index.js b/app/notify/index.js
@@ -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))
diff --git a/app/tray/Notify/index.js b/app/tray/Notify/index.js
@@ -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 (
@@ -557,12 +511,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()}>

diff --git a/app/tray/index.js b/app/tray/index.js
@@ -28,8 +28,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'))