fix: lint (#816)

coinbase · Jul 16, 2024 · a914d8e · a914d8e
1 parent 816abce
commit a914d8e
Show file tree

Hide file tree

Showing 7 changed files with 13 additions and 53 deletions.
diff --git a/.changeset/eight-buses-enjoy.md b/.changeset/eight-buses-enjoy.md
@@ -2,6 +2,7 @@
 "@coinbase/onchainkit": patch
 ---
 
+- **feat**: added initial version of `Transaction` component. By @abcrane123 & @zizzamia #816 #787
 - **feat**: updated Viem and Wagmi version. By @zizzamia #815
 - **chore**: Add WalletDropdown Disconnect and Link tests. By @cpcramer #810
 - **chore**: Add Identity unit tests. By @cpcramer #807
diff --git a/site/docs/pages/transaction/transaction.mdx b/site/docs/pages/transaction/transaction.mdx
@@ -1,51 +1,8 @@
 import App from '../../components/App';
 import { Avatar, Name } from '@coinbase/onchainkit/identity';
-import { Transaction } from '../../../../src/transaction/components/Transaction';
-import { TransactionGasFee } from '../../../../src/transaction/components/TransactionGasFee';
-import { TransactionGasFeeLabel } from '../../../../src/transaction/components/TransactionGasFeeLabel';
-import { TransactionGasFeeEstimate } from '../../../../src/transaction/components/TransactionGasFeeEstimate';
-import { TransactionGasFeeSponsoredBy } from '../../../../src/transaction/components/TransactionGasFeeSponsoredBy';
-import { TransactionButton } from '../../../../src/transaction/components/TransactionButton';
-import { TransactionStatus } from '../../../../src/transaction/components/TransactionStatus';
-import { TransactionStatusLabel } from '../../../../src/transaction/components/TransactionStatusLabel';
-import { TransactionStatusAction } from '../../../../src/transaction/components/TransactionStatusAction';
-import TransactionWrapper from '../../components/TransactionWrapper';
-import { Wallet, ConnectWallet } from '../../../../src/wallet';
 
 # `<Transaction />`
 
 :::warning
 Component is actively in development. Stay tuned for upcoming releases.
 :::
-
-<App>
-  <TransactionWrapper>
-    {({ address, contracts }) => {
-      if (address) {
-        return (
-          <Transaction address={address} contracts={contracts}>
-            <TransactionButton />
-            <TransactionGasFee>
-              <TransactionGasFeeLabel />
-              <TransactionGasFeeEstimate />
-              <TransactionGasFeeSponsoredBy />
-            </TransactionGasFee>
-            <TransactionStatus>
-              <TransactionStatusLabel />
-              <TransactionStatusAction />
-            </TransactionStatus>
-          </Transaction>
-        )
-      } else {
-        return (
-          <Wallet>
-            <ConnectWallet>
-              <Avatar className="h-6 w-6" />
-              <Name />
-            </ConnectWallet>
-          </Wallet>
-        )
-      }
-    }}
-  </TransactionWrapper>
-</App>
diff --git a/src/transaction/core/getChainExplorer.ts → src/network/getChainExplorer.ts b/src/transaction/core/getChainExplorer.ts → src/network/getChainExplorer.ts
diff --git a/src/styles/theme.ts b/src/styles/theme.ts
@@ -1,5 +1,6 @@
-import { type ClassValue, clsx } from 'clsx';
+import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
+import type { ClassValue } from 'clsx';
 
 export function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs));

diff --git a/src/transaction/components/TransactionButton.tsx b/src/transaction/components/TransactionButton.tsx
@@ -24,6 +24,7 @@ export function TransactionButton({
         className,
       )}
       onClick={onSubmit}
+      type="button"
     >
       {isLoading ? (
         <Spinner />

diff --git a/src/transaction/core/useGetTransactionStatus.tsx b/src/transaction/core/useGetTransactionStatus.tsx
@@ -2,7 +2,7 @@ import { useMemo } from 'react';
 import { useTransactionContext } from '../components/TransactionProvider';
 import { cn, color, text } from '../../styles/theme';
 import { useOnchainKit } from '../../useOnchainKit';
-import { getChainExplorer } from './getChainExplorer';
+import { getChainExplorer } from '../../network/getChainExplorer';
 import type { ReactNode } from 'react';
 
 export function useGetTransactionStatus() {
@@ -13,13 +13,13 @@ export function useGetTransactionStatus() {
     const chainExplorer = getChainExplorer(chain.id);
 
     let actionElement: ReactNode = null;
-    let label: string = '';
+    let label = '';
     let labelClassName: string = color.foregroundMuted;
 
     if (isLoading) {
       label = 'Transaction in progress...';
       actionElement = (
-        <a href="">
+        <a href={chainExplorer}>
           <span className={cn(text.label1, color.primary)}>
             View on explorer
           </span>

diff --git a/vitest.config.ts b/vitest.config.ts
@@ -7,24 +7,24 @@ export default defineConfig({
         '**.js',
         '**.ts',
         '**/**.stories.**',
+        '**/getMockFrameRequest.ts',
         '**/index.ts',
+        '**/*Svg.tsx',
         '**/types.ts',
-        '**/getMockFrameRequest.ts',
         '.storybook/**',
         '.yarn/**',
         'esm/**',
         'framegear/**',
         'node_modules/**',
         'onchainkit/esm/**',
         'site/**',
-        '**/*Svg.tsx',
       ],
       reportOnFailure: true,
       thresholds: {
-        statements: 95.34,
-        branches: 97.7,
-        functions: 90.5,
-        lines: 95.34,
+        statements: 94.52,
+        branches: 97.3,
+        functions: 86.82,
+        lines: 94.52,
       },
     },
     environment: 'jsdom',