Chore: Prod Release

- improve design for buy/claim page - update menu with new items / style changes - wallet-connect fixes to properly support name-spaces - show conversion properly instead of initial placeholders Merge branch 'staging' of github.com:GoodDollar/GoodProtocolUI into production
GoodDollar · Dec 7, 2023 · a9a5801 · a9a5801 · vercel · Dec 7, 2023
2 parents 946be24 + f32c875
commit a9a5801
Show file tree

Hide file tree

Showing 41 changed files with 2,337 additions and 733 deletions.
diff --git a/package.json b/package.json
@@ -206,10 +206,10 @@
     },
     "dependencies": {
         "@babel/runtime": "^7.18.9",
-        "@gooddollar/good-design": "^0.1.20",
+        "@gooddollar/good-design": "^0.1.28",
         "@gooddollar/goodprotocol": "^2.0.22",
         "@gooddollar/web3sdk": "^0.1.26",
-        "@gooddollar/web3sdk-v2": "^0.2.8",
+        "@gooddollar/web3sdk-v2": "^0.2.9",
         "@headlessui/react": "1.5.0",
         "@kimafinance/kima-transaction-widget": "^1.1.42-beta.1",
         "@lingui/format-json": "^4.0.0",
@@ -224,7 +224,7 @@
         "@web3-onboard/core": "^2.20.5",
         "@web3-onboard/injected-wallets": "^2.10.1",
         "@web3-onboard/react": "^2.8.10",
-        "@web3-onboard/walletconnect": "^2.4.7",
+        "@web3-onboard/walletconnect": "^2.5.1",
         "@web3-onboard/walletlink": "^2.1.7",
         "amplitude-js": "^8.21.2",
         "dotenv": "^16.3.1",

diff --git a/src/components/BlockNativeOnboard/index.tsx b/src/components/BlockNativeOnboard/index.tsx
@@ -11,7 +11,6 @@ import useSendAnalyticsData from '../../hooks/useSendAnalyticsData'
 
 import { connectOptions, torus } from 'connectors'
 import { getNetworkEnv } from 'utils/env'
-import { useSelectedChain } from 'state/application/hooks'
 
 /**
  * Just a button to trigger the onboard connect modal.
@@ -79,13 +78,12 @@ export const OnboardConnectButton: FC = () => {
 
 // wrapper so we can pass the selected chain
 export const OnboardProviderWrapper = ({ children }) => {
-    const { selectedChain } = useSelectedChain()
     const network = getNetworkEnv()
     return (
         <OnboardProvider
             options={connectOptions}
             wallets={{ custom: [torus] }}
-            wc2Options={{ requiredChains: [selectedChain] }}
+            // 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={network}
         >
             {children}

diff --git a/src/components/SideBar.tsx b/src/components/SideBar.tsx
@@ -11,6 +11,7 @@ import {
 import { t } from '@lingui/macro'
 import { useLingui } from '@lingui/react'
 import { useLocation } from 'react-router-dom'
+import { SlideDownTab } from '@gooddollar/good-design'
 
 import WalletBalance from 'components/WalletBalance'
 import { ReactComponent as WalletBalanceIcon } from '../assets/images/walletBalanceIcon.svg'
@@ -24,6 +25,7 @@ import LanguageSwitch from './LanguageSwitch'
 import { NavLink } from './Link'
 import usePromise from '../hooks/usePromise'
 import { ExternalLink } from 'theme'
+import { SubMenuItems } from './StyledMenu/SubMenu'
 
 const SocialsLink: React.FC<{ network: string; logo: string; url: string }> = ({ network, logo, url }) => (
     <a href={url} target="_blank" className="flex items-center space-x-2" rel="noreferrer">
@@ -151,32 +153,82 @@ export default function SideBar({ mobile, closeSidebar }: { mobile?: boolean; cl
     const externalLinks = useMemo(
         () => [
             {
-                label: i18n._(t`Wallet`),
-                url: 'https://wallet.gooddollar.org',
-                dataAttr: 'wallet',
-                withIcon: true,
-                show: true,
+                subMenuTitle: 'Regular',
+                items: [
+                    {
+                        label: i18n._(t`Donate`),
+                        url: 'https://gooddollar.notion.site/Donate-to-a-G-Cause-e7d31fb67bb8494abb3a7989ebe6f181',
+                        dataAttr: 'donate',
+                        withIcon: true,
+                        show: true,
+                    },
+                    {
+                        label: i18n._(t`Save G$`),
+                        url: 'https://app.halofi.me/#/challenges?tokensymbol=gd',
+                        dataAttr: 'save',
+                        withIcon: true,
+                        show: true,
+                    },
+                    {
+                        label: i18n._(t`Dapps`),
+                        url: 'https://example.com',
+                        dataAttr: 'squid',
+                        withIcon: true,
+                        show: false, // will be added at a later stage
+                    },
+                ],
             },
             {
-                label: i18n._(t`Fuse Bridge`),
-                url: 'https://app.voltage.finance/index.html#/bridge',
-                dataAttr: 'bridge',
-                withIcon: true,
-                show: true,
+                subMenuTitle: 'Bridges',
+                items: [
+                    {
+                        label: i18n._(t`Squid Router`),
+                        url: 'https://v2.app.squidrouter.com/',
+                        dataAttr: 'squid',
+                        withIcon: true,
+                        show: true,
+                    },
+                    {
+                        label: i18n._(t`Fuse Bridge`),
+                        url: 'https://app.voltage.finance/index.html#/bridge',
+                        dataAttr: 'bridge',
+                        withIcon: true,
+                        show: true,
+                    },
+                ],
             },
             {
-                label: i18n._(t`Docs`),
-                url: 'https://docs.gooddollar.org',
-                dataAttr: 'docs',
-                withIcon: true,
-                show: true,
-            },
-            {
-                label: i18n._(t`Good Airdrop`),
-                url: 'https://airdrop.gooddollar.org',
-                dataAttr: 'airdrop',
-                withIcon: true,
-                show: true,
+                subMenuTitle: 'More',
+                items: [
+                    {
+                        label: i18n._(t`GoodWallet`),
+                        url: 'https://wallet.gooddollar.org',
+                        dataAttr: 'wallet',
+                        withIcon: true,
+                        show: true,
+                    },
+                    {
+                        label: i18n._(t`Dashboard`),
+                        url: 'https://dashboard.gooddollar.org/',
+                        dataAttr: 'dashboard',
+                        withIcon: true,
+                        show: true,
+                    },
+                    {
+                        label: i18n._(t`Docs`),
+                        url: 'https://docs.gooddollar.org',
+                        dataAttr: 'docs',
+                        withIcon: true,
+                        show: true,
+                    },
+                    {
+                        label: i18n._(t`Good Airdrop`),
+                        url: 'https://airdrop.gooddollar.org',
+                        dataAttr: 'airdrop',
+                        withIcon: true,
+                        show: true,
+                    },
+                ],
             },
         ],
         [i18n]
@@ -185,9 +237,9 @@ export default function SideBar({ mobile, closeSidebar }: { mobile?: boolean; cl
     const internalLinks = useMemo(
         () => [
             {
-                route: '/goodid',
-                text: 'GoodID',
-                show: isWhitelisted,
+                route: '/buy',
+                text: 'Buy G$',
+                show: isBuyGd, // todo: add post-hog feature flags for pages
             },
             {
                 route: '/claim',
@@ -209,25 +261,21 @@ export default function SideBar({ mobile, closeSidebar }: { mobile?: boolean; cl
                 text: 'Portfolio',
                 show: true,
             },
+            {
+                route: '/goodid',
+                text: 'GoodID',
+                show: isWhitelisted,
+            },
+
             {
                 route: '/bridge',
                 text: 'Bridge',
-                show: import.meta.env.REACT_APP_CELO_PHASE_3,
+                show: false,
             },
             {
                 route: '/microbridge',
                 text: 'Micro Bridge',
-                show: import.meta.env.REACT_APP_CELO_PHASE_3,
-            },
-            {
-                route: '/dashboard',
-                text: 'Dashboard',
-                show: true,
-            },
-            {
-                route: '/buy',
-                text: 'Buy G$',
-                show: isBuyGd, // todo: use post-hog feature flag
+                show: false,
             },
         ],
         [isWhitelisted, pathname]
@@ -268,11 +316,29 @@ export default function SideBar({ mobile, closeSidebar }: { mobile?: boolean; cl
                             </NavLink>
                         ))}
 
-                    {externalLinks
-                        .filter((external) => external.show)
-                        .map(({ label, url, dataAttr, withIcon }) => (
-                            <ExternalLink key={label} label={label} url={url} dataAttr={dataAttr} withIcon={withIcon} />
-                        ))}
+                    {externalLinks.map((subMenu) =>
+                        subMenu.subMenuTitle === 'Regular' ? (
+                            <SubMenuItems items={subMenu.items} />
+                        ) : (
+                            <SlideDownTab
+                                key={subMenu.subMenuTitle}
+                                tabTitle={subMenu.subMenuTitle}
+                                viewInteraction={{ hover: { backgroundColor: 'primary:alpha.10', borderRadius: 6 } }}
+                                styles={{
+                                    button: {
+                                        borderRadius: 12,
+                                    },
+                                    content: { alignItems: 'flex-start', paddingLeft: 4 },
+                                }}
+                                arrowSmall
+                            >
+                                <SubMenuItems
+                                    items={subMenu.items}
+                                    styles={{ alignItems: 'flex-start', paddingLeft: 4 }}
+                                />
+                            </SlideDownTab>
+                        )
+                    )}
                 </ScrollView>
 
                 <div className="flex flex-col justify-center gap-3 mt-2.5">

diff --git a/src/components/StyledMenu/SubMenu.tsx b/src/components/StyledMenu/SubMenu.tsx
@@ -0,0 +1,16 @@
+import React from 'react'
+import { ExternalLink } from 'theme'
+
+export const SubMenuItems = ({ items, styles }: { items: any; styles?: any }) =>
+    items
+        .filter((ext) => ext.show)
+        .map(({ label, url, dataAttr, withIcon }) => (
+            <ExternalLink
+                key={label}
+                label={label}
+                url={url}
+                dataAttr={dataAttr}
+                withIcon={withIcon}
+                customStyles={styles}
+            />
+        ))