Feat: Integrate ubeswap savings widget #619 by Oluwatomilola · Pull Request #625 · GoodDollar/GoodProtocolUI

Oluwatomilola · 2026-03-03T01:25:20Z

Description

This PR integrates the GoodDollar Savings Widget into GoodDapp as a first-class page.

Changes include:
Added a new Savings menu item to the sidebar.
Created a new /savings page using the same layout structure as Bridge/Swap/Claim.
Embedded the GooddollarSavingsWidget via a dedicated wrapper component.
Added contextual FAQs for the Savings feature.
This implements the requirements described in issue #619.

About: https://github.com/GoodDollar/GoodProtocolUI/issues/#619
fixes: #619 #619 #619

How Has This Been Tested?

Ran the app locally using yarn start.

Navigated to the new Savings route from the sidebar.

Verified that the Savings Widget loads correctly.

Confirmed layout consistency with Bridge/Swap/Claim pages.

Manually tested wallet connection and widget rendering.

Checklist:

Summary by Sourcery

Add a dedicated Savings page integrating the GoodDollar savings widget with existing app layout and wallet context.

New Features:

Introduce a new Savings route/page that embeds the GoodDollar savings widget as a first-class feature in the dApp.

Enhancements:

Wire the savings widget to the app’s wallet connection and Web3 provider for seamless user interaction.
Declare JSX typings for the custom gooddollar-savings-widget element to enable type-safe usage in the codebase.

sourcery-ai

Hey - I've found 2 issues, and left some high level feedback:

The savings widget script is reloaded on every account change but only ever appended (and only to the container div), which can lead to multiple <script> tags being added over time; consider loading it once (empty dependency array) and/or guarding with an id/existence check, and appending to document.head or body instead of the container.
The <div id="savings-widget-container"> only hosts the script element and does not render a specific web component instance (e.g., <gooddollar-savings-widget ... />), so if the widget does not self-mount into the container, it may never display; double-check whether explicitly rendering the custom element is required and add it if so.

Prompt for AI Agents

Please address the comments from this code review:

## Overall Comments
- The savings widget script is reloaded on every `account` change but only ever appended (and only to the container div), which can lead to multiple `<script>` tags being added over time; consider loading it once (empty dependency array) and/or guarding with an `id`/existence check, and appending to `document.head` or `body` instead of the container.
- The `<div id="savings-widget-container">` only hosts the script element and does not render a specific web component instance (e.g., `<gooddollar-savings-widget ... />`), so if the widget does not self-mount into the container, it may never display; double-check whether explicitly rendering the custom element is required and add it if so.

## Individual Comments

### Comment 1
<location path="src/pages/gd/Savings/index.tsx" line_range="37-46" />
<code_context>
+    useEffect(() => {
</code_context>
<issue_to_address>
**suggestion (bug_risk):** Avoid reloading the widget script on every account change unless the widget actually depends on it.

Because the effect depends on `account` but the script URL/injection don’t, every account change tears down and reinjects the script, causing extra network/CPU work and potential re‑init bugs. If the widget truly doesn’t depend on `account`, make the dependency array `[]` so it runs only on mount. If it does depend on `account`, prefer passing that via the widget’s own API (e.g., attributes/props) instead of reloading the script itself.

Suggested implementation:

```typescript
    useEffect(() => {

```

```typescript
    }, [])

```

If the dependency array is not exactly `[account]` (for example `[account, chainId]` or similar), you should update that full dependency array to `[]` instead, so that the widget script is only loaded once on mount and not reloaded on account changes. If the widget actually needs `account` to render correctly, prefer passing `account` into the widget via its attributes/props or configuration object inside the effect, rather than by reloading the script tag itself.
</issue_to_address>

### Comment 2
<location path="src/pages/gd/Savings/index.tsx" line_range="22" />
<code_context>
+    </VStack>
+)
+
+const SavingsWidgetContainer: React.FC = () => {
+    const containerRef = useRef<HTMLDivElement>(null)
+    const [isLoading, setIsLoading] = useState(true)
</code_context>
<issue_to_address>
**issue (complexity):** Consider refactoring the widget container to use a reusable script-loading hook, a single derived status, and NativeBase layout components to simplify control flow and concerns.

You can simplify this component without changing behavior by extracting the script-loading concern, tightening dependencies, and consolidating state.

### 1. Extract script loading into a small hook

This removes DOM manipulation from the page component and makes it reusable/testable:

```ts
// hooks/useExternalScript.ts
import { useEffect, useState } from 'react'

export const useExternalScript = (src: string) => {
  const [status, setStatus] = useState<'idle' | 'loading' | 'ready' | 'error'>('idle')

  useEffect(() => {
    if (!src) return
    setStatus('loading')

    const script = document.createElement('script')
    script.src = src
    script.async = true
    script.defer = true

    script.onload = () => setStatus('ready')
    script.onerror = () => setStatus('error')

    document.body.appendChild(script)

    return () => {
      script.onload = null
      script.onerror = null
      script.remove()
    }
  }, [src])

  return status
}
```

Then your widget container becomes focused on layout:

```tsx
const SavingsWidgetContainer: React.FC = () => {
  const containerRef = useRef<HTMLDivElement>(null)
  const status = useExternalScript(
    'https://unpkg.com/@gooddollar/savings-widget@latest/dist/index.js'
  )
  const isLoading = status === 'loading'
  const hasError = status === 'error'
  const isReady = status === 'ready'

  // ...rendering below...
}
```

### 2. Remove unnecessary `account` dependency

The script doesn’t depend on `account`, so reloading it on account change adds complexity and flicker. If you keep the current inline approach, you can change:

```ts
useEffect(() => {
  // ...
}, [account])
```

to:

```ts
useEffect(() => {
  // ...
}, []) // load once per mount
```

### 3. Consolidate loading/error/success handling

Instead of two booleans and inline `display` logic, derive a single `status`:

```tsx
const [status, setStatus] = useState<'loading' | 'error' | 'ready'>('loading')

useEffect(() => {
  // on success:
  setStatus('ready')
  // on error:
  setStatus('error')
}, [])
```

Then JSX becomes more linear:

```tsx
{status === 'loading' && (
  <VStack alignItems="center" justifyContent="center" minH="300px" w="100%">
    <Spinner color="gdPrimary" size="lg" />
    <Text fontSize="sm" color="goodGrey.400" mt={4}>
      Loading savings widget...
    </Text>
  </VStack>
)}

{status === 'error' && (
  <VStack alignItems="center" justifyContent="center" minH="300px" w="100%">
    <Text fontSize="sm" color="red.500" textAlign="center">
      Unable to load the savings widget. Please try again later.
    </Text>
  </VStack>
)}

<Box
  as="div"
  ref={containerRef}
  id="savings-widget-container"
  w="100%"
  minH="500px"
  display={status === 'ready' ? 'flex' : 'none'}
/>
```

### 4. Keep layout consistent with NativeBase

Instead of a raw `div`, use `Box as="div"` to stay within the NativeBase layout system (as above). This keeps styling consistent and avoids mixing paradigms while still giving the web component the `div` it needs.
</issue_to_address>

Sourcery is free for open source - if you like our reviews please consider sharing them ✨

_{Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.}

Oluwatomilola

@L03TJ3 kindly review

L03TJ3 · 2026-03-30T16:05:49Z

@Oluwatomilola your build fails, can you check the build logs

Oluwatomilola · 2026-03-30T17:48:47Z

Alright, on it.

L03TJ3 · 2026-04-03T14:16:12Z

dont need to be committed

Noted. I would remove it.

L03TJ3 · 2026-04-03T14:20:19Z

+                <VStack alignItems="center" justifyContent="center" minH="300px" w="100%">
+                    <Text fontSize="sm" color="red.500" textAlign="center" mb={4} fontWeight="bold">
+                        Unable to Load Savings Widget
+                    </Text>
+                    <Text fontSize="xs" color="goodGrey.500" textAlign="center" mb={3}>
+                        The widget script is not available. To enable this feature:
+                    </Text>
+                    <VStack fontSize="xs" color="goodGrey.400" textAlign="left" alignItems="flex-start" space={1}>
+                        <Text>1. Clone GoodSDKs/packages/savings-widget</Text>
+                        <Text>2. Run: yarn install && yarn build</Text>
+                        <Text>3. Copy dist/index.global.js to public/</Text>
+                        <Text>4. Restart the development server</Text>
+                    </VStack>
+                    <Button
+                        size="sm"
+                        colorScheme="blue"
+                        variant="ghost"
+                        mt={3}
+                        onPress={() =>
+                            window.open(
+                                'https://github.com/GoodDollar/GoodSDKs/tree/main/packages/savings-widget',


What is this?
why would this make any sense to show on a user-facing page?

My bad.
Exposing build/setup instructions in a user-facing page is not appropriate. That was a misstep on my part while trying to handle the missing widget script case.

L03TJ3 · 2026-04-03T14:24:10Z

Have you read the readme for the savings-widget?
https://github.com/GoodDollar/GoodSDKs/blob/main/packages/savings-widget/README.md

Yes, I have.
I will read through it again to see what I'm missing.

L03TJ3 · 2026-04-03T14:25:19Z

revert any changes that don't are not related to the requested change

Alright, will do that.

L03TJ3 · 2026-04-03T14:33:00Z

+)
+
+const SavingsWidgetContainer: React.FC = () => {
+    const containerRef = useRef<HTMLDivElement>(null)


I had expected you followed the readme at least and how to use it.
there are ways that the iife (the web-component compiled file, not the one from dist)
could have worked.

But you might have had some blockers, and I would have expected them to be raised.
It could have been an easy fix if you would have followed the readme.
You will now have to remove and revert a lot of this.

Please, when things are unclear, ask questions, push draft PRs.
you raised a couple of blockers before but there was never code for me to review.
and 'I have some eslint errors' is really hard to help with.

However. what was also missing was a published npm package.
That is my bad.
I am going to publish it now and you can use add @goodsdks/savings-widget as package. You can look at the demo-webcomponents to see how it can be used: https://github.com/GoodDollar/GoodSDKs/blob/main/apps/demo-webcomponents/src/index.js

The demo loads it high-level in html. once you import from the package you can use the html anywhere in react. (if anything not working, please raise blockers early)

Thanks for the detailed feedback.

My apologies for deviating from the intended integration approach.
I did follow the README. I cloned the goodSDK quite alright, but I was a bit unclear on the subsequent steps to integrating the component and I indeed had blockers. I should have stated them clearly, my bad.

Moving forward I will raise blockers early, and I’ll make sure to push draft PRs with partial progress next time so issues can be caught earlier.

Please can you add a link to the npm package if it's available.

I’ll go ahead and make the required changes.

you can add it with yarn: yarn add @goodsdks/savings-widget

L03TJ3 · 2026-04-10T09:15:36Z

@Oluwatomilola Hey, what is the status of this PR?

Oluwatomilola · 2026-04-10T12:06:09Z

Hi @L03TJ3
Update on the PR — the savings widget integration is mostly complete (UI + provider wiring is in place).

I’m currently blocked by a TypeScript issue from the pre-commit checks related to the useFeaturesEnabled hook returning an untyped object, which is affecting a few existing components (SideBar, Claim, GoodId).

I’m fixing the typing properly so it aligns with the existing feature flag structure, and I should have everything passing checks shortly. I’ll push an updated commit once that’s resolved.

Oluwatomilola

@L03TJ3
Update: The savings widget is now integrated on a dedicated page and wired to the existing wallet flow.

The widget script is loaded dynamically, and provider injection is handled via the existing web3 context without modifying shared hooks or feature flags.

Would appreciate a quick review to confirm the integration approach is okay.

pheobeayo · 2026-04-25T18:46:45Z

@Oluwatomilola, are you having difficulty implementing the few changes left?

Oluwatomilola · 2026-04-27T05:37:18Z

@pheobeayo I'm done with implementing all the changes.

Oluwatomilola

.

pheobeayo

Please can you resolve the conflicts, then we can have a final review and merge.

L03TJ3 · 2026-04-27T15:46:51Z

@Oluwatomilola, can you stop force-pushing and closing pull-requests? It's really difficult to keep reviewing like this.
reverting commits is done with 'git revert'
that way everyone can at least still keep track of history and changes done so far.

Oluwatomilola · 2026-04-27T20:09:35Z

My apologies.

I’m running into some git trouble. My local branch and the remote have diverged, so I can’t push my latest commits. I’ve tried pulling, but I’m getting merge conflicts and want to make sure I resolve everything and reopen the PR correctly without messing up the PR history.

Could you clarify the best way you’d like me to handle this? Should I merge, rebase, or is there a preferred workflow for resolving these conflicts?

Thanks for your patience.

pheobeayo · 2026-04-27T20:21:02Z

My apologies.

I’m running into some git trouble. My local branch and the remote have diverged, so I can’t push my latest commits. I’ve tried pulling, but I’m getting merge conflicts and want to make sure I resolve everything and reopen the PR correctly without messing up the PR history.

Could you clarify the best way you’d like me to handle this? Should I merge, rebase, or is there a preferred workflow for resolving these conflicts?

Thanks for your patience.

So sorry about this,
My advice will be either of these
Thanks for flagging this. Here's the cleanest way to handle it:

Recommended: Rebase onto master

# Make sure your local master is up to date
git checkout master
git pull upstream master

# Rebase your feature branch on top of it
git checkout feat-savings-integration
git rebase master

During the rebase, if conflicts appear, Git will pause and show you which files conflict. For each one:

Open the file, look for the <<<<<<< / ======= / >>>>>>> markers
Keep the correct code (yours, master's, or a combination)
Then run:

git add <resolved-file>
git rebase --continue

Once the rebase is complete, push with:

git push origin feat-savings-integration --force-with-lease

(--force-with-lease is safer than --force — it won't overwrite if someone else pushed in the meantime.)

Why rebase and not merge?

Merging would add a merge commit to the PR history, which makes the diff harder to review and the history messier. Rebase keeps a clean, linear history — which is also easier to squash before merging.

After pushing, please also squash your commits into one:

git rebase -i HEAD~N  # replace N with the number of your commits

In the interactive editor, mark the first commit as pick and all others as squash (or s). Then update the commit message to something clean like:

Feat: integrate GoodDollar savings widget via npm package

Then push again:

git push origin feat-savings-integration --force-with-lease

The PR will stay open and update automatically once you push — no need to close and reopen it. Let me know if you hit any specific conflict errors and I can help you resolve them.Thanks for flagging this. Here's the cleanest way to handle it:

Recommended: Rebase onto master

# Make sure your local master is up to date
git checkout master
git pull upstream master

# Rebase your feature branch on top of it
git checkout feat-savings-integration
git rebase master

During the rebase, if conflicts appear, Git will pause and show you which files conflict. For each one:

Open the file, look for the <<<<<<< / ======= / >>>>>>> markers
Keep the correct code (yours, master's, or a combination)
Then run:

git add <resolved-file>
git rebase --continue

Once the rebase is complete, push with:

git push origin feat-savings-integration --force-with-lease

(--force-with-lease is safer than --force — it won't overwrite if someone else pushed in the meantime.)

Why rebase and not merge?

Merging would add a merge commit to the PR history, which makes the diff harder to review and the history messier. Rebase keeps a clean, linear history — which is also easier to squash before merging.

After pushing, please also squash your commits into one:

git rebase -i HEAD~N  # replace N with the number of your commits

In the interactive editor, mark the first commit as pick and all others as squash (or s). Then update the commit message to something clean like:

Feat: integrate GoodDollar savings widget via npm package

Then push again:

git push origin feat-savings-integration --force-with-lease

The PR will stay open and update automatically once you push.

Or you may have to open another PR, pulling from the origin and pushing to it with your updated files

Oluwatomilola · 2026-04-27T21:13:51Z

Thanks a lot for the detailed steps and clear explanation! 🙏

Really appreciate you breaking down the rebase process, it makes things much clearer. I’ll follow your advice and let you know if I hit any snags during the rebase.

Oluwatomilola · 2026-04-29T02:44:00Z

@pheobeayo thanks, I've been able to reopen the pr, but I think I lost my previous commits. Do I need to open a new pr with all the needed fixes?

pheobeayo · 2026-04-29T05:15:53Z

@pheobeayo thanks, I've been able to reopen the pr, but I think I lost my previous commits. I think I will open a new pr with all the needed fixes.

Apologies about this, you can do that, will be awaiting your PR notification

Oluwatomilola had a problem deploying to external March 3, 2026 01:25 — with GitHub Actions Failure

sourcery-ai Bot reviewed Mar 3, 2026

View reviewed changes

Comment thread src/pages/gd/Savings/index.tsx Outdated

Comment thread src/pages/gd/Savings/index.tsx Outdated

Oluwatomilola had a problem deploying to external March 5, 2026 17:32 — with GitHub Actions Failure

Oluwatomilola had a problem deploying to external March 8, 2026 14:54 — with GitHub Actions Failure

Oluwatomilola force-pushed the feat-savings-integration branch from 1ca3f78 to 22fd77c Compare March 11, 2026 12:05

Oluwatomilola had a problem deploying to external March 11, 2026 12:05 — with GitHub Actions Failure

Oluwatomilola had a problem deploying to external March 11, 2026 14:03 — with GitHub Actions Failure

Oluwatomilola had a problem deploying to external March 11, 2026 14:47 — with GitHub Actions Failure

Oluwatomilola force-pushed the feat-savings-integration branch from 5fe3994 to 52390d5 Compare March 11, 2026 15:15

Oluwatomilola had a problem deploying to external March 11, 2026 15:16 — with GitHub Actions Failure

Oluwatomilola temporarily deployed to external March 11, 2026 15:18 — with GitHub Actions Inactive

Oluwatomilola commented Mar 23, 2026

View reviewed changes

Oluwatomilola had a problem deploying to preview March 26, 2026 15:30 — with GitHub Actions Failure

Oluwatomilola temporarily deployed to external March 30, 2026 20:11 — with GitHub Actions Inactive

Oluwatomilola deployed to preview April 2, 2026 17:21 — with GitHub Actions View deployment

Oluwatomilola force-pushed the feat-savings-integration branch from 6ccb13d to 0732551 Compare April 2, 2026 22:59

Oluwatomilola temporarily deployed to external April 2, 2026 22:59 — with GitHub Actions Inactive

Oluwatomilola deployed to preview April 3, 2026 11:48 — with GitHub Actions View deployment

L03TJ3 requested changes Apr 3, 2026

View reviewed changes

Oluwatomilola force-pushed the feat-savings-integration branch from 0732551 to 4706a65 Compare April 7, 2026 14:10

Oluwatomilola had a problem deploying to external April 7, 2026 14:10 — with GitHub Actions Failure

Oluwatomilola marked this pull request as draft April 7, 2026 14:11

Oluwatomilola had a problem deploying to external April 13, 2026 17:06 — with GitHub Actions Failure

Oluwatomilola had a problem deploying to external April 13, 2026 19:11 — with GitHub Actions Failure

Oluwatomilola commented Apr 13, 2026

View reviewed changes

Oluwatomilola marked this pull request as ready for review April 13, 2026 20:32

github-project-automation Bot moved this from In Review to In Progress in GoodBounties Apr 24, 2026

Oluwatomilola requested a deployment to external April 24, 2026 22:23 — with GitHub Actions Waiting

Oluwatomilola closed this Apr 25, 2026

Oluwatomilola force-pushed the feat-savings-integration branch from b3e79f5 to 8b4f4ff Compare April 25, 2026 03:02

Oluwatomilola requested a deployment to external April 25, 2026 03:03 — with GitHub Actions Waiting

Oluwatomilola reopened this Apr 25, 2026

Oluwatomilola requested a deployment to external April 25, 2026 14:49 — with GitHub Actions Waiting

Oluwatomilola requested a review from pheobeayo April 27, 2026 05:37

Oluwatomilola commented Apr 27, 2026

View reviewed changes

Oluwatomilola requested a deployment to external April 27, 2026 14:02 — with GitHub Actions Waiting

pheobeayo suggested changes Apr 27, 2026

View reviewed changes

Oluwatomilola closed this Apr 27, 2026

Oluwatomilola force-pushed the feat-savings-integration branch from 6575531 to d7d7a1b Compare April 27, 2026 15:26

Oluwatomilola requested a deployment to external April 27, 2026 15:26 — with GitHub Actions Waiting

fix

0576b45

Oluwatomilola reopened this Apr 27, 2026

Oluwatomilola requested a deployment to external April 27, 2026 21:25 — with GitHub Actions Waiting

Oluwatomilola requested a review from pheobeayo April 29, 2026 02:35

Oluwatomilola mentioned this pull request Apr 30, 2026

Feat Integrate Ubeswaps saving widget. #634

Merged

12 tasks

L03TJ3 closed this May 8, 2026

Conversation

Oluwatomilola commented Mar 3, 2026 • edited by sourcery-ai Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

How Has This Been Tested?

Checklist:

Summary by Sourcery

Uh oh!

sourcery-ai Bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Oluwatomilola left a comment

Choose a reason for hiding this comment

Uh oh!

L03TJ3 commented Mar 30, 2026

Uh oh!

Oluwatomilola commented Mar 30, 2026

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

L03TJ3 commented Apr 10, 2026

Uh oh!

Oluwatomilola commented Apr 10, 2026

Uh oh!

Oluwatomilola left a comment

Choose a reason for hiding this comment

Uh oh!

pheobeayo commented Apr 25, 2026

Uh oh!

Oluwatomilola commented Apr 27, 2026

Uh oh!

Oluwatomilola left a comment

Choose a reason for hiding this comment

Uh oh!

pheobeayo left a comment

Choose a reason for hiding this comment

Uh oh!

L03TJ3 commented Apr 27, 2026

Uh oh!

Oluwatomilola commented Apr 27, 2026

Uh oh!

pheobeayo commented Apr 27, 2026

Uh oh!

Oluwatomilola commented Apr 27, 2026

Uh oh!

Oluwatomilola commented Apr 29, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

pheobeayo commented Apr 29, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Oluwatomilola commented Mar 3, 2026 •

edited by sourcery-ai Bot

Loading

Oluwatomilola commented Apr 29, 2026 •

edited

Loading