Skip to content

Commit

Permalink
add safe area
Browse files Browse the repository at this point in the history
  • Loading branch information
@deodad
deodad committed Dec 23, 2024
1 parent e7024fd commit d746dd8
Show file tree
Hide file tree
Showing 3 changed files with 205 additions and 174 deletions.
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@
"@farcaster/auth-kit": "^0.6.0",
"@farcaster/frame-core": "^0.0.19",
"@farcaster/frame-node": "^0.0.7",
"@farcaster/frame-sdk": "^0.0.20",
"@farcaster/frame-sdk": "^0.0.21",
"@farcaster/frame-wagmi-connector": "^0.0.6",
"@tanstack/react-query": "^5.61.0",
"@upstash/redis": "^1.34.3",
Expand Down
339 changes: 173 additions & 166 deletions src/components/Demo.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -243,204 +243,211 @@ export default function Demo(
}

return (
<div className="w-[300px] mx-auto py-4 px-2">
<h1 className="text-2xl font-bold text-center mb-4">{title}</h1>

<div className="mb-4">
<h2 className="font-2xl font-bold">Context</h2>
<button
onClick={toggleContext}
className="flex items-center gap-2 transition-colors"
>
<span
className={`transform transition-transform ${
isContextOpen ? "rotate-90" : ""
}`}
<div style={{
paddingTop: context?.client.safeAreaInsets?.top ?? 0,
paddingBottom: context?.client.safeAreaInsets?.bottom ?? 0,
paddingLeft: context?.client.safeAreaInsets?.left ?? 0,
paddingRight: context?.client.safeAreaInsets?.right ?? 0 ,
}}>
<div className="w-[300px] mx-auto py-2 px-2">
<h1 className="text-2xl font-bold text-center mb-4">{title}</h1>

<div className="mb-4">
<h2 className="font-2xl font-bold">Context</h2>
<button
onClick={toggleContext}
className="flex items-center gap-2 transition-colors"
>
➤
</span>
Tap to expand
</button>
<span
className={`transform transition-transform ${
isContextOpen ? "rotate-90" : ""
}`}
>
➤
</span>
Tap to expand
</button>

{isContextOpen && (
<div className="p-4 mt-2 bg-gray-100 dark:bg-gray-800 rounded-lg">
<pre className="font-mono text-xs whitespace-pre-wrap break-words max-w-[260px] overflow-x-">
{JSON.stringify(context, null, 2)}
</pre>
</div>
)}
</div>

{isContextOpen && (
<div className="p-4 mt-2 bg-gray-100 dark:bg-gray-800 rounded-lg">
<pre className="font-mono text-xs whitespace-pre-wrap break-words max-w-[260px] overflow-x-">
{JSON.stringify(context, null, 2)}
</pre>
</div>
)}
</div>
<div>
<h2 className="font-2xl font-bold">Actions</h2>

<div>
<h2 className="font-2xl font-bold">Actions</h2>
<div className="mb-4">
<div className="p-2 bg-gray-100 dark:bg-gray-800 rounded-lg my-2">
<pre className="font-mono text-xs whitespace-pre-wrap break-words max-w-[260px] overflow-x-">
sdk.actions.signIn
</pre>
</div>
<SignIn />
</div>

<div className="mb-4">
<div className="p-2 bg-gray-100 dark:bg-gray-800 rounded-lg my-2">
<pre className="font-mono text-xs whitespace-pre-wrap break-words max-w-[260px] overflow-x-">
sdk.actions.signIn
</pre>
<div className="mb-4">
<div className="p-2 bg-gray-100 dark:bg-gray-800 rounded-lg my-2">
<pre className="font-mono text-xs whitespace-pre-wrap break-words max-w-[260px] overflow-x-">
sdk.actions.openUrl
</pre>
</div>
<Button onClick={openUrl}>Open Link</Button>
</div>
<SignIn />
</div>

<div className="mb-4">
<div className="p-2 bg-gray-100 dark:bg-gray-800 rounded-lg my-2">
<pre className="font-mono text-xs whitespace-pre-wrap break-words max-w-[260px] overflow-x-">
sdk.actions.openUrl
</pre>
<div className="mb-4">
<div className="p-2 bg-gray-100 dark:bg-gray-800 rounded-lg my-2">
<pre className="font-mono text-xs whitespace-pre-wrap break-words max-w-[260px] overflow-x-">
sdk.actions.openUrl
</pre>
</div>
<Button onClick={openWarpcastUrl}>Open Warpcast Link</Button>
</div>
<Button onClick={openUrl}>Open Link</Button>
</div>

<div className="mb-4">
<div className="p-2 bg-gray-100 dark:bg-gray-800 rounded-lg my-2">
<pre className="font-mono text-xs whitespace-pre-wrap break-words max-w-[260px] overflow-x-">
sdk.actions.openUrl
</pre>
<div className="mb-4">
<div className="p-2 bg-gray-100 dark:bg-gray-800 rounded-lg my-2">
<pre className="font-mono text-xs whitespace-pre-wrap break-words max-w-[260px] overflow-x-">
sdk.actions.close
</pre>
</div>
<Button onClick={close}>Close Frame</Button>
</div>
<Button onClick={openWarpcastUrl}>Open Warpcast Link</Button>
</div>

<div className="mb-4">
<div className="p-2 bg-gray-100 dark:bg-gray-800 rounded-lg my-2">
<h2 className="font-2xl font-bold">Last event</h2>

<div className="p-4 mt-2 bg-gray-100 dark:bg-gray-800 rounded-lg">
<pre className="font-mono text-xs whitespace-pre-wrap break-words max-w-[260px] overflow-x-">
sdk.actions.close
{lastEvent || "none"}
</pre>
</div>
<Button onClick={close}>Close Frame</Button>
</div>
</div>

<div className="mb-4">
<h2 className="font-2xl font-bold">Last event</h2>

<div className="p-4 mt-2 bg-gray-100 dark:bg-gray-800 rounded-lg">
<pre className="font-mono text-xs whitespace-pre-wrap break-words max-w-[260px] overflow-x-">
{lastEvent || "none"}
</pre>
</div>
</div>

<div>
<h2 className="font-2xl font-bold">Add to client & notifications</h2>
<div>
<h2 className="font-2xl font-bold">Add to client & notifications</h2>

<div className="mt-2 mb-4 text-sm">
Client fid {context?.client.clientFid},
{added ? " frame added to client," : " frame not added to client,"}
{notificationDetails
? " notifications enabled"
: " notifications disabled"}
</div>
<div className="mt-2 mb-4 text-sm">
Client fid {context?.client.clientFid},
{added ? " frame added to client," : " frame not added to client,"}
{notificationDetails
? " notifications enabled"
: " notifications disabled"}
</div>

<div className="mb-4">
<div className="p-2 bg-gray-100 dark:bg-gray-800 rounded-lg my-2">
<pre className="font-mono text-xs whitespace-pre-wrap break-words max-w-[260px] overflow-x-">
sdk.actions.addFrame
</pre>
<div className="mb-4">
<div className="p-2 bg-gray-100 dark:bg-gray-800 rounded-lg my-2">
<pre className="font-mono text-xs whitespace-pre-wrap break-words max-w-[260px] overflow-x-">
sdk.actions.addFrame
</pre>
</div>
{addFrameResult && (
<div className="mb-2 text-sm">
Add frame result: {addFrameResult}
</div>
)}
<Button onClick={addFrame} disabled={added}>
Add frame to client
</Button>
</div>
{addFrameResult && (

{sendNotificationResult && (
<div className="mb-2 text-sm">
Add frame result: {addFrameResult}
Send notification result: {sendNotificationResult}
</div>
)}
<Button onClick={addFrame} disabled={added}>
Add frame to client
</Button>
</div>

{sendNotificationResult && (
<div className="mb-2 text-sm">
Send notification result: {sendNotificationResult}
<div className="mb-4">
<Button onClick={sendNotification} disabled={!notificationDetails}>
Send notification
</Button>
</div>
)}
<div className="mb-4">
<Button onClick={sendNotification} disabled={!notificationDetails}>
Send notification
</Button>
</div>
</div>

<div>
<h2 className="font-2xl font-bold">Wallet</h2>
<div>
<h2 className="font-2xl font-bold">Wallet</h2>

{address && (
<div className="my-2 text-xs">
Address: <pre className="inline">{truncateAddress(address)}</pre>
</div>
)}
{address && (
<div className="my-2 text-xs">
Address: <pre className="inline">{truncateAddress(address)}</pre>
</div>
)}

{chainId && (
<div className="my-2 text-xs">
Chain ID: <pre className="inline">{chainId}</pre>
</div>
)}
{chainId && (
<div className="my-2 text-xs">
Chain ID: <pre className="inline">{chainId}</pre>
</div>
)}

<div className="mb-4">
<Button
onClick={() =>
isConnected
? disconnect()
: connect({ connector: config.connectors[0] })
}
>
{isConnected ? "Disconnect" : "Connect"}
</Button>
</div>
<div className="mb-4">
<Button
onClick={() =>
isConnected
? disconnect()
: connect({ connector: config.connectors[0] })
}
>
{isConnected ? "Disconnect" : "Connect"}
</Button>
</div>

<div className="mb-4">
<SignMessage />
</div>
<div className="mb-4">
<SignMessage />
</div>

{isConnected && (
<>
<div className="mb-4">
<SendEth />
</div>
<div className="mb-4">
<Button
onClick={sendTx}
disabled={!isConnected || isSendTxPending}
isLoading={isSendTxPending}
>
Send Transaction (contract)
</Button>
{isSendTxError && renderError(sendTxError)}
{txHash && (
<div className="mt-2 text-xs">
<div>Hash: {truncateAddress(txHash)}</div>
<div>
Status:{" "}
{isConfirming
? "Confirming..."
: isConfirmed
? "Confirmed!"
: "Pending"}
{isConnected && (
<>
<div className="mb-4">
<SendEth />
</div>
<div className="mb-4">
<Button
onClick={sendTx}
disabled={!isConnected || isSendTxPending}
isLoading={isSendTxPending}
>
Send Transaction (contract)
</Button>
{isSendTxError && renderError(sendTxError)}
{txHash && (
<div className="mt-2 text-xs">
<div>Hash: {truncateAddress(txHash)}</div>
<div>
Status:{" "}
{isConfirming
? "Confirming..."
: isConfirmed
? "Confirmed!"
: "Pending"}
</div>
</div>
</div>
)}
</div>
<div className="mb-4">
<Button
onClick={signTyped}
disabled={!isConnected || isSignTypedPending}
isLoading={isSignTypedPending}
>
Sign Typed Data
</Button>
{isSignTypedError && renderError(signTypedError)}
</div>
<div className="mb-4">
<Button
onClick={handleSwitchChain}
disabled={isSwitchChainPending}
isLoading={isSwitchChainPending}
>
Switch to {chainId === base.id ? "Optimism" : "Base"}
</Button>
{isSwitchChainError && renderError(switchChainError)}
</div>
</>
)}
)}
</div>
<div className="mb-4">
<Button
onClick={signTyped}
disabled={!isConnected || isSignTypedPending}
isLoading={isSignTypedPending}
>
Sign Typed Data
</Button>
{isSignTypedError && renderError(signTypedError)}
</div>
<div className="mb-4">
<Button
onClick={handleSwitchChain}
disabled={isSwitchChainPending}
isLoading={isSwitchChainPending}
>
Switch to {chainId === base.id ? "Optimism" : "Base"}
</Button>
{isSwitchChainError && renderError(switchChainError)}
</div>
</>
)}
</div>
</div>
</div>
);
Expand Down
Loading

0 comments on commit d746dd8

Please sign in to comment.