diff --git a/examples/components/package.json b/examples/components/package.json new file mode 100644 index 00000000..9e683397 --- /dev/null +++ b/examples/components/package.json @@ -0,0 +1,13 @@ +{ + "name": "@0xsequence/kit-example-shared-components", + "exports": { + ".": "./src/index.ts" + }, + "dependencies": { + "typescript": "latest" + }, + "peerDependencies": { + "@0xsequence/design-system": "*", + "wagmi": "*" + } +} diff --git a/examples/components/src/CardButton.tsx b/examples/components/src/CardButton.tsx new file mode 100644 index 00000000..14777314 --- /dev/null +++ b/examples/components/src/CardButton.tsx @@ -0,0 +1,32 @@ +import { Card, Box, Text, Spinner } from '@0xsequence/design-system' + +interface CardButtonProps { + title: string + description: string + onClick: () => void + isPending?: boolean +} + +export const CardButton = (props: CardButtonProps) => { + const { title, description, onClick, isPending } = props + + return ( + + + {title} + + + {description} + + + {isPending && ( + + + + Pending... + + + )} + + ) +} diff --git a/examples/next/src/app/components/Footer.tsx b/examples/components/src/Footer.tsx similarity index 95% rename from examples/next/src/app/components/Footer.tsx rename to examples/components/src/Footer.tsx index 408d5dfe..0e98b925 100644 --- a/examples/next/src/app/components/Footer.tsx +++ b/examples/components/src/Footer.tsx @@ -1,5 +1,4 @@ import { Box, Button, Image, Text, useTheme } from '@0xsequence/design-system' -import React from 'react' interface BottomPageLink { label: string @@ -39,22 +38,22 @@ export const socialLinks: SocialLinks[] = [ { id: 'discord', url: 'https://discord.gg/sequence', - icon: 'discord.svg' + icon: 'images/discord.svg' }, { id: 'twitter', url: 'https://www.twitter.com/0xsequence', - icon: 'twitter.svg' + icon: 'images/twitter.svg' }, { id: 'youtube', url: 'https://www.youtube.com/channel/UC1zHgUyV-doddTcnFNqt62Q', - icon: 'youtube.svg' + icon: 'images/youtube.svg' }, { id: 'github', url: 'https://github.com/0xsequence', - icon: 'github.svg' + icon: 'images/github.svg' } ] diff --git a/examples/react/src/components/Header.tsx b/examples/components/src/Header.tsx similarity index 90% rename from examples/react/src/components/Header.tsx rename to examples/components/src/Header.tsx index 0b02050a..467bf217 100644 --- a/examples/react/src/components/Header.tsx +++ b/examples/components/src/Header.tsx @@ -17,13 +17,13 @@ export const Header = () => { style={{ borderBottom: '1px solid #222' }} > - Sequence kit + Sequence kit Sequence Kit Text Logo diff --git a/examples/components/src/index.ts b/examples/components/src/index.ts new file mode 100644 index 00000000..a9124f1a --- /dev/null +++ b/examples/components/src/index.ts @@ -0,0 +1,3 @@ +export { Header } from './Header' +export { Footer } from './Footer' +export { CardButton } from './CardButton' diff --git a/examples/components/tsconfig.json b/examples/components/tsconfig.json new file mode 100644 index 00000000..411367e1 --- /dev/null +++ b/examples/components/tsconfig.json @@ -0,0 +1,15 @@ +{ + "compilerOptions": { + "esModuleInterop": true, + "forceConsistentCasingInFileNames": true, + "isolatedModules": true, + "module": "ESNext", + "moduleResolution": "Bundler", + "preserveWatchOutput": true, + "skipLibCheck": true, + "noEmit": true, + "strict": true, + "jsx": "react-jsx" + }, + "exclude": ["node_modules"] +} diff --git a/examples/next/package.json b/examples/next/package.json index be556824..be2abaa7 100644 --- a/examples/next/package.json +++ b/examples/next/package.json @@ -15,6 +15,7 @@ "@0xsequence/kit-checkout": "workspace:*", "@0xsequence/kit-connectors": "workspace:*", "@0xsequence/kit-wallet": "workspace:*", + "@0xsequence/kit-example-shared-components": "workspace:*", "@0xsequence/network": "^1.9.27", "@tanstack/react-query": "^5.37.1", "next": "14.2.3", diff --git a/examples/next/public/discord.svg b/examples/next/public/images/discord.svg similarity index 100% rename from examples/next/public/discord.svg rename to examples/next/public/images/discord.svg diff --git a/examples/next/public/github.svg b/examples/next/public/images/github.svg similarity index 100% rename from examples/next/public/github.svg rename to examples/next/public/images/github.svg diff --git a/examples/next/public/kit-logo-text.svg b/examples/next/public/images/kit-logo-text.svg similarity index 100% rename from examples/next/public/kit-logo-text.svg rename to examples/next/public/images/kit-logo-text.svg diff --git a/examples/next/public/kit-logo.svg b/examples/next/public/images/kit-logo.svg similarity index 100% rename from examples/next/public/kit-logo.svg rename to examples/next/public/images/kit-logo.svg diff --git a/examples/next/public/next.svg b/examples/next/public/images/next.svg similarity index 100% rename from examples/next/public/next.svg rename to examples/next/public/images/next.svg diff --git a/examples/next/public/twitter.svg b/examples/next/public/images/twitter.svg similarity index 100% rename from examples/next/public/twitter.svg rename to examples/next/public/images/twitter.svg diff --git a/examples/next/public/youtube.svg b/examples/next/public/images/youtube.svg similarity index 100% rename from examples/next/public/youtube.svg rename to examples/next/public/images/youtube.svg diff --git a/examples/next/src/app/components/Connected.tsx b/examples/next/src/app/components/Connected.tsx index 7f55ccb3..9d9fc8da 100644 --- a/examples/next/src/app/components/Connected.tsx +++ b/examples/next/src/app/components/Connected.tsx @@ -1,6 +1,7 @@ -import { Box, Text, Card, Button, Select, SignoutIcon, Spinner } from '@0xsequence/design-system' +import { Box, Text, Card, Button, Select, SignoutIcon } from '@0xsequence/design-system' import { signEthAuthProof, useIndexerClient, useStorage, useWaasFeeOptions, validateEthProof } from '@0xsequence/kit' import { CheckoutSettings } from '@0xsequence/kit-checkout' +import { CardButton, Header } from '@0xsequence/kit-example-shared-components' import { useOpenWalletModal } from '@0xsequence/kit-wallet' import { ChainId, allNetworks } from '@0xsequence/network' import { ComponentProps, useEffect, useState } from 'react' @@ -18,8 +19,6 @@ import { import { isDebugMode } from '../../config' -import { Header } from './Header' - import { messageToSign } from '@/constants' import { abi } from '@/constants/nft-abi' @@ -411,37 +410,6 @@ export const Connected = () => { ) } -interface CardButtonProps { - title: string - description: string - onClick: () => void - isPending?: boolean -} - -const CardButton = (props: CardButtonProps) => { - const { title, description, onClick, isPending } = props - - return ( - - - {title} - - - {description} - - - {isPending && ( - - - - Pending... - - - )} - - ) -} - export type AlertProps = { title: string description: string diff --git a/examples/next/src/app/components/Header.tsx b/examples/next/src/app/components/Header.tsx deleted file mode 100644 index 30ff2573..00000000 --- a/examples/next/src/app/components/Header.tsx +++ /dev/null @@ -1,50 +0,0 @@ -import { Box, Image, Text, GradientAvatar } from '@0xsequence/design-system' -import { useAccount } from 'wagmi' - -import { truncateAddress } from '@/utils' - -export const Header = () => { - const { address, connector } = useAccount() - - return ( - - - Sequence kit - Sequence Kit Text Logo - - - - - - - {truncateAddress(String(address), 8)} - - - - - {connector?.name} - - - - - - ) -} diff --git a/examples/next/src/app/page.tsx b/examples/next/src/app/page.tsx index 5ef52b07..f481f8c0 100644 --- a/examples/next/src/app/page.tsx +++ b/examples/next/src/app/page.tsx @@ -2,10 +2,10 @@ import { Box, Image, Button } from '@0xsequence/design-system' import { useOpenConnectModal } from '@0xsequence/kit' +import { Footer } from '@0xsequence/kit-example-shared-components' import { useAccount } from 'wagmi' import { Connected } from './components/Connected' -import { Footer } from './components/Footer' export default function Home() { const { isConnected } = useAccount() @@ -16,17 +16,17 @@ export default function Home() { {!isConnected ? ( - Next + Next - Sequence Kit Logo + Sequence Kit Logo Sequence Kit Text Logo diff --git a/examples/react/package.json b/examples/react/package.json index 5eceed04..ae3857f4 100644 --- a/examples/react/package.json +++ b/examples/react/package.json @@ -16,6 +16,7 @@ "@0xsequence/kit-checkout": "workspace:*", "@0xsequence/kit-connectors": "workspace:*", "@0xsequence/kit-wallet": "workspace:*", + "@0xsequence/kit-example-shared-components": "workspace:*", "@0xsequence/network": "^1.9.27", "@tanstack/react-query": "^5.37.1", "framer-motion": "^8.5.2", diff --git a/examples/react/public/img/social/discord.svg b/examples/react/public/images/discord.svg similarity index 100% rename from examples/react/public/img/social/discord.svg rename to examples/react/public/images/discord.svg diff --git a/examples/react/public/img/social/github.svg b/examples/react/public/images/github.svg similarity index 100% rename from examples/react/public/img/social/github.svg rename to examples/react/public/images/github.svg diff --git a/examples/react/public/kit-logo-text.svg b/examples/react/public/images/kit-logo-text.svg similarity index 100% rename from examples/react/public/kit-logo-text.svg rename to examples/react/public/images/kit-logo-text.svg diff --git a/examples/react/public/kit-logo.svg b/examples/react/public/images/kit-logo.svg similarity index 100% rename from examples/react/public/kit-logo.svg rename to examples/react/public/images/kit-logo.svg diff --git a/examples/react/public/img/social/twitter.svg b/examples/react/public/images/twitter.svg similarity index 100% rename from examples/react/public/img/social/twitter.svg rename to examples/react/public/images/twitter.svg diff --git a/examples/react/public/img/social/youtube.svg b/examples/react/public/images/youtube.svg similarity index 100% rename from examples/react/public/img/social/youtube.svg rename to examples/react/public/images/youtube.svg diff --git a/examples/react/src/components/Connected.tsx b/examples/react/src/components/Connected.tsx index e298e883..be814a76 100644 --- a/examples/react/src/components/Connected.tsx +++ b/examples/react/src/components/Connected.tsx @@ -1,16 +1,4 @@ -import { - Box, - Button, - Card, - Modal, - Select, - SignoutIcon, - Spinner, - Switch, - Text, - TextInput, - breakpoints -} from '@0xsequence/design-system' +import { Box, Button, Card, Modal, Select, SignoutIcon, Switch, Text, TextInput, breakpoints } from '@0xsequence/design-system' import { useStorage, useWaasFeeOptions, @@ -20,6 +8,7 @@ import { getModalPositionCss } from '@0xsequence/kit' import { useCheckoutModal, useAddFundsModal } from '@0xsequence/kit-checkout' +import { CardButton, Header } from '@0xsequence/kit-example-shared-components' import { useOpenWalletModal } from '@0xsequence/kit-wallet' import { allNetworks, ChainId } from '@0xsequence/network' import { ethers } from 'ethers' @@ -42,8 +31,6 @@ import { messageToSign } from '../constants' import { abi } from '../constants/nft-abi' import { delay, getCheckoutSettings } from '../utils' -import { Header } from './Header' - // append ?debug to url to enable debug mode const searchParams = new URLSearchParams(location.search) const isDebugMode = searchParams.has('debug') @@ -581,37 +568,6 @@ export const Connected = () => { ) } -interface CardButtonProps { - title: string - description: string - onClick: () => void - isPending?: boolean -} - -const CardButton = (props: CardButtonProps) => { - const { title, description, onClick, isPending } = props - - return ( - - - {title} - - - {description} - - - {isPending && ( - - - - Pending... - - - )} - - ) -} - export type AlertProps = { title: string description: string diff --git a/examples/react/src/components/Footer.tsx b/examples/react/src/components/Footer.tsx deleted file mode 100644 index 373a770f..00000000 --- a/examples/react/src/components/Footer.tsx +++ /dev/null @@ -1,82 +0,0 @@ -import { Box, Image, Text, useTheme } from '@0xsequence/design-system' -import React from 'react' - -import { bottomPageLinks, socialLinks } from '../constants' - -export const Footer = () => { - const { theme } = useTheme() - - const onClickLinkUrl = (url: string) => { - if (typeof window !== 'undefined') { - window.open(url) - } - } - - const Links = () => { - return ( - - {bottomPageLinks.map((link, index) => ( - onClickLinkUrl(link.url)} - opacity={{ hover: '80' }} - cursor="pointer" - userSelect="none" - gap="4" - > - - {link.label} - - - ))} - - ) - } - - const Socials = () => { - return ( - - {socialLinks.map((socialLink, index) => { - return ( - { - if (typeof window !== 'undefined') { - window.open(socialLink.url) - } - }} - > - {socialLink.id} - - ) - })} - - ) - } - - return ( - - - - - ) -} diff --git a/examples/react/src/components/Homepage.tsx b/examples/react/src/components/Homepage.tsx index 5b7aaae3..142ab573 100644 --- a/examples/react/src/components/Homepage.tsx +++ b/examples/react/src/components/Homepage.tsx @@ -1,11 +1,11 @@ import { Box, Button, Card, Text, Image, useTheme, CheckmarkIcon, breakpoints } from '@0xsequence/design-system' import { useOpenConnectModal } from '@0xsequence/kit' +import { Footer } from '@0xsequence/kit-example-shared-components' import { useAccount } from 'wagmi' import { ConnectionMode } from '../config' import { Connected } from './Connected' -import { Footer } from './Footer' // append ?debug to url to enable debug mode const searchParams = new URLSearchParams(location.search) @@ -32,13 +32,13 @@ export const Homepage = () => { {!isConnected ? ( - + diff --git a/examples/react/tsconfig.json b/examples/react/tsconfig.json index 6f3e83f2..0870318d 100644 --- a/examples/react/tsconfig.json +++ b/examples/react/tsconfig.json @@ -1,11 +1,7 @@ { "compilerOptions": { "target": "ESNext", - "lib": [ - "dom", - "dom.iterable", - "esnext" - ], + "lib": ["dom", "dom.iterable", "esnext"], "allowJs": true, "skipLibCheck": true, "esModuleInterop": true, @@ -14,14 +10,12 @@ "forceConsistentCasingInFileNames": true, "noFallthroughCasesInSwitch": true, "module": "esnext", - "moduleResolution": "node", + "moduleResolution": "Bundler", "resolveJsonModule": true, "isolatedModules": true, "noEmit": true, "jsx": "react-jsx", - "types": ["vite/client", "vite-plugin-svgr/client"], + "types": ["vite/client", "vite-plugin-svgr/client"] }, - "include": [ - "src" - ] + "include": ["src"] } diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 8831a423..6e397865 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -78,6 +78,18 @@ importers: specifier: ^2.9.5 version: 2.9.5(@tanstack/query-core@5.36.1)(@tanstack/react-query@5.37.1(react@18.3.1))(@types/react@18.3.2)(bufferutil@4.0.8)(react-dom@18.3.1(react@18.3.1))(react-i18next@13.5.0(i18next@22.5.1)(react-dom@18.3.1(react@18.3.1))(react-native@0.74.1(@babel/core@7.24.5)(@babel/preset-env@7.24.5(@babel/core@7.24.5))(@types/react@18.3.2)(bufferutil@4.0.8)(react@18.3.1)(utf-8-validate@6.0.4))(react@18.3.1))(react-native@0.74.1(@babel/core@7.24.5)(@babel/preset-env@7.24.5(@babel/core@7.24.5))(@types/react@18.3.2)(bufferutil@4.0.8)(react@18.3.1)(utf-8-validate@6.0.4))(react@18.3.1)(rollup@4.18.0)(typescript@5.4.5)(utf-8-validate@6.0.4)(viem@2.12.0(bufferutil@4.0.8)(typescript@5.4.5)(utf-8-validate@6.0.4)(zod@3.23.8))(zod@3.23.8) + examples/components: + dependencies: + '@0xsequence/design-system': + specifier: '*' + version: 1.7.1(@types/react-dom@18.3.0)(@types/react@18.3.2)(framer-motion@8.5.5(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + typescript: + specifier: latest + version: 5.4.5 + wagmi: + specifier: '*' + version: 2.9.5(@tanstack/query-core@5.36.1)(@tanstack/react-query@5.37.1(react@18.3.1))(@types/react@18.3.2)(bufferutil@4.0.8)(react-dom@18.3.1(react@18.3.1))(react-i18next@13.5.0(i18next@22.5.1)(react-dom@18.3.1(react@18.3.1))(react-native@0.74.1(@babel/core@7.24.5)(@babel/preset-env@7.24.5(@babel/core@7.24.5))(@types/react@18.3.2)(bufferutil@4.0.8)(react@18.3.1)(utf-8-validate@6.0.4))(react@18.3.1))(react-native@0.74.1(@babel/core@7.24.5)(@babel/preset-env@7.24.5(@babel/core@7.24.5))(@types/react@18.3.2)(bufferutil@4.0.8)(react@18.3.1)(utf-8-validate@6.0.4))(react@18.3.1)(rollup@4.18.0)(typescript@5.4.5)(utf-8-validate@6.0.4)(viem@2.12.0(bufferutil@4.0.8)(typescript@5.4.5)(utf-8-validate@6.0.4)(zod@3.23.8))(zod@3.23.8) + examples/next: dependencies: '@0xsequence/design-system': @@ -92,6 +104,9 @@ importers: '@0xsequence/kit-connectors': specifier: workspace:* version: link:../../packages/connectors + '@0xsequence/kit-example-shared-components': + specifier: workspace:* + version: link:../components '@0xsequence/kit-wallet': specifier: workspace:* version: link:../../packages/wallet @@ -153,6 +168,9 @@ importers: '@0xsequence/kit-connectors': specifier: workspace:* version: link:../../packages/connectors + '@0xsequence/kit-example-shared-components': + specifier: workspace:* + version: link:../components '@0xsequence/kit-wallet': specifier: workspace:* version: link:../../packages/wallet @@ -6297,6 +6315,7 @@ packages: rimraf@2.6.3: resolution: {integrity: sha512-mwqeW5XsA2qAejG46gYdENaxXjx9onRNCfn7L0duuP4hCuTIi/QO7PDK07KJfp1d+izWPrzEJDcSqBa0OZQriA==} + deprecated: Rimraf versions prior to v4 are no longer supported hasBin: true rimraf@3.0.2: