import React , { FunctionComponent , useEffect , useState } from "react" ; import * as material from "@material-ui/core" ; import GlobalFonts from "../fonts/fonts" ; import { light , MenuButton , Tab , Logo } from "../components" ; import CallMadeIcon from "@material-ui/icons/CallMade" ; import { Background } from "../background/" ; import { debug } from "../utils/debug" ; import { TabInterface } from "../types" ; import { State , PopupAppInfo } from "../background/types" ; import { ConnectionManager } from "../background/ConnectionManager" ; const { createTheme , ThemeProvider , Box , Divider } = material ; const createTab = ( a , url ) : TabInterface => { return { tabId : a . tabId , url : url , uApp : { networks : a . networks . map ( ( b ) => b . name ) , name : a . name , enabled : true , } , } ; } ; const Popup = ( ) => { const [ activeTab , setActiveTab ] = useState < TabInterface | undefined > ( ) ; const [ apps , setApps ] = useState < TabInterface [ ] > ( [ ] ) ; const appliedTheme = createTheme ( light ) ; const [ manager , setManager ] = useState < ConnectionManager | undefined > ( ) ; const [ browserTabs , setBrowserTabs ] = useState < chrome . tabs . Tab [ ] > ( ) ; const [ appsInitState , setAppsInitState ] = useState < State > ( ) ; useEffect ( ( ) : void => { chrome . runtime . getBackgroundPage ( ( backgroundPage ) => { const bg = backgroundPage as Background ; if ( bg . manager ) { setManager ( bg . manager ) ; setAppsInitState ( bg . manager . getState ( ) ) ; } } ) ; chrome . tabs . query ( { currentWindow : true } , ( tabs ) => { setBrowserTabs ( tabs ) ; } ) ; } , [ ] ) ; useEffect ( ( ) : void => { param browserTabs param appState const setExtensionApps = ( browserTabs , appState ) => { const ti = [ ] as TabInterface [ ] ; browserTabs ?. forEach ( ( t ) => { appState ?. apps . find ( ( a ) => { if ( t . id === a . tabId ) { if ( t . active ) { setActiveTab ( createTab ( a , t . url ) ) ; } else { ti . push ( createTab ( a , t . url ) ) ; } } } ) ; } ) ; setApps ( ti ) ; } ; setExtensionApps ( browserTabs , appsInitState ) ; manager ?. on ( "stateChanged" , ( state ) => { debug ( "CONNECTION MANAGER APP STATE CHANGED" ) ; setExtensionApps ( browserTabs , state ) ; } ) ; } , [ appsInitState , browserTabs , manager ] ) ; const goToOptions = ( ) : void => { chrome . runtime . openOptionsPage ( ) ; } ; return ( < ThemeProvider theme = { appliedTheme } > < Box width = { "320px" } pl = { 1.5 } pr = { 1.5 } > < GlobalFonts /> < Box pt = { 2 } pb = { 1 } pl = { 1 } pr = { 1 } > < Logo /> < /Box> { activeTab && ( < Tab manager = { manager } current tab = { activeTab } setActiveTab = { setActiveTab } / > ) } { apps . length > 0 && ( < Box marginY = { 1 } > { apps . map ( ( t ) => ( < > < Tab manager = { manager } key = { t . tabId } tab = { t } / > < Divider /> < />))} < /Box>)} < MenuButton fullWidth onClick = { goToOptions } > Options < /MenuButton> < Divider / > < MenuButton fullWidth endIcon = { < CallMadeIcon / > } onClick = { ( ) => chrome . tabs . update ( { url : "https://paritytech.github.io/substrate-connect/#extension" , } ) } > About < /MenuButton> { } < /Box> < /ThemeProvider>); } ; export default Popup ;