feat: improve tokenChain logo on deposit, and pusher adjustment

Author: akbarsaputrait

examples/nextjs-app/package.json

@@ -13,8 +13,8 @@
     "@farcaster/frame-sdk": "^0.0.26",
     "@headlessui/react": "^2.2.0",
     "@rainbow-me/rainbowkit": "^2.2.8",
-    "@rozoai/intent-common": "0.1.6-beta.1",
-    "@rozoai/intent-pay": "0.1.5-beta.2",
+    "@rozoai/intent-common": "workspace:*",
+    "@rozoai/intent-pay": "workspace:*",
     "@tanstack/react-query": "^5.51.11",
     "@types/react-syntax-highlighter": "^15.5.13",
     "@wagmi/core": "^2.22.0",

package.json

@@ -6,7 +6,7 @@
   "main": "index.js",
   "scripts": {
     "build": "pnpm --filter @rozoai/intent-common build && pnpm --filter @rozoai/intent-pay build",
-    "dev": "pnpm --concurrent --filter '@rozoai/*' dev",
+    "dev": "pnpm -r --parallel --filter '@rozoai/*' dev",
     "dev:common": "pnpm --filter @rozoai/intent-common build --watch",
     "dev:pay": "pnpm --filter @rozoai/intent-pay dev",
     "dev:example": "pnpm --filter @rozoai/pay-nextjs-app-example dev",

packages/connectkit/bundle-analysis.html

@@ -47,7 +47,7 @@
     "@albedo-link/intent": "^0.13.0",
     "@reown/appkit": "^1.7.0",
     "@rollup/plugin-typescript": "^12.1.2",
-    "@rozoai/intent-common": "0.1.6-beta.1",
+    "@rozoai/intent-common": "workspace:*",
     "@solana/spl-token": "^0.4.14",
     "@solana/wallet-adapter-base": "^0.9.27",
     "@solana/wallet-adapter-react": "^0.15.39",
@@ -80,18 +80,10 @@
   "peerDependenciesMeta": {
     "@worldcoin/minikit-js": {
       "optional": true
-    },
-    "@creit.tech/stellar-wallets-kit": {
-      "optional": true
-    },
-    "@stellar/stellar-sdk": {
-      "optional": true
     }
   },
   "devDependencies": {
-    "@creit.tech/stellar-wallets-kit": "^1.9.5",
     "@rollup/plugin-json": "^6.1.0",
-    "@stellar/stellar-sdk": "^14.2.0",
     "@types/node": "^20.14.12",
     "@types/qrcode": "^1.4.2",
     "@types/react": "^18.2.47",

packages/connectkit/package.json

@@ -19,6 +19,8 @@ export interface Option {
   title: string;
   subtitle?: string;
   icons: (React.ReactNode | string)[];
+  rightIcons?: (React.ReactNode | string)[];
+  iconsPosition?: "left" | "right";
   onClick: () => void;
   disabled?: boolean;
 }
@@ -131,9 +133,18 @@ const OptionItem = ({ option }: { option: Option }) => {
     return icon;
   });
 
+  const hydratedRightIcons =
+    option.rightIcons?.map((icon, index) => {
+      if (typeof icon === "string") {
+        return <img key={`${option.id}-right-${index}`} src={icon} alt="" />;
+      }
+      return icon;
+    }) || [];
+
+  const iconsPosition = option.iconsPosition || "right";
   const iconContent = (() => {
     return (
-      <IconStackContainer>
+      <IconStackContainer $position={iconsPosition}>
         {hydratedIcons.map((icon, index) => (
           <IconStackItem
             key={index}
@@ -147,22 +158,51 @@ const OptionItem = ({ option }: { option: Option }) => {
     );
   })();
 
+  const rightIconContent =
+    hydratedRightIcons.length > 0 ? (
+      <RightIconStackContainer>
+        {hydratedRightIcons.map((icon, index) => (
+          <RightIconStackItem
+            key={index}
+            $marginRight={index !== hydratedRightIcons.length - 1 ? -8 : 0}
+            $zIndex={hydratedRightIcons.length - index}
+          >
+            {icon}
+          </RightIconStackItem>
+        ))}
+      </RightIconStackContainer>
+    ) : null;
+
   return (
     <OptionButton
       type="button"
       onClick={option.onClick}
       disabled={option.disabled}
     >
       {iconContent}
-      <OptionLabel>
+      <OptionLabel
+        $hasRightIcons={hydratedRightIcons.length > 0}
+        $iconsPosition={iconsPosition}
+      >
         <OptionTitle>{option.title}</OptionTitle>
         {option.subtitle && <OptionSubtitle>{option.subtitle}</OptionSubtitle>}
       </OptionLabel>
+      {rightIconContent}
     </OptionButton>
   );
 };
 
-const IconStackContainer = styled(motion.div)`
+const IconStackContainer = styled(motion.div)<{
+  $position?: "left" | "right";
+}>`
+  position: absolute;
+  ${(props) => (props.$position === "left" ? "left: 20px;" : "right: 20px;")}
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+
+const RightIconStackContainer = styled(motion.div)`
   position: absolute;
   right: 20px;
   display: flex;
@@ -196,3 +236,30 @@ const IconStackItem = styled(motion.div)<{
   }
   border-radius: 22.5%;
 `;
+
+const RightIconStackItem = styled(motion.div)<{
+  $marginRight?: number;
+  $zIndex?: number;
+}>`
+  display: block;
+  overflow: hidden;
+  user-select: none;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-right: ${(props) => props.$marginRight || 0}px;
+  z-index: ${(props) => props.$zIndex || 2};
+  width: 24px;
+  height: 24px;
+  overflow: hidden;
+  svg,
+  img {
+    display: block;
+    position: relative;
+    pointer-events: none;
+    overflow: hidden;
+    width: 100%;
+    height: 100%;
+  }
+  border-radius: 22.5%;
+`;

packages/connectkit/src/components/Common/OptionsList/index.tsx

@@ -99,15 +99,23 @@ export const OptionButton = styled(motion.button)`
   }
 `;
 
-export const OptionLabel = styled(motion.span)`
+export const OptionLabel = styled(motion.span)<{
+  $hasRightIcons?: boolean;
+  $iconsPosition?: "left" | "right";
+}>`
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   gap: 2px;
   width: 100%;
   overflow: hidden;
   padding: 2px 0;
-  padding-right: 38px;
+  padding-left: ${(props) => (props.$iconsPosition === "left" ? "42px" : "0")};
+  padding-right: ${(props) => {
+    if (props.$hasRightIcons) return "38px";
+    if (props.$iconsPosition === "right") return "38px";
+    return "0";
+  }};
 `;
 
 export const OptionTitle = styled(motion.span)`