From cef770dda193c99284102a2f44577908005b3561 Mon Sep 17 00:00:00 2001
From: Jake <95890768+cb-jake@users.noreply.github.com>
Date: Thu, 10 Oct 2024 13:19:13 -0600
Subject: [PATCH] update config ui

---
 .../src/components/SDKConfig/SDKConfig.tsx        | 15 +++++++--------
 examples/testapp/src/pages/index.tsx              |  8 +-------
 2 files changed, 8 insertions(+), 15 deletions(-)

diff --git a/examples/testapp/src/components/SDKConfig/SDKConfig.tsx b/examples/testapp/src/components/SDKConfig/SDKConfig.tsx
index 55bb9b2451..c84a032adc 100644
--- a/examples/testapp/src/components/SDKConfig/SDKConfig.tsx
+++ b/examples/testapp/src/components/SDKConfig/SDKConfig.tsx
@@ -30,7 +30,7 @@ function computeDataSuffix(value: string): string {
 
 export function SDKConfig() {
   const { config, setConfig } = useCBWSDK();
-  const [dataSuffix, setDataSuffix] = useState("Coinbase Wallet");
+  const [dataSuffix, setDataSuffix] = useState<string>();
 
   const handleSetAttributionAuto = useCallback(
     (event: React.ChangeEvent<HTMLInputElement>) => {
@@ -60,7 +60,7 @@ export function SDKConfig() {
   );
 
   const sixteenByteHex = useMemo(
-    () => computeDataSuffix(dataSuffix),
+    () => (dataSuffix ? computeDataSuffix(dataSuffix) : undefined),
     [dataSuffix]
   );
 
@@ -108,20 +108,19 @@ export function SDKConfig() {
               </Flex>
               <Text mt={2} fontSize="sm">
                 First 16 bytes of a unique string to identify your onchain
-                activity. Update the text box below to have your data suffix applied
+                activity. Update the text box below to have your data suffix
+                applied
               </Text>
               <FormControl mt={2}>
                 <Input
                   mt={2}
                   type="text"
-                  placeholder="Enter String"
+                  placeholder="Enter string to hash"
                   onChange={handleSetDataSuffix}
-                  value={dataSuffix}
                 />
-                <FormHelperText>
-                  custom data suffix to be added to the preferences
-                </FormHelperText>
               </FormControl>
+            </Box>
+            <Box flexBasis="50%" textAlign="right">
               <Code mt={2} colorScheme="telegram">
                 {sixteenByteHex}
               </Code>
diff --git a/examples/testapp/src/pages/index.tsx b/examples/testapp/src/pages/index.tsx
index c16730471e..1d7aef09bf 100644
--- a/examples/testapp/src/pages/index.tsx
+++ b/examples/testapp/src/pages/index.tsx
@@ -16,13 +16,7 @@ import { signMessageShortcutsMap } from "../components/RpcMethods/shortcut/signM
 import { walletTxShortcutsMap } from "../components/RpcMethods/shortcut/walletTxShortcuts";
 import { useCBWSDK } from "../context/CBWSDKReactContextProvider";
 import { MethodsSection } from "../components/MethodsSection/MethodsSection";
-import dynamic from "next/dynamic";
-
-const SDKConfig = dynamic(
-  () =>
-    import("../components/SDKConfig/SDKConfig").then((mod) => mod.SDKConfig),
-  { ssr: false }
-);
+import { SDKConfig } from "../components/SDKConfig/SDKConfig";
 
 export default function Home() {
   const { provider, sdkVersion } = useCBWSDK();