diff --git a/examples/frontend/expo/.babelrc.js b/examples/frontend/expo/.babelrc.js new file mode 100644 index 00000000..9d89e131 --- /dev/null +++ b/examples/frontend/expo/.babelrc.js @@ -0,0 +1,6 @@ +module.exports = function (api) { + api.cache(true); + return { + presets: ['babel-preset-expo'], + }; +}; diff --git a/examples/frontend/expo/.env.example b/examples/frontend/expo/.env.example deleted file mode 100644 index 07cad672..00000000 --- a/examples/frontend/expo/.env.example +++ /dev/null @@ -1,4 +0,0 @@ -EXPO_PUBLIC_API_URL=your_api_url -EXPO_PUBLIC_ENS_DOMAIN=your_ens_domain -EXPO_PUBLIC_CHAIN_ID=your_chain_id ex: 1 for mainnet, 11155111 for sepolia -EXPO_PUBLIC_PROJECT_ID=your_wagmi_project_id \ No newline at end of file diff --git a/examples/frontend/expo/.gitignore b/examples/frontend/expo/.gitignore new file mode 100644 index 00000000..bd5d1f64 --- /dev/null +++ b/examples/frontend/expo/.gitignore @@ -0,0 +1,36 @@ +# Learn more https://docs.github.com/en/get-started/getting-started-with-git/ignoring-files + +# dependencies +node_modules/ + +# Expo +.expo/ +dist/ +web-build/ + +# Native +*.orig.* +*.jks +*.p8 +*.p12 +*.key +*.mobileprovision + +# Metro +.metro-health-check* + +# debug +npm-debug.* +yarn-debug.* +yarn-error.* + +# macOS +.DS_Store +*.pem + +# local env files +.env +.env*.local + +# typescript +*.tsbuildinfo diff --git a/examples/frontend/expo/App.tsx b/examples/frontend/expo/App.tsx new file mode 100644 index 00000000..5953e371 --- /dev/null +++ b/examples/frontend/expo/App.tsx @@ -0,0 +1,54 @@ +import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; +import '@walletconnect/react-native-compat'; +import { Web3Modal, createWeb3Modal, defaultWagmiConfig } from '@web3modal/wagmi-react-native'; +import * as Linking from 'expo-linking'; +import 'react-native-url-polyfill/auto'; +import { arbitrum, mainnet, polygon } from 'viem/chains'; +import { WagmiConfig } from 'wagmi'; + +import { JustaNameProvider } from '@justaname.id/react/src' +import HomeScreen from './screens/Home'; + +const projectId = process.env.EXPO_PUBLIC_PROJECT_ID ?? "" + +const metadata = { + name: 'JAN Expo Demo', + description: 'JAN Expo Demo', + url: 'https://web3modal.com', + icons: ['https://avatars.githubusercontent.com/u/37784886'], + redirect: { + native: Linking.createURL('/'), + universal: 'YOUR_APP_UNIVERSAL_LINK.com' + } +} + +const chains = [mainnet, polygon, arbitrum] + +const wagmiConfig = defaultWagmiConfig({ chains, projectId, metadata }); + +createWeb3Modal({ + projectId, + chains, + wagmiConfig +}) + +export default function App() { + const queryClient = new QueryClient(); + + const chainId = process.env.EXPO_PUBLIC_CHAIN_ID ? parseInt(process.env.EXPO_PUBLIC_CHAIN_ID) as 1 | 11155111 : undefined; + + return ( + + + + + + + + + ); +} + diff --git a/examples/frontend/expo/app.json b/examples/frontend/expo/app.json new file mode 100644 index 00000000..e6a69881 --- /dev/null +++ b/examples/frontend/expo/app.json @@ -0,0 +1,39 @@ +{ + "expo": { + "name": "jan-expo-demo-frontend", + "slug": "jan-expo-demo-frontend", + "scheme": "jan-expo-demo-frontend", + "version": "1.0.0", + "orientation": "portrait", + "icon": "./assets/icon.png", + "userInterfaceStyle": "light", + "splash": { + "image": "./assets/splash.png", + "resizeMode": "contain", + "backgroundColor": "#ffffff" + }, + "assetBundlePatterns": ["**/*"], + "ios": { + "supportsTablet": true, + "infoPlist": { + "LSApplicationQueriesSchemes": [ + "metamask", + "trust", + "safe", + "rainbow", + "uniswap" + // Add other wallet schemes names here + ] + } + }, + "android": { + "adaptiveIcon": { + "foregroundImage": "./assets/adaptive-icon.png", + "backgroundColor": "#ffffff" + } + }, + "web": { + "favicon": "./assets/favicon.png" + } + } +} diff --git a/examples/frontend/expo/assets/adaptive-icon.png b/examples/frontend/expo/assets/adaptive-icon.png new file mode 100644 index 00000000..03d6f6b6 Binary files /dev/null and b/examples/frontend/expo/assets/adaptive-icon.png differ diff --git a/examples/frontend/expo/assets/favicon.png b/examples/frontend/expo/assets/favicon.png new file mode 100644 index 00000000..e75f697b Binary files /dev/null and b/examples/frontend/expo/assets/favicon.png differ diff --git a/examples/frontend/expo/assets/icon.png b/examples/frontend/expo/assets/icon.png new file mode 100644 index 00000000..a0b1526f Binary files /dev/null and b/examples/frontend/expo/assets/icon.png differ diff --git a/examples/frontend/expo/assets/splash.png b/examples/frontend/expo/assets/splash.png new file mode 100644 index 00000000..0e89705a Binary files /dev/null and b/examples/frontend/expo/assets/splash.png differ diff --git a/examples/frontend/expo/babel.config.js b/examples/frontend/expo/babel.config.js new file mode 100644 index 00000000..2900afe9 --- /dev/null +++ b/examples/frontend/expo/babel.config.js @@ -0,0 +1,6 @@ +module.exports = function(api) { + api.cache(true); + return { + presets: ['babel-preset-expo'], + }; +}; diff --git a/examples/frontend/expo/src/hooks/useDebounced/index.ts b/examples/frontend/expo/hooks/useDebounced/index.ts similarity index 100% rename from examples/frontend/expo/src/hooks/useDebounced/index.ts rename to examples/frontend/expo/hooks/useDebounced/index.ts diff --git a/examples/frontend/expo/package.json b/examples/frontend/expo/package.json new file mode 100644 index 00000000..e7d39c58 --- /dev/null +++ b/examples/frontend/expo/package.json @@ -0,0 +1,47 @@ +{ + "name": "jan-expo-demo-frontend", + "version": "1.0.0", + "main": "node_modules/expo/AppEntry.js", + "scripts": { + "start": "expo start -c", + "android": "expo start --android", + "ios": "expo start --ios", + "web": "expo start --web" + }, + "dependencies": { + "@ethersproject/shims": "^5.7.0", + "@justaname.id/react": "^0.0.4", + "@metamask/sdk-react": "^0.15.0", + "@react-native-async-storage/async-storage": "1.21.0", + "@react-native-community/netinfo": "11.1.0", + "@tanstack/react-query": "^5.28.6", + "@walletconnect/react-native-compat": "^2.11.1", + "@web3modal/wagmi-react-native": "^1.2.0", + "axios": "^1.6.7", + "ethers": "^6.11.1", + "expo": "~50.0.14", + "expo-application": "~5.8.3", + "expo-crypto": "~12.8.1", + "expo-linking": "~6.2.2", + "expo-status-bar": "~1.11.1", + "node-libs-expo": "^0.0.3", + "qs": "^6.11.2", + "react": "18.2.0", + "react-native": "0.73.6", + "react-native-background-timer": "^2.4.1", + "react-native-get-random-values": "~1.8.0", + "react-native-modal": "^13.0.1", + "react-native-randombytes": "^3.6.1", + "react-native-svg": "14.1.0", + "react-native-url-polyfill": "^2.0.0", + "viem": "1.21.4", + "wagmi": "1.4.13" + }, + "devDependencies": { + "@babel/core": "^7.20.0", + "@types/qs": "^6.9.11", + "@types/react": "~18.2.45", + "typescript": "^5.1.3" + }, + "private": true +} diff --git a/examples/frontend/expo/project.json b/examples/frontend/expo/project.json new file mode 100644 index 00000000..07603018 --- /dev/null +++ b/examples/frontend/expo/project.json @@ -0,0 +1,44 @@ +{ + "name": "justaname-expo-frontend", + "$schema": "../../../node_modules/nx/schemas/project-schema.json", + "sourceRoot": "examples/frontend/expo", + "projectType": "application", + "targets": { + "build": { + "executor": "nx:run-commands", + "options": { + "command": "yarn build", + "cwd": "examples/frontend/expo" + } + }, + "ios": { + "executor": "nx:run-commands", + "options": { + "command": "yarn ios", + "cwd": "examples/frontend/expo" + } + }, + "android": { + "executor": "nx:run-commands", + "options": { + "command": "yarn android", + "cwd": "examples/frontend/expo" + } + }, + "serve": { + "executor": "nx:run-commands", + "options": { + "command": "yarn start", + "cwd": "examples/frontend/expo" + } + }, + "install": { + "executor": "nx:run-commands", + "options": { + "command": "yarn", + "cwd": "examples/fullstack/expo" + } + } + }, + "tags": [] +} diff --git a/examples/frontend/expo/src/screens/Home.tsx b/examples/frontend/expo/screens/Home.tsx similarity index 69% rename from examples/frontend/expo/src/screens/Home.tsx rename to examples/frontend/expo/screens/Home.tsx index 3b2b8b40..c4d54735 100644 --- a/examples/frontend/expo/src/screens/Home.tsx +++ b/examples/frontend/expo/screens/Home.tsx @@ -1,17 +1,15 @@ import "@ethersproject/shims"; +import { useAccountSubnames, useClaimSubname, useIsSubnameAvailable } from '@justaname.id/react/src'; import '@walletconnect/react-native-compat'; -import 'react-native-url-polyfill/auto'; -import { useAccountSubnames, useClaimSubname, useIsSubnameAvailable } from '@justaname.id/react'; import { W3mButton } from '@web3modal/wagmi-react-native'; -import { ethers } from "ethers"; import React, { useState } from 'react'; import { ActivityIndicator, Button, Keyboard, KeyboardAvoidingView, Platform, StyleSheet, Text, TextInput, TouchableWithoutFeedback, View } from 'react-native'; +import 'react-native-url-polyfill/auto'; import { useDebounced } from "../hooks/useDebounced"; export default function HomeScreen() { const [inputValue, setInputValue] = useState(''); - const [randomWallet, setRandomWallet] = useState({} as ethers.HDNodeWallet); // Wagmi const { @@ -22,17 +20,11 @@ export default function HomeScreen() { ); const { subnames } = useAccountSubnames(); - const { isAvailable } = useIsSubnameAvailable({ - subname: debouncedSubdomain, + const { isAvailable, isLoading } = useIsSubnameAvailable({ + username: debouncedSubdomain, ensDomain: process.env.EXPO_PUBLIC_ENS_DOMAIN as string, }) const { claimSubname } = useClaimSubname(); - - const handleGenerateWallet = async () => { - const wallet = ethers.Wallet.createRandom(); - setRandomWallet(wallet); - } - const handleAddSubdomain = async () => { return await claimSubname({ username: inputValue, @@ -48,28 +40,28 @@ export default function HomeScreen() { JAN WALLET TEST Connect ur wallet - Or generate random wallet on each click -