extension page for integration with wm tools

.dockerignore

@@ -5,4 +5,5 @@ build
 /.vscode
 Dockerfile
 .dockerignore
-.git
+.git
+/.cert

.gitignore

@@ -3,4 +3,6 @@ node_modules
 .env
 build
 /public/build
-/.vscode
+/.vscode
+/.cert
+/.exclude

app/components/dialpad.tsx

@@ -103,7 +103,7 @@ const DialPadKey = ({ label, id }: DialPadKeyProps) => {
         setAmountValue(`${amountValue.substring(0, amountValue.length - 1)}`);
       } else if (amountValue === "0" && id !== DialPadIds.Dot) {
         setAmountValue(
-          `${amountValue.substring(0, amountValue.length - 1)}${label}`
+          `${amountValue.substring(0, amountValue.length - 1)}${label}`,
         );
       } else if (
         (id === DialPadIds.Dot &&
@@ -120,7 +120,7 @@ const DialPadKey = ({ label, id }: DialPadKeyProps) => {
     <li
       className={cn(
         "cursor-pointer hover:text-green-1",
-        id === DialPadIds.Dot ? "pl-1" : ""
+        id === DialPadIds.Dot ? "pl-1" : "",
       )}
       tabIndex={0}
       id={id}
@@ -144,7 +144,7 @@ export const AmountDisplay = (args: AmountDisplayProps) => {
     : `${getCurrencySymbol(assetCode)} ${amountValue}`;
 
   return (
-    <div className="w-full whitespace-nowrap flex items-center justify-center text-5xl text-green-1">
+    <div className="amount-display w-full whitespace-nowrap flex items-center justify-center text-5xl text-green-1">
       {value}
     </div>
   );

app/components/presets.tsx

@@ -0,0 +1,59 @@
+import { useEffect } from "react";
+import { cn } from "~/lib/cn";
+import { useDialPadContext } from "~/lib/context/dialpad";
+
+const presetPadKeyClasses =
+  "cursor-pointer flex flex-wrap content-center justify-center items-center text-lg aspect-square rounded-full border border-gray-300 w-14";
+
+type PresetPadKeyProps = {
+  label: string;
+  currency: string;
+  id: string;
+};
+const PresetPadKey = ({ label, id, currency }: PresetPadKeyProps) => {
+  const { setAmountValue } = useDialPadContext();
+
+  return (
+    <li
+      className={presetPadKeyClasses}
+      id={id}
+      onClick={() => {
+        const formattedNumber = Number(id || 0).toFixed(2);
+        setAmountValue(String(formattedNumber));
+      }}
+    >
+      {currency}
+      {label}
+    </li>
+  );
+};
+PresetPadKey.displayName = "PresetPadKey";
+
+type PresetPadProps = {
+  values: string[];
+  currency: string;
+  onMore: () => void;
+};
+export const PresetPad = ({ values, currency, onMore }: PresetPadProps) => {
+  return (
+    <ul>
+      <div className="preset-pad flex justify-evenly text-muted">
+        {values.map((value) => (
+          <PresetPadKey
+            label={value}
+            id={value}
+            currency={currency}
+            key={value}
+          />
+        ))}
+        <li
+          className={cn(presetPadKeyClasses, "rotate-90 pb-2.5")}
+          onClick={() => onMore()}
+        >
+          ...
+        </li>
+      </div>
+    </ul>
+  );
+};
+PresetPad.displayName = "PresetPad";

app/components/quoteDialog.tsx

@@ -35,7 +35,11 @@ export default function Quote({
 
   return (
     <Transition.Root show={open} as={Fragment}>
-      <Dialog as="div" className="relative z-10" onClose={() => setOpen(false)}>
+      <Dialog
+        as="div"
+        className="bg-foreground text-primary relative z-10"
+        onClose={() => setOpen(false)}
+      >
         <Transition.Child
           as={Fragment}
           enter="transition-opacity duration-500"
@@ -66,12 +70,12 @@ export default function Quote({
                     <Form method="POST" {...form.props}>
                       <Field
                         label="You send:"
-                        value={debitAmount}
+                        defaultValue={debitAmount}
                         variant="info"
                       ></Field>
                       <Field
                         label={`${receiverName} receives (approximately): `}
-                        value={receiveAmount}
+                        defaultValue={receiveAmount}
                         variant="info"
                       ></Field>
                       <div className="flex justify-center items-center gap-3">

app/components/ui/form/form.tsx

@@ -26,6 +26,7 @@ interface FieldProps extends InputHTMLAttributes<HTMLInputElement> {
   className?: string;
   variant?: "default" | "info" | "highlight";
   trailing?: ReactNode;
+  compact?: boolean;
 }
 
 export const Field = ({
@@ -34,6 +35,7 @@ export const Field = ({
   className,
   variant,
   trailing,
+  compact,
   ...props
 }: FieldProps) => {
   const fallbackId = useId();
@@ -53,7 +55,7 @@ export const Field = ({
         trailing={trailing}
         {...props}
       />
-      <div className="pb-3">
+      <div className={cx("pb-3", compact && !errorId && 'hidden')}>
         {errorId ? <ErrorList id={errorId} errors={errors} /> : null}
       </div>
     </div>

app/lib/cn.ts

@@ -1,6 +1,6 @@
-import { clsx, type ClassValue } from 'clsx';
-import { twMerge } from 'tailwind-merge';
+import { clsx, type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
 
 export function cn(...inputs: ClassValue[]) {
-	return twMerge(clsx(inputs));
+  return twMerge(clsx(inputs));
 }

app/lib/open-payments.server.ts

@@ -78,7 +78,7 @@ export async function fetchQuote(
     )
     .catch(() => {
       throw new Error(
-        `Could not create quote for receiver ${receiver.publicName}.`
+        `Could not create quote for receiver ${receiver.publicName}.`,
       );
     });
 
@@ -327,7 +327,7 @@ export async function finishPayment(
         },
       }
     )
-    .catch(() => {
+    .catch((error) => {
       throw new Error("Could not create outgoing payment.");
     });
 

app/lib/tdb_decompress_css.ts

@@ -0,0 +1,11 @@
+export const decompressCss = (value: string) => {
+  const decoded = atob(value.replaceAll("-", "+").replaceAll("_", "/"));
+  const u8 = new Uint8Array(decoded.length);
+  for (let i = 0; i < decoded.length; i++) {
+    u8[i] = decoded.charCodeAt(i);
+  }
+  const stream = new Blob([u8])
+    .stream()
+    .pipeThrough(new DecompressionStream("gzip"));
+  return new Response(stream).text();
+};

app/root.tsx

@@ -9,6 +9,7 @@ import {
   Scripts,
   ScrollRestoration,
   isRouteErrorResponse,
+  useLocation,
   useNavigation,
   useRouteError,
 } from "@remix-run/react";
@@ -21,6 +22,7 @@ import { Button } from "./components/ui/button";
 import { FinishError } from "./components/icons";
 import { DialogProvider } from "./components/providers/dialogProvider";
 import { BackdropProvider } from "./components/providers/backdropProvider";
+import { cn } from "./lib/cn";
 
 export const links: LinksFunction = () => [
   {
@@ -35,6 +37,10 @@ export const links: LinksFunction = () => [
 
 export default function App() {
   const navigation = useNavigation();
+  const location = useLocation();
+
+  // detect if it's loaded in wm tools
+  const isEmbeded = location.pathname.indexOf("extension") !== -1;
 
   useEffect(() => {
     if (navigation.state === "loading" || navigation.state === "submitting") {
@@ -45,16 +51,29 @@ export default function App() {
   }, [navigation.state]);
 
   return (
-    <html lang="en" className="h-full overflow-x-hidden">
+    <html
+      lang="en"
+      className={cn("h-full overflow-x-hidden", isEmbeded && "overflow-hidden")}
+    >
       <head>
         <meta charSet="utf-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1" />
         <Meta />
         <Links />
       </head>
 
-      <body className="bg-foreground text-primary flex justify-center items-center h-screen">
-        <div className="w-full h-full p-20">
+      <body
+        className={cn(
+          isEmbeded
+            ? "ilpay_body bg-transparent flex justify-center items-center h-screen"
+            : "bg-foreground text-primary flex justify-center items-center h-screen"
+        )}
+      >
+        <div
+          className={cn(
+            isEmbeded ? "w-full h-full pt-4" : "w-full h-full p-20"
+          )}
+        >
           <BackdropProvider>
             <DialogProvider>
               <DialPadProvider>