add-wip: goodid flow in gooddapp

GoodDollar · Nov 30, 2024 · 33eb1d0 · 33eb1d0
1 parent e122a82
commit 33eb1d0
Show file tree

Hide file tree

Showing 18 changed files with 681 additions and 461 deletions.
diff --git a/package.json b/package.json
@@ -206,10 +206,10 @@
     },
     "dependencies": {
         "@babel/runtime": "^7.18.9",
-        "@gooddollar/good-design": "0.4.1-beta.a952f414",
+        "@gooddollar/good-design": "0.4.1-beta.280823b8",
         "@gooddollar/goodprotocol": "^2.0.24",
         "@gooddollar/web3sdk": "^0.1.42",
-        "@gooddollar/web3sdk-v2": "0.4.1-beta.a952f414",
+        "@gooddollar/web3sdk-v2": "0.4.1-beta.280823b8",
         "@headlessui/react": "1.5.0",
         "@lingui/format-json": "^4.0.0",
         "@lingui/macro": "^4.0.0",

diff --git a/src/components/BlockNativeOnboard/index.tsx b/src/components/BlockNativeOnboard/index.tsx
@@ -9,7 +9,7 @@ import { noop } from 'lodash'
 
 import useSendAnalyticsData from '../../hooks/useSendAnalyticsData'
 
-import { connectOptions, torus } from 'connectors'
+import { connectOptions } from 'connectors'
 
 /**
  * Just a button to trigger the onboard connect modal.
@@ -81,7 +81,7 @@ export const OnboardProviderWrapper = ({ children }) => {
     return (
         <OnboardProvider
             options={connectOptions}
-            wallets={{ custom: [torus] }}
+            // wallets={{ custom: [torus] }}
             // wc2Options={{ requiredChains: [selectedChain] }} // advised not to use this option. ref: https://docs.walletconnect.com/advanced/migration-from-v1.x/namespaces#technical-implementation-guide-for-apps
             gdEnv={connectedEnv}
         >

diff --git a/src/components/Faq/Faq.tsx b/src/components/Faq/Faq.tsx
@@ -5,11 +5,14 @@ import { t } from '@lingui/macro'
 import { SlideDownTab, useScreenSize } from '@gooddollar/good-design'
 
 import { faqBuyCopy, faqBridgeCopy, faqSwapCopy } from './copies'
+import type { FaqItemCopy } from './copies'
 
 const faqs = {
     swap: faqSwapCopy,
     buy: faqBuyCopy,
     bridge: faqBridgeCopy,
+    goodid: [] as FaqItemCopy[],
+    claim: [] as FaqItemCopy[],
 }
 
 const FaqItem = ({ id, question, answer, links }) => {
@@ -74,7 +77,7 @@ const FaqItem = ({ id, question, answer, links }) => {
     )
 }
 
-export const Faq = ({ type }: { type: 'swap' | 'buy' | 'bridge' }) => {
+export const Faq = ({ type }: { type: 'swap' | 'buy' | 'bridge' | 'goodid' | 'claim' }) => {
     const copies = faqs[type]
 
     return (

diff --git a/src/components/Faq/copies.ts b/src/components/Faq/copies.ts
@@ -1,4 +1,4 @@
-type FaqItemCopy = {
+export type FaqItemCopy = {
     id: string
     question: string
     answer: string

diff --git a/src/components/Layout/PageLayout.tsx b/src/components/Layout/PageLayout.tsx
@@ -7,8 +7,8 @@ import { CentreBox, Title } from '@gooddollar/good-design'
 import { Faq } from 'components/Faq/Faq'
 
 interface PageLayoutProps {
-    title: string
-    faqType?: 'buy' | 'swap' | 'bridge'
+    title?: string
+    faqType?: 'buy' | 'swap' | 'bridge' | 'goodid' | 'claim'
     customTabs?: JSX.Element[]
 }
 
@@ -26,6 +26,7 @@ export const PageLayout: FC<PropsWithChildren<PageLayoutProps>> = ({ title, faqT
         lg: {
             flexDirection: 'row',
             justifyContent: 'justify-evenly',
+            paddingTop: 10,
         },
     })
 
@@ -42,7 +43,7 @@ export const PageLayout: FC<PropsWithChildren<PageLayoutProps>> = ({ title, faqT
             borderRightWidth: 1,
             flexGrow: 1,
             justifyContent: 'flex-start',
-            textAlign: 'center',
+            paddingTop: 40,
         },
     })
 
@@ -74,9 +75,11 @@ export const PageLayout: FC<PropsWithChildren<PageLayoutProps>> = ({ title, faqT
     return (
         <Box w="100%" mb="8" style={mainView}>
             <CentreBox borderColor="borderGrey" style={leftContainer}>
-                <Title fontFamily="heading" fontSize="2xl" fontWeight="extrabold" pb="2" textAlign="center">
-                    {i18n._(t`${title}`)}
-                </Title>
+                {title ? (
+                    <Title fontFamily="heading" fontSize="2xl" fontWeight="extrabold" pb="2" textAlign="center">
+                        {i18n._(t`${title}`)}
+                    </Title>
+                ) : null}
                 {children}
             </CentreBox>
             <CentreBox w="100%" justifyContent="flex-start" style={rightContainer}>

diff --git a/src/components/NewsFeed/index.tsx b/src/components/NewsFeed/index.tsx
@@ -14,5 +14,5 @@ export const feedConfig = {
 export const NewsFeedWidget = ({ variant }: { variant?: string }) => {
     const { feed } = useContext(NewsFeedContext)
 
-    return <NewsFeed feed={feed} variant={variant} />
+    return <NewsFeed feed={feed} variant={variant} direction="column" />
 }
diff --git a/src/hooks/useClaiming.ts b/src/hooks/useClaiming.ts
@@ -19,12 +19,12 @@ export const useClaiming = (): UseClaimReturn => {
     const network = SupportedChainId[chainId]
     const { web3 } = useGdContextProvider()
     const sendData = useSendAnalyticsData()
-    const { claimTime } = useClaim()
+    const { nextClaimTime } = useClaim()
 
     const [claimed, setIsClaimed] = useState(false)
-    const [nextClaim, , setClaimTime] = useTimer(claimTime)
+    const [nextClaim, , setClaimTime] = useTimer(nextClaimTime)
 
-    useEffect(() => setClaimTime(claimTime), [claimTime.toString()])
+    useEffect(() => setClaimTime(nextClaimTime), [nextClaimTime.toString()])
 
     const [claimable, , , refetch] = usePromise(async () => {
         if (!account || !web3 || (chainId as any) !== SupportedChainId.FUSE) return false
@@ -71,5 +71,12 @@ export const useClaiming = (): UseClaimReturn => {
 
     const isFuse = (chainId as any) === SupportedChainId.FUSE
 
-    return { claimed, claimable, tillClaim: nextClaim, isFuse, claimActive: isFuse && claimable === true, handleClaim }
+    return {
+        claimed,
+        claimable,
+        tillClaim: nextClaim ?? '',
+        isFuse,
+        claimActive: isFuse && claimable === true,
+        handleClaim,
+    }
 }
diff --git a/src/hooks/useSendAnalyticsData.ts b/src/hooks/useSendAnalyticsData.ts
@@ -8,19 +8,18 @@ import { version } from '../../package.json'
 
 const indicativeKey = process.env.REACT_APP_INDICATIVE_KEY
 const posthogKey = process.env.REACT_APP_POSTHOG_KEY
-const mixpanelKey = process.env.REACT_APP_MIXPANEL_KEY
 
 export const analyticsConfig: IAnalyticsConfig = {
     google: { enabled: true },
     indicative: { apiKey: indicativeKey, enabled: !!indicativeKey },
     posthog: { apiKey: posthogKey, enabled: false },
-    mixpanel: { apiKey: mixpanelKey, enabled: !!mixpanelKey },
 }
 
 export const appInfo: IAppProps = {
     env: getEnv(),
     version,
     osVersion,
+    productEnv: 'gooddapp',
 }
 
 export interface IAnalyticsData {
@@ -36,7 +35,7 @@ export interface IAnalyticsData {
 }
 
 function useSendAnalyticsData(): (data: IAnalyticsData) => void {
-    const send = useSendAnalytics()
+    const { track } = useSendAnalytics()
 
     return useCallback(
         (data: IAnalyticsData): void => {
@@ -46,9 +45,9 @@ function useSendAnalyticsData(): (data: IAnalyticsData) => void {
                 assign(trackData, { tokens: [...tokens] })
             }
 
-            send(event, trackData)
+            track(event, trackData)
         },
-        [send]
+        [track]
     )
 }
 

diff --git a/src/index.tsx b/src/index.tsx
@@ -7,9 +7,11 @@ import React, { StrictMode } from 'react'
 import ReactDOM from 'react-dom'
 import { Provider } from 'react-redux'
 import { HashRouter as Router } from 'react-router-dom'
-import { AnalyticsProvider } from '@gooddollar/web3sdk-v2'
+import { AnalyticsProvider, GoodIdContextProvider } from '@gooddollar/web3sdk-v2'
 import { NewsFeedProvider } from '@gooddollar/web3sdk-v2'
 import { PostHogProvider } from 'posthog-react-native'
+import { Provider as PaperProvider } from 'react-native-paper'
+import { GoodIdProvider, GoodUIi18nProvider, NativeBaseProvider, RedirectNoticeProvider } from '@gooddollar/good-design'
 
 import Blocklist from './components/Blocklist'
 import App from './pages/App'
@@ -23,14 +25,12 @@ import ThemeProvider, { TwTheme } from './theme'
 import LanguageProvider from 'language'
 import { createGlobalStyle } from 'styled-components'
 import { Web3ContextProvider } from './hooks/useWeb3'
-import { NativeBaseProvider } from '@gooddollar/good-design'
 import { analyticsConfig, appInfo } from 'hooks/useSendAnalyticsData'
 import { HttpsProvider } from 'utils/HttpsProvider'
 import { registerServiceWorker } from './serviceWorker'
 import { OnboardProviderWrapper } from 'components/BlockNativeOnboard'
 import { SimpleAppProvider } from 'state/simpleapp/simpleapp'
 import { nbTheme } from './theme/nbtheme'
-import { RedirectNoticeProvider } from '@gooddollar/good-design'
 
 if (window.ethereum) {
     window.ethereum.autoRefreshOnNetworkChange = false
@@ -80,46 +80,62 @@ const enableServiceWorker =
 const networkEnv = getNetworkEnv()
 const prodOrQa = /\b(production|staging)\b/.test(networkEnv)
 
+const ProviderWrapper = ({ children }) => (
+    <Provider store={store}>
+        <NewsFeedProvider {...(prodOrQa ? { feedFilter: feedConfig.production.feedFilter } : { env: 'qa' })}>
+            <RedirectNoticeProvider>
+                <OnboardProviderWrapper>
+                    <GoodIdContextProvider>
+                        <GoodIdProvider>
+                            <Web3ContextProvider>
+                                <GoodUIi18nProvider>
+                                    <LanguageProvider>
+                                        <PostHogProvider
+                                            apiKey={import.meta.env.REACT_APP_POSTHOG_KEY}
+                                            options={{
+                                                host:
+                                                    import.meta.env.REACT_APP_POSTHOG_PROXY ??
+                                                    'https://app.posthog.com',
+                                            }}
+                                            autocapture={false}
+                                        >
+                                            {children}
+                                        </PostHogProvider>
+                                    </LanguageProvider>
+                                </GoodUIi18nProvider>
+                            </Web3ContextProvider>
+                        </GoodIdProvider>
+                    </GoodIdContextProvider>
+                </OnboardProviderWrapper>
+            </RedirectNoticeProvider>
+        </NewsFeedProvider>
+    </Provider>
+)
+
 ReactDOM.render(
     <StrictMode>
         <HttpsProvider enabled={enableHttpsRedirect}>
-            <Provider store={store}>
-                <NewsFeedProvider {...(prodOrQa ? { feedFilter: feedConfig.production.feedFilter } : { env: 'qa' })}>
-                    <RedirectNoticeProvider>
-                        <OnboardProviderWrapper>
-                            <Web3ContextProvider>
-                                <LanguageProvider>
-                                    <PostHogProvider
-                                        apiKey={import.meta.env.REACT_APP_POSTHOG_KEY}
-                                        options={{
-                                            host: import.meta.env.REACT_APP_POSTHOG_PROXY ?? 'https://app.posthog.com',
-                                        }}
-                                        autocapture={false}
-                                    >
-                                        <AnalyticsProvider config={analyticsConfig} appProps={appInfo}>
-                                            <Blocklist>
-                                                <UserUpdater />
-                                                <ApplicationUpdater />
-                                                <MulticallUpdater />
-                                                <ThemeProvider>
-                                                    <NativeBaseProvider theme={nbTheme}>
-                                                        <GlobalStyle />
-                                                        <Router>
-                                                            <SimpleAppProvider>
-                                                                <App />
-                                                            </SimpleAppProvider>
-                                                        </Router>
-                                                    </NativeBaseProvider>
-                                                </ThemeProvider>
-                                            </Blocklist>
-                                        </AnalyticsProvider>
-                                    </PostHogProvider>
-                                </LanguageProvider>
-                            </Web3ContextProvider>
-                        </OnboardProviderWrapper>
-                    </RedirectNoticeProvider>
-                </NewsFeedProvider>
-            </Provider>
+            <ProviderWrapper>
+                <AnalyticsProvider config={analyticsConfig} appProps={appInfo}>
+                    <Blocklist>
+                        <UserUpdater />
+                        <ApplicationUpdater />
+                        <MulticallUpdater />
+                        <NativeBaseProvider config={{ suppressColorAccessibilityWarning: true }} theme={nbTheme}>
+                            <ThemeProvider>
+                                <PaperProvider>
+                                    <GlobalStyle />
+                                    <Router>
+                                        <SimpleAppProvider>
+                                            <App />
+                                        </SimpleAppProvider>
+                                    </Router>
+                                </PaperProvider>
+                            </ThemeProvider>
+                        </NativeBaseProvider>
+                    </Blocklist>
+                </AnalyticsProvider>
+            </ProviderWrapper>
         </HttpsProvider>
     </StrictMode>,
     document.getElementById('root')