diff --git a/examples/_parsed/passport-examples.json b/examples/_parsed/passport-examples.json index 8d372e579a..3bee73d8fb 100644 --- a/examples/_parsed/passport-examples.json +++ b/examples/_parsed/passport-examples.json @@ -76,31 +76,6 @@ "sidebar_order": 1 } }, - "telegram-mini-app": { - "tutorial": "telegram-mini-app.md", - "metadata": { - "title": "Telegram Mini App with Immutable Passport", - "description": "Demonstrates device flow authentication and NFT transfers in a Telegram Mini App using Immutable Passport", - "keywords": [ - "Immutable", - "SDK", - "Passport", - "Telegram", - "Mini App", - "Device Flow Authentication", - "NFT Transfers" - ], - "tech_stack": [ - "Next.js", - "TypeScript", - "Telegram SDK", - "Ethers.js" - ], - "product": "Passport", - "programming_language": "TypeScript", - "sidebar_order": 7 - } - }, "wallets-connect-with-nextjs": { "tutorial": "wallets-connect-with-nextjs.md", "metadata": { diff --git a/examples/passport/telegram-mini-app/.env.example b/examples/passport/telegram-mini-app/.env.example deleted file mode 100644 index dd5873b557..0000000000 --- a/examples/passport/telegram-mini-app/.env.example +++ /dev/null @@ -1,3 +0,0 @@ -NEXT_PUBLIC_CLIENT_ID= -NEXT_PUBLIC_REDIRECT_URI= -NEXT_PUBLIC_LOGOUT_REDIRECT_URI= diff --git a/examples/passport/telegram-mini-app/.eslintrc.json b/examples/passport/telegram-mini-app/.eslintrc.json deleted file mode 100644 index a2569c2c7c..0000000000 --- a/examples/passport/telegram-mini-app/.eslintrc.json +++ /dev/null @@ -1,4 +0,0 @@ -{ - "root": true, - "extends": "next/core-web-vitals" -} diff --git a/examples/passport/telegram-mini-app/.gitignore b/examples/passport/telegram-mini-app/.gitignore deleted file mode 100644 index 2c7b6c86c3..0000000000 --- a/examples/passport/telegram-mini-app/.gitignore +++ /dev/null @@ -1,5 +0,0 @@ -node_modules -.next/ -.env -next-env.d.ts -out \ No newline at end of file diff --git a/examples/passport/telegram-mini-app/README.md b/examples/passport/telegram-mini-app/README.md deleted file mode 100644 index 2f49c62399..0000000000 --- a/examples/passport/telegram-mini-app/README.md +++ /dev/null @@ -1,24 +0,0 @@ -# Telegram Mini App - -This example demonstrates how to use Passport within a Telegram Mini App. - -## Getting Started - -Run the development server: - -```bash -pnpm dev -``` - -## Environment Variables - -Copy the `.env.example` file to a `.env` file and fill in the following environment variables: - -```bash -# The Client ID of your application in Hub -NEXT_PUBLIC_CLIENT_ID= -# The redirect URI configured in your application in Hub -NEXT_PUBLIC_REDIRECT_URI= -# The logout redirect URI configured in your application in Hub -NEXT_PUBLIC_LOGOUT_REDIRECT_URI= -``` diff --git a/examples/passport/telegram-mini-app/app/components/Connect.tsx b/examples/passport/telegram-mini-app/app/components/Connect.tsx deleted file mode 100644 index 834b676992..0000000000 --- a/examples/passport/telegram-mini-app/app/components/Connect.tsx +++ /dev/null @@ -1,69 +0,0 @@ -import { Body, Box, Button } from "@biom3/react"; -import WebApp from "@twa-dev/sdk"; -import { useCallback, useState } from "react"; -import { passportInstance } from "../utils"; -import { BrowserProvider } from "ethers"; - -export const Connect = ({ - setWalletAddress, - setZkEvmProvider, -}: { - setWalletAddress: (address: string) => void; - setZkEvmProvider: (provider: BrowserProvider) => void; -}) => { - const [errorMessage, setErrorMessage] = useState(""); - - const onConnect = useCallback(async () => { - try { - setErrorMessage(""); - // #doc passport-telegram-mini-app-login - // Use loginWithDeviceFlow as the login method for Telegram Mini App to ensure support for all devices - const deviceFlowParams = await passportInstance.loginWithDeviceFlow(); - // Open the device flow url using the openLink function on the telegram sdk - if (typeof window !== 'undefined') { - WebApp.openLink(deviceFlowParams.url); - } - // Wait for the user to complete the login before calling eth_requestAccounts - await passportInstance.loginWithDeviceFlowCallback( - deviceFlowParams.deviceCode, - deviceFlowParams.interval, - ); - // Get the provider and call eth_requestAccounts to get the user's wallet address - const provider = await passportInstance.connectEvm(); - const [userAddress] = await provider.request({ - method: "eth_requestAccounts", - }); - setWalletAddress(userAddress); - // #enddoc passport-telegram-mini-app-login - setZkEvmProvider(new BrowserProvider(provider)); - } catch (error: any) { - setErrorMessage(error.message); - } - }, [setWalletAddress, setZkEvmProvider, setErrorMessage]); - - return ( - - - {errorMessage ? ( - - - {`Error: ${errorMessage}`} - - - ) : null} - - ); -}; diff --git a/examples/passport/telegram-mini-app/app/components/Home.tsx b/examples/passport/telegram-mini-app/app/components/Home.tsx deleted file mode 100644 index dd7fea6bac..0000000000 --- a/examples/passport/telegram-mini-app/app/components/Home.tsx +++ /dev/null @@ -1,60 +0,0 @@ -"use client"; - -import { useState } from "react"; -import { - BiomeCombinedProviders, - Body, - Box, - Divider, - Heading, - Stack, -} from "@biom3/react"; -import { Connect } from "./Connect"; -import { TransferAsset } from "./TransferAsset"; -import { BrowserProvider } from "ethers"; - -export default function Home() { - const [walletAddress, setWalletAddress] = useState(""); - const [zkEvmProvider, setZkEvmProvider] = useState(null); - - return ( -
- - - Passport & Telegram - {!walletAddress ? ( - - ) : ( - - - Wallet Address - {walletAddress} - - - - - )} - - -
- ); -} diff --git a/examples/passport/telegram-mini-app/app/components/TransferAsset.tsx b/examples/passport/telegram-mini-app/app/components/TransferAsset.tsx deleted file mode 100644 index 907833fd12..0000000000 --- a/examples/passport/telegram-mini-app/app/components/TransferAsset.tsx +++ /dev/null @@ -1,159 +0,0 @@ -import { Body, Box, Button, FormControl, Heading } from "@biom3/react"; -import { BrowserProvider } from "ethers"; -import { ethers } from "ethers"; -import { useState } from "react"; - -export const TransferAsset = ({ - walletAddress, - zkEvmProvider, -}: { - walletAddress: string; - zkEvmProvider: BrowserProvider | null; -}) => { - const [collectionAddress, setCollectionAddress] = useState(""); - const [collectionAddressError, setCollectionAddressError] = - useState(""); - const [tokenId, setTokenId] = useState(""); - const [tokenIdError, setTokenIdError] = useState(""); - const [toAddress, setToAddress] = useState(""); - const [toAddressError, setToAddressError] = useState(""); - const [transferSuccess, setTransferSuccess] = useState(false); - const [errorMessage, setErrorMessage] = useState(""); - - const transferAsset = async () => { - if (!zkEvmProvider) return; - - setCollectionAddressError(""); - setTokenIdError(""); - setToAddressError(""); - - if (!collectionAddress) { - setCollectionAddressError("Collection Address is required"); - } - - if (!tokenId) { - setTokenIdError("Token ID is required"); - } - - if (!toAddress) { - setToAddressError("To Address is required"); - } - - // #doc passport-telegram-mini-app-transaction - // Setup the contract ABI with the safeTransferFrom function for transferring assets - const abi = [ - "function safeTransferFrom(address from, address to, uint256 token_id)", - ]; - - // Get the signer from the provider that was initialised in the Connect flow and create a contract instance - const signer = await zkEvmProvider.getSigner(); - const contract = new ethers.Contract(collectionAddress, abi, signer); - try { - // Call the transfer function on the contract - await contract.safeTransferFrom(walletAddress, toAddress, tokenId); - setTransferSuccess(true); - } catch (error: any) { - setErrorMessage(error.message); - } - // #enddoc passport-telegram-mini-app-transaction - }; - - const onCollectionAddressChange = ( - event: React.ChangeEvent, - ) => { - setCollectionAddress(event.target.value); - }; - - const onTokenIdChange = (event: React.ChangeEvent) => { - setTokenId(event.target.value); - }; - - const onToAddressChange = (event: React.ChangeEvent) => { - setToAddress(event.target.value); - }; - - return ( - - Transfer Asset - - Collection Address - - {collectionAddressError ? ( - - {collectionAddressError} - - ) : null} - - - Token ID - - {tokenIdError ? ( - - {tokenIdError} - - ) : null} - - - To Address - - {toAddressError ? ( - - {toAddressError} - - ) : null} - - - - - {transferSuccess ? Transfer Completed : null} - {errorMessage ? ( - - - {`Error: ${errorMessage}`} - - - ) : null} - - ); -}; diff --git a/examples/passport/telegram-mini-app/app/layout.tsx b/examples/passport/telegram-mini-app/app/layout.tsx deleted file mode 100644 index 9473265283..0000000000 --- a/examples/passport/telegram-mini-app/app/layout.tsx +++ /dev/null @@ -1,28 +0,0 @@ -import type { Metadata } from "next"; -import { Inter } from "next/font/google"; -import Script from "next/script"; - -const inter = Inter({ subsets: ["latin"] }); - -export const metadata: Metadata = { - title: "Passport Telegram Mini App", - description: "Passport testing Telegram Mini App", -}; - -export default function RootLayout({ - children, -}: Readonly<{ - children: React.ReactNode; -}>) { - return ( - - -