Continous payment

src/popup/components/layout/header.tsx

@@ -2,10 +2,8 @@ import React, { useContext, useMemo } from 'react'
 import { Link, useLocation } from 'react-router-dom'
 import browser from 'webextension-polyfill'
 import { ArrowBack, Settings } from '../Icons'
-import { Switch } from '../ui/Switch'
 import { ROUTES_PATH } from '@/popup/Popup'
-import { PopupStateContext, ReducerActionType } from '@/popup/lib/context'
-import { toggleWM } from '@/popup/lib/messages'
+import { PopupStateContext } from '@/popup/lib/context'
 
 const Logo = browser.runtime.getURL('assets/images/logo.svg')
 
@@ -30,11 +28,6 @@ const NavigationButton = () => {
 }
 
 export const Header = () => {
-  const { state, dispatch } = useContext(PopupStateContext)
-  const onChange = async () => {
-    await toggleWM()
-    dispatch({ type: ReducerActionType.TOGGLE_WM, data: {} })
-  }
   return (
     <header className="flex h-8 flex-row items-center justify-between">
       <div className="flex flex-row items-center gap-3">
@@ -43,7 +36,6 @@ export const Header = () => {
       </div>
       <div className="flex flex-row items-center gap-3">
         <NavigationButton />
-        <Switch checked={state.enabled} onChange={onChange} />
       </div>
     </header>
   )

src/popup/pages/Home.tsx

@@ -2,13 +2,14 @@ import React from 'react'
 import { PopupStateContext, ReducerActionType } from '@/popup/lib/context'
 import { WarningSign } from '@/popup/components/Icons'
 import { Slider } from '../components/ui/Slider'
-import { updateRateOfPay as updateRateOfPay_ } from '../lib/messages'
+import { toggleWM, updateRateOfPay as updateRateOfPay_ } from '../lib/messages'
 import { Label } from '../components/ui/Label'
 import { getCurrencySymbol, roundWithPrecision } from '../lib/utils'
 import { debounceAsync } from '@/shared/helpers'
 import { PayWebsiteForm } from '../components/PayWebsiteForm'
+import { Switch } from '../components/ui/Switch'
 
-const updateRateOfPay = debounceAsync(updateRateOfPay_, 500);
+const updateRateOfPay = debounceAsync(updateRateOfPay_, 500)
 
 export const Component = () => {
   const {
@@ -46,6 +47,11 @@ export const Component = () => {
     }
   }
 
+  const onChangeWM = () => {
+    toggleWM()
+    dispatch({ type: ReducerActionType.TOGGLE_WM, data: {} })
+  }
+
   return (
     <div className="space-y-8">
       {enabled ? (
@@ -74,6 +80,11 @@ export const Component = () => {
           </p>
         </div>
       )}
+      <Switch
+        checked={enabled}
+        onChange={onChangeWM}
+        label="Continous payment stream"
+      />
 
       <hr />