├── .eslintrc.json
├── src
    ├── app
    │   ├── favicon.ico
    │   ├── contract
    │   │   └── page.tsx
    │   ├── layout.tsx
    │   ├── globals.css
    │   └── page.tsx
    ├── constants
    │   ├── index.ts
    │   └── abi.ts
    ├── assets
    │   ├── botfather-tut1.png
    │   └── Arrow.tsx
    ├── lib
    │   └── utils.ts
    ├── containers
    │   ├── home
    │   │   └── Profile.tsx
    │   └── contract
    │   │   ├── ReadContract.tsx
    │   │   └── WriteContract.tsx
    ├── hooks
    │   ├── useClientOnce.ts
    │   ├── useDidMount.ts
    │   └── useTelegramMock.ts
    ├── components
    │   ├── ErrorPage.tsx
    │   ├── ui
    │   │   ├── input.tsx
    │   │   ├── sonner.tsx
    │   │   └── button.tsx
    │   ├── ErrorBoundary.tsx
    │   └── shared
    │   │   └── Navbar.tsx
    ├── providers
    │   ├── Web3Provider.tsx
    │   ├── Layout.tsx
    │   └── TelegramProvider.tsx
    └── utils
    │   └── config.ts
├── postcss.config.js
├── .env.example
├── next.config.js
├── components.json
├── .gitignore
├── tsconfig.json
├── package.json
├── public
    ├── arrow.svg
    ├── butterfly.svg
    ├── arbitrum.svg
    ├── loader.svg
    └── rabble.svg
├── tailwind.config.ts
└── README.md


/.eslintrc.json:
--------------------------------------------------------------------------------
1 | {
2 |   "extends": "next/core-web-vitals"
3 | }
4 | 


--------------------------------------------------------------------------------
/src/app/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/HAPPYS1NGH/tg-mini-app-nextjs/HEAD/src/app/favicon.ico


--------------------------------------------------------------------------------
/src/constants/index.ts:
--------------------------------------------------------------------------------
1 | export const counterAddress = "0x75b167a1628b6F239C0BEA211d731578bA90465a"
2 | 


--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   plugins: {
3 |     tailwindcss: {},
4 |     autoprefixer: {},
5 |   },
6 | }
7 | 


--------------------------------------------------------------------------------
/src/assets/botfather-tut1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/HAPPYS1NGH/tg-mini-app-nextjs/HEAD/src/assets/botfather-tut1.png


--------------------------------------------------------------------------------
/.env.example:
--------------------------------------------------------------------------------
1 | NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID='' # Required - https://cloud.walletconnect.com/
2 | NEXT_PUBLIC_ENABLE_TESTNETS='' # true or false
3 | NODE_ENV='' # development or production


--------------------------------------------------------------------------------
/src/lib/utils.ts:
--------------------------------------------------------------------------------
1 | import { type ClassValue, clsx } from "clsx"
2 | import { twMerge } from "tailwind-merge"
3 | 
4 | export function cn(...inputs: ClassValue[]) {
5 |   return twMerge(clsx(inputs))
6 | }
7 | 


--------------------------------------------------------------------------------
/src/containers/home/Profile.tsx:
--------------------------------------------------------------------------------
 1 | import { ConnectButton } from "@rainbow-me/rainbowkit"
 2 | 
 3 | export default function Profile() {
 4 |   return (
 5 |     <div>
 6 |       <ConnectButton />
 7 |     </div>
 8 |   )
 9 | }
10 | 


--------------------------------------------------------------------------------
/src/hooks/useClientOnce.ts:
--------------------------------------------------------------------------------
1 | import { useRef } from 'react';
2 | 
3 | export function useClientOnce(fn: () => void): void {
4 |   const canCall = useRef(true);
5 |   if (typeof window !== 'undefined' && canCall.current) {
6 |     canCall.current = false;
7 |     fn();
8 |   }
9 | }


--------------------------------------------------------------------------------
/next.config.js:
--------------------------------------------------------------------------------
 1 | /** @type {import('next').NextConfig} */
 2 | const nextConfig = {
 3 |   reactStrictMode: true,
 4 |   webpack: (config) => {
 5 |     config.externals.push("pino-pretty", "lokijs", "encoding")
 6 |     return config
 7 |   },
 8 | }
 9 | 
10 | module.exports = nextConfig
11 | 


--------------------------------------------------------------------------------
/src/hooks/useDidMount.ts:
--------------------------------------------------------------------------------
 1 | import { useEffect, useState } from 'react';
 2 | 
 3 | /**
 4 |  * @return True, if component was mounted.
 5 |  */
 6 | export function useDidMount(): boolean {
 7 |   const [didMount, setDidMount] = useState(false);
 8 | 
 9 |   useEffect(() => {
10 |     setDidMount(true);
11 |   }, []);
12 | 
13 |   return didMount;
14 | }


--------------------------------------------------------------------------------
/components.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "$schema": "https://ui.shadcn.com/schema.json",
 3 |   "style": "default",
 4 |   "rsc": true,
 5 |   "tsx": true,
 6 |   "tailwind": {
 7 |     "config": "tailwind.config.ts",
 8 |     "css": "src/app/globals.css",
 9 |     "baseColor": "slate",
10 |     "cssVariables": true,
11 |     "prefix": ""
12 |   },
13 |   "aliases": {
14 |     "components": "@/components",
15 |     "utils": "@/lib/utils"
16 |   }
17 | }


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.js
 7 | 
 8 | # testing
 9 | /coverage
10 | 
11 | # next.js
12 | /.next/
13 | /out/
14 | 
15 | # production
16 | /build
17 | 
18 | # misc
19 | .DS_Store
20 | *.pem
21 | 
22 | # debug
23 | npm-debug.log*
24 | yarn-debug.log*
25 | yarn-error.log*
26 | 
27 | # local env files
28 | .env*.local
29 | 
30 | # vercel
31 | .vercel
32 | 
33 | # typescript
34 | *.tsbuildinfo
35 | next-env.d.ts
36 | 


--------------------------------------------------------------------------------
/src/components/ErrorPage.tsx:
--------------------------------------------------------------------------------
 1 | import { useEffect } from 'react';
 2 | 
 3 | export function ErrorPage({
 4 |   error,
 5 |   reset,
 6 | }: {
 7 |   error: Error & { digest?: string }
 8 |   reset?: () => void
 9 | }) {
10 |   useEffect(() => {
11 |     // Log the error to an error reporting service
12 |     console.error(error);
13 |   }, [error]);
14 | 
15 |   return (
16 |     <div>
17 |       <h2>An unhandled error occurred!</h2>
18 |       <blockquote>
19 |         <code>
20 |           {error.message}
21 |         </code>
22 |       </blockquote>
23 |       {reset && <button onClick={() => reset()}>Try again</button>}
24 |     </div>
25 |   );
26 | }


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "es5",
 4 |     "lib": ["dom", "dom.iterable", "esnext"],
 5 |     "allowJs": true,
 6 |     "skipLibCheck": true,
 7 |     "strict": true,
 8 |     "noEmit": true,
 9 |     "esModuleInterop": true,
10 |     "module": "esnext",
11 |     "moduleResolution": "bundler",
12 |     "resolveJsonModule": true,
13 |     "isolatedModules": true,
14 |     "jsx": "preserve",
15 |     "incremental": true,
16 |     "plugins": [
17 |       {
18 |         "name": "next"
19 |       }
20 |     ],
21 |     "paths": {
22 |       "@/*": ["./src/*"]
23 |     }
24 |   },
25 |   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
26 |   "exclude": ["node_modules"]
27 | }
28 | 


--------------------------------------------------------------------------------
/src/app/contract/page.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | 
 3 | import { WriteContract } from "@/containers/contract/WriteContract";
 4 | import { ReadContract } from "@/containers/contract/ReadContract";
 5 | 
 6 | import { useAccount } from "wagmi";
 7 | function ContractExample() {
 8 |   const { isConnected } = useAccount();
 9 |   return (
10 |     <div className="">
11 |       {isConnected ? (
12 |         <>
13 |           <ReadContract />
14 |           <WriteContract />
15 |         </>
16 |       ) : (
17 |         <div className=" flex flex-col gap-4 items-center justify-center text-center text-2xl ">
18 |           Please Connect the Wallet
19 |         </div>
20 |       )}
21 |     </div>
22 |   );
23 | }
24 | 
25 | export default ContractExample;
26 | 


--------------------------------------------------------------------------------
/src/constants/abi.ts:
--------------------------------------------------------------------------------
 1 | export const counterAbi = [
 2 |   {
 3 |     inputs: [],
 4 |     name: "number",
 5 |     outputs: [
 6 |       {
 7 |         internalType: "uint256",
 8 |         name: "",
 9 |         type: "uint256",
10 |       },
11 |     ],
12 |     stateMutability: "view",
13 |     type: "function",
14 |   },
15 |   {
16 |     inputs: [
17 |       {
18 |         internalType: "uint256",
19 |         name: "new_number",
20 |         type: "uint256",
21 |       },
22 |     ],
23 |     name: "setNumber",
24 |     outputs: [],
25 |     stateMutability: "external",
26 |     type: "function",
27 |   },
28 |   {
29 |     inputs: [],
30 |     name: "increment",
31 |     outputs: [],
32 |     stateMutability: "external",
33 |     type: "function",
34 |   },
35 | ]
36 | 


--------------------------------------------------------------------------------
/src/components/ui/input.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | 
 3 | import { cn } from "@/lib/utils"
 4 | 
 5 | export interface InputProps
 6 |   extends React.InputHTMLAttributes<HTMLInputElement> {}
 7 | 
 8 | const Input = React.forwardRef<HTMLInputElement, InputProps>(
 9 |   ({ className, type, ...props }, ref) => {
10 |     return (
11 |       <input
12 |         type={type}
13 |         className={cn(
14 |           "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
15 |           className
16 |         )}
17 |         ref={ref}
18 |         {...props}
19 |       />
20 |     )
21 |   }
22 | )
23 | Input.displayName = "Input"
24 | 
25 | export { Input }
26 | 


--------------------------------------------------------------------------------
/src/containers/contract/ReadContract.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | import { useReadContract } from "wagmi";
 3 | import { counterAbi } from "@/constants/abi";
 4 | import { counterAddress } from "@/constants";
 5 | 
 6 | export function ReadContract() {
 7 |   const {
 8 |     data: counter,
 9 |     status,
10 |     isLoading,
11 |     error,
12 |   } = useReadContract({
13 |     abi: counterAbi,
14 |     address: counterAddress,
15 |     functionName: "number",
16 |   });
17 | 
18 |   console.log(counter, status, isLoading, error);
19 | 
20 |   return (
21 |     <div className="text-left my-8">
22 |       {isLoading ? (
23 |         <div>Loading</div>
24 |       ) : error ? (
25 |         <div className="text-red-500">Error</div>
26 |       ) : (
27 |         <div className="text-2xl">
28 |           Current Number:{" "}
29 |           <span className="text-rabble">{counter?.toString()}</span>
30 |         </div>
31 |       )}
32 |     </div>
33 |   );
34 | }
35 | 


--------------------------------------------------------------------------------
/src/providers/Web3Provider.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | import { WagmiProvider } from "wagmi";
 3 | import {
 4 |   darkTheme,
 5 |   lightTheme,
 6 |   RainbowKitProvider,
 7 | } from "@rainbow-me/rainbowkit";
 8 | import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 9 | import { config } from "../utils/config";
10 | 
11 | const queryClient = new QueryClient();
12 | 
13 | export default function Web3Provider({
14 |   children,
15 | }: {
16 |   children: React.ReactNode;
17 | }) {
18 |   return (
19 |     <WagmiProvider config={config}>
20 |       <QueryClientProvider client={queryClient}>
21 |         <RainbowKitProvider
22 |           theme={darkTheme({
23 |             accentColor: "#21C896",
24 |             accentColorForeground: "white",
25 |             borderRadius: "medium",
26 |             fontStack: "system",
27 |           })}
28 |         >
29 |           {children}
30 |         </RainbowKitProvider>
31 |       </QueryClientProvider>
32 |     </WagmiProvider>
33 |   );
34 | }
35 | 


--------------------------------------------------------------------------------
/src/components/ui/sonner.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | 
 3 | import { useTheme } from "next-themes"
 4 | import { Toaster as Sonner } from "sonner"
 5 | 
 6 | type ToasterProps = React.ComponentProps<typeof Sonner>
 7 | 
 8 | const Toaster = ({ ...props }: ToasterProps) => {
 9 |   const { theme = "system" } = useTheme()
10 | 
11 |   return (
12 |     <Sonner
13 |       theme={theme as ToasterProps["theme"]}
14 |       className="toaster group"
15 |       toastOptions={{
16 |         classNames: {
17 |           toast:
18 |             "group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg",
19 |           description: "group-[.toast]:text-muted-foreground",
20 |           actionButton:
21 |             "group-[.toast]:bg-primary group-[.toast]:text-primary-foreground",
22 |           cancelButton:
23 |             "group-[.toast]:bg-muted group-[.toast]:text-muted-foreground",
24 |         },
25 |       }}
26 |       {...props}
27 |     />
28 |   )
29 | }
30 | 
31 | export { Toaster }
32 | 


--------------------------------------------------------------------------------
/src/components/ErrorBoundary.tsx:
--------------------------------------------------------------------------------
 1 | import {
 2 |   Component,
 3 |   type ComponentType,
 4 |   type GetDerivedStateFromError,
 5 |   type PropsWithChildren,
 6 | } from 'react';
 7 | 
 8 | export interface ErrorBoundaryProps extends PropsWithChildren {
 9 |   fallback: ComponentType<{ error: Error }>;
10 | }
11 | 
12 | interface ErrorBoundaryState {
13 |   error?: Error;
14 | }
15 | 
16 | export class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
17 |   state: ErrorBoundaryState = {};
18 | 
19 |   // eslint-disable-next-line max-len
20 |   static getDerivedStateFromError: GetDerivedStateFromError<ErrorBoundaryProps, ErrorBoundaryState> = (error) => ({ error });
21 | 
22 |   componentDidCatch(error: Error) {
23 |     this.setState({ error });
24 |   }
25 | 
26 |   render() {
27 |     const {
28 |       state: {
29 |         error,
30 |       },
31 |       props: {
32 |         fallback: Fallback,
33 |         children,
34 |       },
35 |     } = this;
36 | 
37 |     return error ? <Fallback error={error}/> : children;
38 |   }
39 | }
40 | 


--------------------------------------------------------------------------------
/src/utils/config.ts:
--------------------------------------------------------------------------------
 1 | import { getDefaultWallets, getDefaultConfig } from "@rainbow-me/rainbowkit"
 2 | import {
 3 |   argentWallet,
 4 |   trustWallet,
 5 |   ledgerWallet,
 6 | } from "@rainbow-me/rainbowkit/wallets"
 7 | import {
 8 |   arbitrum,
 9 |   arbitrumSepolia,
10 |   localhost,
11 |   mainnet,
12 | } from "wagmi/chains"
13 | 
14 | const { wallets } = getDefaultWallets()
15 | 
16 | export const WALLETCONNECT_PROJECT_ID =
17 |   process.env.NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID ?? ""
18 | if (!WALLETCONNECT_PROJECT_ID) {
19 |   console.warn(
20 |     "You need to provide a NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID env variable"
21 |   )
22 | }
23 | export const config = getDefaultConfig({
24 |   appName: "RainbowKit demo",
25 |   projectId: WALLETCONNECT_PROJECT_ID,
26 |   wallets: [
27 |     ...wallets,
28 |     {
29 |       groupName: "Other",
30 |       wallets: [argentWallet, trustWallet, ledgerWallet],
31 |     },
32 |   ],
33 |   chains: [
34 |     mainnet,
35 |     ...(process.env.NEXT_PUBLIC_ENABLE_TESTNETS === "true"
36 |       ? [arbitrumSepolia, arbitrum, localhost]
37 |       : []),
38 |   ],
39 |   ssr: true,
40 | })
41 | 


--------------------------------------------------------------------------------
/src/app/layout.tsx:
--------------------------------------------------------------------------------
 1 | import type { Metadata } from "next";
 2 | import { Outfit, Be_Vietnam_Pro } from "next/font/google";
 3 | import "@rainbow-me/rainbowkit/styles.css";
 4 | import "./globals.css";
 5 | import Web3Provider from "@/providers/Web3Provider";
 6 | import Layout from "@/providers/Layout";
 7 | import { TelegramProvider } from "@/providers/TelegramProvider";
 8 | 
 9 | const outfit = Outfit({ subsets: ["latin"], variable: "--font-outfit" });
10 | const beVietnamPro = Be_Vietnam_Pro({
11 |   weight: "400",
12 |   subsets: ["latin"],
13 |   variable: "--font-beVietnamPro",
14 | });
15 | 
16 | export const metadata: Metadata = {
17 |   title: "Create ETH Mini App",
18 |   description: "Template for creating a Mini App on Ethereum",
19 | };
20 | 
21 | export default function RootLayout({
22 |   children,
23 | }: {
24 |   children: React.ReactNode;
25 | }) {
26 |   return (
27 |     <html lang="en" className={`${outfit.variable} ${beVietnamPro.variable}`}>
28 |       <body className={beVietnamPro.className}>
29 |         <Web3Provider>
30 |           <TelegramProvider>
31 |             <Layout>{children}</Layout>
32 |           </TelegramProvider>
33 |         </Web3Provider>
34 |       </body>
35 |     </html>
36 |   );
37 | }
38 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "happy-starter-kit",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "dev": "next dev",
 7 |     "build": "next build",
 8 |     "start": "next start",
 9 |     "lint": "next lint",
10 |     "expose": "lt --port 3000"
11 |   },
12 |   "dependencies": {
13 |     "@radix-ui/react-slot": "^1.0.2",
14 |     "@rainbow-me/rainbowkit": "^2.0.2",
15 |     "@tanstack/react-query": "^5.27.5",
16 |     "@telegram-apps/sdk-react": "^1.1.3",
17 |     "class-variance-authority": "^0.7.0",
18 |     "clsx": "^2.1.0",
19 |     "eruda": "^3.2.1",
20 |     "localtunnel": "^2.0.2",
21 |     "lucide-react": "^0.356.0",
22 |     "next": "14.2.4",
23 |     "next-themes": "^0.3.0",
24 |     "react": "^18",
25 |     "react-dom": "^18",
26 |     "sonner": "^1.4.3",
27 |     "tailwind-merge": "^2.2.1",
28 |     "tailwindcss-animate": "^1.0.7",
29 |     "viem": "^2.8.4",
30 |     "wagmi": "^2.5.7"
31 |   },
32 |   "devDependencies": {
33 |     "@types/node": "^20",
34 |     "@types/react": "^18",
35 |     "@types/react-dom": "^18",
36 |     "autoprefixer": "^10",
37 |     "eslint": "^8",
38 |     "eslint-config-next": "13.5.6",
39 |     "postcss": "^8",
40 |     "tailwindcss": "^3",
41 |     "typescript": "^5"
42 |   }
43 | }
44 | 


--------------------------------------------------------------------------------
/public/arrow.svg:
--------------------------------------------------------------------------------
1 | <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
2 | <path d="M10.4092 8.43361C10.3086 8.43716 10.2082 8.42041 10.1142 8.38434C10.0201 8.34827 9.93432 8.29363 9.86186 8.22368C9.78939 8.15373 9.73176 8.0699 9.6924 7.97719C9.65304 7.88448 9.63275 7.78479 9.63275 7.68408C9.63275 7.58336 9.65304 7.48367 9.6924 7.39096C9.73176 7.29825 9.78939 7.21442 9.86186 7.14447C9.93432 7.07452 10.0201 7.01988 10.1142 6.98381C10.2082 6.94775 10.3085 6.93099 10.4092 6.93454L16.0661 6.93454C16.2648 6.93467 16.4554 7.01367 16.5959 7.15421C16.7365 7.29475 16.8155 7.48532 16.8156 7.68408L16.8156 13.3409C16.8191 13.4416 16.8024 13.5419 16.7663 13.636C16.7303 13.73 16.6756 13.8158 16.6057 13.8883C16.5357 13.9607 16.4519 14.0184 16.3592 14.0577C16.2665 14.0971 16.1668 14.1174 16.0661 14.1174C15.9653 14.1174 15.8657 14.0971 15.7729 14.0577C15.6802 14.0184 15.5964 13.9607 15.5265 13.8883C15.4565 13.8158 15.4019 13.73 15.3658 13.636C15.3297 13.5419 15.313 13.4416 15.3165 13.3409L15.3165 9.49427L8.46466 16.3461C8.32401 16.4868 8.13324 16.5658 7.93433 16.5658C7.73542 16.5658 7.54465 16.4868 7.404 16.3461C7.26335 16.2055 7.18433 16.0147 7.18433 15.8158C7.18433 15.6169 7.26335 15.4261 7.404 15.2855L14.2559 8.43361L10.4092 8.43361Z" fill="white"/>
3 | </svg>
4 | 


--------------------------------------------------------------------------------
/public/butterfly.svg:
--------------------------------------------------------------------------------
1 | <svg width="40" height="64" viewBox="0 0 40 64" fill="none" xmlns="http://www.w3.org/2000/svg">
2 | <path opacity="0.25" d="M28.3567 30.9462L11.9589 8.03514C10.0911 5.42648 6.45538 6.36077 5.72095 9.64652L1.06506 30.4318C0.643443 32.3161 1.40952 34.2897 2.9101 35.1767L11.6008 40.31C12.3306 40.7404 13.1696 40.8717 13.972 40.6774L26.3346 37.6699C28.9776 37.0243 30.0839 33.3606 28.3611 30.9514L28.3567 30.9462Z" fill="#8C8A93"/>
3 | <path opacity="0.25" d="M31.6796 41.9634L32.2102 47.2961C32.2918 48.1202 32.0606 48.9495 31.58 49.5636L20.9899 63.0531C19.5528 64.8849 16.9187 63.9034 16.6784 61.4417L15.5406 49.9468C15.4273 48.7973 15.9169 47.6793 16.7873 47.1124L27.9849 39.7851C29.5353 38.7721 31.4802 39.9163 31.6796 41.9634Z" fill="#8C8A93"/>
4 | <path d="M36.3491 26.2537L18.7183 1.62107C16.71 -1.18704 12.8022 -0.179265 12.0088 3.35318L7.00384 25.7026C6.5505 27.7286 7.37564 29.8544 8.98503 30.8044L18.3285 36.3262C19.1128 36.7881 20.015 36.9298 20.8763 36.7198L34.1684 33.4866C37.0109 32.7937 38.1986 28.8519 36.3444 26.2642L36.3491 26.2537Z" fill="#08F7AF"/>
5 | <path d="M38.4614 38.8402L39.0327 44.6034C39.1188 45.4957 38.874 46.388 38.3527 47.0494L26.9147 61.62C25.3597 63.5988 22.5171 62.5386 22.2542 59.8827L21.0256 47.4693C20.9032 46.2253 21.4337 45.0181 22.3721 44.404L34.4675 36.4888C36.1449 35.3918 38.2392 36.6305 38.4614 38.8455V38.8402Z" fill="#08F7AF"/>
6 | </svg>
7 | 


--------------------------------------------------------------------------------
/src/providers/Layout.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | import React, { useEffect } from "react";
 3 | import Navbar from "@/components/shared/Navbar";
 4 | import { Toaster } from "@/components/ui/sonner";
 5 | import {
 6 |   useBackButton,
 7 |   useClosingBehavior,
 8 |   useViewport,
 9 | } from "@telegram-apps/sdk-react";
10 | import { useRouter, usePathname } from "next/navigation";
11 | 
12 | function Layout({ children }: { children: React.ReactNode }) {
13 |   const bb = useBackButton();
14 |   const close = useClosingBehavior(); // will be undefined or ClosingBehavior.
15 |   const viewport = useViewport(); // will be undefined or InitData.
16 |   const router = useRouter();
17 |   const pathname = usePathname();
18 |   useEffect(() => {
19 |     function goBack() {
20 |       router.back();
21 |     }
22 |     if (close) {
23 |       close.enableConfirmation();
24 |     }
25 |     if (viewport) {
26 |       viewport.expand();
27 |     }
28 |     if (bb) {
29 |       if (pathname === "/") {
30 |         bb.hide();
31 |         return;
32 |       }
33 |       bb.show();
34 |       bb.on("click", goBack);
35 |     }
36 |   }, [bb, router, pathname]);
37 | 
38 |   return (
39 |     <main className="bg-background">
40 |       <Navbar />
41 |       <main className=" mx-3 my-4 ">{children}</main>
42 |       <Toaster richColors />
43 |     </main>
44 |   );
45 | }
46 | 
47 | export default Layout;
48 | 


--------------------------------------------------------------------------------
/src/components/shared/Navbar.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | import React from "react";
 3 | import Link from "next/link";
 4 | import { ConnectButton } from "@rainbow-me/rainbowkit";
 5 | import { usePathname } from "next/navigation";
 6 | import Image from "next/image";
 7 | 
 8 | const Navbar = () => {
 9 |   const pathname = usePathname();
10 |   console.log(pathname);
11 | 
12 |   return (
13 |     <nav className="mx-3 my-4">
14 |       <div className="flex items-end">
15 |         <Image src="/rabble.svg" alt="Rabble" width={82.8} height={21.6} />
16 |         <div className="ml-auto flex items-center ">
17 |           <ConnectButton accountStatus={"avatar"} chainStatus={"icon"} />
18 |         </div>
19 |       </div>
20 |       <hr className="bg-black my-2" />
21 |       <div className="flex space-x-4 ">
22 |         <Link
23 |           href="/"
24 |           className={`${
25 |             pathname == "/" ? "text-rabble" : "text-color  hover:text-color/90"
26 |           } `}
27 |         >
28 |           Home
29 |         </Link>
30 |         <Link
31 |           href="/contract"
32 |           className={`${
33 |             pathname == "/contract"
34 |               ? "text-rabble"
35 |               : "text-color hover:text-color/90"
36 |           } `}
37 |         >
38 |           Contract
39 |         </Link>
40 |       </div>
41 |     </nav>
42 |   );
43 | };
44 | 
45 | export default Navbar;
46 | 


--------------------------------------------------------------------------------
/src/assets/Arrow.tsx:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | 
 3 | const Arrow = ({ color }: { color: string }) => (
 4 |   <svg
 5 |     width="24"
 6 |     height="24"
 7 |     viewBox="0 0 24 24"
 8 |     fill="none"
 9 |     xmlns="http://www.w3.org/2000/svg"
10 |   >
11 |     <path
12 |       d="M10.4092 8.43361C10.3086 8.43716 10.2082 8.42041 10.1142 8.38434C10.0201 8.34827 9.93432 8.29363 9.86186 8.22368C9.78939 8.15373 9.73176 8.0699 9.6924 7.97719C9.65304 7.88448 9.63275 7.78479 9.63275 7.68408C9.63275 7.58336 9.65304 7.48367 9.6924 7.39096C9.73176 7.29825 9.78939 7.21442 9.86186 7.14447C9.93432 7.07452 10.0201 7.01988 10.1142 6.98381C10.2082 6.94775 10.3085 6.93099 10.4092 6.93454L16.0661 6.93454C16.2648 6.93467 16.4554 7.01367 16.5959 7.15421C16.7365 7.29475 16.8155 7.48532 16.8156 7.68408L16.8156 13.3409C16.8191 13.4416 16.8024 13.5419 16.7663 13.636C16.7303 13.73 16.6756 13.8158 16.6057 13.8883C16.5357 13.9607 16.4519 14.0184 16.3592 14.0577C16.2665 14.0971 16.1668 14.1174 16.0661 14.1174C15.9653 14.1174 15.8657 14.0971 15.7729 14.0577C15.6802 14.0184 15.5964 13.9607 15.5265 13.8883C15.4565 13.8158 15.4019 13.73 15.3658 13.636C15.3297 13.5419 15.313 13.4416 15.3165 13.3409L15.3165 9.49427L8.46466 16.3461C8.32401 16.4868 8.13324 16.5658 7.93433 16.5658C7.73542 16.5658 7.54465 16.4868 7.404 16.3461C7.26335 16.2055 7.18433 16.0147 7.18433 15.8158C7.18433 15.6169 7.26335 15.4261 7.404 15.2855L14.2559 8.43361L10.4092 8.43361Z"
13 |       fill={color}
14 |     />
15 |   </svg>
16 | );
17 | 
18 | export default Arrow;
19 | 


--------------------------------------------------------------------------------
/src/app/globals.css:
--------------------------------------------------------------------------------
 1 | @tailwind base;
 2 | @tailwind components;
 3 | @tailwind utilities;
 4 | 
 5 | @layer base {
 6 |   :root {
 7 |     --background: 0 0% 100%;
 8 |     --foreground: 222.2 84% 4.9%;
 9 | 
10 |     --card: 0 0% 100%;
11 |     --card-foreground: 222.2 84% 4.9%;
12 | 
13 |     --popover: 0 0% 100%;
14 |     --popover-foreground: 222.2 84% 4.9%;
15 | 
16 |     --primary: 222.2 47.4% 11.2%;
17 |     --primary-foreground: 210 40% 98%;
18 | 
19 |     --secondary: 210 40% 96.1%;
20 |     --secondary-foreground: 222.2 47.4% 11.2%;
21 | 
22 |     --muted: 210 40% 96.1%;
23 |     --muted-foreground: 215.4 16.3% 46.9%;
24 | 
25 |     --accent: 210 40% 96.1%;
26 |     --accent-foreground: 222.2 47.4% 11.2%;
27 | 
28 |     --destructive: 0 84.2% 60.2%;
29 |     --destructive-foreground: 210 40% 98%;
30 | 
31 |     --border: 214.3 31.8% 91.4%;
32 |     --input: 214.3 31.8% 91.4%;
33 |     --ring: 222.2 84% 4.9%;
34 | 
35 |     --radius: 0.5rem;
36 |   }
37 | 
38 |   .dark {
39 |     --background: 222.2 84% 4.9%;
40 |     --foreground: 210 40% 98%;
41 | 
42 |     --card: 222.2 84% 4.9%;
43 |     --card-foreground: 210 40% 98%;
44 | 
45 |     --popover: 222.2 84% 4.9%;
46 |     --popover-foreground: 210 40% 98%;
47 | 
48 |     --primary: 210 40% 98%;
49 |     --primary-foreground: 222.2 47.4% 11.2%;
50 | 
51 |     --secondary: 217.2 32.6% 17.5%;
52 |     --secondary-foreground: 210 40% 98%;
53 | 
54 |     --muted: 217.2 32.6% 17.5%;
55 |     --muted-foreground: 215 20.2% 65.1%;
56 | 
57 |     --accent: 217.2 32.6% 17.5%;
58 |     --accent-foreground: 210 40% 98%;
59 | 
60 |     --destructive: 0 62.8% 30.6%;
61 |     --destructive-foreground: 210 40% 98%;
62 | 
63 |     --border: 217.2 32.6% 17.5%;
64 |     --input: 217.2 32.6% 17.5%;
65 |     --ring: 212.7 26.8% 83.9%;
66 |   }
67 | }
68 | 
69 | @layer base {
70 |   * {
71 |     @apply border-border;
72 |   }
73 |   body {
74 |     @apply bg-background text-foreground;
75 |   }
76 | }
77 | 
78 | h1,
79 | h2,
80 | h3,
81 | h4,
82 | h5,
83 | h6 {
84 |   font-family: sans-serif;
85 | }
86 | 


--------------------------------------------------------------------------------
/src/containers/contract/WriteContract.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | import * as React from "react";
 3 | import { useEffect } from "react";
 4 | import { Input } from "@/components/ui/input";
 5 | import { Button } from "@/components/ui/button";
 6 | import { useWaitForTransactionReceipt, useWriteContract } from "wagmi";
 7 | import { toast } from "sonner";
 8 | 
 9 | import { counterAbi } from "@/constants/abi";
10 | import { counterAddress } from "@/constants";
11 | 
12 | export function WriteContract() {
13 |   const { data: hash, isPending, writeContract } = useWriteContract();
14 | 
15 |   async function submit(e: React.FormEvent<HTMLFormElement>) {
16 |     e.preventDefault();
17 |     const formData = new FormData(e.target as HTMLFormElement);
18 |     const tokenId = formData.get("value") as string;
19 |     console.log(tokenId);
20 |     writeContract({
21 |       address: counterAddress,
22 |       abi: counterAbi,
23 |       functionName: "setNumber",
24 |       args: [BigInt(tokenId)],
25 |     });
26 |   }
27 | 
28 |   const {
29 |     isLoading: isConfirming,
30 |     error,
31 |     isSuccess: isConfirmed,
32 |   } = useWaitForTransactionReceipt({
33 |     hash,
34 |   });
35 | 
36 |   useEffect(() => {
37 |     if (isConfirmed) {
38 |       toast.success("Transaction Successful");
39 |     }
40 |     if (error) {
41 |       toast.error("Transaction Failed");
42 |     }
43 |   }, [isConfirmed, error]);
44 | 
45 |   return (
46 |     <form onSubmit={submit}>
47 |       <p className="text-sm text-gray-500">
48 |         Make this counter your favorite number
49 |       </p>
50 |       <div className="flex w-full max-w-sm items-center space-x-2">
51 |         <Input
52 |           name="value"
53 |           placeholder="14"
54 |           type="number"
55 |           required
56 |           className="bg-black text-white rounded-full "
57 |         />
58 |         <Button
59 |           disabled={isPending || isConfirming}
60 |           type="submit"
61 |           variant={"rabble"}
62 |           size={"one-third"}
63 |         >
64 |           {isPending ? "Confirming..." : "Set Number"}
65 |         </Button>
66 |       </div>
67 |     </form>
68 |   );
69 | }
70 | 


--------------------------------------------------------------------------------
/public/arbitrum.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="utf-8"?>
 2 | <!-- Generator: Adobe Illustrator 27.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
 3 | <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 4 | 	 viewBox="0 0 1080 1218.5" style="enable-background:new 0 0 1080 1218.5;" xml:space="preserve">
 5 | <style type="text/css">
 6 | 	.st0{fill:#213147;}
 7 | 	.st1{fill:#12AAFF;}
 8 | 	.st2{fill:#9DCCED;}
 9 | 	.st3{fill:#FFFFFF;}
10 | </style>
11 | <g>
12 | 	<path class="st0" d="M41,370.4v477.7c0,30.5,16.3,58.7,42.7,73.9l413.7,238.9c26.4,15.2,58.9,15.2,85.3,0L996.4,922
13 | 		c26.4-15.2,42.7-43.4,42.7-73.9V370.4c0-30.5-16.3-58.7-42.7-73.9L582.7,57.6c-26.4-15.2-58.9-15.2-85.3,0L83.6,296.5
14 | 		C57.2,311.7,41,339.9,41,370.4z"/>
15 | 	<g>
16 | 		<g>
17 | 			<g>
18 | 				<path class="st1" d="M630.3,701.9l-59,161.8c-1.6,4.5-1.6,9.4,0,13.9L672.8,1156l117.4-67.8L649.3,701.9
19 | 					C646.1,693,633.5,693,630.3,701.9z"/>
20 | 			</g>
21 | 			<g>
22 | 				<path class="st1" d="M748.6,429.8c-3.2-8.9-15.8-8.9-19,0l-59,161.8c-1.6,4.5-1.6,9.4,0,13.9l166.3,455.8l117.4-67.8
23 | 					L748.6,429.8z"/>
24 | 			</g>
25 | 		</g>
26 | 	</g>
27 | 	<path class="st2" d="M540,75.5c2.9,0,5.8,0.8,8.4,2.2l447.7,258.5c5.2,3,8.4,8.6,8.4,14.5v516.9c0,6-3.2,11.5-8.4,14.5
28 | 		l-447.7,258.5c-2.5,1.5-5.5,2.2-8.4,2.2c-2.9,0-5.8-0.8-8.4-2.2L83.9,882.3c-5.2-3-8.4-8.6-8.4-14.5V350.8c0-6,3.2-11.5,8.4-14.5
29 | 		L531.6,77.8C534.2,76.3,537.1,75.5,540,75.5 M540,0c-15.9,0-31.9,4.1-46.2,12.4L46.2,270.8c-28.6,16.5-46.2,47-46.2,80v516.9
30 | 		c0,33,17.6,63.5,46.2,80l447.7,258.5c14.3,8.2,30.2,12.4,46.2,12.4c15.9,0,31.9-4.1,46.2-12.4l447.7-258.5
31 | 		c28.6-16.5,46.2-47,46.2-80V350.8c0-33-17.6-63.5-46.2-80L586.2,12.4C571.9,4.1,555.9,0,540,0L540,0z"/>
32 | 	<polygon class="st0" points="243.9,1061.9 285.1,949.1 368,1018 290.5,1088.8 	"/>
33 | 	<g>
34 | 		<path class="st3" d="M502.3,313.8H388.8c-8.5,0-16.1,5.3-19,13.3l-243.3,667l117.4,67.8l267.9-734.5
35 | 			C514.3,320.8,509.4,313.8,502.3,313.8z"/>
36 | 		<path class="st3" d="M700.9,313.8H587.4c-8.5,0-16.1,5.3-19,13.3l-277.8,761.6l117.4,67.8l302.4-829.1
37 | 			C712.8,320.8,707.9,313.8,700.9,313.8z"/>
38 | 	</g>
39 | </g>
40 | </svg>
41 | 


--------------------------------------------------------------------------------
/src/components/ui/button.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react";
 2 | import { Slot } from "@radix-ui/react-slot";
 3 | import { cva, type VariantProps } from "class-variance-authority";
 4 | 
 5 | import { cn } from "@/lib/utils";
 6 | 
 7 | const buttonVariants = cva(
 8 |   "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
 9 |   {
10 |     variants: {
11 |       variant: {
12 |         default: "bg-primary text-primary-foreground hover:bg-primary/90",
13 |         destructive:
14 |           "bg-destructive text-destructive-foreground hover:bg-destructive/90",
15 |         outline:
16 |           "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
17 |         secondary:
18 |           "bg-secondary text-secondary-foreground hover:bg-secondary/80",
19 |         ghost: "hover:bg-accent hover:text-accent-foreground",
20 |         link: "text-primary underline-offset-4 hover:underline",
21 |         rabble: "bg-rabble text-primary-foreground hover:bg-rabble/90 text-md",
22 |         tertiary:
23 |           "bg-white text-primary-foreground hover:bg-[#E7E7E7]/90 text-md text-[#DC15BA]",
24 |       },
25 |       size: {
26 |         default: "h-10 px-4 py-2",
27 |         sm: "h-9 rounded-md px-3",
28 |         lg: "h-11 rounded-md px-8",
29 |         icon: "h-10 w-10",
30 |         half: "w-1/2 px-4 py-1 rounded-full",
31 |         "one-third": "w-1/3 px-4 py-1 rounded-full",
32 |       },
33 |     },
34 |     defaultVariants: {
35 |       variant: "default",
36 |       size: "default",
37 |     },
38 |   }
39 | );
40 | 
41 | export interface ButtonProps
42 |   extends React.ButtonHTMLAttributes<HTMLButtonElement>,
43 |     VariantProps<typeof buttonVariants> {
44 |   asChild?: boolean;
45 | }
46 | 
47 | const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
48 |   ({ className, variant, size, asChild = false, ...props }, ref) => {
49 |     const Comp = asChild ? Slot : "button";
50 |     return (
51 |       <Comp
52 |         className={cn(buttonVariants({ variant, size, className }))}
53 |         ref={ref}
54 |         {...props}
55 |       />
56 |     );
57 |   }
58 | );
59 | Button.displayName = "Button";
60 | 
61 | export { Button, buttonVariants };
62 | 


--------------------------------------------------------------------------------
/src/providers/TelegramProvider.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | 
 3 | import { type PropsWithChildren, useEffect, useMemo, useState } from "react";
 4 | import { SDKProvider, useLaunchParams } from "@telegram-apps/sdk-react";
 5 | 
 6 | import { ErrorBoundary } from "@/components/ErrorBoundary";
 7 | import { ErrorPage } from "@/components/ErrorPage";
 8 | import { useTelegramMock } from "@/hooks/useTelegramMock";
 9 | import { useDidMount } from "@/hooks/useDidMount";
10 | import Image from "next/image";
11 | 
12 | // function App(props: PropsWithChildren) {
13 | //   const lp = useLaunchParams();
14 | //   const miniApp = useMiniApp();
15 | //   const themeParams = useThemeParams();
16 | //   const viewport = useViewport();
17 | 
18 | //   useEffect(() => {
19 | //     return bindMiniAppCSSVars(miniApp, themeParams);
20 | //   }, [miniApp, themeParams]);
21 | 
22 | //   useEffect(() => {
23 | //     return bindThemeParamsCSSVars(themeParams);
24 | //   }, [themeParams]);
25 | 
26 | //   useEffect(() => {
27 | //     return viewport && bindViewportCSSVars(viewport);
28 | //   }, [viewport]);
29 | 
30 | //   return (
31 | //     <
32 | //     >
33 | //       {props.children}
34 | //     </>
35 | //   );
36 | // }
37 | 
38 | function RootInner({ children }: PropsWithChildren) {
39 |   // Mock Telegram environment in development mode if needed.
40 |   if (process.env.NODE_ENV === "development") {
41 |     // eslint-disable-next-line react-hooks/rules-of-hooks
42 |     useTelegramMock();
43 |   }
44 | 
45 |   const debug = useLaunchParams().startParam === "debug";
46 | 
47 |   // Enable debug mode to see all the methods sent and events received.
48 |   useEffect(() => {
49 |     if (debug) {
50 |       import("eruda").then((lib) => lib.default.init());
51 |     }
52 |   }, [debug]);
53 | 
54 |   return (
55 |     <SDKProvider acceptCustomStyles debug={debug}>
56 |       {children}
57 |     </SDKProvider>
58 |   );
59 | }
60 | 
61 | export function TelegramProvider(props: PropsWithChildren) {
62 |   // Unfortunately, Telegram Mini Apps does not allow us to use all features of the Server Side
63 |   // Rendering. That's why we are showing loader on the server side.
64 |   const didMount = useDidMount();
65 | 
66 |   return didMount ? (
67 |     <ErrorBoundary fallback={ErrorPage}>
68 |       <RootInner {...props} />
69 |     </ErrorBoundary>
70 |   ) : (
71 |     <div className=" absolute top-0 left-0 flex flex-col items-center  gap-4 justify-center w-full h-full">
72 |       <Image src={"/butterfly.svg"} alt="Rabble" width={38} height={64} />
73 |       <div className="flex gap-4">
74 |         <p>Loading</p>
75 |         <Image
76 |           src={"/loader.svg"}
77 |           alt="loader"
78 |           width={24}
79 |           height={24}
80 |           className=" animate-spin"
81 |         />
82 |       </div>
83 |     </div>
84 |   );
85 | }
86 | 


--------------------------------------------------------------------------------
/tailwind.config.ts:
--------------------------------------------------------------------------------
 1 | import type { Config } from "tailwindcss"
 2 | 
 3 | const config = {
 4 |   darkMode: ["class"],
 5 |   content: [
 6 |     './pages/**/*.{ts,tsx}',
 7 |     './components/**/*.{ts,tsx}',
 8 |     './app/**/*.{ts,tsx}',
 9 |     './src/**/*.{ts,tsx}',
10 |   ],
11 |   prefix: "",
12 |   theme: {
13 |     container: {
14 |       center: true,
15 |       padding: "2rem",
16 |       screens: {
17 |         "2xl": "1400px",
18 |       },
19 |     },
20 |     extend: {
21 |       colors: {
22 |         rabble: "#08F7AF",
23 |         back: "#E7E7E7",
24 |         border: "hsl(var(--border))",
25 |         input: "hsl(var(--input))",
26 |         ring: "hsl(var(--ring))",
27 |         background: "var(--tg-theme-bg-color)",
28 |         "secondary-background": "var(--tg-theme-secondary-bg-color)",
29 |         //         var(--tg-theme-bg-color)
30 |         // var(--tg-theme-text-color)
31 |         // var(--tg-theme-hint-color)
32 |         // var(--tg-theme-link-color)
33 |         // var(--tg-theme-button-color)
34 |         // var(--tg-theme-button-text-color)
35 |         // 
36 |         color: "var(--tg-theme-text-color)",
37 |         "subtitle-color": "var(--tg-theme-subtitle-text-color)",
38 |         foreground: "hsl(var(--foreground))",
39 |         primary: {
40 |           DEFAULT: "hsl(var(--primary))",
41 |           foreground: "hsl(var(--primary-foreground))",
42 |         },
43 |         secondary: {
44 |           DEFAULT: "hsl(var(--secondary))",
45 |           foreground: "hsl(var(--secondary-foreground))",
46 |         },
47 |         destructive: {
48 |           DEFAULT: "hsl(var(--destructive))",
49 |           foreground: "hsl(var(--destructive-foreground))",
50 |         },
51 |         muted: {
52 |           DEFAULT: "hsl(var(--muted))",
53 |           foreground: "hsl(var(--muted-foreground))",
54 |         },
55 |         accent: {
56 |           DEFAULT: "hsl(var(--accent))",
57 |           foreground: "hsl(var(--accent-foreground))",
58 |         },
59 |         popover: {
60 |           DEFAULT: "hsl(var(--popover))",
61 |           foreground: "hsl(var(--popover-foreground))",
62 |         },
63 |         card: {
64 |           DEFAULT: "hsl(var(--card))",
65 |           foreground: "hsl(var(--card-foreground))",
66 |         },
67 |       },
68 |       borderRadius: {
69 |         lg: "var(--radius)",
70 |         md: "calc(var(--radius) - 2px)",
71 |         sm: "calc(var(--radius) - 4px)",
72 |       },
73 |       keyframes: {
74 |         "accordion-down": {
75 |           from: { height: "0" },
76 |           to: { height: "var(--radix-accordion-content-height)" },
77 |         },
78 |         "accordion-up": {
79 |           from: { height: "var(--radix-accordion-content-height)" },
80 |           to: { height: "0" },
81 |         },
82 |       },
83 |       animation: {
84 |         "accordion-down": "accordion-down 0.2s ease-out",
85 |         "accordion-up": "accordion-up 0.2s ease-out",
86 |       },
87 |       fontFamily: {
88 |         sans: ['var(--font-outfit)'],
89 |         mono: ['var(--font-beVietnamPro)'],
90 |       },
91 |     },
92 |   },
93 |   plugins: [require("tailwindcss-animate")],
94 | } satisfies Config
95 | 
96 | export default config


--------------------------------------------------------------------------------
/src/hooks/useTelegramMock.ts:
--------------------------------------------------------------------------------
 1 | import { useClientOnce } from '@/hooks/useClientOnce';
 2 | import { mockTelegramEnv, parseInitData, retrieveLaunchParams } from '@telegram-apps/sdk-react';
 3 | 
 4 | /**
 5 |  * Mocks Telegram environment in development mode.
 6 |  */
 7 | export function useTelegramMock(): void {
 8 |   useClientOnce(() => {
 9 |     // It is important, to mock the environment only for development purposes. When building the
10 |     // application, import.meta.env.DEV will become false, and the code inside will be tree-shaken,
11 |     // so you will not see it in your final bundle.
12 | 
13 |     let shouldMock: boolean;
14 | 
15 |     // Try to extract launch parameters to check if the current environment is Telegram-based.
16 |     try {
17 |       // If we are able to extract launch parameters, it means that we are already in the
18 |       // Telegram environment. So, there is no need to mock it.
19 |       retrieveLaunchParams();
20 | 
21 |       // We could previously mock the environment. In case we did, we should do it again. The reason
22 |       // is the page could be reloaded, and we should apply mock again, because mocking also
23 |       // enables modifying the window object.
24 |       shouldMock = !!sessionStorage.getItem('____mocked');
25 |     } catch (e) {
26 |       shouldMock = true;
27 |     }
28 | 
29 |     if (shouldMock) {
30 |       const initDataRaw = new URLSearchParams([
31 |         ['user', JSON.stringify({
32 |           id: 99281932,
33 |           first_name: 'Andrew',
34 |           last_name: 'Rogue',
35 |           username: 'rogue',
36 |           language_code: 'en',
37 |           is_premium: true,
38 |           allows_write_to_pm: true,
39 |         })],
40 |         ['hash', '89d6079ad6762351f38c6dbbc41bb53048019256a9443988af7a48bcad16ba31'],
41 |         ['auth_date', '1716922846'],
42 |         ['start_param', 'debug'],
43 |         ['chat_type', 'sender'],
44 |         ['chat_instance', '8428209589180549439'],
45 |       ]).toString();
46 | 
47 |       mockTelegramEnv({
48 |         themeParams: {
49 |           accentTextColor: '#6ab2f2',
50 |           bgColor: '#17212b',
51 |           buttonColor: '#5288c1',
52 |           buttonTextColor: '#ffffff',
53 |           destructiveTextColor: '#ec3942',
54 |           headerBgColor: '#17212b',
55 |           hintColor: '#708499',
56 |           linkColor: '#6ab3f3',
57 |           secondaryBgColor: '#232e3c',
58 |           sectionBgColor: '#17212b',
59 |           sectionHeaderTextColor: '#6ab3f3',
60 |           subtitleTextColor: '#708499',
61 |           textColor: '#f5f5f5',
62 |         },
63 |         initData: parseInitData(initDataRaw),
64 |         initDataRaw,
65 |         version: '7.2',
66 |         platform: 'tdesktop',
67 |       });
68 |       sessionStorage.setItem('____mocked', '1');
69 | 
70 |       console.info(
71 |         'As long as the current environment was not considered as the Telegram-based one, it was mocked. Take a note, that you should not do it in production and current behavior is only specific to the development process. Environment mocking is also applied only in development mode. So, after building the application, you will not see this behavior and related warning, leading to crashing the application outside Telegram.',
72 |       );
73 |     }
74 |   });
75 | }


--------------------------------------------------------------------------------
/public/loader.svg:
--------------------------------------------------------------------------------
1 | <svg width="21" height="20" viewBox="0 0 21 20" fill="none" xmlns="http://www.w3.org/2000/svg">
2 | <path d="M10.5 0C10.7652 0 11.0196 0.105357 11.2071 0.292893C11.3946 0.48043 11.5 0.734784 11.5 1V4C11.5 4.26522 11.3946 4.51957 11.2071 4.70711C11.0196 4.89464 10.7652 5 10.5 5C10.2348 5 9.98043 4.89464 9.79289 4.70711C9.60536 4.51957 9.5 4.26522 9.5 4V1C9.5 0.734784 9.60536 0.48043 9.79289 0.292893C9.98043 0.105357 10.2348 0 10.5 0ZM10.5 15C10.7652 15 11.0196 15.1054 11.2071 15.2929C11.3946 15.4804 11.5 15.7348 11.5 16V19C11.5 19.2652 11.3946 19.5196 11.2071 19.7071C11.0196 19.8946 10.7652 20 10.5 20C10.2348 20 9.98043 19.8946 9.79289 19.7071C9.60536 19.5196 9.5 19.2652 9.5 19V16C9.5 15.7348 9.60536 15.4804 9.79289 15.2929C9.98043 15.1054 10.2348 15 10.5 15ZM20.5 10C20.5 10.2652 20.3946 10.5196 20.2071 10.7071C20.0196 10.8946 19.7652 11 19.5 11H16.5C16.2348 11 15.9804 10.8946 15.7929 10.7071C15.6054 10.5196 15.5 10.2652 15.5 10C15.5 9.73478 15.6054 9.48043 15.7929 9.29289C15.9804 9.10536 16.2348 9 16.5 9H19.5C19.7652 9 20.0196 9.10536 20.2071 9.29289C20.3946 9.48043 20.5 9.73478 20.5 10ZM5.5 10C5.5 10.2652 5.39464 10.5196 5.20711 10.7071C5.01957 10.8946 4.76522 11 4.5 11H1.5C1.23478 11 0.98043 10.8946 0.792893 10.7071C0.605357 10.5196 0.5 10.2652 0.5 10C0.5 9.73478 0.605357 9.48043 0.792893 9.29289C0.98043 9.10536 1.23478 9 1.5 9H4.5C4.76522 9 5.01957 9.10536 5.20711 9.29289C5.39464 9.48043 5.5 9.73478 5.5 10ZM17.571 17.071C17.3835 17.2585 17.1292 17.3638 16.864 17.3638C16.5988 17.3638 16.3445 17.2585 16.157 17.071L14.036 14.95C13.8538 14.7614 13.753 14.5088 13.7553 14.2466C13.7576 13.9844 13.8628 13.7336 14.0482 13.5482C14.2336 13.3628 14.4844 13.2576 14.7466 13.2553C15.0088 13.253 15.2614 13.3538 15.45 13.536L17.571 15.656C17.664 15.7489 17.7377 15.8592 17.7881 15.9806C17.8384 16.102 17.8643 16.2321 17.8643 16.3635C17.8643 16.4949 17.8384 16.625 17.7881 16.7464C17.7377 16.8678 17.664 16.9781 17.571 17.071ZM6.964 6.464C6.77647 6.65147 6.52216 6.75679 6.257 6.75679C5.99184 6.75679 5.73753 6.65147 5.55 6.464L3.43 4.344C3.24236 4.15649 3.13689 3.90212 3.1368 3.63685C3.1367 3.37158 3.24199 3.11714 3.4295 2.9295C3.61701 2.74186 3.87138 2.63639 4.13665 2.6363C4.40192 2.6362 4.65636 2.74149 4.844 2.929L6.964 5.05C7.15147 5.23753 7.25679 5.49184 7.25679 5.757C7.25679 6.02216 7.15147 6.27647 6.964 6.464ZM3.43 17.071C3.24253 16.8835 3.13721 16.6292 3.13721 16.364C3.13721 16.0988 3.24253 15.8445 3.43 15.657L5.551 13.536C5.7396 13.3538 5.9922 13.253 6.2544 13.2553C6.5166 13.2576 6.76741 13.3628 6.95282 13.5482C7.13823 13.7336 7.2434 13.9844 7.24567 14.2466C7.24795 14.5088 7.14716 14.7614 6.965 14.95L4.845 17.071C4.75213 17.164 4.64184 17.2377 4.52044 17.2881C4.39904 17.3384 4.26892 17.3643 4.1375 17.3643C4.00608 17.3643 3.87596 17.3384 3.75456 17.2881C3.63316 17.2377 3.52287 17.164 3.43 17.071ZM14.036 6.464C13.8485 6.27647 13.7432 6.02216 13.7432 5.757C13.7432 5.49184 13.8485 5.23753 14.036 5.05L16.156 2.929C16.2488 2.83609 16.3591 2.76238 16.4804 2.71207C16.6017 2.66176 16.7318 2.63584 16.8631 2.6358C16.9945 2.63575 17.1246 2.66158 17.2459 2.7118C17.3673 2.76202 17.4776 2.83566 17.5705 2.9285C17.6634 3.02134 17.7371 3.13158 17.7874 3.25291C17.8377 3.37424 17.8637 3.5043 17.8637 3.63565C17.8637 3.76699 17.8379 3.89707 17.7877 4.01843C17.7375 4.1398 17.6638 4.25009 17.571 4.343L15.45 6.464C15.2625 6.65147 15.0082 6.75679 14.743 6.75679C14.4778 6.75679 14.2235 6.65147 14.036 6.464Z" fill="#8C8A93"/>
3 | </svg>
4 | 


--------------------------------------------------------------------------------
/src/app/page.tsx:
--------------------------------------------------------------------------------
  1 | "use client";
  2 | 
  3 | import {
  4 |   useUtils,
  5 |   usePopup,
  6 |   useMainButton,
  7 |   useViewport,
  8 | } from "@telegram-apps/sdk-react";
  9 | import Link from "next/link";
 10 | import Arrow from "@/assets/Arrow";
 11 | import { Button } from "@/components/ui/button";
 12 | 
 13 | export default function Home() {
 14 |   const utils = useUtils();
 15 |   const popUp = usePopup();
 16 |   const mainBtn = useMainButton();
 17 |   const viewport = useViewport();
 18 | 
 19 |   const handlePopUp = async () => {
 20 |     const response = await popUp.open({
 21 |       title: " Rabble",
 22 |       message: "Link will lead to website",
 23 |       buttons: [
 24 |         { id: "link", type: "default", text: "Open rabble.pro" },
 25 |         { type: "cancel" },
 26 |       ],
 27 |     });
 28 |     if (response === "link") {
 29 |       utils.openLink("https://rabble.pro");
 30 |     }
 31 |   };
 32 | 
 33 |   const handleShare = async () => {
 34 |     utils.shareURL(
 35 |       "https://t.me/+rFqLyk4_W-diZDZl",
 36 |       "Join! Mini Apps Hackathon group!"
 37 |     );
 38 |   };
 39 |   const handleMainBtn = async () => {
 40 |     mainBtn.enable();
 41 |     mainBtn.setText("New Text");
 42 |     mainBtn.setBgColor("#08F7AF");
 43 |     if (mainBtn.isVisible) {
 44 |       mainBtn.hide();
 45 |     } else {
 46 |       mainBtn.show();
 47 |     }
 48 |   };
 49 | 
 50 |   mainBtn.on("click", () => {
 51 |     mainBtn.showLoader();
 52 |     mainBtn.setText("Action Performing");
 53 |     setTimeout(() => {
 54 |       console.log("Main Button Clicked");
 55 |       mainBtn.hideLoader();
 56 |       mainBtn.setText("New Text");
 57 |       mainBtn.hide();
 58 |     }, 2000);
 59 |   });
 60 | 
 61 |   const handleViewport = async () => {
 62 |     if (!viewport?.isExpanded) {
 63 |       viewport?.expand();
 64 |     }
 65 |   };
 66 |   return (
 67 |     <main className="">
 68 |       <h1 className="text-left text-2xl font-bold  font-sans mb-4 ">
 69 |         Telegram Miniapp Boilerplate
 70 |       </h1>
 71 |       <div className="grid xl:grid-cols-4 grid-cols-1 lg:grid-cols-2  gap-4 ">
 72 |         <div className="p-4 hover:bg-gray-200 w-full bg-gray-100 rounded-lg">
 73 |           <Link href="https://docs.telegram-mini-apps.com/" target="_blank">
 74 |             <div className="flex justify-between">
 75 |               <h1 className="text-xl font-bold">Docs</h1>
 76 |               <Arrow color="black" />
 77 |             </div>
 78 |             <p className="text-sm text-gray-700">
 79 |               Find in-depth information on making telegram miniapps for Rabble.
 80 |             </p>
 81 |           </Link>
 82 |         </div>
 83 |         <div className="p-4  w-full bg-gray-100 rounded-lg">
 84 |           <h2 className="text-lg font-bold">Test Modals</h2>
 85 |           <p className="text-sm">Click to see how modals work</p>
 86 |           <div className="flex gap-2 mt-2">
 87 |             <Button variant={"rabble"} size={"half"} onClick={handlePopUp}>
 88 |               Launch Popup
 89 |             </Button>
 90 |             <Button variant={"tertiary"} size={"half"} onClick={handleShare}>
 91 |               Share URL
 92 |             </Button>
 93 |           </div>
 94 |         </div>
 95 |         <div className="p-4  w-full bg-gray-100 rounded-lg">
 96 |           <h2 className="text-lg font-bold">Test Buttons</h2>
 97 |           <p className="text-sm">Click to see how buttons work</p>
 98 |           <div className="flex gap-2 mt-2">
 99 |             <Button variant={"rabble"} size={"half"} onClick={handleMainBtn}>
100 |               Toggle Main Button
101 |             </Button>
102 |             <Button variant={"tertiary"} size={"half"} onClick={handleViewport}>
103 |               Expand Webview
104 |             </Button>
105 |           </div>
106 |         </div>
107 |       </div>
108 |     </main>
109 |   );
110 | }
111 | 


--------------------------------------------------------------------------------
/public/rabble.svg:
--------------------------------------------------------------------------------
 1 | <svg width="69" height="19" viewBox="0 0 69 19" fill="none" xmlns="http://www.w3.org/2000/svg">
 2 | <path d="M0 18.2313V6.3616H3.57518V18.2313H0ZM3.57518 11.7103L2.07968 10.4891C2.37566 9.10516 2.87416 8.03053 3.57518 7.26526C4.27619 6.5 5.24983 6.11737 6.49608 6.11737C7.04131 6.11737 7.51644 6.20692 7.92147 6.38602C8.34208 6.54885 8.70817 6.80936 9.01973 7.16757L6.89332 9.97625C6.73754 9.79715 6.54281 9.65875 6.30914 9.56106C6.07547 9.46336 5.81064 9.41452 5.51466 9.41452C4.92269 9.41452 4.44755 9.6099 4.08926 10.0007C3.74654 10.3752 3.57518 10.945 3.57518 11.7103Z" fill="#08F7AF"/>
 3 | <path d="M13.4615 18.4756C12.4178 18.4756 11.4831 18.2069 10.6574 17.6696C9.84738 17.1323 9.20089 16.3996 8.71797 15.4715C8.25062 14.5434 8.01695 13.4851 8.01695 12.2965C8.01695 11.1079 8.25062 10.0495 8.71797 9.12144C9.20089 8.19335 9.84738 7.46065 10.6574 6.92334C11.4831 6.38602 12.4178 6.11737 13.4615 6.11737C14.2248 6.11737 14.9103 6.27205 15.5178 6.58141C16.1409 6.89077 16.6472 7.32225 17.0367 7.87585C17.4261 8.41316 17.6442 9.03189 17.691 9.73202V14.8609C17.6442 15.5611 17.4261 16.1879 17.0367 16.7415C16.6628 17.2788 16.1643 17.7022 15.5412 18.0115C14.9181 18.3209 14.2248 18.4756 13.4615 18.4756ZM14.1859 15.1052C14.9492 15.1052 15.5646 14.8446 16.0319 14.3236C16.4992 13.7863 16.7329 13.1106 16.7329 12.2965C16.7329 11.7429 16.6239 11.2544 16.4058 10.8311C16.2033 10.4077 15.9073 10.0821 15.5178 9.85414C15.1439 9.60991 14.7078 9.48779 14.2093 9.48779C13.7108 9.48779 13.2668 9.60991 12.8773 9.85414C12.5035 10.0821 12.1997 10.4077 11.966 10.8311C11.7479 11.2544 11.6389 11.7429 11.6389 12.2965C11.6389 12.8338 11.7479 13.3141 11.966 13.7374C12.1841 14.1608 12.4879 14.4946 12.8773 14.7388C13.2668 14.983 13.703 15.1052 14.1859 15.1052ZM16.5927 18.2313V15.0319L17.1302 12.1499L16.5927 9.26798V6.3616H20.0978V18.2313H16.5927Z" fill="#08F7AF"/>
 4 | <path d="M28.2232 18.4756C27.4598 18.4756 26.7588 18.3128 26.1201 17.9871C25.4814 17.6452 24.9596 17.1974 24.5545 16.6438C24.1495 16.0739 23.9158 15.4389 23.8535 14.7388V9.73202C23.9158 9.03189 24.1495 8.41316 24.5545 7.87585C24.9596 7.32225 25.4814 6.89077 26.1201 6.58141C26.7588 6.27205 27.4598 6.11737 28.2232 6.11737C29.2981 6.11737 30.2483 6.38602 31.074 6.92334C31.9152 7.46065 32.5695 8.19335 33.0368 9.12144C33.5197 10.0495 33.7612 11.1079 33.7612 12.2965C33.7612 13.4851 33.5197 14.5434 33.0368 15.4715C32.5695 16.3996 31.9152 17.1323 31.074 17.6696C30.2483 18.2069 29.2981 18.4756 28.2232 18.4756ZM27.5923 15.1052C28.0908 15.1052 28.5269 14.983 28.9008 14.7388C29.2903 14.4946 29.594 14.1608 29.8121 13.7374C30.0302 13.3141 30.1393 12.8338 30.1393 12.2965C30.1393 11.7429 30.0302 11.2544 29.8121 10.8311C29.594 10.4077 29.2903 10.0821 28.9008 9.85414C28.5269 9.60991 28.0908 9.48779 27.5923 9.48779C27.0938 9.48779 26.6498 9.60991 26.2603 9.85414C25.8709 10.0821 25.5671 10.4077 25.349 10.8311C25.1465 11.2544 25.0452 11.7429 25.0452 12.2965C25.0452 12.8501 25.1543 13.3385 25.3724 13.7619C25.5905 14.1852 25.8865 14.519 26.2603 14.7632C26.6498 14.9912 27.0938 15.1052 27.5923 15.1052ZM21.6804 18.2313V0.5H25.2555V9.26798L24.6714 12.1499L25.2088 15.0319V18.2313H21.6804Z" fill="#08F7AF"/>
 5 | <path d="M41.1856 18.4756C40.4222 18.4756 39.7212 18.3128 39.0825 17.9871C38.4438 17.6452 37.922 17.1974 37.5169 16.6438C37.1119 16.0739 36.8782 15.4389 36.8159 14.7388V9.73202C36.8782 9.03189 37.1119 8.41316 37.5169 7.87585C37.922 7.32225 38.4438 6.89077 39.0825 6.58141C39.7212 6.27205 40.4222 6.11737 41.1856 6.11737C42.2605 6.11737 43.2107 6.38602 44.0364 6.92334C44.8776 7.46065 45.5319 8.19335 45.9992 9.12144C46.4821 10.0495 46.7236 11.1079 46.7236 12.2965C46.7236 13.4851 46.4821 14.5434 45.9992 15.4715C45.5319 16.3996 44.8776 17.1323 44.0364 17.6696C43.2107 18.2069 42.2605 18.4756 41.1856 18.4756ZM40.5547 15.1052C41.0532 15.1052 41.4893 14.983 41.8632 14.7388C42.2527 14.4946 42.5564 14.1608 42.7745 13.7374C42.9926 13.3141 43.1017 12.8338 43.1017 12.2965C43.1017 11.7429 42.9926 11.2544 42.7745 10.8311C42.5564 10.4077 42.2527 10.0821 41.8632 9.85414C41.4893 9.60991 41.0532 9.48779 40.5547 9.48779C40.0562 9.48779 39.6122 9.60991 39.2227 9.85414C38.8333 10.0821 38.5295 10.4077 38.3114 10.8311C38.1089 11.2544 38.0076 11.7429 38.0076 12.2965C38.0076 12.8501 38.1167 13.3385 38.3348 13.7619C38.5529 14.1852 38.8489 14.519 39.2227 14.7632C39.6122 14.9912 40.0562 15.1052 40.5547 15.1052ZM34.6428 18.2313V0.5H38.2179V9.26798L37.6338 12.1499L38.1712 15.0319V18.2313H34.6428Z" fill="#08F7AF"/>
 6 | <path d="M47.6052 18.2313V0.5H51.1803V18.2313H47.6052Z" fill="#08F7AF"/>
 7 | <path d="M58.3714 18.5C57.1407 18.5 56.0425 18.2395 55.0766 17.7185C54.1264 17.1811 53.3786 16.4403 52.8334 15.4959C52.2881 14.5516 52.0155 13.4851 52.0155 12.2965C52.0155 11.1079 52.2804 10.0495 52.81 9.12144C53.3552 8.17707 54.0874 7.43623 55.0065 6.89891C55.9256 6.3616 56.9616 6.09294 58.1144 6.09294C59.236 6.09294 60.2252 6.34532 61.082 6.85007C61.9388 7.35482 62.6087 8.05495 63.0916 8.95047C63.5901 9.846 63.8393 10.8718 63.8393 12.0278C63.8393 12.2395 63.8237 12.4674 63.7926 12.7117C63.777 12.9396 63.7381 13.2083 63.6758 13.5176L53.8849 13.5421V10.9776L62.1569 10.9532L60.6147 12.0278C60.5991 11.344 60.4978 10.7822 60.3109 10.3426C60.1239 9.8867 59.8435 9.54478 59.4697 9.31682C59.1114 9.07259 58.6674 8.95047 58.1377 8.95047C57.5769 8.95047 57.0862 9.08887 56.6656 9.36567C56.2606 9.62619 55.9412 10.0007 55.7075 10.4891C55.4894 10.9776 55.3804 11.5719 55.3804 12.272C55.3804 12.9722 55.4972 13.5746 55.7309 14.0794C55.9802 14.5678 56.3229 14.9505 56.7591 15.2273C57.2108 15.4878 57.7405 15.618 58.348 15.618C58.9088 15.618 59.4151 15.5204 59.8669 15.325C60.3187 15.1133 60.7159 14.8039 61.0586 14.3969L63.0215 16.4484C62.4607 17.1323 61.783 17.6452 60.9885 17.9871C60.194 18.329 59.3217 18.5 58.3714 18.5Z" fill="#08F7AF"/>
 8 | <path d="M66.8736 18.5C66.266 18.5 65.7598 18.2802 65.3547 17.8406C64.9497 17.401 64.7472 16.8718 64.7472 16.2531C64.7472 15.6018 64.9497 15.0645 65.3547 14.6411C65.7598 14.2015 66.266 13.9817 66.8736 13.9817C67.4967 13.9817 68.003 14.2015 68.3925 14.6411C68.7975 15.0645 69 15.6018 69 16.2531C69 16.8718 68.7975 17.401 68.3925 17.8406C68.003 18.2802 67.4967 18.5 66.8736 18.5Z" fill="#08F7AF"/>
 9 | </svg>
10 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # ETH Telegram Mini App Starter Kit
  2 | 
  3 | ## Getting Started
  4 | 
  5 | This starter kit helps you create a mini application integrated with Ethereum and Telegram. Follow the steps below to set up and run the project.
  6 | 
  7 | ## Resources
  8 | 
  9 | [Blog on using this Starter Kit](https://medium.com/rabble-labs/deploy-your-first-telegram-mini-app-on-ethereum-8b589f4e6411)
 10 | 
 11 | **For Visual Learners**
 12 | [![YouTube](http://i.ytimg.com/vi/cFLKu4sl76I/hqdefault.jpg)](https://www.youtube.com/watch?v=cFLKu4sl76I)
 13 | 
 14 | ### Prerequisites
 15 | 
 16 | Ensure you have the following installed on your machine:
 17 | 
 18 | - [Node.js](https://nodejs.org/) (v16 or higher)
 19 | - [npm](https://www.npmjs.com/) or [Yarn](https://yarnpkg.com/)
 20 | 
 21 | ### Setup Guide
 22 | 
 23 | 1. **Clone the repository or click on the "Use this template" button:**
 24 | 
 25 |    ```bash
 26 |    git clone https://github.com/HAPPYS1NGH/tg-mini-app-nextjs
 27 |    ```
 28 | 
 29 | 2. **Navigate to the project directory:**
 30 | 
 31 |    ```bash
 32 |    cd tg-mini-app-nextjs
 33 |    ```
 34 | 
 35 | 3. **Create a `.env.local` file in the root directory and copy the contents of `.env.sample`:**
 36 | 
 37 |    - Obtain the WalletConnect project ID from [Reown](https://cloud.reown.com/).
 38 | 
 39 |    - Make sure to select the App Kit.
 40 | 
 41 |    ```env
 42 |    NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID=<your_wallet_connect_project_id>
 43 |    ```
 44 | 
 45 |    - According change the other environment details to development or production.
 46 | 
 47 | 4. **Install dependencies:**
 48 | 
 49 |    Using npm:
 50 | 
 51 |    ```bash
 52 |    npm install
 53 |    ```
 54 | 
 55 |    or using yarn:
 56 | 
 57 |    ```bash
 58 |    yarn install
 59 |    ```
 60 | 
 61 | 5. **Start the development server:**
 62 | 
 63 |    Using npm:
 64 | 
 65 |    ```bash
 66 |    npm run dev
 67 |    ```
 68 | 
 69 |    or using yarn:
 70 | 
 71 |    ```bash
 72 |    yarn dev
 73 |    ```
 74 | 
 75 | 6. **Open your web browser and navigate to `http://localhost:3000` to view the application.**
 76 | 
 77 | ### Exposing Your Local Server
 78 | 
 79 | To test your application within Telegram, you need to expose your local server using a tunneling service like ngrok or localtunnel.
 80 | 
 81 | **Start the development server:**
 82 | 
 83 | Using npm:
 84 | 
 85 | ```bash
 86 | npm run expose
 87 | ```
 88 | 
 89 | or using yarn:
 90 | 
 91 | ```bash
 92 | yarn expose
 93 | ```
 94 | 
 95 | **Alternatively:**
 96 | 
 97 | You can always use ngrok or any proxy service to expose the endpoint.
 98 | 
 99 | ### Registering Your Bot on Telegram while Development
100 | 
101 | 1. **Open Telegram and search for `BotFather`.**
102 | 
103 | 2. **Register a new bot by using the /newbot command and follow the prompts to choose a name and username.**
104 | 
105 | 3. **While in BotFather, use the /setmenubutton command (It may not autocomplete).**
106 | 
107 | 4. **Click on the bottom right square to choose the bot**
108 |    ![Selecting the Bot](/src/assets/botfather-tut1.png?raw=true)
109 | 
110 | 5. **Paste the URL for your App in which will be LocalTunnel's during development.**
111 | 
112 | 6. **Set the name of the button which will be used to start the mini app.**
113 | 
114 | 7. **Go to the Bot and now you can see a small button next to the chat which will bring up the Mini App.**
115 | 
116 | 8. **Repeat the steps 3-7 when you have the production URL.**
117 | 
118 | ---
119 | 
120 | ### Registering Your Bot on Telegram on Production
121 | 
122 | 0. **Deploy your App on any Platform like Vercel or Netlify**
123 | 
124 | 1. **Open Telegram and search for `BotFather`.**
125 | 
126 | 2. **Register a new bot by using the /newbot command and follow the prompts to choose a name and username.**
127 | 
128 | 3. **While in BotFather, use the /setmenubutton command (It may not autocomplete).**
129 | 
130 | 4. **Click on the bottom right square to choose the bot**
131 |    ![Selecting the Bot](/src/assets/botfather-tut1.png?raw=true)
132 | 
133 | 5. **Paste the Production URL for your App.**
134 | 
135 | 6. **Set the name of the button which will be used to start the mini app.**
136 | 
137 | 7. **Go to the Bot and now you can see a small button next to the chat which will bring up the Mini App.**
138 | 
139 | 8. **Again go to BotFather, use the /setminiapp command (It may not autocomplete) and choose your Bot**
140 | 
141 | 9. **Paste the Production URL for your Mini App.**
142 | 
143 | 10. **Now you are all set for sharing your Mini App.**
144 | 
145 | ## Interacting with Contracts
146 | 
147 | This starter kit provides hooks from Wagmi v2 for interacting with smart contracts on the Arbitrum network. You can use these hooks to read and write data to contracts.
148 | 
149 | ## Directory Structure
150 | 
151 | The project follows a standard directory structure for a Next.js application. Here's an overview:
152 | 
153 | ```
154 | .
155 | ├── README.md
156 | ├── components.json
157 | ├── next-env.d.ts
158 | ├── next.config.js
159 | ├── package-lock.json
160 | ├── package.json
161 | ├── postcss.config.js
162 | ├── public
163 | │   ├── arbitrum.svg
164 | │   ├── arrow.svg
165 | │   ├── butterfly.svg
166 | │   ├── loader.svg
167 | │   └── rabble.svg
168 | ├── src
169 | │   ├── app
170 | │   │   ├── contract
171 | │   │   │   └── page.tsx
172 | │   │   ├── favicon.ico
173 | │   │   ├── globals.css
174 | │   │   ├── layout.tsx
175 | │   │   └── page.tsx
176 | │   ├── assets
177 | │   │   └── Arrow.tsx
178 | │   ├── components
179 | │   │   ├── ErrorBoundary.tsx
180 | │   │   ├── ErrorPage.tsx
181 | │   │   ├── Popup.tsx
182 | │   │   ├── shared
183 | │   │   │   └── Navbar.tsx
184 | │   │   └── ui
185 | │   │       ├── button.tsx
186 | │   │       ├── input.tsx
187 | │   │       └── sonner.tsx
188 | │   ├── constants
189 | │   │   ├── abi.ts
190 | │   │   └── index.ts
191 | │   ├── containers
192 | │   │   ├── contract
193 | │   │   │   ├── ReadContract.tsx
194 | │   │   │   └── WriteContract.tsx
195 | │   │   └── home
196 | │   │       └── Profile.tsx
197 | │   ├── hooks
198 | │   │   ├── useClientOnce.ts
199 | │   │   ├── useDidMount.ts
200 | │   │   └── useTelegramMock.ts
201 | │   ├── lib
202 | │   │   └── utils.ts
203 | │   ├── providers
204 | │   │   ├── Layout.tsx
205 | │   │   ├── TelegramProvider.tsx
206 | │   │   └── Web3Provider.tsx
207 | │   └── utils
208 | │       └── config.ts
209 | ├── tailwind.config.ts
210 | └── tsconfig.json
211 | ```
212 | 
213 | ## FAQs
214 | 
215 | ### What are Telegram Mini Apps?
216 | 
217 | Web Apps inside Telegram in the form of a bot.
218 | 
219 | ### What is different in Mini Apps?
220 | 
221 | Mini Apps offer Telegram-specific UI elements like Main Button, Popups, Telegram Theme Params, and Viewport. They also provide features like Telegram Authentication, Cloud Storage, and more.
222 | 
223 | ### Can you tell what all things I need to do to convert my WebApp to a Mini App?
224 | 
225 | Your normal website will also work fine in most cases if you do not have in-app links to other domains.
226 | 
227 | ## Support
228 | 
229 | If you encounter any issues or have questions:
230 | 
231 | - **Telegram:** [Rabble Mini App Group](https://t.me/+rFqLyk4_W-diZDZl)
232 | - **Twitter:** [@happys1ngh](https://twitter.com/happys1ngh)
233 | - **GitHub Issues:** [ETH Telegram Mini App Starter Kit Issues](https://github.com/HAPPYS1NGH/tg-mini-app-nextjs/issues)
234 | - **Mini Apps Hackathon:** [MAHa](https://0xmaha.com)
235 | 
236 | BUIDL SHOULD NOT STOP!🏗️
237 | 
238 | Happy coding! 🚀
239 | 


--------------------------------------------------------------------------------