Nudge manager #296

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.

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

Open

bordalix wants to merge 21 commits into master from nudge_manager

src/App.tsx

            
                      Original file line number
                      Diff line number
                      Diff line change
                  
    @@ -21,6 +21,8 @@ import { useContext, useEffect, useRef, useState } from 'react'
  
    import { detectJSCapabilities } from './lib/jsCapabilities'

    import { OptionsContext } from './providers/options'

    import { WalletContext } from './providers/wallet'

    import { NudgeContext } from './providers/nudge'

    import Focusable from './components/Focusable'

    import { FlowContext } from './providers/flow'

    import { SettingsOptions } from './lib/types'

    import { AspContext } from './providers/asp'

    @@ -30,7 +32,6 @@ import { pwaIsInstalled } from './lib/pwa'
  
    import FlexCol from './components/FlexCol'

    import WalletIcon from './icons/Wallet'

    import AppsIcon from './icons/Apps'

    import Focusable from './components/Focusable'

    setupIonicReact()

    @@ -40,6 +41,7 @@ export default function App() {
  
      const { navigate, screen, tab } = useContext(NavigationContext)

      const { initInfo } = useContext(FlowContext)

      const { setOption } = useContext(OptionsContext)

      const { tabHasNudge } = useContext(NudgeContext)

      const { walletLoaded, initialized, wallet } = useContext(WalletContext)

      const [isCapable, setIsCapable] = useState(false)

    @@ -151,23 +153,23 @@ export default function App() {
  
                  <IonTabButton tab={Tabs.Wallet} onClick={handleWallet} selected={tab === Tabs.Wallet}>

                    <Focusable>

                      <FlexCol centered gap='6px' padding='5px' testId='tab-wallet'>

                        <WalletIcon />

                        <WalletIcon nudge={!!tabHasNudge(Tabs.Wallet)} />

                        Wallet

                      </FlexCol>

                    </Focusable>

                  </IonTabButton>

                  <IonTabButton tab={Tabs.Apps} onClick={handleApps} selected={tab === Tabs.Apps}>

                    <Focusable>

                      <FlexCol centered gap='6px' padding='5px' testId='tab-apps'>

                        <AppsIcon />

                        <AppsIcon nudge={!!tabHasNudge(Tabs.Apps)} />

                        Apps

                      </FlexCol>

                    </Focusable>

                  </IonTabButton>

                  <IonTabButton tab={Tabs.Settings} onClick={handleSettings} selected={tab === Tabs.Settings}>

                    <Focusable>

                      <FlexCol centered gap='6px' padding='5px' testId='tab-settings'>

                        <SettingsIcon />

                        <SettingsIcon nudge={!!tabHasNudge(Tabs.Settings)} />

                        Settings

                      </FlexCol>

                    </Focusable>

src/components/AlertBox.tsx

            
                      Original file line number
                      Diff line number
                      Diff line change
                  
    @@ -1,10 +1,8 @@
  
    import React from 'react'

    import { LogoIconAnimated } from '../icons/Logo'

    import MegaphoneIcon from '../icons/Megaphone'

    import FlexCol from './FlexCol'

    import FlexRow from './FlexRow'

    import Text from './Text'

    import DOMPurify from 'dompurify'

    import MegaphoneIcon from '../icons/Megaphone'

    import { CloseIconMini } from '../icons/Close'

    interface AlertBoxProps {

      children: React.ReactNode

    @@ -39,26 +37,18 @@ function AlertBox({ children, icon, onClick, onDismiss }: AlertBoxProps) {
  
                <div style={style.icon}>{icon}</div>

                {children}

              </FlexRow>

              {onDismiss ? <CloseIcon onClick={onDismiss} /> : null}

              {onDismiss ? <CloseIconMini onClick={onDismiss} /> : null}

            </FlexRow>

          </div>

        </div>

      )

    }

    function AlertText({ children }: { children: React.ReactNode }) {

      return (

        <Text color='black' bold smaller wrap>

          {children}

        </Text>

      )

    }

    export function InfoBox({ html }: { html: string }) {

      const sanitizedHtml = DOMPurify.sanitize(html)

      const style: React.CSSProperties = {

        color: 'var(--black)',

        fontSize: '13px',

        fontSize: '12px',

        fontWeight: 600,

        lineHeight: 1.5,

      }

    @@ -68,24 +58,3 @@ export function InfoBox({ html }: { html: string }) {
  
        </AlertBox>

      )

    }

    export function CreatePasswordWarning({ onClick, onDismiss }: { onClick: () => void; onDismiss: () => void }) {

      return (

        <AlertBox icon={<LogoIconAnimated />} onClick={onClick} onDismiss={onDismiss}>

          <FlexCol>

            <AlertText>Protect your wallet with a password</AlertText>

          </FlexCol>

        </AlertBox>

      )

    }

    function CloseIcon({ onClick }: { onClick: () => void }) {

      return (

        <svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 512 512' onClick={onClick}>

          <path

            fill='currentColor'

            d='M256 48C141.31 48 48 141.31 48 256s93.31 208 208 208s208-93.31 208-208S370.69 48 256 48Zm75.31 260.69a16 16 0 1 1-22.62 22.62L256 278.63l-52.69 52.68a16 16 0 0 1-22.62-22.62L233.37 256l-52.68-52.69a16 16 0 0 1 22.62-22.62L256 233.37l52.69-52.68a16 16 0 0 1 22.62 22.62L278.63 256Z'

          />

        </svg>

      )

    }

src/components/Menu.tsx

            
                      Original file line number
                      Diff line number
                      Diff line change
                  
    @@ -1,11 +1,13 @@
  
    import { useContext } from 'react'

    import ArrowIcon from '../icons/Arrow'

    import { Option, OptionsContext } from '../providers/options'

    import Text from './Text'

    import FlexRow from './FlexRow'

    import { SettingsOptions } from '../lib/types'

    import FlexCol from './FlexCol'

    import { useContext } from 'react'

    import Focusable from './Focusable'

    import ArrowIcon from '../icons/Arrow'

    import RedDotIcon from '../icons/RedDot'

    import { SettingsOptions } from '../lib/types'

    import { NudgeContext } from '../providers/nudge'

    import { Option, OptionsContext } from '../providers/options'

    interface MenuProps {

      rows: Option[]

    @@ -14,6 +16,7 @@ interface MenuProps {
  
    export default function Menu({ rows, styled }: MenuProps) {

      const { setOption } = useContext(OptionsContext)

      const { optionHasNudge } = useContext(NudgeContext)

      const bgColor = styled ? 'var(--dark10)' : 'transparent'

    @@ -33,15 +36,18 @@ export default function Menu({ rows, styled }: MenuProps) {
  
        <FlexCol gap='0'>

          {rows.map(({ icon, option }) => (

            <Focusable onEnter={() => setOption(option)} key={option}>

              <FlexRow between>

                <div onClick={() => setOption(option)} style={rowStyle(option)}>

              <div key={option} onClick={() => setOption(option)} style={rowStyle(option)}>

                <FlexRow between>

                  <FlexRow>

                    {styled ? icon : null}

                    <Text capitalize>{option}</Text>

                  </FlexRow>

                  <ArrowIcon />

                </div>

              </FlexRow>

                  <FlexRow end>

                    {optionHasNudge(option) ? <RedDotIcon /> : null}

                    <ArrowIcon />

                  </FlexRow>

                </FlexRow>

              </div>

            </Focusable>

          ))}

        </FlexCol>

src/components/Nudge.tsx

-Original file line number
+Diff line change
@@ -0,0 +1,41 @@
+    import Text from './Text'
+    import FlexCol from './FlexCol'
+    import FlexRow from './FlexRow'
+    import { useContext } from 'react'
+    import { CloseIconMini } from '../icons/Close'
+    import { Nudge, NudgeContext } from '../providers/nudge'
+    import Focusable from './Focusable'
+    export default function NudgeComponent({ nudge }: { nudge: Nudge }) {
+      const { removeNudge } = useContext(NudgeContext)
+      const style = {
+        color: 'var(--white)',
+        padding: '0.7rem 1rem',
+        borderRadius: '0.5rem',
+        backgroundColor: 'var(--nudgebg)',
+      }
+      const handleClose = () => {
+        removeNudge(nudge)
+      }
+      return (
+        <div style={{ marginBottom: '1rem' }}>
+          <Focusable onEnter={handleClose} round>
+            <div style={style}>
+              <FlexRow between>
+                <FlexCol gap='0'>
+                  {nudge.texts.map((text) => (
+                    <Text key={text} bold smaller wrap>
+                      {text}
+                    </Text>
+                  ))}
+                </FlexCol>
+                <CloseIconMini onClick={handleClose} />
+              </FlexRow>
+            </div>
+          </Focusable>
+        </div>
+      )
+    }

src/icons/Apps.tsx

-Original file line number
+Diff line change
@@ -1,4 +1,4 @@
-    export default function AppsIcon() {
+    export default function AppsIcon({ nudge }: { nudge?: boolean }) {
       return (
         <svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'>
           <path
@@ Expand All / @@ -7,6 +7,7 @@ export default function AppsIcon() { @@
             d='M11.0195 2.40431C11.6283 2.06184 12.3717 2.06184 12.9805 2.40431L19.9805 6.34181C19.9871 6.34552 19.9937 6.34926 20.0002 6.35304L12.0006 10.8529L4.00016 6.35281C4.00658 6.34911 4.01301 6.34545 4.01948 6.34181L11.0195 2.40431ZM3 8.08492C3 8.0849 3 8.08493 3 8.08492L3 15.9153C3 16.6378 3.38972 17.3042 4.01948 17.6584L11.0006 21.5853V12.5851L3 8.08492ZM13.0006 21.5846L19.9805 17.6584C20.6103 17.3042 21 16.6378 21 15.9153V8.08536L13.0006 12.5851V21.5846Z'
             fill='currentColor'
           />
+          {nudge ? <circle cx='21' cy='4' r='3' fill='var(--nudgebg)' /> : null}
         </svg>
       )
     }

src/icons/Close.tsx

-Original file line number
+Diff line change
@@ Expand Up / @@ -9,3 +9,24 @@ export default function CloseIcon() { @@
         </svg>
       )
     }
+    export function CloseIconMini({ onClick }: { onClick: () => void }) {
+      const style = {
+        cursor: 'pointer',
+      }
+      return (
+        <svg
+          xmlns='http://www.w3.org/2000/svg'
+          width='20'
+          height='20'
+          viewBox='0 0 512 512'
+          onClick={onClick}
+          style={style}
+        >
+          <path
+            fill='currentColor'
+            d='M256 48C141.31 48 48 141.31 48 256s93.31 208 208 208s208-93.31 208-208S370.69 48 256 48Zm75.31 260.69a16 16 0 1 1-22.62 22.62L256 278.63l-52.69 52.68a16 16 0 0 1-22.62-22.62L233.37 256l-52.68-52.69a16 16 0 0 1 22.62-22.62L256 233.37l52.69-52.68a16 16 0 0 1 22.62 22.62L278.63 256Z'
+          />
+        </svg>
+      )
+    }

src/icons/RedDot.tsx

-Original file line number
+Diff line change
@@ -0,0 +1,29 @@
+    export default function RedDotIcon() {
+      const style = {
+        marginLeft: '-0.5rem',
+      }
+      return (
+        <svg
+          fill='none'
+          width='1rem'
+          height='1rem'
+          style={style}
+          viewBox='0 0 21 21'
+          data-testid='red-dot-icon'
+          xmlns='http://www.w3.org/2000/svg'
+        >
+          <circle cx='10' cy='10' r='4' fill='var(--nudgebg)' />
+        </svg>
+      )
+    }
+    export function RedDotIconAnimated() {
+      const style = {
+        animation: 'var(--animation-pulse)',
+      }
+      return (
+        <svg width='14' height='14' viewBox='0 0 35 35' fill='none' style={style} xmlns='http://www.w3.org/2000/svg'>
+          <circle cx='17.5' cy='17.5' r='17.5' fill='var(--nudgebg)' />
+        </svg>
+      )
+    }

src/icons/Settings.tsx

-Original file line number
+Diff line change
@@ -1,4 +1,4 @@
-    export default function SettingsIcon() {
+    export default function SettingsIcon({ nudge }: { nudge?: boolean }) {
       return (
         <svg width='25' height='24' viewBox='0 0 25 24' fill='none' xmlns='http://www.w3.org/2000/svg'>
           <path
@@ Expand All / @@ -7,6 +7,7 @@ export default function SettingsIcon() { @@
             d='M14.0381 3.80439C13.5821 1.93239 10.9181 1.93239 10.4621 3.80439C10.394 4.08569 10.2605 4.34694 10.0724 4.56688C9.88424 4.78683 9.64685 4.95925 9.3795 5.07011C9.11216 5.18098 8.82242 5.22716 8.53386 5.2049C8.24529 5.18263 7.96606 5.09256 7.71889 4.94199C6.07249 3.93879 4.18849 5.82279 5.19169 7.46919C5.83969 8.53239 5.26489 9.91959 4.05529 10.2136C2.18209 10.6684 2.18209 13.3336 4.05529 13.7872C4.33666 13.8554 4.59796 13.989 4.8179 14.1773C5.03785 14.3655 5.21022 14.6031 5.32098 14.8706C5.43174 15.1381 5.47776 15.4279 5.45529 15.7166C5.43283 16.0052 5.34251 16.2845 5.19169 16.5316C4.18849 18.178 6.07249 20.062 7.71889 19.0588C7.96602 18.908 8.24527 18.8177 8.53391 18.7952C8.82255 18.7727 9.11242 18.8187 9.37991 18.9295C9.64739 19.0403 9.88494 19.2126 10.0732 19.4326C10.2615 19.6525 10.3951 19.9138 10.4633 20.1952C10.9181 22.0684 13.5833 22.0684 14.0369 20.1952C14.1053 19.914 14.2391 19.6528 14.4274 19.4331C14.6157 19.2133 14.8532 19.041 15.1206 18.9303C15.388 18.8195 15.6778 18.7735 15.9663 18.7958C16.2549 18.8181 16.5341 18.9082 16.7813 19.0588C18.4277 20.062 20.3117 18.178 19.3085 16.5316C19.1579 16.2844 19.0678 16.0052 19.0455 15.7166C19.0232 15.4281 19.0692 15.1383 19.18 14.8709C19.2907 14.6035 19.463 14.366 19.6828 14.1777C19.9025 13.9894 20.1637 13.8556 20.4449 13.7872C22.3181 13.3324 22.3181 10.6672 20.4449 10.2136C20.1635 10.1454 19.9022 10.0118 19.6823 9.8235C19.4623 9.63524 19.29 9.39769 19.1792 9.13021C19.0684 8.86272 19.0224 8.57285 19.0449 8.28421C19.0674 7.99557 19.1577 7.71632 19.3085 7.46919C20.3117 5.82279 18.4277 3.93879 16.7813 4.94199C16.5342 5.09281 16.2549 5.18313 15.9663 5.20559C15.6776 5.22806 15.3878 5.18204 15.1203 5.07128C14.8528 4.96052 14.6152 4.78815 14.427 4.5682C14.2387 4.34826 14.1051 4.08696 14.0369 3.80559L14.0381 3.80439ZM12.2501 15.6004C13.2049 15.6004 14.1205 15.2211 14.7957 14.546C15.4708 13.8708 15.8501 12.9552 15.8501 12.0004C15.8501 11.0456 15.4708 10.1299 14.7957 9.45481C14.1205 8.77968 13.2049 8.40039 12.2501 8.40039C11.2953 8.40039 10.3796 8.77968 9.70451 9.45481C9.02938 10.1299 8.65009 11.0456 8.65009 12.0004C8.65009 12.9552 9.02938 13.8708 9.70451 14.546C10.3796 15.2211 11.2953 15.6004 12.2501 15.6004Z'
             fill='currentColor'
           />
+          {nudge ? <circle data-testid='settings-nudge-badge' cx='21' cy='4' r='3' fill='var(--nudgebg)' /> : null}
         </svg>
       )
     }
@@ Expand Down @@

src/icons/Wallet.tsx

-Original file line number
+Diff line change
@@ -1,4 +1,4 @@
-    export default function WalletIcon() {
+    export default function WalletIcon({ nudge }: { nudge?: boolean }) {
       return (
         <svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'>
           <path
@@ Expand All / @@ -7,6 +7,7 @@ export default function WalletIcon() { @@
             d='M6.5 3C4.567 3 3 4.567 3 6.5V17C3 19.2091 4.79086 21 7 21H20C20.5523 21 21 20.5523 21 20V9C21 8.44772 20.5523 8 20 8H17V4C17 3.44772 16.5523 3 16 3H6.5ZM15 8V5H6.5C5.67157 5 5 5.67157 5 6.5C5 7.32843 5.67157 8 6.5 8H15ZM15.5 15.75C16.1904 15.75 16.75 15.1904 16.75 14.5C16.75 13.8096 16.1904 13.25 15.5 13.25C14.8096 13.25 14.25 13.8096 14.25 14.5C14.25 15.1904 14.8096 15.75 15.5 15.75Z'
             fill='currentColor'
           />
+          {nudge ? <circle cx='21' cy='4' r='3' fill='var(--nudgebg)' /> : null}
         </svg>
       )
     }
@@ Expand Down @@

src/index.tsx

            
                      Original file line number
                      Diff line number
                      Diff line change
                  
    @@ -32,31 +32,31 @@ const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement)
  
    root.render(

      // <React.StrictMode>

      <NavigationProvider>

        <ConfigProvider>

          <AspProvider>

            <NotificationsProvider>

              <FiatProvider>

                <FlowProvider>

                  <WalletProvider>

                    <LightningProvider>

                      <LimitsProvider>

                        <FeesProvider>

                          <OptionsProvider>

                            <NudgeProvider>

        <NudgeProvider>

          <ConfigProvider>

            <AspProvider>

              <NotificationsProvider>

                <FiatProvider>

                  <FlowProvider>

                    <WalletProvider>

                      <LightningProvider>

                        <LimitsProvider>

                          <FeesProvider>

                            <OptionsProvider>

                              <AnnouncementProvider>

                                <App />

                              </AnnouncementProvider>

                            </NudgeProvider>

                          </OptionsProvider>

                        </FeesProvider>

                      </LimitsProvider>

                    </LightningProvider>

                  </WalletProvider>

                </FlowProvider>

              </FiatProvider>

            </NotificationsProvider>

          </AspProvider>

        </ConfigProvider>

                            </OptionsProvider>

                          </FeesProvider>

                        </LimitsProvider>

                      </LightningProvider>

                    </WalletProvider>

                  </FlowProvider>

                </FiatProvider>

              </NotificationsProvider>

            </AspProvider>

          </ConfigProvider>

        </NudgeProvider>

      </NavigationProvider>,

      // </React.StrictMode>,

    )

src/ionic.css

-Original file line number
+Diff line change
@@ Expand Up / @@ -15,6 +15,7 @@ @@
       --liz: #d5c6ff;
       --logo-color: #391998;
       --magenta: #8563e4;
+      --nudgebg: #d46600;
       --orange: #ff8e24;
       --orangebg: #ff8e2418;
       --purple: #391998;
@@ Expand Down @@

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Nudge manager #296

Uh oh!

Diff view

Diff view

There are no files selected for viewing

Uh oh!

Nudge manager #296

Are you sure you want to change the base?

Uh oh!

Nudge manager #296

Uh oh!

Uh oh!

Diff view

Diff view

There are no files selected for viewing

Uh oh!