Merge branch 'main' of https://github.com/coinbase/onchainkit into al…

…issa.crane/token-balance

.github/labeler.yml

@@ -0,0 +1,59 @@
+root:
+- changed-files:
+  - any-glob-to-any-file: '*'
+
+framegear:
+- changed-files:
+  - any-glob-to-any-file: framegear/**
+
+documentation:
+- changed-files:
+  - any-glob-to-any-file: site/**
+
+'pkg: core':
+- changed-files:
+  - any-glob-to-any-file: src/core/**
+
+'pkg: definitions':
+- changed-files:
+  - any-glob-to-any-file: src/definitions/**
+
+'pkg: farcaster':
+- changed-files:
+  - any-glob-to-any-file: src/farcaster/**
+
+'pkg: frame':
+- changed-files:
+  - any-glob-to-any-file: src/frame/**
+
+'pkg: identity':
+- changed-files:
+  - any-glob-to-any-file: src/identity/**
+
+'pkg: network':
+- changed-files:
+  - any-glob-to-any-file: src/network/**
+
+'pkg: styles':
+- changed-files:
+  - any-glob-to-any-file: src/styles/**
+
+'pkg: swap':
+- changed-files:
+  - any-glob-to-any-file: src/swap/**
+
+'pkg: token':
+- changed-files:
+  - any-glob-to-any-file: src/token/**
+
+'pkg: utils':
+- changed-files:
+  - any-glob-to-any-file: src/utils/**
+
+'pkg: wallet':
+- changed-files:
+  - any-glob-to-any-file: src/wallet/**
+
+'pkg: xmtp':
+- changed-files:
+  - any-glob-to-any-file: src/xmtp/**

.github/workflows/labeler.yml

@@ -0,0 +1,13 @@
+name: "Pull Request Labeler"
+on:
+  pull_request:
+    branches: ['main']
+
+jobs:
+  labeler:
+    permissions:
+      contents: read
+      pull-requests: write
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/labeler@v5

CHANGELOG.md

@@ -1,10 +1,17 @@
 # Changelog
 
+## 0.20.6
+
+### Patch Changes
+
+- 0225039: - **fix**: added Token amount formatter. By @abcrane123 #543 #544
+  - **chore**: more code cleanup. By @zizzamia #536 #537
+
 ## 0.20.5
 
 ### Patch Changes
 
-- 5a8cd45: - **fix**: Swap type. By @zizzamia #532
+- **fix**: `Swap` type. By @zizzamia #532 5a8cd45
 
 ## 0.20.4
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coinbase/onchainkit",
-  "version": "0.20.5",
+  "version": "0.20.6",
   "type": "module",
   "repository": "https://github.com/coinbase/onchainkit.git",
   "license": "MIT",
@@ -68,13 +68,20 @@
   "packemon": [
     {
       "bundle": false,
-      "platform": ["browser"]
+      "platform": [
+        "browser"
+      ]
     }
   ],
   "publishConfig": {
     "access": "public"
   },
-  "files": ["esm/**/*", "lib/**/*", "src/", "src/**/*"],
+  "files": [
+    "esm/**/*",
+    "lib/**/*",
+    "src/",
+    "src/**/*"
+  ],
   "main": "./esm/index.js",
   "types": "./esm/index.d.ts",
   "module": "./esm/index.js",

site/docs/components/SwapAmountInputContainer.tsx

@@ -1,4 +1,4 @@
-import { ReactElement, useState } from 'react';
+import { type ReactElement, useState } from 'react';
 import type { Token } from '@coinbase/onchainkit/token';
 
 type SwapAmountInputContainer = {

site/docs/components/TokenSelector.tsx

@@ -77,15 +77,15 @@ function TokenSelector() {
       )}
       {filteredTokens.length > 0 ? (
         <div>
-          <div className="text-body text-black">Tokens</div>
+          <div className="text-black text-body">Tokens</div>
           <div>
             {filteredTokens.map((token) => (
               <TokenRow key={token.name} token={token} onClick={handleSelect} />
             ))}
           </div>
         </div>
       ) : (
-        <div className="text-body text-black">No tokens found</div>
+        <div className="text-black text-body">No tokens found</div>
       )}
     </div>
   );

site/docs/components/TokenSelectorContainer.tsx

@@ -1,4 +1,4 @@
-import { ReactElement, useState } from 'react';
+import { type ReactElement, useState } from 'react';
 import type { Token } from '@coinbase/onchainkit/token';
 
 type TokenSelectorContainer = {

site/docs/pages/App.tsx

@@ -1,5 +1,5 @@
 'use client';
-import { ReactNode } from 'react';
+import type { ReactNode } from 'react';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { WagmiProvider, createConfig, http } from 'wagmi';
 import { baseSepolia } from 'wagmi/chains';

site/vocs.config.tsx

@@ -7,7 +7,8 @@ export const GOOGLE_ANALYTICS_ID =
   process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS_ID ?? 'TEST_GA';
 
 const ONCHAINKIT_TITLE = 'OnchainKit';
-const ONCHAINKIT_DESCRIPTION = `React components and TypeScript utilities for top-tier onchain apps.`;
+const ONCHAINKIT_DESCRIPTION =
+  'React components and TypeScript utilities for top-tier onchain apps.';
 
 export default defineConfig({
   baseUrl: 'https://onchainkit.xyz',

src/identity/components/WithAvatarBadge.tsx

@@ -25,7 +25,7 @@ function WithAvatarBadgeInner({
     <div className="relative h-8 w-8" data-testid="ockAvatarBadgeContainer">
       {children}
       {attestations?.[0] && (
-        <div className="absolute -bottom-0.5 -right-0.5 flex h-[15px] w-[15px] items-center justify-center rounded-full bg-transparent">
+        <div className="-bottom-0.5 -right-0.5 absolute flex h-[15px] w-[15px] items-center justify-center rounded-full bg-transparent">
           <div className="flex h-[11px] w-[11px] items-center justify-center">
             <Badge />
           </div>

src/swap/components/Swap.tsx

@@ -103,7 +103,7 @@ export function Swap({ address, children, onError }: SwapReact) {
         <label
           className={cn(
             'box-border w-full border-b border-solid p-4 text-base',
-            'font-semibold leading-6 text-[#030712]',
+            'font-semibold text-[#030712] leading-6',
           )}
         >
           Swap

src/swap/components/SwapAmountInput.tsx

@@ -81,7 +81,7 @@ export function SwapAmountInput({ label, token, type }: SwapAmountInputReact) {
       data-testid="ockSwapAmountInput_Container"
     >
       <div className="flex w-full items-center justify-between">
-        <label className="text-sm font-semibold text-[#030712]">{label}</label>
+        <label className="font-semibold text-[#030712] text-sm">{label}</label>
         {roundedBalance && (
           <label className="text-sm font-normal text-gray-400">{`Balance: ${roundedBalance}`}</label>
         )}

src/swap/components/SwapButton.tsx

@@ -33,7 +33,7 @@ export function SwapButton({ onError, onSubmit }: SwapButtonReact) {
       <button
         className={cn(
           'w-full rounded-[100px] bg-blue-700',
-          'px-4 py-3 text-base font-medium leading-6 text-white',
+          'px-4 py-3 font-medium text-base text-white leading-6',
         )}
         onClick={handleSubmit}
         disabled={!fromAmount || !fromToken || !toToken}

src/swap/utils.test.ts

@@ -10,14 +10,6 @@ describe('isValidAmount', () => {
     expect(isValidAmount('')).toBe(true);
   });
 
-  it('should return true for a valid number string with less than 11 characters', () => {
-    expect(isValidAmount('12345')).toBe(true);
-  });
-
-  it('should return false for a number string with more than 11 characters', () => {
-    expect(isValidAmount('123456789012')).toBe(false);
-  });
-
   it('should return true for a valid number string with a decimal point', () => {
     expect(isValidAmount('123.45')).toBe(true);
   });
@@ -90,13 +82,6 @@ describe('formatTokenAmount', () => {
     expect(formattedAmount).toBe('1');
   });
 
-  test('rounds to a maximum of 11 significant digits', () => {
-    const amount = '16732157880511600003860';
-    const decimals = 18;
-    const formattedAmount = formatTokenAmount(amount, decimals);
-    expect(formattedAmount).toBe('16732.157881');
-  });
-
   test('handles very small amounts correctly', () => {
     const amount = '1';
     const decimals = 18;

src/swap/utils.ts

@@ -2,9 +2,6 @@ import type { SwapError } from './types';
 
 // checks that input is a number
 export function isValidAmount(value: string) {
-  if (value.length > 11) {
-    return false;
-  }
   if (value === '') {
     return true;
   }
@@ -21,9 +18,7 @@ export function isSwapError(response: unknown): response is SwapError {
 export function formatTokenAmount(amount: string, decimals: number) {
   // Convert the string amount to a number using decimals value
   const numberAmount = Number(amount) / Math.pow(10, decimals);
-  // Round to a maximum of 11 significant digits
-  const roundedAmount = Number(numberAmount.toPrecision(11));
-  return roundedAmount.toString();
+  return numberAmount.toString();
 }
 
 export function getRoundedAmount(balance: string, fractionDigits: number) {

src/token/components/TextInput.tsx

@@ -18,21 +18,21 @@ export function TextInput({ placeholder, value, onChange }: TextInputReact) {
 
   return (
     <div className="relative flex items-center">
-      <div className="absolute left-4 top-1/2 -translate-y-1/2">
+      <div className="-translate-y-1/2 absolute top-1/2 left-4">
         <SearchIcon />
       </div>
       <input
         data-testid="ockTextInput_Search"
         type="text"
-        className="w-full rounded-full border-2 border-solid border-[#eef0f3] bg-[#eef0f3] py-2 pl-12 pr-5 text-[#0A0B0D] placeholder-[#5B616E] outline-none hover:bg-[#cacbce] hover:focus:bg-[#eef0f3]"
+        className="w-full rounded-full border-2 border-[#eef0f3] border-solid bg-[#eef0f3] py-2 pr-5 pl-12 text-[#0A0B0D] placeholder-[#5B616E] outline-none hover:bg-[#cacbce] hover:focus:bg-[#eef0f3]"
         placeholder={placeholder}
         value={value}
         onChange={handleChange}
       />
       {value && (
         <button
           data-testid="ockTextInput_Clear"
-          className="absolute right-4 top-1/2 -translate-y-1/2"
+          className="-translate-y-1/2 absolute top-1/2 right-4"
           onClick={handleClear}
         >
           <svg

src/token/components/TokenChip.tsx

@@ -10,11 +10,11 @@ export function TokenChip({ token, onClick }: TokenChipReact) {
   return (
     <button
       data-testid="ockTokenChip_Button"
-      className="flex w-fit items-center rounded-2xl bg-[#eef0f3] py-1 pl-1 pr-3 hover:bg-[#cacbce] hover:active:bg-[#bfc1c3]"
+      className="flex w-fit items-center rounded-2xl bg-[#eef0f3] py-1 pr-3 pl-1 hover:active:bg-[#bfc1c3] hover:bg-[#cacbce]"
       onClick={() => onClick?.(token)}
     >
       <img className="mr-2 h-6 w-6" src={token.image || ''} />
-      <span className="text-base font-medium leading-4 text-black">
+      <span className="font-medium text-base text-black leading-4">
         {token.symbol}
       </span>
     </button>

src/token/components/TokenRow.tsx

@@ -13,25 +13,25 @@ export const TokenRow = memo(function TokenRow({
   return (
     <button
       data-testid="ockTokenRow_Container"
-      className="flex h-16 w-full cursor-pointer items-center justify-between bg-white px-2 py-1 hover:bg-[#cacbce] active:bg-[#bfc1c3]"
+      className="flex h-16 w-full cursor-pointer items-center justify-between bg-white px-2 py-1 active:bg-[#bfc1c3] hover:bg-[#cacbce]"
       onClick={() => onClick?.(token)}
     >
       <span className="flex items-center gap-3">
         {!hideImage && <TokenImage token={token} size={48} />}
         <span className="flex flex-col items-start">
-          <span className="font-medium leading-normal text-[#0A0B0D]">
+          <span className="font-medium text-[#0A0B0D] leading-normal">
             {token.name}
           </span>
           {!hideSymbol && (
-            <span className="font-normal leading-normal text-[#5B616E]">
+            <span className="font-normal text-[#5B616E] leading-normal">
               {token.symbol}
             </span>
           )}
         </span>
       </span>
       <span
         data-testid="ockTokenRow_Amount"
-        className="font-normal leading-normal text-[#5B616E]"
+        className="font-normal text-[#5B616E] leading-normal"
       >
         {formatAmount(amount, {
           minimumFractionDigits: 2,

src/token/components/TokenSelectButton.tsx

@@ -45,7 +45,7 @@ export const TokenSelectButton = forwardRef(function TokenSelectButton(
   return (
     <button
       data-testid="ockTokenSelectButton_Button"
-      className="flex w-fit items-center gap-2 rounded-2xl bg-[#eef0f3] px-3 py-1 outline-none hover:bg-[#cacbce] active:bg-[#bfc1c3]"
+      className="flex w-fit items-center gap-2 rounded-2xl bg-[#eef0f3] px-3 py-1 outline-none active:bg-[#bfc1c3] hover:bg-[#cacbce]"
       onClick={onClick}
       ref={ref}
     >
@@ -54,13 +54,13 @@ export const TokenSelectButton = forwardRef(function TokenSelectButton(
           <TokenImage token={token} size={16} />
           <span
             data-testid="ockTokenSelectButton_Symbol"
-            className="text-base font-medium leading-normal text-[#0a0b0d]"
+            className="font-medium text-[#0a0b0d] text-base leading-normal"
           >
             {token.symbol}
           </span>
         </>
       ) : (
-        <span className="text-base font-medium leading-normal text-[#0a0b0d]">
+        <span className="font-medium text-[#0a0b0d] text-base leading-normal">
           Select
         </span>
       )}

src/version.ts

@@ -1 +1 @@
-export const version = '0.20.5';
+export const version = '0.20.6';

src/wallet/components/ConnectAccount.tsx

@@ -39,7 +39,7 @@ export function ConnectAccount({ children }: ConnectAccountReact) {
               type="button"
             >
               <div
-                className="text-sm font-medium leading-5 text-black"
+                className="font-medium text-black text-sm leading-5"
                 data-testid="ockConnectAccountButtonInner"
               >
                 Connect wallet