@gluwa/connect-kit 0.2.0-next.1 → 0.2.0-next.3

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

@@ -2,22 +2,22 @@ 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 interface ConnectKitConfig {
   chains: [Chain, ...Chain[]];
   transports: Record<number, Transport>;
   wcProjectId?: string;
+  creditConnect?: {
+    projectId: string;
+    serverUrl: string;
+  };
   extraConnectors?: CreateConnectorFn[];
 }
 
-export type CreditWalletStrategy = 'walletConnect' | 'creditConnect';
-
-export interface Connectors {
-  creditWallet?: CreditWalletStrategy | false;
-  metamask?: boolean;
-  walletConnect?: boolean;
-}
+// 활성화할 connector key 배열. 빠진 key 는 비활성. 순서가 selector 표시 순서를 결정.
+export type ConnectorKey = 'creditWallet' | 'metamask' | 'walletConnect';
+export type Connectors = readonly ConnectorKey[];
 
 export interface WCWallet {
   id: string;
@@ -34,6 +34,8 @@ export interface WCWallet {
 
 export type WCSubView = 'qr' | 'list' | 'wallet';
 
+export type ConnectKitTheme = 'light' | 'dark';
+
 export interface ConnectResult {
   address: `0x${string}`;
   connectorId: ConnectorId;
@@ -57,5 +59,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

@@ -8,6 +8,12 @@ export const tryOpenDeepLink = (uri: string, deepLinkBase: string): void => {
   window.location.replace(`${deepLinkBase}${sep}wc?uri=${encodeURIComponent(uri)}`);
 };
 
+// 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)}`);
+};
+
 export const detectMetaMaskExtension = (): boolean =>
   typeof window !== 'undefined' &&
   Boolean((window as Window & { ethereum?: { isMetaMask?: boolean } }).ethereum?.isMetaMask);

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: 'css' })],
+  // 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
-};