small refactor

across-protocol · Sep 20, 2024 · 1bee7cc · 1bee7cc
1 parent 67a3a21
commit 1bee7cc
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 20 deletions.
diff --git a/apps/example/app/viem/components/Bridge.tsx b/apps/example/app/viem/components/Bridge.tsx
@@ -109,18 +109,18 @@ export function Bridge() {
               className="flex-[5]"
               id="origin-chain"
               chains={acrossChains}
-              value={originChainId?.toString()}
-              onValueChange={(chainId) => {
+              chain={originChainId}
+              onChainChange={(chainId) => {
                 setDestinationChainId(undefined);
-                setOriginChainId(parseInt(chainId));
+                setOriginChainId(chainId);
               }}
             />
 
             <TokenSelect
               className="flex-[3]"
               tokens={inputTokens}
-              onValueChange={(value) => setFromTokenAddress(value as Address)}
-              value={fromTokenAddress}
+              onTokenChange={setFromTokenAddress}
+              token={fromTokenAddress}
             />
           </div>
 
@@ -133,18 +133,16 @@ export function Bridge() {
               className="flex-[5]"
               id="destination-chain"
               chains={acrossChains}
-              value={destinationChainId?.toString()}
-              onValueChange={(chainId) =>
-                setDestinationChainId(parseInt(chainId))
-              }
+              chain={destinationChainId}
+              onChainChange={setDestinationChainId}
             />
 
             <TokenSelect
               className={cn("flex-[3]")}
               disabled={outputTokens ? !(outputTokens?.length > 1) : true}
               tokens={outputTokens}
-              onValueChange={(value) => setToTokenAddress(value as Address)}
-              value={toTokenAddress}
+              onTokenChange={setToTokenAddress}
+              token={toTokenAddress}
             />
           </div>
 

diff --git a/apps/example/components/ChainSelect.tsx b/apps/example/components/ChainSelect.tsx
@@ -16,12 +16,16 @@ import { SelectProps } from "@radix-ui/react-select";
 
 export type ChainSelectProps = SelectProps & {
   chains: AcrossChain[] | undefined;
+  chain: AcrossChain["chainId"] | undefined;
+  onChainChange: (_chainId: AcrossChain["chainId"]) => void;
   className?: string;
   id?: string;
 };
 
 export function ChainSelect({
   chains,
+  chain,
+  onChainChange,
   id,
   className,
   ...props
@@ -37,7 +41,11 @@ export function ChainSelect({
     );
   }
   return (
-    <Select {...props}>
+    <Select
+      onValueChange={(value) => onChainChange(parseInt(value))}
+      value={chain?.toString()}
+      {...props}
+    >
       <SelectTrigger id={id} className={cn("w-full", className)}>
         <SelectValue placeholder="Select a chain" />
       </SelectTrigger>

diff --git a/apps/example/components/TokenSelect.tsx b/apps/example/components/TokenSelect.tsx
@@ -15,10 +15,18 @@ import { SelectProps } from "@radix-ui/react-select";
 
 export type TokenSelectProps = SelectProps & {
   tokens: TokenInfo[] | undefined;
+  token: TokenInfo["address"] | undefined;
+  onTokenChange: (_address: TokenInfo["address"]) => void;
   className?: string;
 };
 
-export function TokenSelect({ tokens, className, ...props }: TokenSelectProps) {
+export function TokenSelect({
+  tokens,
+  token,
+  className,
+  onTokenChange,
+  ...props
+}: TokenSelectProps) {
   if (!tokens) {
     return (
       <Skeleton
@@ -31,7 +39,7 @@ export function TokenSelect({ tokens, className, ...props }: TokenSelectProps) {
   }
 
   return (
-    <Select {...props}>
+    <Select value={token} onValueChange={onTokenChange} {...props}>
       <SelectTrigger className={cn("w-full", className)}>
         <SelectValue placeholder="Select a Token" />
       </SelectTrigger>

diff --git a/apps/example/lib/utils.ts b/apps/example/lib/utils.ts
@@ -36,12 +36,7 @@ export function buildQueryKey<T extends object | undefined>(
   params: T,
 ) {
   if (!params) return [queryName];
-  return [
-    queryName,
-    ...Object.entries(params)
-      .map(([key, value]) => `${key}=${value}`)
-      .join("="),
-  ];
+  return [queryName, ...Object.entries(params).map((entry) => entry.join("="))];
 }
 
 export type NoNullValuesOfObject<T extends object> = {