Skip to content
Draft
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view

This file was deleted.

Original file line number Diff line number Diff line change
@@ -1,14 +1,7 @@
"use client";

import { Button } from "@/components/Button";
import { CodeIcon } from "@/components/Icons/CodeIcon";
import { QRIcon } from "@/components/Icons/QRIcon";
import { TYPOGRAPHY, Typography } from "@/components/Typography";
import { EngineType } from "@/lib/types";
import clsx from "clsx";
import { useState } from "react";
import { CodeBlock } from "./CodeBlock";
import { MiniKiosk } from "./MiniKiosk";

type TryActionProps = {
action: {
Expand All @@ -22,77 +15,22 @@ type TryActionProps = {
app_metadata: { app_mode: string }[];
};
};
is_v4_action: boolean;
enableKiosk?: boolean;
};

export const TryAction = (props: TryActionProps) => {
const { action, is_v4_action, enableKiosk = true } = props;
const canShowKiosk = enableKiosk && action.app.engine !== EngineType.OnChain;
// World ID verification for Mini Apps is implemented with @worldcoin/idkit
// (MiniKit 2.x no longer proxies verification), so the IDKit CodeBlock is the
// correct integration path for every app type — show it for all apps.
const canShowCode = true;
const [showCode, setShowCode] = useState(
action.app.engine === EngineType.OnChain || !canShowKiosk,
);
const showCodeView = canShowCode && (showCode || !canShowKiosk);
const showKioskView = canShowKiosk && !showCodeView;
const { action } = props;

return (
<div className="grid h-full grid-rows-auto/1fr items-start gap-y-5 lg:w-[480px]">
<div className="grid w-full grid-cols-2 items-center justify-between">
<Typography variant={TYPOGRAPHY.M3} className="text-grey-900">
Try it out
</Typography>
<div className="flex w-full justify-end gap-x-4">
{canShowKiosk && (
<Button
type="button"
onClick={() => setShowCode(false)}
className={clsx(
"flex size-11 items-center justify-center rounded-xl bg-white shadow-button hover:bg-grey-50",
{ "border border-grey-200": showKioskView },
)}
>
<QRIcon
className={clsx("size-4", {
"text-blue-500": showKioskView,
"text-grey-700": !showKioskView,
})}
/>
</Button>
)}
{canShowCode && (
<Button
type="button"
onClick={() => setShowCode(true)}
className={clsx(
"flex size-11 items-center justify-center rounded-xl bg-white shadow-button hover:bg-grey-50",
{ "border border-grey-200": showCodeView },
)}
>
<CodeIcon
className={clsx("size-4", {
"text-blue-500": showCodeView,
"text-grey-700": !showCodeView,
})}
/>
</Button>
)}
</div>
</div>
<Typography variant={TYPOGRAPHY.M3} className="text-grey-900">
Try it out
</Typography>
<div className="size-full">
{showCodeView && (
<CodeBlock
appId={action.app_id}
action_identifier={action.action}
engine={action.app.engine}
/>
)}
{showKioskView && (
<MiniKiosk action={action} is_v4_action={is_v4_action} />
)}
<CodeBlock
appId={action.app_id}
action_identifier={action.action}
engine={action.app.engine}
/>
</div>
</div>
);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -52,11 +52,7 @@ export const ActionIdSettingsPage = (props: ActionIdSettingsPageProps) => {
{loading ? (
<Skeleton className="md:w-[480px]" height={400} />
) : (
<TryAction
action={action!}
is_v4_action={false}
enableKiosk={false}
/>
<TryAction action={action!} />
)}
</div>
</SizingWrapper>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -64,8 +64,6 @@ export const WorldIdActionIdSettingsPage = (
app_id: action!.rp_registration.app_id,
},
})}
is_v4_action={true}
enableKiosk={false}
/>
)}
</div>
Expand Down
Loading
Loading