swap

hyperweb-io · Apr 5, 2024 · 1fa4063 · 1fa4063
1 parent ebac53c
commit 1fa4063
Show file tree

Hide file tree

Showing 6 changed files with 52 additions and 24 deletions.
diff --git a/.github/workflows/run-tests.yaml b/.github/workflows/run-tests.yaml
@@ -45,4 +45,10 @@ jobs:
         run: | 
           cca --example ibc-transfer --name ibc-transfer
           cd ibc-transfer
+          yarn build
+
+      - name: swap-tokens
+        run: | 
+          cca --example swap-tokens --name swap-tokens
+          cd swap-tokens
           yarn build
diff --git a/examples/swap-tokens/components/swap/SwapRoute.tsx b/examples/swap-tokens/components/swap/SwapRoute.tsx
@@ -27,17 +27,18 @@ export function SwapRoute({ from, to, steps = [] }: SwapRouteProps) {
         </Box>
         <Dashes />
         {steps.map((route: SwapRouteStep) => (
+          // @ts-ignore
           <Fragment key={route.poolId}>
             <Box ml="$6" mr="$5" width="$16" height="$12" position="relative">
               <img width="32" height="32" alt={route.base.symbol} src={route.base.logo} />
               <Box top="$0" right="$0" position="absolute">
                 <img width="32" height="32" alt={route.quote.symbol} src={route.quote.logo} />
               </Box>
             </Box>
-              <Text color="$textSecondary" fontWeight="$bold" attributes={{ marginRight: "$5" }}>
-                {route?.swapFee}
-              </Text>
-              <Dashes />
+            <Text color="$textSecondary" fontWeight="$bold" attributes={{ marginRight: "$5" }}>
+              {route?.swapFee}
+            </Text>
+            <Dashes />
           </Fragment>
         ))}
         <Box ml="$6">
@@ -52,13 +53,15 @@ export function Dashes() {
   return (
     <Box
       px="$7"
+      // @ts-ignore
       style={{
         flex: '1',
         height: '1px',
         background: `repeating-linear-gradient(90deg, ${useColorModeValue(
           '#d9d9d9',
           '#718096'
-        )} 0 4px, #0000 0 12px)`}}
+        )} 0 4px, #0000 0 12px)`
+      }}
     />
   )
 }
diff --git a/examples/swap-tokens/components/wallet/Connect.tsx b/examples/swap-tokens/components/wallet/Connect.tsx
@@ -1,7 +1,7 @@
 import { MouseEventHandler } from 'react';
 import { Button as UIButton, IconName } from '@interchain-ui/react';
 
-export type ButtonProps =  {
+export type ButtonProps = {
   text?: string;
   icon?: IconName;
   loading?: boolean;
@@ -11,7 +11,7 @@ export type ButtonProps =  {
 
 export type ConnectProps = Pick<ButtonProps, 'text' | 'loading' | 'onClick'>;
 
-function noop() {}
+function noop() { }
 
 export function Button({
   text,
@@ -38,23 +38,39 @@ export function Button({
   );
 };
 
-Button.Connect = ({ text = 'Connect Wallet', onClick = noop }: ConnectProps) =>
-  <Button text={text} icon="walletFilled" onClick={onClick} />
+const Connect = ({ text = 'Connect Wallet', onClick = noop }) =>
+  <Button text={text} icon="walletFilled" onClick={onClick} />;
+Connect.displayName = 'Connect';
 
-Button.Connected = ({ text = 'My Wallet', onClick = noop }: ConnectProps) =>
-  <Button text={text} icon="walletFilled" onClick={onClick} />
+const Connected = ({ text = 'My Wallet', onClick = noop }) =>
+  <Button text={text} icon="walletFilled" onClick={onClick} />;
+Connected.displayName = 'Connected';
 
-Button.Disconnected = ({ text = 'Connect Wallet', onClick = noop }: ConnectProps) =>
-  <Button text={text} icon="walletFilled" onClick={onClick} />
+const Disconnected = ({ text = 'Connect Wallet', onClick = noop }) =>
+  <Button text={text} icon="walletFilled" onClick={onClick} />;
+Disconnected.displayName = 'Disconnected';
 
-Button.Connecting = ({ text = 'Connecting ...', loading = true }: ConnectProps) =>
-  <Button text={text} loading={loading} />
+const Connecting = ({ text = 'Connecting ...', loading = true }) =>
+  <Button text={text} loading={loading} />;
+Connecting.displayName = 'Connecting';
 
-Button.Rejected = ({ text = 'Reconnect', onClick = noop }: ConnectProps) =>
-  <Button text={text} icon="walletFilled" onClick={onClick} />
+const Rejected = ({ text = 'Reconnect', onClick = noop }) =>
+  <Button text={text} icon="walletFilled" onClick={onClick} />;
+Rejected.displayName = 'Rejected';
 
-Button.Error = ({ text = 'Change Wallet', onClick = noop }: ConnectProps) =>
-  <Button text={text} icon="walletFilled" onClick={onClick} />
+const ErrorComponent = ({ text = 'Change Wallet', onClick = noop }) =>
+  <Button text={text} icon="walletFilled" onClick={onClick} />;
+ErrorComponent.displayName = 'ErrorComponent';
 
-Button.NotExist = ({ text = 'Install Wallet', onClick = noop }: ConnectProps) =>
-  <Button text={text} icon="walletFilled" onClick={onClick} />
+const NotExist = ({ text = 'Install Wallet', onClick = noop }) =>
+  <Button text={text} icon="walletFilled" onClick={onClick} />;
+NotExist.displayName = 'NotExist';
+
+// Assign these to Button as properties if needed
+Button.Connect = Connect;
+Button.Connected = Connected;
+Button.Disconnected = Disconnected;
+Button.Connecting = Connecting;
+Button.Rejected = Rejected;
+Button.Error = ErrorComponent;
+Button.NotExist = NotExist;
diff --git a/examples/swap-tokens/hooks/useTx.ts b/examples/swap-tokens/hooks/useTx.ts
@@ -59,7 +59,7 @@ export function useTx(chainName: string) {
       if (!client) return new TxResult({ error: new TxError('Invalid stargate client') });
       if (!signed) return new TxResult({ error: new TxError('Invalid transaction') });
 
-      const response = await client.broadcastTx(Uint8Array.from(txRaw.encode(signed).finish()));
+      const response: any = await client.broadcastTx(Uint8Array.from(txRaw.encode(signed).finish()));
       return isDeliverTxSuccess(response)
         ? new TxResult({ response })
         : new TxResult({ response, error: new TxError(response.rawLog) });

diff --git a/examples/swap-tokens/pages/_app.tsx b/examples/swap-tokens/pages/_app.tsx
@@ -27,13 +27,15 @@ function CreateCosmosApp({ Component, pageProps }: AppProps) {
   const { themeClass } = useTheme();
 
   const signerOptions: SignerOptions = {
+    // @ts-ignore
     signingStargate: () => {
       return {
         aminoTypes,
         registry,
       };
     },
-    signingCosmwasm: (chain) => {
+    // @ts-ignore
+    signingCosmwasm: (chain: Chain) => {
       switch (chain.chain_name) {
         case 'osmosis':
         case 'osmosistestnet':
@@ -66,6 +68,7 @@ function CreateCosmosApp({ Component, pageProps }: AppProps) {
       >
         <QueryClientProvider client={queryClient}>
           <Box className={themeClass} minHeight="100dvh" backgroundColor={useColorModeValue('$white', '$background')}>
+            {/* @ts-ignore */}
             <Component {...pageProps} />
           </Box>
         </QueryClientProvider>

diff --git a/examples/swap-tokens/utils/utils.ts b/examples/swap-tokens/utils/utils.ts
@@ -11,6 +11,6 @@ export function getLogo(from: Asset | Chain) {
 }
 
 export function getChainLogo(name: string) {
-  const chain = chains.find(chain => chain.chain_name === name)
+  const chain: Chain = chains.find(chain => chain.chain_name === name) as Chain;
   return chain ? getLogo(chain) : null;
 }