Porto Logo

[V0_FILE]typescriptreact:file="app/layout.tsx" import type { Metadata } from "next"; import { Geist } from "next/font/google"; import { PropsWithChildren } from "react"; import { Providers } from "@/lib/providers"; import "./globals.css"; const geist = Geist({ subsets: ["latin"], }); export const metadata: Metadata = { title: "Porto", description: "Sign in with superpowers. Buy, swap, subscribe, and much more. No passwords or extensions required.", }; export default function RootLayout({ children }: PropsWithChildren) { return ( {children} ); } [V0_FILE]typescriptreact:file="app/page.tsx" import { Connect } from "@/components/connect"; import { Demo } from "@/components/demo"; export default function Home() { return (

); } [V0_FILE]css:file="app/globals.css" @tailwind base; @tailwind components; @tailwind utilities; [V0_FILE]typescriptreact:file="components/demo.tsx" "use client"; import { useState, useEffect } from "react"; import { useAccount } from "wagmi"; import { SignInButton } from "./sign-in-button"; import { Tip } from "./tip"; export function Demo() { const account = useAccount(); const [isMounted, setIsMounted] = useState(false); useEffect(() => setIsMounted(true), []); if (!isMounted) return null; if (!account.address) return Sign in to try; return ; } [V0_FILE]typescriptreact:file="components/connect.tsx" "use client"; import { useEffect, useState } from "react"; import { useAccount, useDisconnect } from "wagmi"; import { SignInButton } from "./sign-in-button"; export function Connect() { const account = useAccount(); const { disconnect } = useDisconnect(); const [isMounted, setIsMounted] = useState(false); useEffect(() => setIsMounted(true), []); if (!isMounted) return null; if (!account.address) return ; return (

Signed in as {account.address.slice(0, 6)}...{account.address.slice(-4)}

); } [V0_FILE]typescriptreact:file="components/sign-in-button.tsx" "use client"; import { PropsWithChildren } from "react"; import { useConnect } from "wagmi"; export function SignInButton({ children = "Sign in" }: PropsWithChildren) { const { connectors, connect } = useConnect(); const connector = connectors.find( (connector) => connector.id === "xyz.ithaca.porto", ); return ( ); } [V0_FILE]typescriptreact:file="components/tip.tsx" import { exp1Config } from "@/lib/contracts"; import { CircleUserRound, HandCoins } from "lucide-react"; import { Provider, Value } from "ox"; import { UserRejectedRequestError } from "ox/Provider"; import { useEffect, useState } from "react"; import { toast } from "sonner"; import { BaseError, useAccount, useBlockNumber, useReadContract, useSendCalls, } from "wagmi"; const formatter = new Intl.NumberFormat("en-US", { maximumSignificantDigits: 4, }); export function format(num: bigint | number | undefined, units = 18) { if (!num) return "0"; return formatter.format( typeof num === "bigint" ? Number(Value.format(num, units)) : num, ); } export function Tip() { const account = useAccount(); const creatorAddress = "0xA0Cf798816D4b9b9866b5330EEa46a18382f251e"; const [success, setSuccess] = useState(false); const { data: blockNumber } = useBlockNumber({ watch: { enabled: true, pollingInterval: 1000, }, }); const { data: exp1Balance, refetch: expBalanceRefetch } = useReadContract({ abi: exp1Config.abi, address: exp1Config.address, args: [creatorAddress], functionName: "balanceOf", }); const { data: userExp1Balance, refetch: userExpBalanceRefetch } = useReadContract({ abi: exp1Config.abi, address: exp1Config.address, args: [account.address!], functionName: "balanceOf", query: { enabled: !!account.address, }, }); useEffect(() => { expBalanceRefetch(); userExpBalanceRefetch(); }, [blockNumber]); // Since we use USDC as the fee token in production, // we will mint EXP to the user if they don't have any // in the call bundle. const shouldMintExp = userExp1Balance && userExp1Balance < Value.fromEther("1"); const { isPending, sendCalls } = useSendCalls({ mutation: { onSuccess() { setSuccess(true); }, onError(err) { const error = (() => { if (err instanceof BaseError) return err instanceof BaseError ? err.walk((err) => err instanceof UserRejectedRequestError) : err; return err; })(); if ( (error as Provider.ProviderRpcError)?.code !== Provider.UserRejectedRequestError.code ) toast.error("Send Tip Failed", { description: err?.message ?? "Something went wrong", }); }, }, }); return (

Received

{" "}

{format(exp1Balance ?? 0)} {" "} EXP1

); } [V0_FILE]typescript:file="lib/contracts.ts" export const exp1Abi = [ { inputs: [ { internalType: "string", name: "name_", type: "string" }, { internalType: "string", name: "symbol_", type: "string" }, { internalType: "uint256", name: "scalar_", type: "uint256" }, ], stateMutability: "nonpayable", type: "constructor", }, { stateMutability: "payable", type: "fallback" }, { stateMutability: "payable", type: "receive" }, { inputs: [], name: "DOMAIN_SEPARATOR", outputs: [{ internalType: "bytes32", name: "result", type: "bytes32" }], stateMutability: "view", type: "function", }, { inputs: [ { internalType: "address", name: "owner", type: "address" }, { internalType: "address", name: "spender", type: "address" }, ], name: "allowance", outputs: [{ internalType: "uint256", name: "result", type: "uint256" }], stateMutability: "view", type: "function", }, { inputs: [ { internalType: "address", name: "spender", type: "address" }, { internalType: "uint256", name: "amount", type: "uint256" }, ], name: "approve", outputs: [{ internalType: "bool", name: "", type: "bool" }], stateMutability: "nonpayable", type: "function", }, { inputs: [{ internalType: "address", name: "owner", type: "address" }], name: "balanceOf", outputs: [{ internalType: "uint256", name: "result", type: "uint256" }], stateMutability: "view", type: "function", }, { inputs: [], name: "cancelOwnershipHandover", outputs: [], stateMutability: "payable", type: "function", }, { inputs: [ { internalType: "address", name: "pendingOwner", type: "address" }, ], name: "completeOwnershipHandover", outputs: [], stateMutability: "payable", type: "function", }, { inputs: [], name: "decimals", outputs: [{ internalType: "uint8", name: "", type: "uint8" }], stateMutability: "view", type: "function", }, { inputs: [ { internalType: "address", name: "recipient", type: "address" }, { internalType: "uint256", name: "value", type: "uint256" }, ], name: "mint", outputs: [], stateMutability: "nonpayable", type: "function", }, { inputs: [], name: "name", outputs: [{ internalType: "string", name: "", type: "string" }], stateMutability: "view", type: "function", }, { inputs: [{ internalType: "address", name: "owner", type: "address" }], name: "nonces", outputs: [{ internalType: "uint256", name: "result", type: "uint256" }], stateMutability: "view", type: "function", }, { inputs: [], name: "owner", outputs: [{ internalType: "address", name: "result", type: "address" }], stateMutability: "view", type: "function", }, { inputs: [ { internalType: "address", name: "pendingOwner", type: "address" }, ], name: "ownershipHandoverExpiresAt", outputs: [{ internalType: "uint256", name: "result", type: "uint256" }], stateMutability: "view", type: "function", }, { inputs: [ { internalType: "address", name: "owner", type: "address" }, { internalType: "address", name: "spender", type: "address" }, { internalType: "uint256", name: "value", type: "uint256" }, { internalType: "uint256", name: "deadline", type: "uint256" }, { internalType: "uint8", name: "v", type: "uint8" }, { internalType: "bytes32", name: "r", type: "bytes32" }, { internalType: "bytes32", name: "s", type: "bytes32" }, ], name: "permit", outputs: [], stateMutability: "nonpayable", type: "function", }, { inputs: [], name: "renounceOwnership", outputs: [], stateMutability: "payable", type: "function", }, { inputs: [], name: "requestOwnershipHandover", outputs: [], stateMutability: "payable", type: "function", }, { inputs: [{ internalType: "uint256", name: "mintCap", type: "uint256" }], name: "setMintCap", outputs: [], stateMutability: "nonpayable", type: "function", }, { inputs: [ { internalType: "address", name: "target", type: "address" }, { internalType: "address", name: "recipient", type: "address" }, { internalType: "uint256", name: "amount", type: "uint256" }, ], name: "swap", outputs: [], stateMutability: "nonpayable", type: "function", }, { inputs: [], name: "symbol", outputs: [{ internalType: "string", name: "", type: "string" }], stateMutability: "view", type: "function", }, { inputs: [], name: "totalSupply", outputs: [{ internalType: "uint256", name: "result", type: "uint256" }], stateMutability: "view", type: "function", }, { inputs: [ { internalType: "address", name: "to", type: "address" }, { internalType: "uint256", name: "amount", type: "uint256" }, ], name: "transfer", outputs: [{ internalType: "bool", name: "", type: "bool" }], stateMutability: "nonpayable", type: "function", }, { inputs: [ { internalType: "address", name: "from", type: "address" }, { internalType: "address", name: "to", type: "address" }, { internalType: "uint256", name: "amount", type: "uint256" }, ], name: "transferFrom", outputs: [{ internalType: "bool", name: "", type: "bool" }], stateMutability: "nonpayable", type: "function", }, { inputs: [{ internalType: "address", name: "newOwner", type: "address" }], name: "transferOwnership", outputs: [], stateMutability: "payable", type: "function", }, { anonymous: false, inputs: [ { indexed: true, internalType: "address", name: "owner", type: "address", }, { indexed: true, internalType: "address", name: "spender", type: "address", }, { indexed: false, internalType: "uint256", name: "amount", type: "uint256", }, ], name: "Approval", type: "event", }, { anonymous: false, inputs: [ { indexed: true, internalType: "address", name: "pendingOwner", type: "address", }, ], name: "OwnershipHandoverCanceled", type: "event", }, { anonymous: false, inputs: [ { indexed: true, internalType: "address", name: "pendingOwner", type: "address", }, ], name: "OwnershipHandoverRequested", type: "event", }, { anonymous: false, inputs: [ { indexed: true, internalType: "address", name: "oldOwner", type: "address", }, { indexed: true, internalType: "address", name: "newOwner", type: "address", }, ], name: "OwnershipTransferred", type: "event", }, { anonymous: false, inputs: [ { indexed: true, internalType: "address", name: "from", type: "address" }, { indexed: true, internalType: "address", name: "to", type: "address" }, { indexed: false, internalType: "uint256", name: "amount", type: "uint256", }, ], name: "Transfer", type: "event", }, { inputs: [], name: "AllowanceOverflow", type: "error" }, { inputs: [], name: "AllowanceUnderflow", type: "error" }, { inputs: [], name: "AlreadyInitialized", type: "error" }, { inputs: [], name: "InsufficientAllowance", type: "error" }, { inputs: [], name: "InsufficientBalance", type: "error" }, { inputs: [], name: "InvalidPermit", type: "error" }, { inputs: [], name: "NewOwnerIsZeroAddress", type: "error" }, { inputs: [], name: "NoHandoverRequest", type: "error" }, { inputs: [], name: "Permit2AllowanceIsFixedAtInfinity", type: "error" }, { inputs: [], name: "PermitExpired", type: "error" }, { inputs: [], name: "TotalSupplyOverflow", type: "error" }, { inputs: [], name: "Unauthorized", type: "error" }, ] as const; export const exp1Address = "0x29F45fc3eD1d0ffaFb5e2af9Cc6C3AB1555cd5a2" as const; export const exp1Config = { abi: exp1Abi, address: exp1Address } as const; [V0_FILE]typescript:file="lib/permissions.ts" import { Value } from "ox"; import type { config } from "./config"; import { exp1Config } from "./contracts"; export type ChainId = (typeof config)["state"]["chainId"]; export const permissions = (chainId: ChainId) => ({ expiry: Math.floor(Date.now() / 1000) + 60 * 60, // 1 hour permissions: { calls: [{ to: exp1Config.address[chainId] }], spend: [ { limit: Value.fromEther("100"), period: "hour", token: exp1Config.address[chainId], }, ], }, }) as const; [V0_FILE]typescript:file="lib/config.ts" import { Dialog, Mode } from "porto"; import { porto } from "porto/wagmi"; import { http, createConfig } from "wagmi"; import { baseSepolia } from "wagmi/chains"; export const config = createConfig({ chains: [baseSepolia], connectors: [ porto({ mode: ["preview", "production"].includes( process.env.NEXT_PUBLIC_VERCEL_ENV!, ) ? undefined : Mode.dialog({ renderer: Dialog.popup(), }), }), ], transports: { [baseSepolia.id]: http(), }, }); [V0_FILE]typescriptreact:file="lib/providers.tsx" "use client"; import { QueryClient, QueryClientProvider } from "@tanstack/react-query"; import { PropsWithChildren } from "react"; import { Toaster } from "sonner"; import { WagmiProvider } from "wagmi"; import { config } from "./config"; const queryClient = new QueryClient(); export function Providers({ children }: PropsWithChildren) { return ( {children} ); }

About

Tags

Share

About

Tags

Share

More Templates Like This

About

Tags

Share

About

Tags

Share

More Templates Like This