Skip to content

Commit 0f3f087

Browse files
0xCasodavidfurlong
authored andcommitted
add device size customization
1 parent 95ec945 commit 0f3f087

File tree

2 files changed

+86
-1
lines changed

2 files changed

+86
-1
lines changed

packages/debugger/app/components/frame-app-debugger.tsx

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,16 @@ import {
1818
import { FrameAppDebuggerViewProfileDialog } from "./frame-app-debugger-view-profile-dialog";
1919
import { FrameApp } from "./frame-app";
2020

21+
const devicePresets = [
22+
{ name: "iPhone 4", width: 320, height: 480 },
23+
{ name: "iPhone 5/SE", width: 320, height: 568 },
24+
{ name: "iPhone 6/7/8", width: 375, height: 667 },
25+
{ name: "iPhone XR", width: 414, height: 896 },
26+
{ name: "iPhone 12 Pro", width: 390, height: 844 },
27+
{ name: "iPhone 14 Pro Max", width: 430, height: 932 },
28+
{ name: "Pixel 7", width: 412, height: 915 },
29+
];
30+
2131
type TabValues = "events" | "console" | "notifications";
2232

2333
type FrameAppDebuggerProps = {
@@ -58,6 +68,9 @@ export function FrameAppDebugger({
5868
const [activeTab, setActiveTab] = useState<TabValues>("notifications");
5969
const [viewFidProfile, setViewFidProfile] = useState<number | null>(null);
6070

71+
const [frameWidth, setFrameWidth] = useState<number>(0);
72+
const [frameHeight, setFrameHeight] = useState<number>(0);
73+
6174
return (
6275
<>
6376
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-[300px_500px_1fr] p-4 gap-4 bg-slate-50 max-w-full w-full">
@@ -75,6 +88,68 @@ export function FrameAppDebugger({
7588
</Button>
7689
</WithTooltip>
7790
</div>
91+
<div className="flex flex-col gap-2">
92+
<div className="flex flex-row items-center gap-2">
93+
<div className="flex flex-col">
94+
<label
95+
htmlFor="frameWidth"
96+
className="text-xs text-gray-500 mb-1"
97+
>
98+
Width (px)
99+
</label>
100+
<input
101+
id="frameWidth"
102+
type="number"
103+
className="w-24 h-9 px-2 rounded-md border border-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500"
104+
placeholder="500"
105+
min="100"
106+
value={frameWidth || ""}
107+
onChange={(e) => {
108+
setFrameWidth(Number(e.target.value));
109+
}}
110+
/>
111+
</div>
112+
<div className="flex flex-col">
113+
<label
114+
htmlFor="frameHeight"
115+
className="text-xs text-gray-500 mb-1"
116+
>
117+
Height (px)
118+
</label>
119+
<input
120+
id="frameHeight"
121+
type="number"
122+
className="w-24 h-9 px-2 rounded-md border border-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500"
123+
placeholder="600"
124+
min="100"
125+
value={frameHeight || ""}
126+
onChange={(e) => {
127+
setFrameHeight(Number(e.target.value));
128+
}}
129+
/>
130+
</div>
131+
</div>
132+
<div className="flex flex-col gap-2">
133+
<label className="text-xs text-gray-500 mb-1">
134+
Device Presets
135+
</label>
136+
<div className="flex flex-col gap-2 w-48">
137+
{devicePresets.map((preset) => (
138+
<Button
139+
key={preset.name}
140+
size="sm"
141+
variant="outline"
142+
onClick={() => {
143+
setFrameWidth(preset.width);
144+
setFrameHeight(preset.height);
145+
}}
146+
>
147+
{preset.name}
148+
</Button>
149+
))}
150+
</div>
151+
</div>
152+
</div>
78153
</div>
79154
<div className="flex flex-col gap-4 order-0 lg:order-1">
80155
<FrameApp
@@ -85,6 +160,8 @@ export function FrameAppDebugger({
85160
onViewProfile={async (params) => setViewFidProfile(params.fid)}
86161
onFrameAppUpdate={setFrameApp}
87162
context={context}
163+
width={frameWidth}
164+
height={frameHeight}
88165
/>
89166
</div>
90167
<div className="flex flex-row gap-4 order-2 md:col-span-2 lg:col-span-1 lg:order-2">

packages/debugger/app/components/frame-app.tsx

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -53,6 +53,8 @@ type FrameAppProps = {
5353
onFrameAppUpdate: (frameApp: UseFrameAppInIframeReturn) => void;
5454
onViewProfile: NonNullable<UseFrameAppOptions["onViewProfile"]>;
5555
frameAppNotificationManager: UseQueryResult<UseFrameAppNotificationsManagerResult>;
56+
width?: number;
57+
height?: number;
5658
};
5759

5860
export function FrameApp({
@@ -62,6 +64,8 @@ export function FrameApp({
6264
onViewProfile,
6365
userContext,
6466
frameAppNotificationManager,
67+
width,
68+
height,
6569
}: FrameAppProps) {
6670
const copyFarcasterSignInLink = useCopyToClipboard();
6771
const config = useConfig();
@@ -452,8 +456,12 @@ export function FrameApp({
452456
{frameApp.status === "success" && (
453457
<>
454458
<iframe
455-
className="flex h-full w-full border rounded-lg"
459+
className={`flex border rounded-lg ${width === 0 ? "w-full" : `w-[${width}px]`} ${
460+
height === 0 ? "h-full" : `h-[${height}px]`
461+
}`}
456462
sandbox="allow-forms allow-scripts allow-same-origin"
463+
width={width}
464+
height={height}
457465
{...frameApp.iframeProps}
458466
/>
459467
{!!primaryButton && !primaryButton.button.hidden && (

0 commit comments

Comments
 (0)