@coinbase/cdp-react 0.0.78 → 0.0.80

package/dist/theme/tokens.d.ts

@@ -44,6 +44,13 @@ export declare const colorsSemantic: {
         readonly secondary: {
             readonly value: "#eef0f3";
         };
+        readonly primaryWash: {
+            readonly value: "{colors.fg.primary}";
+            readonly modify: {
+                readonly type: "color-mix";
+                readonly value: readonly [readonly ["{colors.bg.default}", "92%"]];
+            };
+        };
         readonly positiveWash: {
             readonly value: "{colors.fg.positive}";
             readonly modify: {
@@ -91,6 +98,9 @@ export declare const colorsSemantic: {
         readonly warning: {
             readonly value: "#ed702f";
         };
+        readonly onPrimaryWash: {
+            readonly value: "{colors.fg.onPrimary}";
+        };
         readonly onPositiveWash: {
             readonly value: "{colors.fg.default}";
         };
@@ -434,6 +444,97 @@ export declare const colorsComponents: {
             };
         };
     };
+    readonly badge: {
+        readonly primary: {
+            readonly bg: {
+                readonly default: {
+                    readonly value: "{colors.bg.primaryWash}";
+                };
+            };
+            readonly text: {
+                readonly default: {
+                    readonly value: "{colors.fg.primary}";
+                };
+            };
+        };
+        readonly secondary: {
+            readonly bg: {
+                readonly default: {
+                    readonly value: "{colors.bg.secondary}";
+                };
+            };
+            readonly text: {
+                readonly default: {
+                    readonly value: "{colors.fg.onSecondary}";
+                };
+            };
+        };
+        readonly warning: {
+            readonly bg: {
+                readonly default: {
+                    readonly value: "{colors.bg.warningWash}";
+                };
+            };
+            readonly text: {
+                readonly default: {
+                    readonly value: "{colors.fg.warning}";
+                };
+            };
+        };
+    };
+    readonly banner: {
+        readonly error: {
+            readonly bg: {
+                readonly default: {
+                    readonly value: "{colors.bg.negativeWash}";
+                };
+            };
+            readonly icon: {
+                readonly default: {
+                    readonly value: "{colors.fg.negative}";
+                };
+            };
+            readonly text: {
+                readonly default: {
+                    readonly value: "{colors.fg.onNegativeWash}";
+                };
+            };
+        };
+        readonly success: {
+            readonly bg: {
+                readonly default: {
+                    readonly value: "{colors.bg.positiveWash}";
+                };
+            };
+            readonly icon: {
+                readonly default: {
+                    readonly value: "{colors.fg.positive}";
+                };
+            };
+            readonly text: {
+                readonly default: {
+                    readonly value: "{colors.fg.onPositiveWash}";
+                };
+            };
+        };
+        readonly warning: {
+            readonly bg: {
+                readonly default: {
+                    readonly value: "{colors.bg.warningWash}";
+                };
+            };
+            readonly icon: {
+                readonly default: {
+                    readonly value: "{colors.fg.warning}";
+                };
+            };
+            readonly text: {
+                readonly default: {
+                    readonly value: "{colors.fg.onWarningWash}";
+                };
+            };
+        };
+    };
 };
 export declare const colors: {
     readonly page: {
@@ -750,6 +851,97 @@ export declare const colors: {
             };
         };
     };
+    readonly badge: {
+        readonly primary: {
+            readonly bg: {
+                readonly default: {
+                    readonly value: "{colors.bg.primaryWash}";
+                };
+            };
+            readonly text: {
+                readonly default: {
+                    readonly value: "{colors.fg.primary}";
+                };
+            };
+        };
+        readonly secondary: {
+            readonly bg: {
+                readonly default: {
+                    readonly value: "{colors.bg.secondary}";
+                };
+            };
+            readonly text: {
+                readonly default: {
+                    readonly value: "{colors.fg.onSecondary}";
+                };
+            };
+        };
+        readonly warning: {
+            readonly bg: {
+                readonly default: {
+                    readonly value: "{colors.bg.warningWash}";
+                };
+            };
+            readonly text: {
+                readonly default: {
+                    readonly value: "{colors.fg.warning}";
+                };
+            };
+        };
+    };
+    readonly banner: {
+        readonly error: {
+            readonly bg: {
+                readonly default: {
+                    readonly value: "{colors.bg.negativeWash}";
+                };
+            };
+            readonly icon: {
+                readonly default: {
+                    readonly value: "{colors.fg.negative}";
+                };
+            };
+            readonly text: {
+                readonly default: {
+                    readonly value: "{colors.fg.onNegativeWash}";
+                };
+            };
+        };
+        readonly success: {
+            readonly bg: {
+                readonly default: {
+                    readonly value: "{colors.bg.positiveWash}";
+                };
+            };
+            readonly icon: {
+                readonly default: {
+                    readonly value: "{colors.fg.positive}";
+                };
+            };
+            readonly text: {
+                readonly default: {
+                    readonly value: "{colors.fg.onPositiveWash}";
+                };
+            };
+        };
+        readonly warning: {
+            readonly bg: {
+                readonly default: {
+                    readonly value: "{colors.bg.warningWash}";
+                };
+            };
+            readonly icon: {
+                readonly default: {
+                    readonly value: "{colors.fg.warning}";
+                };
+            };
+            readonly text: {
+                readonly default: {
+                    readonly value: "{colors.fg.onWarningWash}";
+                };
+            };
+        };
+    };
     readonly bg: {
         readonly default: {
             readonly value: "#ffffff";
@@ -780,6 +972,13 @@ export declare const colors: {
         readonly secondary: {
             readonly value: "#eef0f3";
         };
+        readonly primaryWash: {
+            readonly value: "{colors.fg.primary}";
+            readonly modify: {
+                readonly type: "color-mix";
+                readonly value: readonly [readonly ["{colors.bg.default}", "92%"]];
+            };
+        };
         readonly positiveWash: {
             readonly value: "{colors.fg.positive}";
             readonly modify: {
@@ -827,6 +1026,9 @@ export declare const colors: {
         readonly warning: {
             readonly value: "#ed702f";
         };
+        readonly onPrimaryWash: {
+            readonly value: "{colors.fg.onPrimary}";
+        };
         readonly onPositiveWash: {
             readonly value: "{colors.fg.default}";
         };
@@ -997,6 +1199,9 @@ export declare const borderRadiusSemantic: {
     };
 };
 export declare const borderRadiusComponents: {
+    readonly badge: {
+        readonly value: "{borderRadius.full}";
+    };
     readonly banner: {
         readonly value: "{borderRadius.lg}";
     };
@@ -1022,6 +1227,9 @@ export declare const borderRadiusComponents: {
     };
 };
 export declare const borderRadius: {
+    readonly badge: {
+        readonly value: "{borderRadius.full}";
+    };
     readonly banner: {
         readonly value: "{borderRadius.lg}";
     };
@@ -1089,6 +1297,9 @@ export declare const borderRadius: {
 };
 export declare const tokens: {
     borderRadius: {
+        readonly badge: {
+            readonly value: "{borderRadius.full}";
+        };
         readonly banner: {
             readonly value: "{borderRadius.lg}";
         };
@@ -1469,6 +1680,97 @@ export declare const tokens: {
                 };
             };
         };
+        readonly badge: {
+            readonly primary: {
+                readonly bg: {
+                    readonly default: {
+                        readonly value: "{colors.bg.primaryWash}";
+                    };
+                };
+                readonly text: {
+                    readonly default: {
+                        readonly value: "{colors.fg.primary}";
+                    };
+                };
+            };
+            readonly secondary: {
+                readonly bg: {
+                    readonly default: {
+                        readonly value: "{colors.bg.secondary}";
+                    };
+                };
+                readonly text: {
+                    readonly default: {
+                        readonly value: "{colors.fg.onSecondary}";
+                    };
+                };
+            };
+            readonly warning: {
+                readonly bg: {
+                    readonly default: {
+                        readonly value: "{colors.bg.warningWash}";
+                    };
+                };
+                readonly text: {
+                    readonly default: {
+                        readonly value: "{colors.fg.warning}";
+                    };
+                };
+            };
+        };
+        readonly banner: {
+            readonly error: {
+                readonly bg: {
+                    readonly default: {
+                        readonly value: "{colors.bg.negativeWash}";
+                    };
+                };
+                readonly icon: {
+                    readonly default: {
+                        readonly value: "{colors.fg.negative}";
+                    };
+                };
+                readonly text: {
+                    readonly default: {
+                        readonly value: "{colors.fg.onNegativeWash}";
+                    };
+                };
+            };
+            readonly success: {
+                readonly bg: {
+                    readonly default: {
+                        readonly value: "{colors.bg.positiveWash}";
+                    };
+                };
+                readonly icon: {
+                    readonly default: {
+                        readonly value: "{colors.fg.positive}";
+                    };
+                };
+                readonly text: {
+                    readonly default: {
+                        readonly value: "{colors.fg.onPositiveWash}";
+                    };
+                };
+            };
+            readonly warning: {
+                readonly bg: {
+                    readonly default: {
+                        readonly value: "{colors.bg.warningWash}";
+                    };
+                };
+                readonly icon: {
+                    readonly default: {
+                        readonly value: "{colors.fg.warning}";
+                    };
+                };
+                readonly text: {
+                    readonly default: {
+                        readonly value: "{colors.fg.onWarningWash}";
+                    };
+                };
+            };
+        };
         readonly bg: {
             readonly default: {
                 readonly value: "#ffffff";
@@ -1499,6 +1801,13 @@ export declare const tokens: {
             readonly secondary: {
                 readonly value: "#eef0f3";
             };
+            readonly primaryWash: {
+                readonly value: "{colors.fg.primary}";
+                readonly modify: {
+                    readonly type: "color-mix";
+                    readonly value: readonly [readonly ["{colors.bg.default}", "92%"]];
+                };
+            };
             readonly positiveWash: {
                 readonly value: "{colors.fg.positive}";
                 readonly modify: {
@@ -1546,6 +1855,9 @@ export declare const tokens: {
             readonly warning: {
                 readonly value: "#ed702f";
             };
+            readonly onPrimaryWash: {
+                readonly value: "{colors.fg.onPrimary}";
+            };
             readonly onPositiveWash: {
                 readonly value: "{colors.fg.default}";
             };

package/dist/theme/tokens.js

@@ -31,6 +31,10 @@ const e = {
     // primary color background
     secondary: { value: e.gray100 },
     // secondary color background
+    primaryWash: {
+      value: "{colors.fg.primary}",
+      modify: { type: "color-mix", value: [["{colors.bg.default}", "92%"]] }
+    },
     positiveWash: {
       value: "{colors.fg.positive}",
       modify: { type: "color-mix", value: [["{colors.bg.default}", "92%"]] }
@@ -61,6 +65,8 @@ const e = {
     // negative color text
     warning: { value: e.amber500 },
     // warning color text
+    onPrimaryWash: { value: "{colors.fg.onPrimary}" },
+    // text on primary wash color
     onPositiveWash: { value: "{colors.fg.default}" },
     // text on positive wash color
     onNegativeWash: { value: "{colors.fg.default}" },
@@ -263,6 +269,67 @@ const e = {
     text: {
       default: { value: "{colors.fg.default}" }
     }
+  },
+  badge: {
+    primary: {
+      bg: {
+        default: { value: "{colors.bg.primaryWash}" }
+      },
+      text: {
+        default: { value: "{colors.fg.primary}" }
+      }
+    },
+    secondary: {
+      bg: {
+        default: { value: "{colors.bg.secondary}" }
+      },
+      text: {
+        default: { value: "{colors.fg.onSecondary}" }
+      }
+    },
+    warning: {
+      bg: {
+        default: { value: "{colors.bg.warningWash}" }
+      },
+      text: {
+        default: { value: "{colors.fg.warning}" }
+      }
+    }
+  },
+  banner: {
+    error: {
+      bg: {
+        default: { value: "{colors.bg.negativeWash}" }
+      },
+      icon: {
+        default: { value: "{colors.fg.negative}" }
+      },
+      text: {
+        default: { value: "{colors.fg.onNegativeWash}" }
+      }
+    },
+    success: {
+      bg: {
+        default: { value: "{colors.bg.positiveWash}" }
+      },
+      icon: {
+        default: { value: "{colors.fg.positive}" }
+      },
+      text: {
+        default: { value: "{colors.fg.onPositiveWash}" }
+      }
+    },
+    warning: {
+      bg: {
+        default: { value: "{colors.bg.warningWash}" }
+      },
+      icon: {
+        default: { value: "{colors.fg.warning}" }
+      },
+      text: {
+        default: { value: "{colors.fg.onWarningWash}" }
+      }
+    }
   }
 }, t = {
   ...a,
@@ -353,6 +420,9 @@ const e = {
     value: 99999
   }
 }, i = {
+  badge: {
+    value: "{borderRadius.full}"
+  },
   banner: {
     value: "{borderRadius.lg}"
   },

package/dist/utils/transition.d.ts

@@ -21,8 +21,8 @@ export declare const getState: (status: number) => {
     isMounted: boolean;
     isResolved: boolean;
 };
-export declare const startOrEnd: (unmounted: boolean) => 5 | 6;
-export declare const getEndStatus: (status: number, unmountOnExit: boolean) => 2 | 5 | 6 | undefined;
+export declare const startOrEnd: (unmounted: boolean) => 6 | 5;
+export declare const getEndStatus: (status: number, unmountOnExit: boolean) => 6 | 2 | 5 | undefined;
 export declare const getTimeout: (timeout: number | {
     enter: number;
     exit: number;

package/dist/version.d.ts

@@ -1 +1 @@
-export declare const VERSION = "0.0.78";
+export declare const VERSION = "0.0.80";

package/dist/version.js

@@ -1,4 +1,4 @@
-const o = "0.0.78";
+const o = "0.0.80";
 export {
   o as VERSION
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coinbase/cdp-react",
-  "version": "0.0.78",
+  "version": "0.0.80",
   "type": "module",
   "dependencies": {
     "@internationalized/number": "3.6.4",
@@ -11,12 +11,13 @@
     "@radix-ui/react-select": "^2.2.6",
     "big.js": "7.0.1",
     "clsx": "^2.1.1",
-    "libphonenumber-js": "^1.12.10"
+    "libphonenumber-js": "^1.12.10",
+    "qrcode": "^1.5.4"
   },
   "peerDependencies": {
     "react": ">=18.2.0 <19.2.0",
-    "@coinbase/cdp-core": "^0.0.78",
-    "@coinbase/cdp-hooks": "^0.0.78"
+    "@coinbase/cdp-hooks": "^0.0.80",
+    "@coinbase/cdp-core": "^0.0.80"
   },
   "devDependencies": {
     "@size-limit/preset-big-lib": "^11.2.0",
@@ -29,6 +30,7 @@
     "@testing-library/user-event": "^14.6.1",
     "@types/big.js": "6.2.2",
     "@types/glob": "^9.0.0",
+    "@types/qrcode": "^1.5.6",
     "@types/react": "~19.1.0",
     "@types/react-dom": "~19.1.0",
     "@vitejs/plugin-react": "^4.6.0",
@@ -47,8 +49,8 @@
     "vite": "^7.0.4",
     "vite-plugin-dts": "^4.5.4",
     "vite-plugin-lib-inject-css": "^2.2.2",
-    "@coinbase/cdp-core": "^0.0.78",
-    "@coinbase/cdp-hooks": "^0.0.78"
+    "@coinbase/cdp-core": "^0.0.80",
+    "@coinbase/cdp-hooks": "^0.0.80"
   },
   "size-limit": [
     {
@@ -56,7 +58,7 @@
       "path": "./dist/index.js",
       "import": "*",
       "running": false,
-      "limit": "115 KB"
+      "limit": "132 KB"
     },
     {
       "name": "single-component",

package/dist/assets/CopyAddress.css

@@ -1 +0,0 @@
-.CopyAddress-module__address-copy___KpKeI{display:flex;flex-direction:column;gap:.25em}.CopyAddress-module__label___O2o5m{display:block}.CopyAddress-module__address-input-container___qq0TH{position:relative;background-color:var(--cdp-web-colors-input-bg-readonly);color:var(--cdp-web-colors-input-text-readonly);cursor:pointer;border-radius:var(--cdp-web-borderRadius-input);padding:.75em;display:flex;align-items:center;justify-content:space-between;gap:.5em}.CopyAddress-module__address-truncated___kr8St{font-size:.875em;color:var(--cdp-web-colors-input-text-readonly);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;pointer-events:none}.CopyAddress-module__copy-button___64o2y{align-items:center;background:transparent;border:0;border-radius:var(--cdp-web-borderRadius-cta);color:var(--cdp-web-colors-input-text-readonly);cursor:pointer;display:flex;height:1.5em;line-height:1;justify-content:center;padding:0;width:1.5em}.CopyAddress-module__copy-button___64o2y:focus{outline:none}.CopyAddress-module__copy-button___64o2y:focus-visible{--cdp-web-button-ring-color: var(--cdp-web-colors-input-border-focus);--cdp-web-button-ring-inset-color: var(--cdp-web-colors-page-bg-default);box-shadow:inset 0 0 0 2px var(--cdp-web-button-ring-inset-color),0 0 0 2px var(--cdp-web-button-ring-color)}.CopyAddress-module__success-icon___qXipU{display:block;width:1.25em;height:1.25em}.CopyAddress-module__copy-icon___lUbYG{display:block;width:.875em;height:.875em}

package/dist/assets/LinkAuthItem.css

@@ -1 +0,0 @@
-.LinkAuthItem-module__item___NE3CT{display:flex;align-items:center;justify-content:flex-start;gap:.75em;padding:.5em 1em;margin:0;box-shadow:inset 0 0 0 1px var(--cdp-web-colors-page-border-default);color:var(--cdp-web-colors-page-text-default);border-radius:.75em}.LinkAuthItem-module__item-icon___ZIQny{display:flex;align-items:center;justify-content:center;width:1em;height:1em}.LinkAuthItem-module__item-icon___ZIQny svg{width:.875em;height:.875em}.LinkAuthItem-module__item-text___-5DVL{font-weight:500;font-size:.875em;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.LinkAuthItem-module__item-action___4wOIN{display:flex;align-items:center;margin-left:auto;margin-right:0}.LinkAuthItem-module__button___nM5Tc{width:1.5em;height:1.5em;padding:0}.LinkAuthItem-module__button___nM5Tc:disabled{opacity:.5;cursor:not-allowed}.LinkAuthItem-module__button___nM5Tc svg{width:.75em;height:.75em}