1 files changed, 15 insertions, 8 deletions
diff --git a/packages/taler-wallet-webextension/src/popup/BalancePage.tsx b/packages/taler-wallet-webextension/src/popup/BalancePage.tsx
index 350d4b861..e3bada8d4 100644
--- a/packages/taler-wallet-webextension/src/popup/BalancePage.tsx
+++ b/packages/taler-wallet-webextension/src/popup/BalancePage.tsx
@@ -20,20 +20,21 @@ import {
   i18n
 } from "@gnu-taler/taler-util";
 import { JSX, h } from "preact";
-import { PopupBox, Centered } from "../components/styled/index";
+import { PopupBox, Centered, ButtonPrimary } from "../components/styled/index";
 import { BalancesHook, useBalances } from "../hooks/useBalances";
 import { PageLink, renderAmount } from "../renderHtml";
 
 
-export function BalancePage() {
+export function BalancePage({ goToWalletManualWithdraw }: { goToWalletManualWithdraw: () => void }) {
   const balance = useBalances()
-  return <BalanceView balance={balance} Linker={PageLink} />
+  return <BalanceView balance={balance} Linker={PageLink} goToWalletManualWithdraw={goToWalletManualWithdraw} />
 }
 export interface BalanceViewProps {
-  balance: BalancesHook,
-  Linker: typeof PageLink,
+  balance: BalancesHook;
+  Linker: typeof PageLink;
+  goToWalletManualWithdraw: () => void;
 }
-export function BalanceView({ balance, Linker }: BalanceViewProps) {
+export function BalanceView({ balance, Linker, goToWalletManualWithdraw }: BalanceViewProps) {
   if (!balance) {
     return <span />
   }
@@ -57,7 +58,9 @@ export function BalanceView({ balance, Linker }: BalanceViewProps) {
       </i18n.Translate></p>
     )
   }
-  return <ShowBalances wallet={balance.response} />
+  return <ShowBalances wallet={balance.response}
+    onWithdraw={goToWalletManualWithdraw}
+  />
 }
 
 function formatPending(entry: Balance): JSX.Element {
@@ -96,7 +99,7 @@ function formatPending(entry: Balance): JSX.Element {
 }
 
 
-function ShowBalances({ wallet }: { wallet: BalancesResponse }) {
+function ShowBalances({ wallet, onWithdraw }: { wallet: BalancesResponse, onWithdraw: () => void }) {
   return <PopupBox>
     <section>
       <Centered>{wallet.balances.map((entry) => {
@@ -113,5 +116,9 @@ function ShowBalances({ wallet }: { wallet: BalancesResponse }) {
         );
       })}</Centered>
     </section>
+    <footer>
+      <div />
+      <ButtonPrimary onClick={onWithdraw} >Withdraw</ButtonPrimary>
+    </footer>
   </PopupBox>
 }