From 61221a7667be4650760aa909bd29aa882fb8e1d8 Mon Sep 17 00:00:00 2001 From: thi-investax Date: Fri, 3 Jan 2025 18:13:01 +0700 Subject: [PATCH] Experimental: add LIFF provider --- src/index.tsx | 35 ++++++++++++++------------- src/pages/LiffProvider.tsx | 48 ++++++++++++++++++++++++++++++++++++++ 2 files changed, 67 insertions(+), 16 deletions(-) create mode 100644 src/pages/LiffProvider.tsx diff --git a/src/index.tsx b/src/index.tsx index 544f4bcf6b..fa1d0f59e6 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -1,34 +1,35 @@ -import { CookiesProvider } from 'react-cookie' -import React, { StrictMode } from 'react' -import { isMobile } from 'react-device-detect' +import {CookiesProvider} from 'react-cookie' +import React, {StrictMode} from 'react' +import {isMobile} from 'react-device-detect' import ReactDOM from 'react-dom/client' import ReactGA from 'react-ga' -import { Provider } from 'react-redux' -import { HashRouter } from 'react-router-dom' -import { LocalizationProvider } from '@material-ui/pickers' +import {Provider} from 'react-redux' +import {HashRouter} from 'react-router-dom' +import {LocalizationProvider} from '@material-ui/pickers' import DayJsUtils from '@material-ui/pickers/adapter/dayjs' -import { PersistGate } from 'redux-persist/integration/react' +import {PersistGate} from 'redux-persist/integration/react' import * as Sentry from '@sentry/react' -import { ToastContainer } from 'react-toastify' +import {ToastContainer} from 'react-toastify' -import { MuiThemeProvider } from './theme/muiTheme' +import {MuiThemeProvider} from './theme/muiTheme' import Blocklist from './components/Blocklist' -import { LanguageProvider } from './i18n' +import {LanguageProvider} from './i18n' import App from './pages/App' import * as serviceWorkerRegistration from './serviceWorkerRegistration' -import store, { persistor } from './state' +import store, {persistor} from './state' import ApplicationUpdater from './state/application/updater' import ListsUpdater from './state/lists/updater' import MulticallUpdater from './state/multicall/updater' import SecTokenListUpdater from './state/secTokens/updater' import TransactionUpdater from './state/transactions/updater' import UserUpdater from './state/user/updater' -import ThemeProvider, { ThemedGlobalStyle } from './theme' +import ThemeProvider, {ThemedGlobalStyle} from './theme' import Web3Provider from 'components/Web3Provider' import 'react-toastify/dist/ReactToastify.css' import 'react-phone-input-2/lib/bootstrap.css' import './index.css' +import {LiffProvider} from 'pages/LiffProvider' if (!!window.ethereum) { window.ethereum.autoRefreshOnNetworkChange = false @@ -47,11 +48,11 @@ if (typeof GOOGLE_ANALYTICS_ID === 'string') { customBrowserType: !isMobile ? 'desktop' : 'web3' in window || 'ethereum' in window - ? 'mobileWeb3' - : 'mobileRegular', + ? 'mobileWeb3' + : 'mobileRegular', }) } else { - ReactGA.initialize('test', { testMode: true, debug: true }) + ReactGA.initialize('test', {testMode: true, debug: true}) } function Updaters() { @@ -99,7 +100,9 @@ ReactDOM.createRoot(document.getElementById('root')!).render( - + + + diff --git a/src/pages/LiffProvider.tsx b/src/pages/LiffProvider.tsx new file mode 100644 index 0000000000..bcbfc624c9 --- /dev/null +++ b/src/pages/LiffProvider.tsx @@ -0,0 +1,48 @@ +"use client"; + +import liff from "@line/liff"; +import React, {createContext, useContext, useEffect, useState, ReactNode} from "react"; + +interface LiffContextType { + liffObject: typeof liff | null; + liffError: string | null; +} + +const LiffContext = createContext(undefined); + +interface LiffProviderProps { + children: ReactNode; +} + +export const LiffProvider: React.FC = ({children}) => { + const [liffObject, setLiffObject] = useState(null); + const [liffError, setLiffError] = useState(null); + + useEffect(() => { + liff + .init({liffId: '2006732958-EAK9vggN'}) + .then(() => { + console.log("LIFF initialization is done"); + setLiffObject(liff); + }) + .catch((error: any) => { + console.error(`LIFF initialization failed: ${error}`); + setLiffError(error.toString()); + }); + }, []); + + return ( + + {children} + + ); +}; + +export const useLiff = () => { + const context = useContext(LiffContext); + if (!context) { + throw new Error("useLiff must be used within a LiffProvider"); + } + return context; +};