1 files changed, 112 insertions, 7 deletions

diff --git a/packages/taler-wallet-webextension/src/popup/BackupPage.tsx b/packages/taler-wallet-webextension/src/popup/BackupPage.tsx
index 4bbca9072..d13f5244d 100644
--- a/packages/taler-wallet-webextension/src/popup/BackupPage.tsx
+++ b/packages/taler-wallet-webextension/src/popup/BackupPage.tsx
@@ -15,21 +15,126 @@
 */
 
 
-import { VNode } from "preact";
-import { useDevContext } from "../context/useDevContext";
-import { useExtendedPermissions } from "../hooks/useExtendedPermissions";
+import { Timestamp } from "@gnu-taler/taler-util";
+// import { ProviderPaymentStatus } from "@gnu-taler/taler-wallet-core/src/operations/backup";
+import { formatDuration, intervalToDuration } from "date-fns";
+import { JSX, VNode } from "preact";
+import { ProvidersByCurrency, useProvidersByCurrency } from "../hooks/useProvidersByCurrency";
 
 export function BackupPage(): VNode {
-  return <BackupView />;
+  const providers = useProvidersByCurrency()
+  return <BackupView deviceName={"thisdevicename"} providers={providers}/>;
 }
 
 export interface ViewProps {
+  deviceName: string;
+  providers: ProvidersByCurrency
 }
 
-export function BackupView({}: ViewProps): VNode {
+export function BackupView({ deviceName, providers }: ViewProps): VNode {
   return (
-    <div>
-      Backup page
+    <div style={{ height: 'calc(320px - 34px - 16px)', overflow: 'auto' }}>
+      <div style={{ display: 'flex', flexDirection: 'row', width: '100%',  justifyContent: 'space-between' }}>
+        <h2 style={{ width: 240, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', marginTop: 10, marginBottom:10 }}>
+          {deviceName}
+        </h2>
+        <div style={{ flexDirection: 'row', marginTop: 'auto', marginBottom: 'auto' }}>
+          <button class="pure-button button-secondary">rename</button>
+        </div>
+      </div>
+      {Object.keys(providers).map((currency) => {
+        const provider = providers[currency]
+        if (!provider) {
+          return <BackupLayout
+            id={currency}
+            title={currency}
+          />
+        }
+        return <BackupLayout
+          status={provider.paymentStatus}
+          timestamp={provider.lastSuccessfulBackupTimestamp}
+          id={currency}
+          active={provider.active}
+          subtitle={provider.syncProviderBaseUrl}
+          title={currency}
+        />
+      })}
     </div>
   )
+}
+
+interface TransactionLayoutProps {
+  status?: any;
+  timestamp?: Timestamp;
+  title: string;
+  id: string;
+  subtitle?: string;
+  active?: boolean;
+}
+
+function BackupLayout(props: TransactionLayoutProps): JSX.Element {
+  const date = !props.timestamp ? undefined : new Date(props.timestamp.t_ms);
+  const dateStr = date?.toLocaleString([], {
+    dateStyle: "medium",
+    timeStyle: "short",
+  } as any);
+  return (
+    <div
+      style={{
+        display: "flex",
+        flexDirection: "row",
+        border: "1px solid gray",
+        borderRadius: "0.5em",
+        margin: "0.5em 0",
+        justifyContent: "space-between",
+        padding: "0.5em",
+      }}
+    >
+      <div
+        style={{ display: "flex", flexDirection: "column", color: !props.active ? "gray" : undefined }}
+      >
+        {dateStr && <div style={{ fontSize: "small", color: "gray" }}>{dateStr}</div>}
+        {!dateStr && <div style={{ fontSize: "small", color: "red" }}>never synced</div>}
+        <div style={{ fontVariant: "small-caps", fontSize: "x-large" }}>
+          <a href=""><span>{props.title}</span></a>
+        </div>
+
+        <div>{props.subtitle}</div>
+      </div>
+      <div style={{
+        marginLeft: "auto",
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        alignSelf: "center"
+      }}>
+        <div style={{}}>
+          {!props.status ? "missing" : (
+            props.status?.type === 'paid' ? daysUntil(props.status.paidUntil) : 'unpaid'
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function daysUntil(d: Timestamp) {
+  if (d.t_ms === 'never') return undefined
+  const duration = intervalToDuration({
+    start: d.t_ms,
+    end: new Date(),
+  })
+  const str = formatDuration(duration, {
+    delimiter: ', ',
+    format: [
+      duration?.years ? 'years' : (
+        duration?.months ? 'months' : (
+          duration?.days ? 'days' : (
+            duration.hours ? 'hours' : 'minutes'
+          )
+        )
+      )
+    ]
+  })
+  return `${str} left`
 }
\ No newline at end of file