Internal shared example component lib (#73)

* Internal shared example component lib

* Moving Footer to shared components

* Fixing next logo path

* Adding CardButton to shared components

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": "*"
+  }
+}

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 (
+    <Card clickable onClick={onClick}>
+      <Text variant="normal" fontWeight="bold" color="text100">
+        {title}
+      </Text>
+      <Text as="div" variant="normal" color="text50" marginTop="2">
+        {description}
+      </Text>
+
+      {isPending && (
+        <Box gap="2" alignItems="center" marginTop="4">
+          <Spinner size="sm" />
+          <Text variant="small" color="text50">
+            Pending...
+          </Text>
+        </Box>
+      )}
+    </Card>
+  )
+}

examples/next/src/app/components/Footer.tsx → 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'
   }
 ]
 

examples/react/src/components/Header.tsx → examples/components/src/Header.tsx

@@ -17,13 +17,13 @@ export const Header = () => {
       style={{ borderBottom: '1px solid #222' }}
     >
       <Box flexDirection="row" alignItems="center" justifyContent="center" gap="3">
-        <Image style={{ width: '36px' }} src="kit-logo.svg" alt="Sequence kit" disableAnimation />
+        <Image style={{ width: '36px' }} src="images/kit-logo.svg" alt="Sequence kit" disableAnimation />
         <Image
           style={{
             width: '24px'
             // filter: theme === 'dark' ? 'invert(0)' : 'invert(1)'
           }}
-          src="kit-logo-text.svg"
+          src="images/kit-logo-text.svg"
           alt="Sequence Kit Text Logo"
           disableAnimation
         />

examples/components/src/index.ts

@@ -0,0 +1,3 @@
+export { Header } from './Header'
+export { Footer } from './Footer'
+export { CardButton } from './CardButton'

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"]
+}

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",

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 (
-    <Card clickable onClick={onClick}>
-      <Text variant="normal" fontWeight="bold" color="text100">
-        {title}
-      </Text>
-      <Text as="div" variant="normal" color="text50" marginTop="2">
-        {description}
-      </Text>
-
-      {isPending && (
-        <Box gap="2" alignItems="center" marginTop="4">
-          <Spinner />
-          <Text variant="small" color="text50">
-            Pending...
-          </Text>
-        </Box>
-      )}
-    </Card>
-  )
-}
-
 export type AlertProps = {
   title: string
   description: string

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 ? (
         <Box flexDirection="column" alignItems="center" justifyContent="center" gap="5" height="vh">
           <Box background="white" padding="2" borderRadius="sm">
-            <Image alt="Next" src="next.svg" height="3" disableAnimation />
+            <Image alt="Next" src="images/next.svg" height="3" disableAnimation />
           </Box>
           <Box flexDirection="row" alignItems="center" justifyContent="center" gap="3">
-            <Image alt="Sequence Kit Logo" style={{ width: '48px' }} src="kit-logo.svg" disableAnimation />
+            <Image alt="Sequence Kit Logo" style={{ width: '48px' }} src="images/kit-logo.svg" disableAnimation />
             <Image
               alt="Sequence Kit Text Logo"
               style={{
                 width: '32px'
                 // filter: theme === 'dark' ? 'invert(0)' : 'invert(1)'
               }}
-              src="kit-logo-text.svg"
+              src="images/kit-logo-text.svg"
               disableAnimation
             />
           </Box>

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",

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 (
-    <Card clickable onClick={onClick}>
-      <Text variant="normal" fontWeight="bold" color="text100">
-        {title}
-      </Text>
-      <Text as="div" variant="normal" color="text50" marginTop="2">
-        {description}
-      </Text>
-
-      {isPending && (
-        <Box gap="2" alignItems="center" marginTop="4">
-          <Spinner size="sm" />
-          <Text variant="small" color="text50">
-            Pending...
-          </Text>
-        </Box>
-      )}
-    </Card>
-  )
-}
-
 export type AlertProps = {
   title: string
   description: string