refactor: scope providers by route and use XState selectors

src/app/tip/layout.tsx

@@ -0,0 +1,7 @@
+import type { ReactNode } from "react";
+
+import { PaymentRouteProvider } from "@/providers/payment-route-provider";
+
+export default function TipLayout({ children }: { children: ReactNode }) {
+  return <PaymentRouteProvider>{children}</PaymentRouteProvider>;
+}