make a phone call ~ not really working

app/routes/__app/outgoing-call.$recipient.tsx

@@ -0,0 +1,80 @@
+import { useCallback } from "react";
+import type { MetaFunction } from "@remix-run/node";
+import { useParams } from "@remix-run/react";
+import { IoCall } from "react-icons/io5";
+
+import { getSeoMeta } from "~/utils/seo";
+import { usePhoneNumber, usePressDigit } from "~/features/keypad/hooks/atoms";
+import useDevice from "~/features/phone-calls/hooks/use-device";
+import useMakeCall from "~/features/phone-calls/hooks/use-make-call";
+import Keypad from "~/features/keypad/components/keypad";
+
+export const meta: MetaFunction = ({ params }) => {
+	const recipient = decodeURIComponent(params.recipient ?? "");
+
+	return {
+		...getSeoMeta({
+			title: `Calling ${recipient}`,
+		}),
+	};
+};
+
+export default function OutgoingCallPage() {
+	const params = useParams<{ recipient: string }>();
+	const recipient = decodeURIComponent(params.recipient ?? "");
+	const [phoneNumber, setPhoneNumber] = usePhoneNumber();
+	const onHangUp = useCallback(() => setPhoneNumber(""), [setPhoneNumber]);
+	const call = useMakeCall({ recipient, onHangUp });
+	const { isDeviceReady } = useDevice();
+	const pressDigit = usePressDigit();
+	const onDigitPressProps = useCallback(
+		(digit: string) => ({
+			onPress() {
+				pressDigit(digit);
+
+				call.sendDigits(digit);
+			},
+		}),
+		[call, pressDigit],
+	);
+
+	return (
+		<div className="w-96 h-full flex flex-col justify-around py-5 mx-auto text-center text-black bg-white">
+			<div className="h-16 text-3xl text-gray-700">
+				<span>{recipient}</span>
+			</div>
+
+			<div className="mb-4 text-gray-600">
+				<div className="h-8 text-2xl">{phoneNumber}</div>
+				<div className="h-8 text-lg">{translateState(call.state)}</div>
+			</div>
+
+			<Keypad onDigitPressProps={onDigitPressProps} onZeroPressProps={onDigitPressProps("0")}>
+				<button
+					onClick={call.hangUp}
+					className="cursor-pointer select-none col-start-2 h-12 w-12 flex justify-center items-center mx-auto bg-red-800 rounded-full"
+				>
+					<IoCall className="w-6 h-6 text-white" />
+				</button>
+			</Keypad>
+		</div>
+	);
+
+	function translateState(state: typeof call.state) {
+		switch (state) {
+			case "initial":
+			case "ready":
+				return "Connecting...";
+			case "calling":
+				return "Calling...";
+			case "call_in_progress":
+				return "In call"; // TODO display time elapsed
+			case "call_ending":
+				return "Call ending...";
+			case "call_ended":
+				return "Call ended";
+		}
+	}
+}
+
+export const handle = { hideFooter: true };

app/routes/__app/outgoing-call.twilio-token.ts

@@ -0,0 +1,3 @@
+import twilioTokenLoader from "~/features/phone-calls/loaders/twilio-token";
+
+export const loader = twilioTokenLoader;