From 6c79b4bb7b82616319b9bbbd4a28870663458688 Mon Sep 17 00:00:00 2001
From: Diana Fulga <fulga.dd@gmail.com>
Date: Fri, 17 May 2024 13:06:35 +0300
Subject: [PATCH] Continous payment

---
 src/popup/components/layout/header.tsx | 10 +---------
 src/popup/pages/Home.tsx               | 15 +++++++++++++--
 2 files changed, 14 insertions(+), 11 deletions(-)

diff --git a/src/popup/components/layout/header.tsx b/src/popup/components/layout/header.tsx
index 964c7556..5b4fa603 100644
--- a/src/popup/components/layout/header.tsx
+++ b/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>
   )
diff --git a/src/popup/pages/Home.tsx b/src/popup/pages/Home.tsx
index 37ad7bb0..aeedca34 100644
--- a/src/popup/pages/Home.tsx
+++ b/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 />