Experimental: add LIFF provider

package.json

@@ -75,6 +75,7 @@
     "cross-env": "^7.0.2",
     "crypto-browserify": "^3.12.0",
     "dayjs": "^1.10.5",
+    "eruda": "^3.4.1",
     "eslint": "^8.47.0",
     "eslint-config-prettier": "^9.0.0",
     "eslint-plugin-prettier": "^5.0.0",

src/components/NotAvailablePage/CustomButotn.tsx

@@ -54,6 +54,7 @@ export default function CustomConnectButton() {
       new WalletEvent('Connecting line liff ').walletAddress('unknonw').info('Prepare to connect')
       connect({ connector: passkeyConnector as any })
     } catch (err: any) {
+      console.error(err)
       new WalletEvent('Connecting line liff error').walletAddress('unknonw').error(err.toString())
     }
   }

src/components/Web3Provider/linenext-wallet.ts

@@ -103,9 +103,10 @@ export function lineNextConnector(walletDetails: any): CreateConnectorFn {
     type: 'wallet',
     ...walletDetails.rkDetails,
     connect: async (params) => {
-      console.info('Config', config)
+      console.info('Config lINEXT NEXT', config)
       const sdk = await getSDKInstance()
       const provider = sdk.getWalletProvider()
+      console.info('provider lINEXT NEXT', provider)
       const accounts = (await provider.request({ method: 'kaia_requestAccounts' })) as string[]
 
       if (!accounts || accounts.length === 0) {

src/index.tsx

@@ -29,6 +29,8 @@ 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'
+import eruda from 'eruda'
 
 if (!!window.ethereum) {
   window.ethereum.autoRefreshOnNetworkChange = false
@@ -53,6 +55,7 @@ if (typeof GOOGLE_ANALYTICS_ID === 'string') {
 } else {
   ReactGA.initialize('test', { testMode: true, debug: true })
 }
+eruda.init()
 
 function Updaters() {
   return (
@@ -99,7 +102,9 @@ ReactDOM.createRoot(document.getElementById('root')!).render(
                   <MuiThemeProvider>
                     <LocalizationProvider dateAdapter={DayJsUtils}>
                       <CookiesProvider>
-                        <App />
+                        <LiffProvider>
+                          <App />
+                        </LiffProvider>
                         <ToastContainer />
                       </CookiesProvider>
                     </LocalizationProvider>

src/pages/LiffProvider.tsx

@@ -0,0 +1,49 @@
+'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<LiffContextType | undefined>(undefined)
+
+interface LiffProviderProps {
+  children: ReactNode
+}
+
+export const LiffProvider: React.FC<LiffProviderProps> = ({ children }) => {
+  const [liffObject, setLiffObject] = useState<typeof liff | null>(null)
+  const [liffError, setLiffError] = useState<string | null>(null)
+
+  useEffect(() => {
+    liff
+      .init({ liffId: '2006732958-EAK9vggN' })
+      .then(() => {
+        console.log('LIFF initialization is done')
+        setLiffObject(liff)
+        console.log(liff.getAppLanguage())
+        console.log(liff.getVersion())
+        console.log(liff.isInClient())
+        console.log(liff.isLoggedIn())
+        console.log(liff.getOS())
+        console.log(liff.getLineVersion())
+      })
+      .catch((error: any) => {
+        console.error(`LIFF initialization failed: ${error}`)
+        setLiffError(error.toString())
+      })
+  }, [])
+
+  return <LiffContext.Provider value={{ liffObject, liffError }}>{children}</LiffContext.Provider>
+}
+
+export const useLiff = () => {
+  const context = useContext(LiffContext)
+  if (!context) {
+    throw new Error('useLiff must be used within a LiffProvider')
+  }
+  return context
+}

yarn.lock

@@ -9944,6 +9944,11 @@ error-stack-parser@^2.0.6:
   dependencies:
     stackframe "^1.3.4"
 
+eruda@^3.4.1:
+  version "3.4.1"
+  resolved "https://registry.yarnpkg.com/eruda/-/eruda-3.4.1.tgz#5ff04fa2c55c3a5f4998e48c952adb759307b53f"
+  integrity sha512-RmaO5yD97URY/9Q0lye3cmmNPoXNKreeePIw7c/zllbscR92CjGFZFuQ70+0fLIvLcKW3Xha8DS8NFhmeNbEBQ==
+
 es-abstract@^1.17.2, es-abstract@^1.20.4, es-abstract@^1.21.2, es-abstract@^1.21.3:
   version "1.22.1"
   resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.22.1.tgz#8b4e5fc5cefd7f1660f0f8e1a52900dfbc9d9ccc"