Feat Integrate Ubeswaps saving widget.

package.json

@@ -210,6 +210,7 @@
         "@gooddollar/goodprotocol": "2.2.1",
         "@gooddollar/web3sdk": "0.1.58",
         "@gooddollar/web3sdk-v2": "^0.4.37",
+        "@goodsdks/savings-widget": "^1.0.0",
         "@headlessui/react": "1.5.0",
         "@lingui/format-json": "^4.0.0",
         "@lingui/macro": "^4.0.0",

src/components/Faq/Faq.tsx

@@ -9,7 +9,7 @@ import { AdditionalChainId } from 'constants/index'
 
 import { faqs, faqReserveCeloCopy, faqReserveXdcCopy } from './copies'
 
-export type FaqType = 'swap' | 'buy' | 'bridge' | 'goodid' | 'claim' | 'reserve'
+export type FaqType = 'swap' | 'buy' | 'bridge' | 'goodid' | 'claim' | 'reserve' | 'savings'
 
 const FaqItem = ({ id, question, answer, links, AltLink }) => {
     const { isDesktopView } = useScreenSize()

src/components/Faq/copies.tsx

@@ -290,6 +290,33 @@ const faqClaimCopy: FaqItemCopy[] = [
     },
 ]
 
+const faqSavingsCopy: FaqItemCopy[] = [
+    {
+        id: 'whatissavings',
+        question: `What is the Savings Widget?`,
+        answer: `The Savings Widget allows you to grow your G$ holdings through yield-generating opportunities. Connect your wallet and earn rewards on your GoodDollar holdings securely and transparently.`,
+        links: [],
+    },
+    {
+        id: 'howdoesitsavings',
+        question: `How does it work?`,
+        answer: `Once connected, your G$ can be staked or used in various yield-generating strategies. The widget displays your balance, potential earnings, and available actions. All transactions are transparent and happen on-chain.`,
+        links: [],
+    },
+    {
+        id: 'issavingssafe',
+        question: `Is it safe?`,
+        answer: `Your funds remain in your control. The smart contracts powering the savings strategies have been audited and follow security best practices. Always verify contract addresses before interacting.`,
+        links: [],
+    },
+    {
+        id: 'whataresavingsrewards',
+        question: `What are the rewards?`,
+        answer: `Rewards vary based on the yield-generating strategy and current market conditions. Check the widget for current rates and estimated earnings. Rewards are typically paid in G$ or other supported tokens.`,
+        links: [],
+    },
+]
+
 export const faqReserveCeloCopy: FaqItemCopy[] = [
     {
         id: 'whatsswapreserve',
@@ -401,4 +428,5 @@ export const faqs = {
     goodid: faqGoodIDCopy,
     claim: faqClaimCopy,
     reserve: faqReserveCeloCopy,
+    savings: faqSavingsCopy,
 }

src/components/SideBar.tsx

@@ -256,6 +256,11 @@ export default function SideBar({ mobile, closeSidebar }: { mobile?: boolean; cl
                         text: 'Stake',
                         show: !isMinipay,
                     },
+                    {
+                        route: '/savings',
+                        text: 'Savings',
+                        show: !networkEnv.includes('production') ?? !isMinipay,
+                    },
                     {
                         route: '/portfolio',
                         text: 'Portfolio',

src/pages/App.tsx

@@ -17,10 +17,8 @@ import { updateUserDarkMode } from '../state/user/actions'
 import SideBar from '../components/SideBar'
 import TransactionUpdater from '../state/transactions/updater'
 import useSendAnalyticsData from 'hooks/useSendAnalyticsData'
-import WalletChat from '../components/WalletChat'
 import { useIsSimpleApp } from 'state/simpleapp/simpleapp'
 import MainPageContainer from 'components/Layout/MainPageContainer'
-import { useFeatureFlag } from 'posthog-react-native'
 import { isMiniPay } from 'utils/minipay'
 
 export const Beta = styled.div`
@@ -101,7 +99,7 @@ function App(): JSX.Element {
     const isMinipay = isMiniPay()
     const { open, url, onClose } = useRedirectNotice()
     const { isDesktopView } = useScreenSize()
-    const walletChatEnabled = useFeatureFlag('wallet-chat')
+    // const walletChatEnabled = useFeatureFlag('wallet-chat')
 
     void useFaucet()
 
@@ -190,7 +188,7 @@ function App(): JSX.Element {
                         </Web3ReactManager>
                     </MainPageContainer>
                 </Wrapper>
-                {!isSimpleApp && !sidebarOpen && walletChatEnabled && <WalletChat />}
+                {/* {!isSimpleApp && !sidebarOpen && walletChatEnabled && <WalletChat />} */}
             </AppWrap>
         </Suspense>
     )

src/pages/gd/Savings/index.tsx

@@ -0,0 +1,41 @@
+import '@goodsdks/savings-widget'
+import { useEffect, useRef, useCallback } from 'react'
+import { useAppKit, useAppKitAccount, useAppKitProvider } from '@reown/appkit/react'
+import type { Provider } from '@reown/appkit/react'
+import { PageLayout } from 'components/Layout/PageLayout'
+
+export default function Savings() {
+    const widgetRef = useRef<
+        HTMLElement & {
+            connectWallet?: () => void
+            web3Provider?: unknown | null
+        }
+    >(null)
+    const { open: openAppKit } = useAppKit()
+    const { address } = useAppKitAccount()
+    const { walletProvider } = useAppKitProvider<Provider>('eip155')
+
+    const handleConnectWallet = useCallback(async () => {
+        await openAppKit({ view: 'Connect' })
+    }, [openAppKit])
+
+    // Assign connect wallet handler
+    useEffect(() => {
+        const widget = widgetRef.current
+        if (!widget) return
+        widget.connectWallet = handleConnectWallet
+    }, [handleConnectWallet])
+
+    // Update web3 provider based on wallet connection state
+    useEffect(() => {
+        const widget = widgetRef.current
+        if (!widget) return
+        widget.web3Provider = address && walletProvider ? walletProvider : null
+    }, [address, walletProvider])
+
+    return (
+        <PageLayout title="Savings" faqType="savings">
+            <gooddollar-savings-widget ref={widgetRef} />
+        </PageLayout>
+    )
+}

src/routes.tsx

@@ -15,6 +15,7 @@ const Portfolio = lazy(() => import('./pages/gd/Portfolio'))
 const MicroBridge = lazy(() => import('./pages/gd/MicroBridge'))
 const GoodBridge = lazy(() => import('./pages/gd/GoodBridge'))
 const Claim = lazy(() => import('./pages/gd/Claim/'))
+const Savings = lazy(() => import('./pages/gd/Savings'))
 const GoodId = lazy(() => import('./pages/gd/GoodId'))
 const BuyGd = lazy(() => import('./pages/gd/BuyGD'))
 const NewsFeedPage = lazy(() => import('./pages/gd/News'))
@@ -55,6 +56,7 @@ function Routes(): JSX.Element {
                 <Route exact strict path="/goodid" component={GoodId} />
                 <Route exact strict path="/buy" component={BuyGd} />
                 <Route exact strict path="/claim" component={Claim} />
+                <Route exact strict path="/savings" component={Savings} />
                 <Route exact strict path="/microbridge" component={MicroBridge} />
                 <Route exact strict path="/goodbridge" component={GoodBridge} />
                 <Route exact strict path="/news" component={NewsFeedPage} />

tsconfig.json

@@ -21,6 +21,6 @@
         "baseUrl": "./src",
         "typeRoots": ["./node_modules/@types", "./types", "./node_modules/@react-spring/types", "./src"]
     },
-    "include": ["src"],
+    "include": ["src", "types"],
     "exclude": ["node_modules"]
 }

types/gooddollar-savings-widget.d.ts

@@ -0,0 +1,19 @@
+import 'react'
+
+declare module 'react' {
+    namespace JSX {
+        interface IntrinsicElements {
+            'gooddollar-savings-widget': React.DetailedHTMLProps<
+                React.HTMLAttributes<HTMLElement>,
+                HTMLElement
+            > & {
+                ref?: React.Ref<
+                    HTMLElement & {
+                        connectWallet?: () => void
+                        web3Provider?: unknown | null
+                    }
+                >
+            }
+        }
+    }
+}