Skip to content

I
interface
Commit 134879e4 authored by Vignesh Mohankumar's avatar Vignesh Mohankumar Committed by GitHub
Browse files
Options

feat: initial FeatureFlagProvider (#4248) 

* initial

* add to index

* show more logic

* split up

* nvm combine

* combine more

* loading state for the app

* no conditional

* rm var

* comment

* move comment

* add control specifically
parent 1f2ffa16
Hide whitespace changes
Inline Side-by-side
Showing with 158 additions and 59 deletions
src/featureFlag/index.tsx 0 → 100644
View file @ 134879e4
import { createContext, ReactNode, useContext } from 'react'
interface FeatureFlagsContextType {
isLoaded: boolean
flags: Record<string, string>
}
const FeatureFlagContext = createContext<FeatureFlagsContextType>({ isLoaded: false, flags: {} })
export function useFeatureFlagsContext(): FeatureFlagsContextType {
const context = useContext(FeatureFlagContext)
if (!context) {
throw Error('Feature flag hooks can only be used by children of FeatureFlagProvider.')
} else {
return context
}
}
export function FeatureFlagsProvider({ children }: { children: ReactNode }) {
// TODO(vm): `isLoaded` to `true` so `App.tsx` will render. Later, this will be dependent on
// flags loading from Amplitude, with a timeout.
const value = {
isLoaded: true,
flags: {
phase0: 'control',
phase1: 'control',
},
}
return <FeatureFlagContext.Provider value={value}>{children}</FeatureFlagContext.Provider>
}
export function useFeatureFlagsIsLoaded(): boolean {
return useFeatureFlagsContext().isLoaded
}
// feature flag hooks
enum Phase0Variant {
Control = 'Control',
Enabled = 'Enabled',
}
export function usePhase0Flag(): Phase0Variant {
switch (useFeatureFlagsContext().flags['phase0']) {
case 'enabled':
return Phase0Variant.Enabled
case 'control':
default:
return Phase0Variant.Control
}
}
enum Phase1Variant {
Control = 'Control',
Enabled = 'Enabled',
}
export function usePhase1Flag(): Phase1Variant {
switch (useFeatureFlagsContext().flags['phase1']) {
case 'enabled':
return Phase1Variant.Enabled
case 'control':
default:
return Phase1Variant.Control
}
}
src/index.tsx
View file @ 134879e4
......@@ -3,6 +3,7 @@ import 'inter-ui'
import 'polyfills'
import 'components/analytics'
import { FeatureFlagsProvider } from 'featureFlag'
import { BlockNumberProvider } from 'lib/hooks/useBlockNumber'
import { MulticallUpdater } from 'lib/state/multicall'
import { StrictMode } from 'react'
......@@ -47,21 +48,23 @@ const container = document.getElementById('root') as HTMLElement
createRoot(container).render(
<StrictMode>
<Provider store={store}>
<HashRouter>
<LanguageProvider>
<Web3Provider>
<Blocklist>
<BlockNumberProvider>
<Updaters />
<ThemeProvider>
<ThemedGlobalStyle />
<App />
</ThemeProvider>
</BlockNumberProvider>
</Blocklist>
</Web3Provider>
</LanguageProvider>
</HashRouter>
<FeatureFlagsProvider>
<HashRouter>
<LanguageProvider>
<Web3Provider>
<Blocklist>
<BlockNumberProvider>
<Updaters />
<ThemeProvider>
<ThemedGlobalStyle />
<App />
</ThemeProvider>
</BlockNumberProvider>
</Blocklist>
</Web3Provider>
</LanguageProvider>
</HashRouter>
</FeatureFlagsProvider>
</Provider>
</StrictMode>
)
......
src/pages/App.tsx
View file @ 134879e4
......@@ -3,6 +3,7 @@ import { PageName } from 'components/AmplitudeAnalytics/constants'
import { Trace } from 'components/AmplitudeAnalytics/Trace'
import Loader from 'components/Loader'
import TopLevelModals from 'components/TopLevelModals'
import { useFeatureFlagsIsLoaded } from 'featureFlag'
import ApeModeQueryParamReader from 'hooks/useApeModeQueryParamReader'
import { lazy, Suspense } from 'react'
import { useEffect } from 'react'
......@@ -81,8 +82,11 @@ function getCurrentPageFromLocation(locationPathname: string): PageName | undefi
}
export default function App() {
const isLoaded = useFeatureFlagsIsLoaded()
const { pathname } = useLocation()
const currentPage = getCurrentPageFromLocation(pathname)
useAnalyticsReporter()
initializeAnalytics()
......@@ -104,48 +108,52 @@ export default function App() {
<Polling />
<TopLevelModals />
<Suspense fallback={<Loader />}>
<Routes>
<Route path="vote/*" element={<Vote />} />
<Route path="create-proposal" element={<Navigate to="/vote/create-proposal" replace />} />
<Route path="claim" element={<OpenClaimAddressModalAndRedirectToSwap />} />
<Route path="uni" element={<Earn />} />
<Route path="uni/:currencyIdA/:currencyIdB" element={<Manage />} />
<Route path="send" element={<RedirectPathToSwapOnly />} />
<Route path="swap/:outputCurrency" element={<RedirectToSwap />} />
<Route path="swap" element={<Swap />} />
<Route path="pool/v2/find" element={<PoolFinder />} />
<Route path="pool/v2" element={<PoolV2 />} />
<Route path="pool" element={<Pool />} />
<Route path="pool/:tokenId" element={<PositionPage />} />
<Route path="add/v2" element={<RedirectDuplicateTokenIdsV2 />}>
<Route path=":currencyIdA" />
<Route path=":currencyIdA/:currencyIdB" />
</Route>
<Route path="add" element={<RedirectDuplicateTokenIds />}>
{/* this is workaround since react-router-dom v6 doesn't support optional parameters any more */}
<Route path=":currencyIdA" />
<Route path=":currencyIdA/:currencyIdB" />
<Route path=":currencyIdA/:currencyIdB/:feeAmount" />
</Route>
<Route path="increase" element={<AddLiquidity />}>
<Route path=":currencyIdA" />
<Route path=":currencyIdA/:currencyIdB" />
<Route path=":currencyIdA/:currencyIdB/:feeAmount" />
<Route path=":currencyIdA/:currencyIdB/:feeAmount/:tokenId" />
</Route>
<Route path="remove/v2/:currencyIdA/:currencyIdB" element={<RemoveLiquidity />} />
<Route path="remove/:tokenId" element={<RemoveLiquidityV3 />} />
<Route path="migrate/v2" element={<MigrateV2 />} />
<Route path="migrate/v2/:address" element={<MigrateV2Pair />} />
<Route path="*" element={<RedirectPathToSwapOnly />} />
</Routes>
{isLoaded ? (
<Routes>
<Route path="vote/*" element={<Vote />} />
<Route path="create-proposal" element={<Navigate to="/vote/create-proposal" replace />} />
<Route path="claim" element={<OpenClaimAddressModalAndRedirectToSwap />} />
<Route path="uni" element={<Earn />} />
<Route path="uni/:currencyIdA/:currencyIdB" element={<Manage />} />
<Route path="send" element={<RedirectPathToSwapOnly />} />
<Route path="swap/:outputCurrency" element={<RedirectToSwap />} />
<Route path="swap" element={<Swap />} />
<Route path="pool/v2/find" element={<PoolFinder />} />
<Route path="pool/v2" element={<PoolV2 />} />
<Route path="pool" element={<Pool />} />
<Route path="pool/:tokenId" element={<PositionPage />} />
<Route path="add/v2" element={<RedirectDuplicateTokenIdsV2 />}>
<Route path=":currencyIdA" />
<Route path=":currencyIdA/:currencyIdB" />
</Route>
<Route path="add" element={<RedirectDuplicateTokenIds />}>
{/* this is workaround since react-router-dom v6 doesn't support optional parameters any more */}
<Route path=":currencyIdA" />
<Route path=":currencyIdA/:currencyIdB" />
<Route path=":currencyIdA/:currencyIdB/:feeAmount" />
</Route>
<Route path="increase" element={<AddLiquidity />}>
<Route path=":currencyIdA" />
<Route path=":currencyIdA/:currencyIdB" />
<Route path=":currencyIdA/:currencyIdB/:feeAmount" />
<Route path=":currencyIdA/:currencyIdB/:feeAmount/:tokenId" />
</Route>
<Route path="remove/v2/:currencyIdA/:currencyIdB" element={<RemoveLiquidity />} />
<Route path="remove/:tokenId" element={<RemoveLiquidityV3 />} />
<Route path="migrate/v2" element={<MigrateV2 />} />
<Route path="migrate/v2/:address" element={<MigrateV2Pair />} />
<Route path="*" element={<RedirectPathToSwapOnly />} />
</Routes>
) : (
<Loader />
)}
</Suspense>
<Marginer />
</BodyWrapper>
......
yarn.lock
View file @ 134879e4
......@@ -12,6 +12,13 @@
"@amplitude/ua-parser-js" "^0.7.31"
tslib "^2.3.1"
"@amplitude/analytics-connector@1.4.5":
version "1.4.5"
resolved "https://registry.yarnpkg.com/@amplitude/analytics-connector/-/analytics-connector-1.4.5.tgz#07e9375101332bd8b6f15e39e70f31f287e87ad0"
integrity sha512-ELAP6ivg+13uSk+TOirGZE/92M+tTbeiQ/i7eXgDO4Hiy00Abf/UxO/rp9WovtxCyeFYTILrujEYxPv5cRQmFw==
dependencies:
"@amplitude/ua-parser-js" "0.7.31"
"@amplitude/analytics-core@^0.4.1":
version "0.4.1"
resolved "https://registry.yarnpkg.com/@amplitude/analytics-core/-/analytics-core-0.4.1.tgz#0e1a7ae6470bcec277a0389e16dd110519f6750e"
......@@ -25,7 +32,16 @@
resolved "https://registry.yarnpkg.com/@amplitude/analytics-types/-/analytics-types-0.3.0.tgz#3626f2907e4dd353f0ca3a21b847d7560a1c4da9"
integrity sha512-Hu/emt6mEpSGmOnLyqZGe75a5BNH3j9WJWBDFMBOZ1gLsbrxKtrb6w3EQy6yRROZ8Uyn04wC0veVUYyETwH3vg==
"@amplitude/ua-parser-js@^0.7.31":
"@amplitude/experiment-js-client@^1.5.4":
version "1.5.4"
resolved "https://registry.yarnpkg.com/@amplitude/experiment-js-client/-/experiment-js-client-1.5.4.tgz#a1cb12282d368b0373db66954c5263a510c97e87"
integrity sha512-ABFR46yibEByKIr2rFXPQwYLnvtVRjFgCSGZuh4K/MwBflGwHu+KAu6beJl+Pt/vZXo2Ak7kYip5LikstTqsgA==
dependencies:
"@amplitude/analytics-connector" "1.4.5"
base64-js "1.5.1"
unfetch "4.1.0"
"@amplitude/ua-parser-js@0.7.31", "@amplitude/ua-parser-js@^0.7.31":
version "0.7.31"
resolved "https://registry.yarnpkg.com/@amplitude/ua-parser-js/-/ua-parser-js-0.7.31.tgz#749bf7cb633cfcc7ff3c10805bad7c5f6fbdbc61"
integrity sha512-+z8UGRaj13Pt5NDzOnkTBy49HE2CX64jeL0ArB86HAtilpnfkPB7oqkigN7Lf2LxscMg4QhFD7mmCfedh3rqTg==
......@@ -5810,7 +5826,7 @@ base-x@^3.0.2:
dependencies:
safe-buffer "^5.0.1"
base64-js@^1.0.2, base64-js@^1.3.1:
base64-js@1.5.1, base64-js@^1.0.2, base64-js@^1.3.1:
version "1.5.1"
resolved "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz"
integrity sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==
......@@ -17482,6 +17498,11 @@ unc-path-regex@^0.1.2:
resolved "https://registry.yarnpkg.com/unc-path-regex/-/unc-path-regex-0.1.2.tgz#e73dd3d7b0d7c5ed86fbac6b0ae7d8c6a69d50fa"
integrity sha1-5z3T17DXxe2G+6xrCufYxqadUPo=
unfetch@4.1.0:
version "4.1.0"
resolved "https://registry.yarnpkg.com/unfetch/-/unfetch-4.1.0.tgz#6ec2dd0de887e58a4dee83a050ded80ffc4137db"
integrity sha512-crP/n3eAPUJxZXM9T80/yv0YhkTEx2K1D3h7D1AJM6fzsWZrxdyRuLN0JH/dkZh1LNH8LxCnBzoPFCPbb2iGpg==
unherit@^1.0.4:
version "1.1.3"
resolved "https://registry.npmjs.org/unherit/-/unherit-1.1.3.tgz"
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment