Merge remote-tracking branch 'origin/main' into urgent-redemptions

Author: danielattilasimon

.nvmrc

@@ -0,0 +1 @@
+20

README.md

@@ -317,6 +317,15 @@ Enable a banner warning users when one or more branches are in Safety Mode. Opti
 NEXT_PUBLIC_SAFETY_MODE_CHECK=false
 ```
 
+### `NEXT_PUBLIC_SHOW_DATA_SOURCES`
+
+Let the user override RPC and subgraph URLs. When enabled, a "Data Sources" link is shown in the app's footer that, when clicked, opens a configuration dialog box. Optional. Defaults to false.
+
+```dosini
+# Example
+NEXT_PUBLIC_SHOW_DATA_SOURCES=true
+```
+
 ### `NEXT_PUBLIC_SUBGRAPH_URL`
 
 URL for The Graph protocol subgraph queries.

frontend/app/README.md

@@ -8,6 +8,7 @@ import { BreakpointName } from "@/src/breakpoints";
 import { About } from "@/src/comps/About/About";
 import { AppLayout } from "@/src/comps/AppLayout/AppLayout";
 import { Blocking } from "@/src/comps/Blocking/Blocking";
+import { DataSources } from "@/src/comps/DataSources/DataSources";
 import content from "@/src/content";
 import { VERCEL_ANALYTICS } from "@/src/env";
 import { Ethereum } from "@/src/services/Ethereum";
@@ -42,21 +43,23 @@ export default function Layout({
         <ReactQuery>
           <UiKit>
             <StoredState>
-              <BreakpointName>
-                <Ethereum>
-                  <IndicatorManager>
-                    <Blocking>
-                      <TransactionFlow>
-                        <About>
-                          <AppLayout>
-                            {children}
-                          </AppLayout>
-                        </About>
-                      </TransactionFlow>
-                    </Blocking>
-                  </IndicatorManager>
-                </Ethereum>
-              </BreakpointName>
+              <DataSources>
+                <BreakpointName>
+                  <Ethereum>
+                    <IndicatorManager>
+                      <Blocking>
+                        <TransactionFlow>
+                          <About>
+                            <AppLayout>
+                              {children}
+                            </AppLayout>
+                          </About>
+                        </TransactionFlow>
+                      </Blocking>
+                    </IndicatorManager>
+                  </Ethereum>
+                </BreakpointName>
+              </DataSources>
             </StoredState>
           </UiKit>
         </ReactQuery>

frontend/app/public/favicon.svg

@@ -3,13 +3,14 @@ import type { Address, TokenSymbol } from "@/src/types";
 import { Amount } from "@/src/comps/Amount/Amount";
 import { LinkTextButton } from "@/src/comps/LinkTextButton/LinkTextButton";
 import { Logo } from "@/src/comps/Logo/Logo";
-import { ACCOUNT_SCREEN, CHAIN_BLOCK_EXPLORER, CONTRACT_BOLD_TOKEN, CONTRACT_LQTY_TOKEN } from "@/src/env";
+import { useDataSources } from "@/src/comps/DataSources/DataSources";
+import { ACCOUNT_SCREEN, CHAIN_BLOCK_EXPLORER, CONTRACT_BOLD_TOKEN, CONTRACT_LQTY_TOKEN, SHOW_DATA_SOURCES } from "@/src/env";
 import { fmtnum } from "@/src/formatting";
 import { useLiquityStats } from "@/src/liquity-utils";
 import { usePrice } from "@/src/services/Prices";
 import { useAccount } from "@/src/wagmi-utils";
 import { css } from "@/styled-system/css";
-import { shortenAddress, TokenIcon } from "@liquity2/uikit";
+import { shortenAddress, TextButton, TokenIcon } from "@liquity2/uikit";
 import { blo } from "blo";
 import Image from "next/image";
 import { AboutButton } from "./AboutButton";
@@ -20,9 +21,11 @@ const ENABLE_REDEEM = true;
 export function BottomBar() {
   const account = useAccount();
   const stats = useLiquityStats();
+  const dataSources = useDataSources();
 
   const tvl = stats.data?.totalValueLocked;
   const boldSupply = stats.data?.totalBoldSupply;
+  const isUsingCustomDataSources = dataSources.isUsingCustomRpc || dataSources.isUsingCustomSubgraph;
 
   return (
     <div
@@ -161,6 +164,30 @@ export function BottomBar() {
                 })}
               />
             )}
+            {SHOW_DATA_SOURCES && (
+              <TextButton
+                label={
+                  <div
+                    className={css({
+                      display: "flex",
+                      alignItems: "center",
+                      gap: 4,
+                      whiteSpace: "nowrap",
+                    })}
+                  >
+                    {isUsingCustomDataSources ? "Custom Data Sources" : "Data Sources"}
+                  </div>
+                }
+                onClick={() => dataSources.openModal()}
+                style={{ fontSize: 12 }}
+                className={css({
+                  color: isUsingCustomDataSources ? "positive" : "content",
+                  borderRadius: 4,
+                  _focusVisible: { outline: "2px solid token(colors.focused)" },
+                  _active: { translate: "0 1px" },
+                })}
+              />
+            )}
           </div>
           <div
             className={css({