Repository: stellar/laboratory
Pull request #1369: Replace book icon with info icon
Author: login: quietbits
Created: 2025-04-29T13:19:36Z | Merged: 2025-04-29T20:03:28Z

- Replace book icon with info icon
- Upgrade to the latest SDS


Diff:
diff --git a/package.json b/package.json
index 0e7495d73..5808857b5 100644
--- a/package.json
+++ b/package.json
@@ -24,7 +24,7 @@
     "@ledgerhq/hw-app-str": "^7.2.0",
     "@ledgerhq/hw-transport-webusb": "^6.29.4",
     "@monaco-editor/react": "^4.7.0",
-    "@stellar/design-system": "^2.0.0-beta.17",
+    "@stellar/design-system": "^3.1.1",
     "@stellar/stellar-sdk": "^13.0.0",
     "@stellar/stellar-xdr-json": "^22.0.0-rc.1.1",
     "@tanstack/react-query": "^5.74.4",
diff --git a/src/app/(sidebar)/transaction/build/components/ClassicOperation.tsx b/src/app/(sidebar)/transaction/build/components/ClassicOperation.tsx
index c99587e13..a8cd84c14 100644
--- a/src/app/(sidebar)/transaction/build/components/ClassicOperation.tsx
+++ b/src/app/(sidebar)/transaction/build/components/ClassicOperation.tsx
@@ -227,6 +227,7 @@ export const ClassicOperation = ({
         disabled
         copyButton={{ position: "right" }}
         infoLink="https://developers.stellar.org/docs/learn/glossary#claimablebalanceid"
+        infoLinkIcon={<Icon.InfoCircle />}
       />
     );
   };
diff --git a/src/app/(sidebar)/transaction/build/components/Operations.tsx b/src/app/(sidebar)/transaction/build/components/Operations.tsx
index 517a6a943..6811cd834 100644
--- a/src/app/(sidebar)/transaction/build/components/Operations.tsx
+++ b/src/app/(sidebar)/transaction/build/components/Operations.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { ChangeEvent, useEffect, useState } from "react";
-import { Select, Notification } from "@stellar/design-system";
+import { Select, Notification, Icon } from "@stellar/design-system";
 
 import { formComponentTemplateTxnOps } from "@/components/formComponentTemplateTxnOps";
 import { SdsLink } from "@/components/SdsLink";
@@ -780,6 +780,7 @@ export const Operations = () => {
           label="Operation type"
           value={operationType}
           infoLink="https://developers.stellar.org/docs/learn/fundamentals/transactions/list-of-operations"
+          infoLinkIcon={<Icon.InfoCircle />}
           onChange={(e) => {
             const defaultParams =
               TRANSACTION_OPERATIONS[e.target.value]?.defaultParams || {};
diff --git a/src/components/FloaterDropdown/styles.scss b/src/components/FloaterDropdown/styles.scss
index 11299a829..029807945 100644
--- a/src/components/FloaterDropdown/styles.scss
+++ b/src/components/FloaterDropdown/styles.scss
@@ -12,8 +12,11 @@
 
 .Floater__content {
   &:has(.FloaterDropdown__content) {
+    --Floater-background-color: var(--sds-clr-gray-01);
+
     left: auto !important;
     right: 0 !important;
     width: pxToRem(240px);
+    border: 1px solid var(--sds-clr-gray-06);
   }
 }
diff --git a/src/components/FormElements/PositiveIntPicker.tsx b/src/components/FormElements/PositiveIntPicker.tsx
index 48ab3a84e..08b6dae58 100644
--- a/src/components/FormElements/PositiveIntPicker.tsx
+++ b/src/components/FormElements/PositiveIntPicker.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { Input, InputProps } from "@stellar/design-system";
+import { Icon, Input, InputProps } from "@stellar/design-system";
 
 interface PositiveIntPickerProps extends Omit<InputProps, "fieldSize"> {
   id: string;
@@ -37,6 +37,7 @@ export const PositiveIntPicker = ({
       onChange={onChange}
       readOnly={readOnly}
       disabled={disabled}
+      infoLinkIcon={<Icon.InfoCircle />}
       {...props}
     />
   );
diff --git a/src/components/FormElements/PubKeyPicker.tsx b/src/components/FormElements/PubKeyPicker.tsx
index a77f136ad..1d2bf1920 100644
--- a/src/components/FormElements/PubKeyPicker.tsx
+++ b/src/components/FormElements/PubKeyPicker.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { Input, InputProps } from "@stellar/design-system";
+import { Icon, Input, InputProps } from "@stellar/design-system";
 
 interface PubKeyPickerProps extends Omit<InputProps, "fieldSize"> {
   id: string;
@@ -38,6 +38,7 @@ export const PubKeyPicker = ({
     readOnly={readOnly}
     disabled={disabled}
     onChange={onChange}
+    infoLinkIcon={<Icon.InfoCircle />}
     {...props}
   />
 );
diff --git a/src/components/FormElements/TextPicker.tsx b/src/components/FormElements/TextPicker.tsx
index bc839f114..a6443f6bb 100644
--- a/src/components/FormElements/TextPicker.tsx
+++ b/src/components/FormElements/TextPicker.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { Input, InputProps } from "@stellar/design-system";
+import { Icon, Input, InputProps } from "@stellar/design-system";
 
 interface TextPickerProps extends Omit<InputProps, "fieldSize"> {
   id: string;
@@ -39,6 +39,7 @@ export const TextPicker = ({
     readOnly={readOnly}
     disabled={disabled}
     autoComplete={autocomplete}
+    infoLinkIcon={<Icon.InfoCircle />}
     {...props}
   />
 );
diff --git a/src/components/LabelHeading.tsx b/src/components/LabelHeading.tsx
index 1163b95ee..762d7aa7d 100644
--- a/src/components/LabelHeading.tsx
+++ b/src/components/LabelHeading.tsx
@@ -28,7 +28,7 @@ export const LabelHeading = ({
         rel="noreferrer noopener"
         target="_blank"
       >
-        <Icon.BookOpen01 />
+        <Icon.InfoCircle />
       </a>
     ) : null}
 
diff --git a/src/components/NetworkSelector/index.tsx b/src/components/NetworkSelector/index.tsx
index 46d9a21b2..0c31ed179 100644
--- a/src/components/NetworkSelector/index.tsx
+++ b/src/components/NetworkSelector/index.tsx
@@ -482,6 +482,7 @@ const NetworkInput = ({
         position: "right",
       }}
       infoLink={infoLink}
+      infoLinkIcon={<Icon.InfoCircle />}
       {...(disableAutocomplete ? { autoComplete: "off" } : {})}
     />
   );
diff --git a/src/components/NetworkSelector/styles.scss b/src/components/NetworkSelector/styles.scss
index 188ddcfb6..28c5dc9ff 100644
--- a/src/components/NetworkSelector/styles.scss
+++ b/src/components/NetworkSelector/styles.scss
@@ -13,6 +13,8 @@
   --NetworkSelector-padding-horizontal: #{pxToRem(10px)};
   --NetworkSelector-box-shadow-size: 0;
 
+  --Floater-background-color: var(--sds-clr-gray-01);
+
   position: relative;
 
   // Button
@@ -58,6 +60,7 @@
     display: none;
     opacity: 0;
     min-width: pxToRem(360px);
+    border: 1px solid var(--sds-clr-gray-06);
 
     &[data-is-active="true"] {
       display: block;
diff --git a/src/components/WithInfoText/index.tsx b/src/components/WithInfoText/index.tsx
index db63b0edb..52dba5c75 100644
--- a/src/components/WithInfoText/index.tsx
+++ b/src/components/WithInfoText/index.tsx
@@ -34,7 +34,7 @@ export const WithInfoText = ({
         {children}
 
         <NextLink {...buttonBaseProps} href={href}>
-          <Icon.BookOpen01 />
+          <Icon.InfoCircle />
         </NextLink>
       </div>
     );
diff --git a/yarn.lock b/yarn.lock
index 47e5a874a..f09441ba8 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -282,19 +282,24 @@
   dependencies:
     "@floating-ui/utils" "^0.2.8"
 
-"@floating-ui/dom@^1.6.11":
-  version "1.6.11"
-  resolved "https://registry.yarnpkg.com/@floating-ui/dom/-/dom-1.6.11.tgz#8631857838d34ee5712339eb7cbdfb8ad34da723"
-  integrity sha512-qkMCxSR24v2vGkhYDo/UzxfJN3D4syqSjyuTFz6C7XcpU1pASPRieNI0Kj5VP3/503mOfYiGY891ugBX1GlABQ==
+"@floating-ui/dom@^1.6.13":
+  version "1.6.13"
+  resolved "https://registry.yarnpkg.com/@floating-ui/dom/-/dom-1.6.13.tgz#a8a938532aea27a95121ec16e667a7cbe8c59e34"
+  integrity sha512-umqzocjDgNRGTuO7Q8CU32dkHkECqI8ZdMZ5Swb6QAM0t5rnlrN3lGo1hdpscRd3WS8T6DKYK4ephgIH9iRh3w==
   dependencies:
     "@floating-ui/core" "^1.6.0"
-    "@floating-ui/utils" "^0.2.8"
+    "@floating-ui/utils" "^0.2.9"
 
 "@floating-ui/utils@^0.2.8":
   version "0.2.8"
   resolved "https://registry.yarnpkg.com/@floating-ui/utils/-/utils-0.2.8.tgz#21a907684723bbbaa5f0974cf7730bd797eb8e62"
   integrity sha512-kym7SodPp8/wloecOpcmSnWJsK7M0E5Wg8UcFA+uO4B9s5d0ywXOEro/8HM9x0rW+TljRzul/14UYz3TleT3ig==
 
+"@floating-ui/utils@^0.2.9":
+  version "0.2.9"
+  resolved "https://registry.yarnpkg.com/@floating-ui/utils/-/utils-0.2.9.tgz#50dea3616bc8191fb8e112283b49eaff03e78429"
+  integrity sha512-MDWhGtE+eHw5JW7lq4qhc5yRLS11ERl1c7Z6Xd0a58DozHES6EnNNwUWbMiG4J9Cgj053Bhk8zvlhFYKVhULwg==
+
 "@hot-wallet/sdk@1.0.11":
   version "1.0.11"
   resolved "https://registry.yarnpkg.com/@hot-wallet/sdk/-/sdk-1.0.11.tgz#a46353356c4c700b5415d977c391858f50578778"
@@ -1568,16 +1573,16 @@
     "@stablelib/random" "^1.0.2"
     "@stablelib/wipe" "^1.0.1"
 
-"@stellar/design-system@^2.0.0-beta.17":
-  version "2.0.0-beta.17"
-  resolved "https://registry.yarnpkg.com/@stellar/design-system/-/design-system-2.0.0-beta.17.tgz#67c0fdd9bc62d3b69277b6bd8c6e96952dc0613c"
-  integrity sha512-OI550YuErfOebfGfkMvDYF0KizzzouI9+npsBvAs1eL1+ILNTbeZusX+dYoVvmHJMkzpnF9gXTAcUJnfUIfWSg==
+"@stellar/design-system@^3.1.1":
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/@stellar/design-system/-/design-system-3.1.1.tgz#4e94443871c323489d0ed29ecafe2b401124e9ca"
+  integrity sha512-ANxdIKrQA+NRQB0pYFHYSWpGK4biD9ZMhiA7fA1egIrmMg+IdMrToNQYnfVEv9CEpA5b2QkyDvVnxVouERMamw==
   dependencies:
-    "@floating-ui/dom" "^1.6.11"
+    "@floating-ui/dom" "^1.6.13"
     bignumber.js "^9.1.2"
     lodash "^4.17.21"
     react-copy-to-clipboard "^5.1.0"
-    tslib "^2.7.0"
+    tslib "^2.8.1"
 
 "@stellar/freighter-api@4.0.0":
   version "4.0.0"
@@ -6772,11 +6777,6 @@ tslib@^2.4.1, tslib@^2.8.0, tslib@^2.8.1:
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.8.1.tgz#612efe4ed235d567e8aba5f2a5fab70280ade83f"
   integrity sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==
 
-tslib@^2.7.0:
-  version "2.7.0"
-  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.7.0.tgz#d9b40c5c40ab59e8738f297df3087bf1a2690c01"
-  integrity sha512-gLXCKdN1/j47AiHiOkJN69hJmcbGTHI0ImLmbYLHykhgeN0jVGola9yVjFgzCUklsZQMW55o+dW7IXv3RCXDzA==
-
 tweetnacl-util@^0.15.1:
   version "0.15.1"
   resolved "https://registry.yarnpkg.com/tweetnacl-util/-/tweetnacl-util-0.15.1.tgz#b80fcdb5c97bcc508be18c44a4be50f022eea00b"


Reviews:
user: login: leighmcculloch
state: APPROVED
author_association: MEMBER
submitted_at: 2025-04-29T13:51:05Z
user: login: jeesunikim
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-29T16:54:40Z
user: login: quietbits
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-29T17:42:55Z

Review comments:
diff_hunk: @@ -1,4 +1,4 @@
-import { ChangeEvent, Fragment, useState } from "react";
+import React, { ChangeEvent, Fragment, useState } from "react";
path: src/app/(sidebar)/transaction/build/components/ClassicOperation.tsx
user: login: jeesunikim
body: do we need this?
created_at: 2025-04-29T16:54:39Z
author_association: CONTRIBUTOR
diff_hunk: @@ -1,4 +1,4 @@
-import { ChangeEvent, Fragment, useState } from "react";
+import React, { ChangeEvent, Fragment, useState } from "react";
path: src/app/(sidebar)/transaction/build/components/ClassicOperation.tsx
user: login: quietbits
body: My IDE automatically added it because it prefers having it imported instead of using global. But we don't need it there, so I'll remove it.
created_at: 2025-04-29T17:42:55Z
author_association: CONTRIBUTOR

PR comments:
user: login: socket-security[bot]
created_at: 2025-04-29T13:20:47Z
body: **Review the following changes in direct dependencies.** Learn more about [Socket for GitHub](https://socket.dev?utm_medium=gh).

<table>
<thead>
<tr>
<th>Diff</th>
<th width="200px">Package</th>
<th align="left" width="100px">Supply Chain<br/>Security</th>
<th align="left" width="100px">Vulnerability</th>
<th align="left" width="100px">Quality</th>
<th align="left" width="100px">Maintenance</th>
<th align="left" width="100px">License</th>
</tr>
</thead>
<tbody>
<tr><td align="center"><a href="https://socket.dev/dashboard/org/stellar/diff/fc95c8b3-aa19-49df-bfb9-67001ca45f50/c57b794a-ff40-497f-a45b-c86c2edd655a?tab=dependencies&dependency_item_key=15930850090"><img src="https://github-app-statics.socket.dev/diff-added.svg" title="Added" alt="Added" width="20" height="20"></a></td><td><a href="https://socket.dev/dashboard/org/stellar/diff/fc95c8b3-aa19-49df-bfb9-67001ca45f50/c57b794a-ff40-497f-a45b-c86c2edd655a?tab=dependencies&dependency_item_key=15930850090">@​floating-ui/​utils@​0.2.9</a></td><td align="left"><a href="https://socket.dev/dashboard/org/stellar/diff/fc95c8b3-aa19-49df-bfb9-67001ca45f50/c57b794a-ff40-497f-a45b-c86c2edd655a?tab=dependencies&dependency_item_key=15930850090"><img src="https://github-app-statics.socket.dev/score-100.svg" title="Supply Chain Security" width="40" height="40" alt="100"></a></td><td align="left"><a href="https://socket.dev/dashboard/org/stellar/diff/fc95c8b3-aa19-49df-bfb9-67001ca45f50/c57b794a-ff40-497f-a45b-c86c2edd655a?tab=dependencies&dependency_item_key=15930850090"><img src="https://github-app-statics.socket.dev/score-100.svg" title="Vulnerability" width="40" height="40" alt="100"></a></td><td align="left"><a href="https://socket.dev/dashboard/org/stellar/diff/fc95c8b3-aa19-49df-bfb9-67001ca45f50/c57b794a-ff40-497f-a45b-c86c2edd655a?tab=dependencies&dependency_item_key=15930850090"><img src="https://github-app-statics.socket.dev/score-70.svg" title="Quality" width="40" height="40" alt="70"></a></td><td align="left"><a href="https://socket.dev/dashboard/org/stellar/diff/fc95c8b3-aa19-49df-bfb9-67001ca45f50/c57b794a-ff40-497f-a45b-c86c2edd655a?tab=dependencies&dependency_item_key=15930850090"><img src="https://github-app-statics.socket.dev/score-83.svg" title="Maintenance" width="40" height="40" alt="83"></a></td><td align="left"><a href="https://socket.dev/dashboard/org/stellar/diff/fc95c8b3-aa19-49df-bfb9-67001ca45f50/c57b794a-ff40-497f-a45b-c86c2edd655a?tab=dependencies&dependency_item_key=15930850090"><img src="https://github-app-statics.socket.dev/score-100.svg" title="License" width="40" height="40" alt="100"></a></td></tr>
<tr><td align="center"><a href="https://socket.dev/dashboard/org/stellar/diff/fc95c8b3-aa19-49df-bfb9-67001ca45f50/c57b794a-ff40-497f-a45b-c86c2edd655a?tab=dependencies&dependency_item_key=15930849857"><img src="https://github-app-statics.socket.dev/diff-updated.svg" title="Updated" alt="Updated" width="20" height="20"></a></td><td><a href="https://socket.dev/dashboard/org/stellar/diff/fc95c8b3-aa19-49df-bfb9-67001ca45f50/c57b794a-ff40-497f-a45b-c86c2edd655a?tab=dependencies&dependency_item_key=15930849857">@​floating-ui/​dom@​1.6.11 ⏵ 1.6.13</a></td><td align="left"><a href="https://socket.dev/dashboard/org/stellar/diff/fc95c8b3-aa19-49df-bfb9-67001ca45f50/c57b794a-ff40-497f-a45b-c86c2edd655a?tab=dependencies&dependency_item_key=15930849857"><img src="https://github-app-statics.socket.dev/score-100.svg" title="Supply Chain Security" width="40" height="40" alt="100"></a> <sup>+1</sup></td><td align="left"><a href="https://socket.dev/dashboard/org/stellar/diff/fc95c8b3-aa19-49df-bfb9-67001ca45f50/c57b794a-ff40-497f-a45b-c86c2edd655a?tab=dependencies&dependency_item_key=15930849857"><img src="https://github-app-statics.socket.dev/score-100.svg" title="Vulnerability" width="40" height="40" alt="100"></a></td><td align="left"><a href="https://socket.dev/dashboard/org/stellar/diff/fc95c8b3-aa19-49df-bfb9-67001ca45f50/c57b794a-ff40-497f-a45b-c86c2edd655a?tab=dependencies&dependency_item_key=15930849857"><img src="https://github-app-statics.socket.dev/score-72.svg" title="Quality" width="40" height="40" alt="72"></a> <sup>+1</sup></td><td align="left"><a href="https://socket.dev/dashboard/org/stellar/diff/fc95c8b3-aa19-49df-bfb9-67001ca45f50/c57b794a-ff40-497f-a45b-c86c2edd655a?tab=dependencies&dependency_item_key=15930849857"><img src="https://github-app-statics.socket.dev/score-84.svg" title="Maintenance" width="40" height="40" alt="84"></a></td><td align="left"><a href="https://socket.dev/dashboard/org/stellar/diff/fc95c8b3-aa19-49df-bfb9-67001ca45f50/c57b794a-ff40-497f-a45b-c86c2edd655a?tab=dependencies&dependency_item_key=15930849857"><img src="https://github-app-statics.socket.dev/score-100.svg" title="License" width="40" height="40" alt="100"></a></td></tr>
<tr><td align="center"><a href="https://socket.dev/dashboard/org/stellar/diff/fc95c8b3-aa19-49df-bfb9-67001ca45f50/c57b794a-ff40-497f-a45b-c86c2edd655a?tab=dependencies&dependency_item_key=26710725719"><img src="https://github-app-statics.socket.dev/diff-updated.svg" title="Updated" alt="Updated" width="20" height="20"></a></td><td><a href="https://socket.dev/dashboard/org/stellar/diff/fc95c8b3-aa19-49df-bfb9-67001ca45f50/c57b794a-ff40-497f-a45b-c86c2edd655a?tab=dependencies&dependency_item_key=26710725719">@​stellar/​design-system@​2.0.0-beta.17 ⏵ 3.1.1</a></td><td align="left"><a href="https://socket.dev/dashboard/org/stellar/diff/fc95c8b3-aa19-49df-bfb9-67001ca45f50/c57b794a-ff40-497f-a45b-c86c2edd655a?tab=dependencies&dependency_item_key=26710725719"><img src="https://github-app-statics.socket.dev/score-79.svg" title="Supply Chain Security" width="40" height="40" alt="79"></a></td><td align="left"><a href="https://socket.dev/dashboard/org/stellar/diff/fc95c8b3-aa19-49df-bfb9-67001ca45f50/c57b794a-ff40-497f-a45b-c86c2edd655a?tab=dependencies&dependency_item_key=26710725719"><img src="https://github-app-statics.socket.dev/score-100.svg" title="Vulnerability" width="40" height="40" alt="100"></a></td><td align="left"><a href="https://socket.dev/dashboard/org/stellar/diff/fc95c8b3-aa19-49df-bfb9-67001ca45f50/c57b794a-ff40-497f-a45b-c86c2edd655a?tab=dependencies&dependency_item_key=26710725719"><img src="https://github-app-statics.socket.dev/score-100.svg" title="Quality" width="40" height="40" alt="100"></a> <sup>+1</sup></td><td align="left"><a href="https://socket.dev/dashboard/org/stellar/diff/fc95c8b3-aa19-49df-bfb9-67001ca45f50/c57b794a-ff40-497f-a45b-c86c2edd655a?tab=dependencies&dependency_item_key=26710725719"><img src="https://github-app-statics.socket.dev/score-94.svg" title="Maintenance" width="40" height="40" alt="94"></a> <sup>+5</sup></td><td align="left"><a href="https://socket.dev/dashboard/org/stellar/diff/fc95c8b3-aa19-49df-bfb9-67001ca45f50/c57b794a-ff40-497f-a45b-c86c2edd655a?tab=dependencies&dependency_item_key=26710725719"><img src="https://github-app-statics.socket.dev/score-100.svg" title="License" width="40" height="40" alt="100"></a></td></tr>
</tbody>
</table>

[View full report](https://socket.dev/dashboard/org/stellar/diff/fc95c8b3-aa19-49df-bfb9-67001ca45f50/c57b794a-ff40-497f-a45b-c86c2edd655a?tab=dependencies)

<!-- overview-comment -->
author_association: NONE
user: login: stellar-jenkins
created_at: 2025-04-29T13:29:53Z
body: **Preview is available here:**<br>http://laboratory-pr1369.previews.kube001.services.stellar-ops.com/
author_association: NONE
user: login: stellar-jenkins
created_at: 2025-04-29T17:43:52Z
body: **Preview is available here:**<br>http://laboratory-pr1369.previews.kube001.services.stellar-ops.com/
author_association: NONE
user: login: stellar-jenkins
created_at: 2025-04-29T19:55:34Z
body: **Preview is available here:**<br>http://laboratory-pr1369.previews.kube001.services.stellar-ops.com/
author_association: NONE