Add Matcha referral tracking with dynamic community config

src/app/layout.tsx

@@ -186,7 +186,7 @@ export default async function RootLayout({
         }
       >
         <SpeedInsights />
-        <Providers>{sidebarLayout(children, systemConfig)}</Providers>
+        <Providers systemConfig={systemConfig}>{sidebarLayout(children, systemConfig)}</Providers>
       </body>
     </html>
   );

src/common/lib/utils/links.ts

@@ -13,9 +13,10 @@ export function getGeckoIframe(address: Address, network: EtherScanChainName) {
   return `https://www.geckoterminal.com/${getGeckoNetwork(network)}/pools/${address}?embed=1&info=0&swaps=0&grayscale=0&light_chart=1`;
 }
 
-export function getMatchaUrl(address: Address, network: EtherScanChainName) {
+export function getMatchaUrl(address: Address, network: EtherScanChainName, ref?: string) {
   const ethAddress = "0xeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee";
-  return `https://matcha.xyz/trade?sellAddress=${ethAddress}&buyAddress=${address}&sellChain=${network}&buyChain=${EtherScanChains[network]}`;
+  const matchaRef = ref || "nounspace";
+  return `https://matcha.xyz/trade?sellAddress=${ethAddress}&buyAddress=${address}&sellChain=${network}&buyChain=${EtherScanChains[network]}&ref=${matchaRef}`;
 }
 
 export function getDexScreenerUrl(

src/common/providers/SystemConfigProvider.tsx

@@ -0,0 +1,27 @@
+"use client";
+
+import React, { createContext, useContext } from "react";
+import { SystemConfig } from "@/config";
+
+const SystemConfigContext = createContext<SystemConfig | null>(null);
+
+export const SystemConfigProvider: React.FC<{
+  children: React.ReactNode;
+  systemConfig: SystemConfig;
+}> = ({ children, systemConfig }) => {
+  return (
+    <SystemConfigContext.Provider value={systemConfig}>
+      {children}
+    </SystemConfigContext.Provider>
+  );
+};
+
+export const useSystemConfig = (): SystemConfig => {
+  const context = useContext(SystemConfigContext);
+  if (!context) {
+    throw new Error("useSystemConfig must be used within SystemConfigProvider");
+  }
+  return context;
+};
+
+export default SystemConfigProvider;

src/common/providers/index.tsx

@@ -17,6 +17,8 @@ import MobilePreviewProvider from "./MobilePreviewProvider";
 import { SharedDataProvider } from "./SharedDataProvider";
 import { MiniKitContextProvider } from "./MiniKitProvider";
 import { GlobalErrorHandler } from "./GlobalErrorHandler";
+import { SystemConfigProvider } from "./SystemConfigProvider";
+import { SystemConfig } from "@/config";
 
 const RarelyUpdatedProviders = React.memo(
   function RarelyUpdatedProviders({
@@ -38,33 +40,41 @@ const RarelyUpdatedProviders = React.memo(
   },
 );
 
-export default function Providers({ children }: { children: React.ReactNode }) {
+export default function Providers({
+  children,
+  systemConfig,
+}: {
+  children: React.ReactNode;
+  systemConfig: SystemConfig;
+}) {
   return (
     <>
       <GlobalErrorHandler />
-      <VersionCheckProivder>
-        <Privy>
-          <Query>
-            <Wagmi>
-              <MiniKitContextProvider>
-                <Theme>
-                  <AppStoreProvider>
-                    <UserThemeProvider>
-                      <AuthenticatorProvider>
-                        <LoggedInStateProvider>
-                          <SidebarContextProvider>
-                            <RarelyUpdatedProviders>{children}</RarelyUpdatedProviders>
-                          </SidebarContextProvider>
-                        </LoggedInStateProvider>
-                      </AuthenticatorProvider>
-                    </UserThemeProvider>
-                  </AppStoreProvider>
-                </Theme>
-              </MiniKitContextProvider>
-            </Wagmi>
-          </Query>
-        </Privy>
-      </VersionCheckProivder>
+      <SystemConfigProvider systemConfig={systemConfig}>
+        <VersionCheckProivder>
+          <Privy>
+            <Query>
+              <Wagmi>
+                <MiniKitContextProvider>
+                  <Theme>
+                    <AppStoreProvider>
+                      <UserThemeProvider>
+                        <AuthenticatorProvider>
+                          <LoggedInStateProvider>
+                            <SidebarContextProvider>
+                              <RarelyUpdatedProviders>{children}</RarelyUpdatedProviders>
+                            </SidebarContextProvider>
+                          </LoggedInStateProvider>
+                        </AuthenticatorProvider>
+                      </UserThemeProvider>
+                    </AppStoreProvider>
+                  </Theme>
+                </MiniKitContextProvider>
+              </Wagmi>
+            </Query>
+          </Privy>
+        </VersionCheckProivder>
+      </SystemConfigProvider>
     </>
   );
 }

src/fidgets/swap/Swap.tsx

@@ -11,6 +11,7 @@ import {
 import { BsArrowRepeat } from "react-icons/bs";
 import { mobileStyleSettings, WithMargin } from "../helpers";
 import ShadowSelector from "@/common/components/molecules/ShadowSelector";
+import { useSystemConfig } from "@/common/providers/SystemConfigProvider";
 
 type MatchaFidgetSettings = {
   defaultSellToken: string;
@@ -131,10 +132,12 @@ const Swap: React.FC<FidgetArgs<MatchaFidgetSettings>> = ({
     size = 0.8,
   },
 }) => {
+  const systemConfig = useSystemConfig();
+  const matchaRef = systemConfig.brand.displayName;
   const matchaBaseUrl = "https://matcha.xyz/trade";
   const [url, setUrl] = React.useState("");
 
-  const buildMatchaUrl = () => {
+  const buildMatchaUrl = React.useCallback(() => {
     const params = new URLSearchParams();
     if (defaultSellToken) params.append("sellAddress", defaultSellToken);
     if (defaultBuyToken) params.append("buyAddress", defaultBuyToken);
@@ -146,18 +149,13 @@ const Swap: React.FC<FidgetArgs<MatchaFidgetSettings>> = ({
     }
     if (optionalFeeRecipient)
       params.append("feeRecipient", optionalFeeRecipient);
+    params.append("ref", matchaRef);
     return `${matchaBaseUrl}?${params.toString()}`;
-  };
+  }, [defaultSellToken, defaultBuyToken, fromChain, toChain, optionalFeeRecipient, matchaRef]);
 
   React.useEffect(() => {
     setUrl(buildMatchaUrl());
-  }, [
-    defaultSellToken,
-    defaultBuyToken,
-    fromChain,
-    toChain,
-    optionalFeeRecipient,
-  ]);
+  }, [buildMatchaUrl]);
 
   const scaleValue = size;