@gluwa/connect-kit 0.1.0-next.3 → 0.2.0-next.10

package/src/style/mixin.scss

@@ -0,0 +1,217 @@
+@charset "UTF-8";
+@use 'sass:map';
+@use './variables.scss' as *;
+
+@mixin tiny-mobile {
+  @media (max-width: #{$tiny-mobile-width}) {
+    @content;
+  }
+}
+
+@mixin themedScrollbar {
+  // Firefox
+  scrollbar-width: thin;
+  scrollbar-color: var(--scale-gray-300) transparent;
+
+  // WebKit (Chrome / Safari)
+  &::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+  }
+  &::-webkit-scrollbar-track {
+    background: transparent;
+  }
+  &::-webkit-scrollbar-thumb {
+    background-color: var(--scale-gray-300);
+    border-radius: 3px;
+  }
+  &::-webkit-scrollbar-thumb:hover {
+    background-color: var(--scale-gray-400);
+  }
+}
+
+@mixin small-mobile {
+  @media (max-width: #{$small-mobile-width}) {
+    @content;
+  }
+}
+
+@mixin mobile {
+  @media (max-width: #{$mobile-width}) {
+    @content;
+  }
+}
+
+@mixin wide-mobile {
+  @media (max-width: #{$wide-mobile-width}) {
+    @content;
+  }
+}
+
+@mixin tablet {
+  @media (max-width: #{$tablet-width}) {
+    @content;
+  }
+}
+
+@mixin break {
+  @media (max-width: #{$break-width}) {
+    @content;
+  }
+}
+
+@mixin tiny-pc {
+  @media (max-width: #{$tiny-pc-width}) {
+    @content;
+  }
+}
+
+@mixin small-pc {
+  @media (max-width: #{$small-pc-width}) {
+    @content;
+  }
+}
+
+@mixin min-pc {
+  @media (max-width: #{$min-pc-width}) {
+    @content;
+  }
+}
+
+@mixin max-width($width) {
+  @media (max-width: #{$width}) {
+    @content;
+  }
+}
+
+@mixin background-image($image, $path: null, $type: png) {
+	background-repeat: no-repeat;
+	background-size: cover;
+	@if ($path == null) {
+		background-image: url(../../src/asset/image/#{$image}.#{$type});
+
+	} @else {
+    background-image: url(../../src/asset/image/#{$path}/#{$image}.#{$type});
+  }
+}
+@mixin mask-image($image, $type: svg, $path: null) {
+  mask-repeat: no-repeat;
+  mask-size: cover;
+
+  @if ($path == null) {
+    mask-image: url(../../src/asset/image/#{$image}.#{$type});
+  } @else {
+    mask-image: url(../../src/asset/image/#{$path}/#{$image}.#{$type});
+  }
+}
+
+@mixin font-scale(
+  $font-family,
+  $size-pc,
+  $size-tablet,
+  $line-height: 1.5,
+  $letter-spacing: null
+) {
+  font-family: $font-family;
+  font-size: $size-pc;
+  line-height: $line-height;
+  @if $letter-spacing != null {
+    letter-spacing: $letter-spacing;
+  }
+  @include tablet {
+    font-size: calc(($size-pc + $size-tablet) / 2);
+  }
+  @include mobile {
+    font-size: $size-tablet;
+  }
+}
+
+$tokens: (
+  'h1-bold': ('Inter-SB', 72px, 36px, 1.15, -0.03em),
+  'h1-regular': ('Inter-R', 72px, 36px, 1.15, -0.03em),
+  'h2-bold': ('Inter-SB', 60px, 36px, 1.15, -0.03em),
+  'h2-regular': ('Inter-R', 60px, 36px, 1.15, -0.03em),
+  'h3-bold': ('Inter-SB', 54px, 36px, 1.15, -0.03em),
+  'h3-regular': ('Inter-R', 54px, 36px, 1.15, -0.03em),
+  'h4-bold': ('Inter-SB', 48px, 30px, 1.15, -0.03em),
+  'h4-regular': ('Inter-R', 48px, 30px, 1.15, -0.03em),
+  'h5-bold': ('Inter-SB', 42px, 28px, 1.15, -0.03em),
+  'h5-regular': ('Inter-R', 42px, 28px, 1.15, -0.03em),
+
+  'amount-bold': ('Inter-SB', 60px, 60px, 1.15, -0.03em),
+  'amount-regular': ('Inter-R', 60px, 60px, 1.15, -0.03em),
+
+  'title1-bold': ('Inter-SB', 32px, 24px, 1.5, -0.03em),
+  'title1-regular': ('Inter-R', 32px, 24px, 1.5, -0.03em),
+  'title2-bold': ('Inter-SB', 26px, 22px, 1.5, -0.03em),
+  'title2-regular': ('Inter-R', 26px, 22px, 1.5, -0.03em),
+  'title3-bold': ('Inter-SB', 24px, 20px, 1.5, -0.03em),
+  'title3-regular': ('Inter-R', 24px, 20px, 1.5, -0.03em),
+  'title4-bold': ('Inter-SB', 20px, 18px, 1.5, -0.03em),
+  'title4-regular': ('Inter-R', 20px, 18px, 1.5, -0.03em),
+  'title5-bold': ('Inter-SB', 19px, 17px, 1.5, -0.01em),
+  'title5-regular': ('Inter-R', 19px, 17px, 1.5, -0.01em),
+
+  'subtitle1-bold': ('Inter-SB', 18px, 16px, 1.5, -0.01em),
+  'subtitle1-regular': ('Inter-R', 18px, 16px, 1.5, -0.01em),
+  'subtitle2-bold': ('Inter-SB', 17px, 15px, 1.5, -0.01em),
+  'subtitle2-regular': ('Inter-R', 17px, 15px, 1.5, -0.01em),
+
+  'body1-l1-bold': ('Inter-SB', 18px, 16px, 1.8, -0.01em),
+  'body1-l1-regular': ('Inter-R', 18px, 16px, 1.8, -0.01em),
+  'body1-l1-medium': ('Inter-M', 18px, 16px, 1.8, -0.01em),
+  'body1-l2-bold': ('Inter-SB', 18px, 16px, 1.5, -0.01em),
+  'body1-l2-regular':('Inter-R', 18px, 16px, 1.5, -0.01em),
+  'body1-l2-medium': ('Inter-M', 18px, 16px, 1.5, -0.01em),
+
+  'body2-l1-bold': ('Inter-SB', 17px, 15px, 1.8, -0.01em),
+  'body2-l1-regular': ('Inter-R', 17px, 15px, 1.8, -0.01em),
+  'body2-l1-medium': ('Inter-M', 17px, 15px, 1.8, -0.01em),
+  'body2-l2-bold': ('Inter-SB', 17px, 15px, 1.5, -0.01em),
+  'body2-l2-regular': ('Inter-R', 17px, 15px, 1.5, -0.01em),
+  'body2-l2-medium': ('Inter-M', 17px, 15px, 1.5, -0.01em),
+
+  'body3-l1-bold': ('Inter-SB', 16px, 14px, 1.8, -0.01em),
+  'body3-l1-regular': ('Inter-R', 16px, 14px, 1.8, -0.01em),
+  'body3-l1-medium': ('Inter-M', 16px, 14px, 1.8, -0.01em),
+  'body3-l2-bold': ('Inter-SB', 16px, 14px, 1.5, -0.01em),
+  'body3-l2-regular': ('Inter-R', 16px, 14px, 1.5, -0.01em),
+  'body3-l2-medium': ('Inter-M', 16px, 14px, 1.5, -0.01em),
+
+  'body4-l1-bold': ('Inter-SB', 15px, 13px, 1.8, -0.01em),
+  'body4-l1-regular': ('Inter-R', 15px, 13px, 1.8, -0.01em),
+  'body4-l1-medium': ('Inter-M', 15px, 13px, 1.8, -0.01em),
+  'body4-l2-bold': ('Inter-SB', 15px, 13px, 1.5, -0.01em),
+  'body4-l2-regular': ('Inter-R', 15px, 13px, 1.5, -0.01em),
+  'body4-l2-medium': ('Inter-M', 15px, 13px, 1.5, -0.01em),
+
+  'label1-bold': ('Inter-SB', 18px, 16px, 1.5, -0.01em),
+  'label1-regular': ('Inter-R', 18px, 16px, 1.5, -0.01em),
+  'label2-bold': ('Inter-SB', 17px, 15px, 1.5, -0.01em),
+  'label2-regular': ('Inter-R', 17px, 15px, 1.5, -0.01em),
+  'label3-bold': ('Inter-SB', 16px, 14px, 1.5, -0.01em),
+  'label3-regular': ('Inter-R', 16px, 14px, 1.5, -0.01em),
+  'label4-bold': ('Inter-SB', 15px, 13px, 1.5, -0.01em),
+  'label4-regular': ('Inter-R', 15px, 13px, 1.5, -0.01em),
+  'label5-bold': ('Inter-SB', 14px, 12px, 1.5, -0.01em),
+  'label5-regular': ('Inter-R', 14px, 12px, 1.5, -0.01em),
+  'label6-bold': ('Inter-SB', 13px, 11px, 1.5, -0.01em),
+  'label6-regular': ('Inter-R', 13px, 11px, 1.5, -0.01em),
+
+  'caption1-bold': ('Inter-SB', 12px, 10px, 1.5, -0.01em),
+  'caption1-regular': ('Inter-R', 12px, 10px, 1.5, -0.01em),
+  'caption2-bold': ('Inter-SB', 11px, 9px, 1.5, -0.01em),
+  'caption2-regular': ('Inter-R', 11px, 9px, 1.5, -0.01em),
+  'caption3-bold': ('Inter-SB', 10px, 8px, 1.5, -0.01em),
+  'caption3-regular': ('Inter-R', 10px, 8px, 1.5, -0.01em),
+);
+
+@mixin textToken($type) {
+  $mixin-item: map.get($tokens, $type);
+  @if $mixin-item {
+    --font-name: #{$type};
+    @include font-scale($mixin-item...);
+  } @else {
+    @warn 'Unknown text token: #{$type}';
+  }
+}

package/src/style/reset.scss

@@ -0,0 +1,110 @@
+// ── Scoped reset (.ck-root 안에서만 적용) ────────────────────────────────────
+// 전역 reset이 없는 환경에서도 dialog UI가 일관되게 보이도록 보호.
+
+.ck-root {
+  *,
+  *::before,
+  *::after {
+    box-sizing: border-box;
+  }
+
+  // 텍스트
+  p, h1, h2, h3, h4, h5, h6 {
+    margin: 0;
+    padding: 0;
+    font-weight: normal;
+  }
+
+  // 리스트
+  ul, ol {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  li {
+    margin: 0;
+    padding: 0;
+    vertical-align: top;
+  }
+
+  // 이미지
+  img {
+    display: block;
+    border: 0;
+    vertical-align: top;
+    max-width: 100%;
+  }
+
+  // 링크
+  a {
+    color: inherit;
+    text-decoration: none;
+    cursor: pointer;
+  }
+
+  // 버튼
+  button {
+    margin: 0;
+    padding: 0;
+    border: 0;
+    background: none;
+    cursor: pointer;
+    font-family: inherit;
+    color: inherit;
+    appearance: none;
+    -webkit-appearance: none;
+    outline: none;
+  }
+
+  // 인풋
+  input {
+    margin: 0;
+    padding: 0;
+    border: none;
+    background: none;
+    font-family: inherit;
+    color: inherit;
+    appearance: none;
+    -webkit-appearance: none;
+    outline: none;
+
+    &[type='search']::-webkit-search-cancel-button {
+      -webkit-appearance: none;
+    }
+
+    &[type='text']:focus,
+    &[type='search']:focus {
+      outline: none;
+    }
+  }
+
+  // dialog — preserve browser centering (margin: auto) for showModal()
+  dialog {
+    padding: 0;
+    border: none;
+    background: transparent;
+    color: inherit;
+    max-width: none;
+    max-height: none;
+  }
+
+  // label
+  label {
+    margin: 0;
+    padding: 0;
+    cursor: pointer;
+  }
+
+  // figure
+  figure {
+    margin: 0;
+    padding: 0;
+  }
+
+  // 폰트 기본값
+  font-family: 'Inter-R', -apple-system, BlinkMacSystemFont, sans-serif;
+  color: var(--scale-gray-900);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}

package/src/style/variables.scss

@@ -0,0 +1,13 @@
+@charset "UTF-8";
+
+$max-width: 1280px;
+$min-pc-width: 1279px;
+$small-pc-width: 1080px;
+$tiny-pc-width: 920px;
+$break-width: 821px;
+$tablet-width: 767px;
+$wide-mobile-width: 500px;
+$mobile-width: 450px;
+$small-mobile-width: 400px;
+$tiny-mobile-width: 346px;
+

package/src/types.ts

@@ -1,15 +1,25 @@
 import type { ReactNode } from 'react';
+import type { Chain, Transport } from 'viem';
+import type { CreateConnectorFn } from 'wagmi';
 
-export type ConnectorId = 'CREDIT_WALLET' | 'CREDIT_CONNECT' | 'METAMASK' | 'WALLET_CONNECT';
+export type ConnectorId = 'CREDIT_CONNECT' | 'METAMASK' | 'WALLET_CONNECT';
 
-export type CreditWalletStrategy = 'walletConnect' | 'creditConnect';
-
-export interface Connectors {
-  creditWallet?: CreditWalletStrategy | false;
-  metamask?: boolean;
-  walletConnect?: boolean;
+export interface ConnectKitConfig {
+  chains: [Chain, ...Chain[]];
+  transports: Record<number, Transport>;
+  wcProjectId?: string;
+  creditConnect?: {
+    projectId: string;
+    serverUrl: string;
+  };
+  extraConnectors?: CreateConnectorFn[];
+  autoConnectInjected?: boolean;
 }
 
+// 활성화할 connector key 배열. 빠진 key 는 비활성. 순서가 selector 표시 순서를 결정.
+export type ConnectorKey = 'creditWallet' | 'metamask' | 'walletConnect';
+export type Connectors = readonly ConnectorKey[];
+
 export interface WCWallet {
   id: string;
   name: string;
@@ -25,6 +35,28 @@ export interface WCWallet {
 
 export type WCSubView = 'qr' | 'list' | 'wallet';
 
+export type ConnectKitTheme = 'light' | 'dark';
+
+export type ConnectBannerSiteKey =
+  | 'penguin-swap'
+  | 'penguin-bridge'
+  | 'penguin-base'
+  | 'penguin-wallet';
+
+export interface ConnectBanner {
+  id: number;
+  siteKey: ConnectBannerSiteKey;
+  title: string;
+  subtitle: string;
+  linkText: string;
+  linkUrl: string;
+  imageUrl: string;
+  titleColor: string;
+  subtitleColor: string;
+  linkTextColor: string;
+  closeColor: string;
+}
+
 export interface ConnectResult {
   address: `0x${string}`;
   connectorId: ConnectorId;
@@ -48,5 +80,6 @@ export interface ConnectModalProps {
   onLog?: (message: string, error?: Error) => void;
   wcProjectId?: string;
   requiredChainId?: number;
+  theme: ConnectKitTheme;
   renderConnectError?: (ctx: ConnectErrorContext) => ReactNode;
 }

package/src/utils/platform.ts

@@ -1,16 +1,15 @@
-// 모바일 기기 감지
 export const isMobileDevice = (): boolean => {
   if (typeof window === 'undefined') return false;
   return /android|iphone|ipad|ipod/i.test(navigator.userAgent);
 };
 
-// 딥링크 열기 (walletConnect가 지원하는 지갑앱)
 export const tryOpenDeepLink = (uri: string, deepLinkBase: string): void => {
   const sep = deepLinkBase.endsWith('/') ? '' : '/';
-  window.location.href = `${deepLinkBase}${sep}wc?uri=${encodeURIComponent(uri)}`;
+  window.location.replace(`${deepLinkBase}${sep}wc?uri=${encodeURIComponent(uri)}`);
 };
 
-// metaMask extension 감지
-export const detectMetaMaskExtension = (): boolean =>
-  typeof window !== 'undefined' &&
-  Boolean((window as Window & { ethereum?: { isMetaMask?: boolean } }).ethereum?.isMetaMask);
+// CC payload (full URL `https://app.creditcoin.org/?creditconnect=<base64>`) 를
+// wallet custom scheme 으로 wrap 해 redirect — wallet parser 가 step 1 unwrap 후 step 3 cc 인식.
+export const tryOpenCreditWalletDeeplink = (payloadUrl: string): void => {
+  window.location.replace(`creditwallet://?uri=${encodeURIComponent(payloadUrl)}`);
+};

package/src/wallet-display-override.ts

@@ -0,0 +1,15 @@
+import penguinWalletIcon from '../assets/penguinwallet.png';
+import type { WCWallet } from './types';
+
+// TODO-CRCN-11: WC에 PenguinWallet 추가 시 삭제
+export const CREDIT_WALLET_LISTING_ID =
+  'ce02f1ae74686234eabfa7d31876c442779b730dfe7924a3ca0e6559a7afa30f';
+
+export const overrideWalletDisplay = (wallet: WCWallet): WCWallet =>
+  wallet.id === CREDIT_WALLET_LISTING_ID
+    ? {
+        ...wallet,
+        name: 'PenguinWallet',
+        imageUrl: penguinWalletIcon,
+      }
+    : wallet;

package/tsconfig.json

@@ -2,7 +2,11 @@
   "extends": "../../tsconfig.base.json",
   "compilerOptions": {
     "noEmit": true,
-    "baseUrl": "./"
+    "baseUrl": "./",
+    "paths": {
+      "react": ["./node_modules/@types/react"],
+      "react/*": ["./node_modules/@types/react/*"]
+    }
   },
   "include": ["src/**/*"]
 }

package/tsup.config.ts

@@ -1,5 +1,7 @@
 import { defineConfig } from 'tsup';
 import { sassPlugin } from 'esbuild-sass-plugin';
+import { readFileSync } from 'node:fs';
+import { resolve as resolvePath, extname } from 'node:path';
 
 export default defineConfig({
   entry: {
@@ -26,8 +28,36 @@ export default defineConfig({
   banner: {
     js: 'import React from "react";',
   },
-  esbuildPlugins: [sassPlugin({ type: 'style' })],
+  // esbuild 의 css url() resolveDir 는 entry scss 의 위치 — chain 안 깊은 곳의
+  // font.scss 의 './fonts/' 경로가 entry 마다 다른 dir 로 잘못 resolve 됨.
+  // 우회: sass 컴파일 결과의 './fonts/<file>' url 을 transform 에서 직접 base64 inline.
+  // dist/index.css 가 fonts 까지 self-contained — 외부 dApp 의 추가 설정 불필요.
+  esbuildPlugins: [
+    sassPlugin({
+      type: 'css',
+      transform: (css) => {
+        const fontsDir = resolvePath(__dirname, 'assets/fonts');
+        // url(...) 안의 어떤 상대경로 prefix 든 무시하고 마지막 'fonts/<file>' 만 사용.
+        // font.scss 의 ../../assets/fonts/Inter-*.{woff2,ttf} 매칭.
+        return css.replace(
+          /url\((['"]?)[^'")]*?\/fonts\/([^'")]+)\1\)/g,
+          (_match, _quote, file: string) => {
+            const absPath = resolvePath(fontsDir, file);
+            const data = readFileSync(absPath).toString('base64');
+            const ext = extname(file).slice(1);
+            const mime =
+              ext === 'woff2' ? 'font/woff2' : ext === 'ttf' ? 'font/ttf' : `font/${ext}`;
+            return `url(data:${mime};base64,${data})`;
+          },
+        );
+      },
+    }),
+  ],
   esbuildOptions(options) {
-    options.loader = { ...options.loader, '.png': 'dataurl' };
+    options.loader = {
+      ...options.loader,
+      '.png': 'dataurl',
+      '.svg': 'dataurl',
+    };
   },
 });

package/dist/chunk-DDA6FP6U.js

@@ -1,7 +0,0 @@
-import React from "react";
-var __defProp = Object.defineProperty;
-var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
-
-export {
-  __name
-};