├── .github
├── actions
│ └── yarn-nm-install
│ │ └── action.yml
├── dependabot.yml
└── workflows
│ ├── cleanup-pr-caches.yaml
│ └── test.yaml
├── .gitignore
├── .npmrc
├── .nvmrc
├── .prettierrc
├── .yarn
└── releases
│ └── yarn-4.1.1.cjs
├── .yarnrc.yml
├── README.md
├── apps
└── directory
│ ├── .eslintrc.js
│ ├── README.md
│ ├── components.json
│ ├── next-env.d.ts
│ ├── next.config.mjs
│ ├── package.json
│ ├── postcss.config.js
│ ├── public
│ └── directory-landing.png
│ ├── src
│ ├── app
│ │ ├── layout.tsx
│ │ └── page.tsx
│ ├── components
│ │ ├── filters.tsx
│ │ ├── footer.tsx
│ │ ├── grid-pattern.tsx
│ │ ├── header.tsx
│ │ ├── hero.tsx
│ │ ├── icons
│ │ │ ├── github.tsx
│ │ │ ├── swing.tsx
│ │ │ └── twitter.tsx
│ │ ├── template-grid.tsx
│ │ ├── templates.tsx
│ │ ├── theme-provider.tsx
│ │ └── ui
│ │ │ ├── accordion.tsx
│ │ │ ├── avatar.tsx
│ │ │ ├── badge.tsx
│ │ │ ├── button.tsx
│ │ │ ├── card.tsx
│ │ │ ├── checkbox.tsx
│ │ │ ├── dialog.tsx
│ │ │ └── drawer.tsx
│ ├── hooks
│ │ └── use-media-query.tsx
│ ├── lib
│ │ ├── keywords.ts
│ │ ├── slugify.ts
│ │ ├── templates.ts
│ │ └── utils.ts
│ └── styles
│ │ └── globals.css
│ ├── tailwind.config.js
│ └── tsconfig.json
├── examples
├── gas-widget-nextjs
│ ├── .eslintrc.js
│ ├── .gitignore
│ ├── README.md
│ ├── next.config.mjs
│ ├── package.json
│ ├── postcss.config.js
│ ├── public
│ │ ├── favicon.ico
│ │ └── vercel.svg
│ ├── src
│ │ ├── app
│ │ │ ├── layout.tsx
│ │ │ └── page.tsx
│ │ ├── components
│ │ │ ├── Button.tsx
│ │ │ └── Sidebar.tsx
│ │ └── styles
│ │ │ └── globals.css
│ ├── tailwind.config.js
│ └── tsconfig.json
├── staking-api-nextjs
│ └── README.md
├── staking-sdk-nextjs
│ ├── .eslintrc.js
│ ├── .gitignore
│ ├── README.md
│ ├── components.json
│ ├── next.config.mjs
│ ├── package.json
│ ├── postcss.config.js
│ ├── public
│ │ ├── favicon.ico
│ │ └── vercel.svg
│ ├── src
│ │ ├── app
│ │ │ ├── layout.tsx
│ │ │ └── page.tsx
│ │ ├── components
│ │ │ ├── ConnectWallet.tsx
│ │ │ ├── Sidebar.tsx
│ │ │ ├── Stake.tsx
│ │ │ ├── SwingSdkProvider.tsx
│ │ │ ├── WagmiProvider.tsx
│ │ │ └── ui
│ │ │ │ ├── avatar.tsx
│ │ │ │ ├── button.tsx
│ │ │ │ └── dialog.tsx
│ │ ├── hooks
│ │ │ └── useConnectWallet.tsx
│ │ ├── lib
│ │ │ └── utils.ts
│ │ └── styles
│ │ │ └── globals.css
│ ├── tailwind.config.js
│ └── tsconfig.json
├── staking-widget-nextjs
│ ├── .eslintrc.js
│ ├── .gitignore
│ ├── README.md
│ ├── next.config.mjs
│ ├── package.json
│ ├── postcss.config.js
│ ├── public
│ │ ├── favicon.ico
│ │ └── vercel.svg
│ ├── src
│ │ ├── app
│ │ │ ├── layout.tsx
│ │ │ └── page.tsx
│ │ ├── components
│ │ │ ├── ConnectWallet.tsx
│ │ │ ├── Sidebar.tsx
│ │ │ ├── WagmiProvider.tsx
│ │ │ └── ui
│ │ │ │ ├── avatar.tsx
│ │ │ │ ├── button.tsx
│ │ │ │ └── dialog.tsx
│ │ ├── lib
│ │ │ └── utils.ts
│ │ └── styles
│ │ │ └── globals.css
│ ├── tailwind.config.js
│ └── tsconfig.json
├── swaps-api-nextjs-bitcoin
│ ├── .eslintrc.js
│ ├── .gitignore
│ ├── README.md
│ ├── components.json
│ ├── next-env.d.ts
│ ├── next.config.mjs
│ ├── package.json
│ ├── postcss.config.js
│ ├── public
│ │ ├── favicon.ico
│ │ └── fonts
│ │ │ ├── Inter-italic.var.woff2
│ │ │ └── Inter-roman.var.woff2
│ ├── src
│ │ ├── app
│ │ │ ├── layout.tsx
│ │ │ └── page.tsx
│ │ ├── components
│ │ │ ├── Swap.tsx
│ │ │ ├── ThirdwebProvider.tsx
│ │ │ └── ui
│ │ │ │ ├── Button.tsx
│ │ │ │ ├── Container.tsx
│ │ │ │ ├── Footer.tsx
│ │ │ │ ├── Header.tsx
│ │ │ │ ├── Hero.tsx
│ │ │ │ ├── NavLinks.tsx
│ │ │ │ ├── input.tsx
│ │ │ │ ├── label.tsx
│ │ │ │ ├── popover.tsx
│ │ │ │ ├── toast.tsx
│ │ │ │ ├── toaster.tsx
│ │ │ │ └── use-toast.ts
│ │ ├── images
│ │ │ └── logos
│ │ │ │ ├── cnn.svg
│ │ │ │ ├── forbes.svg
│ │ │ │ ├── techcrunch.svg
│ │ │ │ └── wired.svg
│ │ ├── interfaces
│ │ │ ├── quote.interface.ts
│ │ │ ├── send.interface.ts
│ │ │ └── status.interface.ts
│ │ ├── lib.ts
│ │ ├── services
│ │ │ └── requests.ts
│ │ ├── styles
│ │ │ └── globals.css
│ │ └── utils
│ │ │ └── ethToWei.ts
│ ├── styles
│ │ └── globals.css
│ ├── tailwind.config.js
│ ├── tsconfig.json
│ └── turbo.json
├── swaps-api-nextjs-solana
│ ├── .eslintrc.js
│ ├── .gitignore
│ ├── README.md
│ ├── components.json
│ ├── next-env.d.ts
│ ├── next.config.mjs
│ ├── package.json
│ ├── postcss.config.js
│ ├── public
│ │ ├── favicon.ico
│ │ └── fonts
│ │ │ ├── Inter-italic.var.woff2
│ │ │ └── Inter-roman.var.woff2
│ ├── src
│ │ ├── app
│ │ │ ├── layout.tsx
│ │ │ └── page.tsx
│ │ ├── components
│ │ │ ├── Swap.tsx
│ │ │ ├── ThirdwebProvider.tsx
│ │ │ └── ui
│ │ │ │ ├── Backdrop.tsx
│ │ │ │ ├── Button.tsx
│ │ │ │ ├── ChainTokenItem.tsx
│ │ │ │ ├── Container.tsx
│ │ │ │ ├── Header.tsx
│ │ │ │ ├── Hero.tsx
│ │ │ │ ├── NavLinks.tsx
│ │ │ │ ├── SelectChainPanel.tsx
│ │ │ │ ├── SelectTokenPanel.tsx
│ │ │ │ ├── TransferHistoryPanel.tsx
│ │ │ │ ├── input.tsx
│ │ │ │ ├── label.tsx
│ │ │ │ ├── popover.tsx
│ │ │ │ ├── toast.tsx
│ │ │ │ ├── toaster.tsx
│ │ │ │ └── use-toast.ts
│ │ ├── images
│ │ │ └── logos
│ │ │ │ ├── cnn.svg
│ │ │ │ ├── forbes.svg
│ │ │ │ ├── sols.png
│ │ │ │ ├── techcrunch.svg
│ │ │ │ └── wired.svg
│ │ ├── interfaces
│ │ │ ├── allowance.interface.ts
│ │ │ ├── approval.interface.ts
│ │ │ ├── chain.interface.ts
│ │ │ ├── history.interface.ts
│ │ │ ├── quote.interface.ts
│ │ │ ├── send.interface.ts
│ │ │ ├── status.interface.ts
│ │ │ ├── swing-service.interface.ts
│ │ │ └── token.interface.ts
│ │ ├── lib.ts
│ │ ├── services
│ │ │ └── requests.ts
│ │ ├── styles
│ │ │ └── globals.css
│ │ ├── types
│ │ │ ├── global.d.ts
│ │ │ └── transfer.types.ts
│ │ └── utils
│ │ │ └── ethToWei.ts
│ ├── styles
│ │ └── globals.css
│ ├── tailwind.config.js
│ ├── tsconfig.json
│ └── turbo.json
├── swaps-api-nextjs-ton
│ ├── .eslintrc.js
│ ├── .gitignore
│ ├── README.md
│ ├── components.json
│ ├── next-env.d.ts
│ ├── next.config.mjs
│ ├── package.json
│ ├── postcss.config.js
│ ├── public
│ │ ├── favicon.ico
│ │ └── fonts
│ │ │ ├── Inter-italic.var.woff2
│ │ │ └── Inter-roman.var.woff2
│ ├── src
│ │ ├── app
│ │ │ ├── api
│ │ │ │ └── ton-connect
│ │ │ │ │ └── route.ts
│ │ │ ├── layout.tsx
│ │ │ └── page.tsx
│ │ ├── components
│ │ │ ├── Swap.tsx
│ │ │ ├── ThirdwebProvider.tsx
│ │ │ └── ui
│ │ │ │ ├── Backdrop.tsx
│ │ │ │ ├── Button.tsx
│ │ │ │ ├── ChainTokenItem.tsx
│ │ │ │ ├── Container.tsx
│ │ │ │ ├── Header.tsx
│ │ │ │ ├── Hero.tsx
│ │ │ │ ├── NavLinks.tsx
│ │ │ │ ├── SelectChainPanel.tsx
│ │ │ │ ├── SelectTokenPanel.tsx
│ │ │ │ ├── TransferHistoryPanel.tsx
│ │ │ │ ├── input.tsx
│ │ │ │ ├── label.tsx
│ │ │ │ ├── popover.tsx
│ │ │ │ ├── toast.tsx
│ │ │ │ ├── toaster.tsx
│ │ │ │ └── use-toast.ts
│ │ ├── images
│ │ │ └── logos
│ │ │ │ ├── cnn.svg
│ │ │ │ ├── forbes.svg
│ │ │ │ ├── sols.png
│ │ │ │ ├── techcrunch.svg
│ │ │ │ └── wired.svg
│ │ ├── interfaces
│ │ │ ├── allowance.interface.ts
│ │ │ ├── approval.interface.ts
│ │ │ ├── chain.interface.ts
│ │ │ ├── history.interface.ts
│ │ │ ├── quote.interface.ts
│ │ │ ├── send.interface.ts
│ │ │ ├── status.interface.ts
│ │ │ ├── swing-service.interface.ts
│ │ │ └── token.interface.ts
│ │ ├── lib.ts
│ │ ├── providers
│ │ │ └── DefaultProviders.tsx
│ │ ├── services
│ │ │ └── requests.ts
│ │ ├── styles
│ │ │ └── globals.css
│ │ ├── types
│ │ │ ├── global.d.ts
│ │ │ └── transfer.types.ts
│ │ └── utils
│ │ │ └── ethToWei.ts
│ ├── styles
│ │ └── globals.css
│ ├── tailwind.config.js
│ ├── tonconnect-manifest.json
│ ├── tsconfig.json
│ └── turbo.json
├── swaps-api-nextjs-tron
│ ├── .eslintrc.js
│ ├── .gitignore
│ ├── README.md
│ ├── components.json
│ ├── next-env.d.ts
│ ├── next.config.mjs
│ ├── package.json
│ ├── postcss.config.js
│ ├── public
│ │ ├── favicon.ico
│ │ └── fonts
│ │ │ ├── Inter-italic.var.woff2
│ │ │ └── Inter-roman.var.woff2
│ ├── src
│ │ ├── app
│ │ │ ├── layout.tsx
│ │ │ └── page.tsx
│ │ ├── components
│ │ │ ├── Swap.tsx
│ │ │ ├── ThirdwebProvider.tsx
│ │ │ └── ui
│ │ │ │ ├── Backdrop.tsx
│ │ │ │ ├── Button.tsx
│ │ │ │ ├── ChainTokenItem.tsx
│ │ │ │ ├── Container.tsx
│ │ │ │ ├── Header.tsx
│ │ │ │ ├── Hero.tsx
│ │ │ │ ├── NavLinks.tsx
│ │ │ │ ├── SelectChainPanel.tsx
│ │ │ │ ├── SelectTokenPanel.tsx
│ │ │ │ ├── TransferHistoryPanel.tsx
│ │ │ │ ├── input.tsx
│ │ │ │ ├── label.tsx
│ │ │ │ ├── popover.tsx
│ │ │ │ ├── toast.tsx
│ │ │ │ ├── toaster.tsx
│ │ │ │ └── use-toast.ts
│ │ ├── images
│ │ │ └── logos
│ │ │ │ ├── cnn.svg
│ │ │ │ ├── forbes.svg
│ │ │ │ ├── sols.png
│ │ │ │ ├── techcrunch.svg
│ │ │ │ └── wired.svg
│ │ ├── interfaces
│ │ │ ├── allowance.interface.ts
│ │ │ ├── approval.interface.ts
│ │ │ ├── chain.interface.ts
│ │ │ ├── history.interface.ts
│ │ │ ├── quote.interface.ts
│ │ │ ├── send.interface.ts
│ │ │ ├── status.interface.ts
│ │ │ ├── swing-service.interface.ts
│ │ │ └── token.interface.ts
│ │ ├── lib.ts
│ │ ├── services
│ │ │ └── requests.ts
│ │ ├── styles
│ │ │ └── globals.css
│ │ ├── types
│ │ │ ├── global.d.ts
│ │ │ └── transfer.types.ts
│ │ └── utils
│ │ │ └── ethToWei.ts
│ ├── styles
│ │ └── globals.css
│ ├── tailwind.config.js
│ ├── tsconfig.json
│ └── turbo.json
├── swaps-api-nextjs
│ └── README.md
├── swaps-sdk-nextjs-thirdweb-embedded-wallet
│ ├── .eslintrc.js
│ ├── .gitignore
│ ├── README.md
│ ├── components.json
│ ├── next-env.d.ts
│ ├── next.config.mjs
│ ├── package.json
│ ├── postcss.config.js
│ ├── public
│ │ ├── favicon.ico
│ │ └── fonts
│ │ │ ├── Inter-italic.var.woff2
│ │ │ └── Inter-roman.var.woff2
│ ├── src
│ │ ├── app
│ │ │ ├── interfaces
│ │ │ │ ├── IChainSelector.tsx
│ │ │ │ ├── IModal.tsx
│ │ │ │ └── IRouteSelector.tsx
│ │ │ ├── layout.tsx
│ │ │ └── page.tsx
│ │ ├── components
│ │ │ ├── Swap.tsx
│ │ │ ├── ThirdwebProvider.tsx
│ │ │ ├── hooks
│ │ │ │ ├── useModal.tsx
│ │ │ │ ├── useSelectChain.tsx
│ │ │ │ └── useSwingSDK.tsx
│ │ │ ├── lib
│ │ │ │ └── utils.ts
│ │ │ └── ui
│ │ │ │ ├── AppScreen.tsx
│ │ │ │ ├── Backdrop.tsx
│ │ │ │ ├── Button.tsx
│ │ │ │ ├── Chain.tsx
│ │ │ │ ├── Container.tsx
│ │ │ │ ├── Footer.tsx
│ │ │ │ ├── Header.tsx
│ │ │ │ ├── Hero.tsx
│ │ │ │ ├── Modal.tsx
│ │ │ │ ├── NavLinks.tsx
│ │ │ │ ├── Route.tsx
│ │ │ │ ├── SelectChain.tsx
│ │ │ │ ├── SelectRoute.tsx
│ │ │ │ ├── Token.tsx
│ │ │ │ ├── modals
│ │ │ │ ├── SelectChainModal.tsx
│ │ │ │ └── SelectRouteModal.tsx
│ │ │ │ ├── toast.tsx
│ │ │ │ ├── toaster.tsx
│ │ │ │ └── use-toast.ts
│ │ ├── images
│ │ │ ├── logos
│ │ │ │ ├── bbc.svg
│ │ │ │ ├── cbs.svg
│ │ │ │ ├── cnn.svg
│ │ │ │ ├── fast-company.svg
│ │ │ │ ├── forbes.svg
│ │ │ │ ├── huffpost.svg
│ │ │ │ ├── techcrunch.svg
│ │ │ │ └── wired.svg
│ │ │ ├── phone-frame.svg
│ │ │ └── qr-code.svg
│ │ └── styles
│ │ │ └── globals.css
│ ├── tailwind.config.js
│ ├── tsconfig.json
│ └── turbo.json
├── swaps-sdk-nextjs-web3-react
│ ├── .eslintrc.js
│ ├── .gitignore
│ ├── README.md
│ ├── components.json
│ ├── next-env.d.ts
│ ├── next.config.mjs
│ ├── package.json
│ ├── postcss.config.js
│ ├── public
│ │ ├── favicon.ico
│ │ └── fonts
│ │ │ ├── Inter-italic.var.woff2
│ │ │ └── Inter-roman.var.woff2
│ ├── src
│ │ ├── app
│ │ │ ├── layout.tsx
│ │ │ └── page.tsx
│ │ ├── components
│ │ │ ├── Swap.tsx
│ │ │ ├── Web3ReactProvider.tsx
│ │ │ ├── lib
│ │ │ │ └── utils.ts
│ │ │ └── ui
│ │ │ │ ├── Button.tsx
│ │ │ │ ├── CircleBackground.tsx
│ │ │ │ ├── Container.tsx
│ │ │ │ ├── Footer.tsx
│ │ │ │ ├── Header.tsx
│ │ │ │ ├── Hero.tsx
│ │ │ │ ├── NavLinks.tsx
│ │ │ │ ├── StatusSheet.tsx
│ │ │ │ ├── drawer.tsx
│ │ │ │ ├── scroll-area.tsx
│ │ │ │ ├── select.tsx
│ │ │ │ ├── tabs.tsx
│ │ │ │ ├── toast.tsx
│ │ │ │ ├── toaster.tsx
│ │ │ │ └── use-toast.ts
│ │ └── styles
│ │ │ └── globals.css
│ ├── tailwind.config.js
│ ├── tsconfig.json
│ └── turbo.json
├── swaps-sdk-nextjs
│ ├── .eslintrc.js
│ ├── .gitignore
│ ├── README.md
│ ├── next-env.d.ts
│ ├── next.config.mjs
│ ├── package.json
│ ├── postcss.config.js
│ ├── public
│ │ ├── favicon.ico
│ │ └── fonts
│ │ │ ├── Inter-italic.var.woff2
│ │ │ └── Inter-roman.var.woff2
│ ├── src
│ │ ├── app
│ │ │ ├── layout.tsx
│ │ │ └── page.tsx
│ │ ├── components
│ │ │ ├── Swap.tsx
│ │ │ ├── ThirdwebProvider.tsx
│ │ │ └── ui
│ │ │ │ ├── AppScreen.tsx
│ │ │ │ ├── Button.tsx
│ │ │ │ ├── CallToAction.tsx
│ │ │ │ ├── CircleBackground.tsx
│ │ │ │ ├── Container.tsx
│ │ │ │ ├── Fields.tsx
│ │ │ │ ├── Footer.tsx
│ │ │ │ ├── Header.tsx
│ │ │ │ ├── Hero.tsx
│ │ │ │ ├── Logo.tsx
│ │ │ │ ├── NavLinks.tsx
│ │ │ │ ├── PhoneFrame.tsx
│ │ │ │ ├── PrimaryFeatures.tsx
│ │ │ │ ├── Reviews.tsx
│ │ │ │ ├── SecondaryFeatures.tsx
│ │ │ │ └── StockLogos.tsx
│ │ ├── images
│ │ │ ├── logos
│ │ │ │ ├── bbc.svg
│ │ │ │ ├── cbs.svg
│ │ │ │ ├── cnn.svg
│ │ │ │ ├── fast-company.svg
│ │ │ │ ├── forbes.svg
│ │ │ │ ├── huffpost.svg
│ │ │ │ ├── techcrunch.svg
│ │ │ │ └── wired.svg
│ │ │ ├── phone-frame.svg
│ │ │ └── qr-code.svg
│ │ └── styles
│ │ │ └── globals.css
│ ├── tailwind.config.js
│ ├── tsconfig.json
│ └── turbo.json
├── swaps-widget-angular
│ ├── README.md
│ ├── angular.json
│ ├── package.json
│ ├── src
│ │ ├── app
│ │ │ ├── app.component.html
│ │ │ ├── app.component.ts
│ │ │ └── app.module.ts
│ │ ├── favicon.ico
│ │ ├── index.html
│ │ ├── main.ts
│ │ └── polyfills.ts
│ ├── tsconfig.app.json
│ ├── tsconfig.json
│ └── turbo.json
├── swaps-widget-html
│ ├── index.html
│ └── package.json
├── swaps-widget-nextjs-pages
│ ├── .eslintrc.js
│ ├── .gitignore
│ ├── README.md
│ ├── next.config.js
│ ├── package.json
│ ├── postcss.config.js
│ ├── public
│ │ ├── favicon.ico
│ │ ├── next.svg
│ │ └── vercel.svg
│ ├── src
│ │ ├── pages
│ │ │ ├── _app.tsx
│ │ │ ├── _document.tsx
│ │ │ └── index.tsx
│ │ └── styles
│ │ │ └── globals.css
│ ├── tailwind.config.ts
│ └── tsconfig.json
├── swaps-widget-nextjs
│ ├── .eslintrc.js
│ ├── .gitignore
│ ├── README.md
│ ├── next.config.mjs
│ ├── package.json
│ ├── postcss.config.js
│ ├── public
│ │ ├── favicon.ico
│ │ └── vercel.svg
│ ├── src
│ │ ├── app
│ │ │ ├── layout.tsx
│ │ │ └── page.tsx
│ │ ├── components
│ │ │ ├── Button.tsx
│ │ │ └── Sidebar.tsx
│ │ └── styles
│ │ │ └── globals.css
│ ├── tailwind.config.js
│ └── tsconfig.json
├── swaps-widget-webpack
│ ├── .eslintrc.js
│ ├── .gitignore
│ ├── README.md
│ ├── config
│ │ ├── env.js
│ │ ├── getHttpsConfig.js
│ │ ├── modules.js
│ │ ├── paths.js
│ │ ├── webpack.config.js
│ │ ├── webpack
│ │ │ └── persistentCache
│ │ │ │ └── createEnvironmentHash.js
│ │ └── webpackDevServer.config.js
│ ├── package.json
│ ├── public
│ │ ├── favicon.ico
│ │ ├── index.html
│ │ ├── logo192.png
│ │ ├── logo512.png
│ │ ├── manifest.json
│ │ └── robots.txt
│ ├── scripts
│ │ ├── build.js
│ │ └── start.js
│ ├── src
│ │ ├── App.tsx
│ │ ├── index.tsx
│ │ └── react-app-env.d.ts
│ ├── tsconfig.json
│ └── turbo.json
└── withdraw-widget-nextjs
│ ├── .eslintrc.js
│ ├── .gitignore
│ ├── README.md
│ ├── next.config.mjs
│ ├── package.json
│ ├── postcss.config.js
│ ├── public
│ ├── favicon.ico
│ └── vercel.svg
│ ├── src
│ ├── app
│ │ ├── layout.tsx
│ │ └── page.tsx
│ ├── components
│ │ ├── Button.tsx
│ │ └── Sidebar.tsx
│ └── styles
│ │ └── globals.css
│ ├── tailwind.config.js
│ └── tsconfig.json
├── package.json
├── packages
├── config-eslint
│ ├── index.js
│ └── package.json
└── config-typescript
│ ├── base.json
│ ├── nextjs.json
│ ├── package.json
│ └── react-app.json
├── prettier.config.mjs
├── turbo.json
└── yarn.lock
/.github/dependabot.yml:
--------------------------------------------------------------------------------
1 | # To get started with Dependabot version updates, you'll need to specify which
2 | # package ecosystems to update and where the package manifests are located.
3 | # Please see the documentation for all configuration options:
4 | # https://docs.github.com/github/administering-a-repository/configuration-options-for-dependency-updates
5 |
6 | version: 2
7 | updates:
8 | - package-ecosystem: "npm" # See documentation for possible values
9 | directory: "/" # Location of package manifests
10 | versioning-strategy: increase
11 | schedule:
12 | interval: "daily"
13 | reviewers:
14 | - "lottamus"
15 | allow:
16 | - dependency-name: "@swing.xyz/*"
17 | groups:
18 | swing:
19 | patterns:
20 | - "@swing.xyz/*"
21 |
--------------------------------------------------------------------------------
/.github/workflows/cleanup-pr-caches.yaml:
--------------------------------------------------------------------------------
1 | # https://docs.github.com/en/actions/using-workflows/caching-dependencies-to-speed-up-workflows#force-deleting-cache-entries
2 | name: Cleanup caches for closed branches
3 |
4 | on:
5 | pull_request:
6 | types: [closed]
7 | workflow_dispatch:
8 |
9 | jobs:
10 | cleanup:
11 | runs-on: ubuntu-latest
12 | steps:
13 | - name: Check out code
14 | uses: actions/checkout@v3
15 |
16 | - name: 🧹 Cleanup
17 | run: |
18 | gh extension install actions/gh-actions-cache
19 |
20 | REPO=${{ github.repository }}
21 | BRANCH="refs/pull/${{ github.event.pull_request.number }}/merge"
22 |
23 | echo "Fetching list of cache key"
24 | cacheKeysForPR=$(gh actions-cache list -R $REPO -B $BRANCH | cut -f 1 )
25 |
26 | ## Setting this to not fail the workflow while deleting cache keys.
27 | set +e
28 | echo "Deleting caches..."
29 | for cacheKey in $cacheKeysForPR
30 | do
31 | gh actions-cache delete $cacheKey -R $REPO -B $BRANCH --confirm
32 | done
33 | echo "Done"
34 | env:
35 | GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
36 |
--------------------------------------------------------------------------------
/.github/workflows/test.yaml:
--------------------------------------------------------------------------------
1 | name: Build & Test
2 |
3 | on:
4 | push:
5 | branches: [main]
6 | pull_request:
7 | types: [opened, synchronize, reopened]
8 |
9 | concurrency:
10 | group: ${{ github.head_ref || github.run_id }}
11 | cancel-in-progress: true
12 |
13 | env:
14 | TURBO_TOKEN: ${{ secrets.TURBO_TOKEN }}
15 | TURBO_TEAM: ${{ vars.TURBO_TEAM }}
16 |
17 | jobs:
18 | test:
19 | runs-on: ubuntu-latest
20 | timeout-minutes: 15
21 | steps:
22 | - uses: actions/checkout@v3
23 |
24 | - uses: actions/setup-node@v3
25 | with:
26 | node-version-file: ".nvmrc"
27 |
28 | - name: 📥 Monorepo install
29 | uses: ./.github/actions/yarn-nm-install
30 |
31 | - name: Lint
32 | run: yarn lint -- --quiet
33 |
34 | - name: Build
35 | run: yarn build
36 | env:
37 | NODE_ENV: production
38 |
39 | - name: Unit tests
40 | run: yarn test
41 | env:
42 | NODE_ENV: test
43 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2 |
3 | # dependencies
4 | node_modules
5 | .pnp
6 | .pnp.js
7 | .angular
8 |
9 | # testing
10 | coverage
11 |
12 | # next.js
13 | .next/
14 | out/
15 | build
16 | dist
17 |
18 | # misc
19 | .DS_Store
20 | *.pem
21 |
22 | # debug
23 | npm-debug.log*
24 | yarn-debug.log*
25 | yarn-error.log*
26 | .pnpm-debug.log*
27 |
28 | # local env files
29 | .env.local
30 | .env.development.local
31 | .env.test.local
32 | .env.production.local
33 |
34 | # turbo
35 | .turbo
36 |
37 | # https://yarnpkg.com/getting-started/qa#which-files-should-be-gitignored
38 | .pnp.*
39 | .yarn/*
40 | !.yarn/patches
41 | !.yarn/plugins
42 | !.yarn/releases
43 | !.yarn/sdks
44 | !.yarn/versions
--------------------------------------------------------------------------------
/.npmrc:
--------------------------------------------------------------------------------
1 | auto-install-peers = true
2 |
--------------------------------------------------------------------------------
/.nvmrc:
--------------------------------------------------------------------------------
1 | 20
--------------------------------------------------------------------------------
/.prettierrc:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/swing-xyz/examples/c46e4dd4a47f96050e736f64c4a41c45f3e2d45d/.prettierrc
--------------------------------------------------------------------------------
/.yarnrc.yml:
--------------------------------------------------------------------------------
1 | compressionLevel: mixed
2 |
3 | enableGlobalCache: false
4 |
5 | nodeLinker: node-modules
6 |
7 | yarnPath: .yarn/releases/yarn-4.1.1.cjs
8 |
--------------------------------------------------------------------------------
/apps/directory/.eslintrc.js:
--------------------------------------------------------------------------------
1 | /** @type {import("eslint").Linter.Config} */
2 | module.exports = {
3 | extends: ["eslint-config-examples/index.js"],
4 | parser: "@typescript-eslint/parser",
5 | parserOptions: {
6 | project: true,
7 | },
8 | };
9 |
--------------------------------------------------------------------------------
/apps/directory/README.md:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Swing Examples
7 |
8 |
9 |
--------------------------------------------------------------------------------
/apps/directory/components.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "https://ui.shadcn.com/schema.json",
3 | "style": "default",
4 | "rsc": true,
5 | "tsx": true,
6 | "tailwind": {
7 | "config": "tailwind.config.js",
8 | "css": "src/styles/globals.css",
9 | "baseColor": "slate",
10 | "cssVariables": true
11 | },
12 | "aliases": {
13 | "components": "components",
14 | "utils": "lib/utils"
15 | }
16 | }
--------------------------------------------------------------------------------
/apps/directory/next-env.d.ts:
--------------------------------------------------------------------------------
1 | ///
2 | ///
3 |
4 | // NOTE: This file should not be edited
5 | // see https://nextjs.org/docs/basic-features/typescript for more information.
6 |
--------------------------------------------------------------------------------
/apps/directory/next.config.mjs:
--------------------------------------------------------------------------------
1 | /** @type {import('next').NextConfig} */
2 | const nextConfig = {
3 | reactStrictMode: true,
4 |
5 | redirects: async () => [
6 | {
7 | // Examples directory was hosted from https://developers.swing.xyz/examples at one time.
8 | // It has since been moved to https://examples.swing.xyz
9 | source: "/examples",
10 | destination: "/",
11 | permanent: true,
12 | },
13 | ],
14 | };
15 |
16 | export default nextConfig;
17 |
--------------------------------------------------------------------------------
/apps/directory/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "private": true,
3 | "name": "directory",
4 | "version": "0.0.0",
5 | "scripts": {
6 | "dev": "next dev",
7 | "build": "next build",
8 | "lint": "eslint src",
9 | "start": "next start",
10 | "clean": "rm -rf .next node_modules",
11 | "shadcn": "yarn dlx shadcn-ui@latest"
12 | },
13 | "dependencies": {
14 | "@radix-ui/react-accordion": "^1.1.2",
15 | "@radix-ui/react-avatar": "^1.0.4",
16 | "@radix-ui/react-checkbox": "^1.0.4",
17 | "@radix-ui/react-dialog": "^1.0.5",
18 | "@radix-ui/react-dropdown-menu": "1.0.0",
19 | "@radix-ui/react-icons": "1.3.0",
20 | "class-variance-authority": "^0.7.0",
21 | "clsx": "^2.1.0",
22 | "fast-glob": "^3.3.2",
23 | "geist": "^1.3.0",
24 | "lucide-react": "^0.364.0",
25 | "next": "^14.1.4",
26 | "next-themes": "^0.3.0",
27 | "react": "^18.2.0",
28 | "react-dom": "^18.2.0",
29 | "tailwind-merge": "^2.2.2",
30 | "tailwindcss-animate": "^1.0.7",
31 | "vaul": "^0.9.0"
32 | },
33 | "devDependencies": {
34 | "@types/node": "20.12.4",
35 | "@types/react": "18.2.74",
36 | "autoprefixer": "10.4.19",
37 | "eslint": "^8.57.0",
38 | "eslint-config-examples": "workspace:*",
39 | "postcss": "8.4.38",
40 | "tailwindcss": "3.4.3",
41 | "typescript": "^5.4.4",
42 | "typescript-config": "workspace:*"
43 | }
44 | }
45 |
--------------------------------------------------------------------------------
/apps/directory/postcss.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | plugins: {
3 | tailwindcss: {},
4 | autoprefixer: {},
5 | },
6 | }
7 |
--------------------------------------------------------------------------------
/apps/directory/public/directory-landing.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/swing-xyz/examples/c46e4dd4a47f96050e736f64c4a41c45f3e2d45d/apps/directory/public/directory-landing.png
--------------------------------------------------------------------------------
/apps/directory/src/app/layout.tsx:
--------------------------------------------------------------------------------
1 | import { ThemeProvider } from "components/theme-provider";
2 | import "styles/globals.css";
3 |
4 | import { GeistSans } from "geist/font/sans";
5 | import { GeistMono } from "geist/font/mono";
6 | import { Header } from "components/header";
7 | import { Footer } from "components/footer";
8 |
9 | export default function Layout({ children }: { children: React.ReactNode }) {
10 | return (
11 |
12 |
17 |
18 |
19 |
20 | {children}
21 |
22 |
23 |
24 |
25 |
26 | );
27 | }
28 |
--------------------------------------------------------------------------------
/apps/directory/src/components/footer.tsx:
--------------------------------------------------------------------------------
1 | import { GithubIcon } from "./icons/github";
2 | import { TwitterIcon } from "./icons/twitter";
3 |
4 | const footerNavigation = [
5 | {
6 | name: "GitHub",
7 | href: "https://github.com/swing-xyz/examples",
8 | icon: GithubIcon,
9 | },
10 | {
11 | name: "X",
12 | href: "https://x.com/swing_xyz",
13 | icon: TwitterIcon,
14 | },
15 | ];
16 |
17 | export function Footer() {
18 | return (
19 |
43 | );
44 | }
45 |
--------------------------------------------------------------------------------
/apps/directory/src/components/grid-pattern.tsx:
--------------------------------------------------------------------------------
1 | export function GridPattern({
2 | width,
3 | height,
4 | x,
5 | y,
6 | squares,
7 | ...props
8 | }: React.ComponentPropsWithoutRef<"svg"> & {
9 | width: number;
10 | height: number;
11 | x: string | number;
12 | y: string | number;
13 | squares: [x: number, y: number][];
14 | }) {
15 | return (
16 |
50 | );
51 | }
52 |
--------------------------------------------------------------------------------
/apps/directory/src/components/header.tsx:
--------------------------------------------------------------------------------
1 | import { GithubIcon } from "./icons/github";
2 | import { SwingLogo } from "./icons/swing";
3 | import { Button } from "./ui/button";
4 |
5 | export function Header() {
6 | return (
7 |
34 | );
35 | }
36 |
--------------------------------------------------------------------------------
/apps/directory/src/components/icons/twitter.tsx:
--------------------------------------------------------------------------------
1 | import type { SVGProps } from "react";
2 |
3 | export function TwitterIcon(props: SVGProps) {
4 | return (
5 |
6 |
7 |
8 | );
9 | }
10 |
--------------------------------------------------------------------------------
/apps/directory/src/components/templates.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import { useSearchParams } from "next/navigation";
4 | import { useMemo } from "react";
5 | import { keywordEntries } from "lib/keywords";
6 | import { slugify } from "lib/slugify";
7 | import { TemplateGrid } from "./template-grid";
8 |
9 | export type TemplateMeta = {
10 | id: string;
11 | name: string;
12 | description: string;
13 | url: string;
14 | keywords: string[];
15 | integration?: string;
16 | framework?: string;
17 | wallet?: string;
18 | "use-case"?: string;
19 | };
20 |
21 | export function Templates({ templates }: { templates: TemplateMeta[] }) {
22 | const searchParams = useSearchParams();
23 |
24 | const filteredTemplates = useMemo(() => {
25 | return templates.filter((template) => {
26 | for (const [filter] of keywordEntries) {
27 | const values = searchParams.getAll(slugify(filter));
28 |
29 | if (values.length) {
30 | if (!values.some((value) => template.keywords.includes(value))) {
31 | return false;
32 | }
33 | }
34 | }
35 |
36 | return true;
37 | });
38 | }, [searchParams, templates]);
39 |
40 | return ;
41 | }
42 |
--------------------------------------------------------------------------------
/apps/directory/src/components/theme-provider.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import { useEffect } from "react";
4 | import { ThemeProvider as NextThemeProvider, useTheme } from "next-themes";
5 |
6 | function ThemeWatcher() {
7 | const { resolvedTheme, setTheme } = useTheme();
8 |
9 | useEffect(() => {
10 | if (typeof window === "undefined") return;
11 |
12 | const media = window.matchMedia("(prefers-color-scheme: dark)");
13 |
14 | function onMediaChange() {
15 | const systemTheme = media.matches ? "dark" : "light";
16 | if (resolvedTheme === systemTheme) {
17 | setTheme("system");
18 | }
19 | }
20 |
21 | onMediaChange();
22 | media.addEventListener("change", onMediaChange);
23 |
24 | return () => {
25 | media.removeEventListener("change", onMediaChange);
26 | };
27 | }, [resolvedTheme, setTheme]);
28 |
29 | return null;
30 | }
31 |
32 | export function ThemeProvider({ children }: { children: React.ReactNode }) {
33 | return (
34 |
40 |
41 |
42 | {children}
43 |
44 | );
45 | }
46 |
--------------------------------------------------------------------------------
/apps/directory/src/components/ui/badge.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react";
2 | import { cva, type VariantProps } from "class-variance-authority";
3 |
4 | import { cn } from "lib/utils";
5 |
6 | const badgeVariants = cva(
7 | "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
8 | {
9 | variants: {
10 | variant: {
11 | default:
12 | "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
13 | secondary:
14 | "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
15 | destructive:
16 | "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
17 | outline: "text-foreground",
18 | },
19 | },
20 | defaultVariants: {
21 | variant: "default",
22 | },
23 | },
24 | );
25 |
26 | export interface BadgeProps
27 | extends React.HTMLAttributes,
28 | VariantProps {}
29 |
30 | function Badge({ className, variant, ...props }: BadgeProps) {
31 | return (
32 |
33 | );
34 | }
35 |
36 | export { Badge, badgeVariants };
37 |
--------------------------------------------------------------------------------
/apps/directory/src/components/ui/checkbox.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import * as React from "react";
4 | import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
5 | import { Check } from "lucide-react";
6 |
7 | import { cn } from "lib/utils";
8 |
9 | const Checkbox = React.forwardRef<
10 | React.ElementRef,
11 | React.ComponentPropsWithoutRef
12 | >(({ className, ...props }, ref) => (
13 |
21 |
24 |
25 |
26 |
27 | ));
28 | Checkbox.displayName = "Checkbox";
29 |
30 | export { Checkbox };
31 |
--------------------------------------------------------------------------------
/apps/directory/src/hooks/use-media-query.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import { useEffect, useState } from "react";
4 |
5 | export function useMediaQuery(query: string) {
6 | const [value, setValue] = useState(false);
7 |
8 | useEffect(() => {
9 | function onChange(event: MediaQueryListEvent) {
10 | setValue(event.matches);
11 | }
12 |
13 | const result = matchMedia(query);
14 | result.addEventListener("change", onChange);
15 | setValue(result.matches);
16 |
17 | return () => result.removeEventListener("change", onChange);
18 | }, [query]);
19 |
20 | return value;
21 | }
22 |
--------------------------------------------------------------------------------
/apps/directory/src/lib/keywords.ts:
--------------------------------------------------------------------------------
1 | export const keywordOptions = {
2 | Integration: ["Widget", "SDK", "API"],
3 | "Use Case": ["Swaps", "Staking", "Withdraw", "Gas"],
4 | Framework: ["Next.js", "Angular", "Webpack", "HTML"],
5 | Wallet: ["wagmi", "thirdweb", "thirdweb embedded wallet", "xDEFI"],
6 | };
7 |
8 | export const keywordEntries = Object.entries(keywordOptions);
9 |
--------------------------------------------------------------------------------
/apps/directory/src/lib/slugify.ts:
--------------------------------------------------------------------------------
1 | export function slugify(str: string): string {
2 | return str
3 | .toLowerCase()
4 | .replace(/ /g, "-")
5 | .replace(/[^\w-]+/g, "");
6 | }
7 |
--------------------------------------------------------------------------------
/apps/directory/src/lib/utils.ts:
--------------------------------------------------------------------------------
1 | import { type ClassValue, clsx } from "clsx";
2 | import { twMerge } from "tailwind-merge";
3 |
4 | export function cn(...inputs: ClassValue[]) {
5 | return twMerge(clsx(inputs));
6 | }
7 |
--------------------------------------------------------------------------------
/apps/directory/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "https://json.schemastore.org/tsconfig",
3 | "extends": "typescript-config/nextjs.json",
4 | "compilerOptions": {
5 | "rootDir": ".",
6 | "baseUrl": "./src",
7 | "plugins": [
8 | {
9 | "name": "next",
10 | },
11 | ],
12 | "verbatimModuleSyntax": true,
13 | },
14 | "include": [
15 | "next-env.d.ts",
16 | "**/*.ts",
17 | "**/*.tsx",
18 | "*.js",
19 | "*.mjs",
20 | ".next/types/**/*.ts",
21 | ],
22 | "exclude": ["node_modules", ".next"],
23 | }
24 |
--------------------------------------------------------------------------------
/examples/gas-widget-nextjs/.eslintrc.js:
--------------------------------------------------------------------------------
1 | /** @type {import("eslint").Linter.Config} */
2 | module.exports = {
3 | extends: ["eslint-config-examples/index.js"],
4 | parser: "@typescript-eslint/parser",
5 | parserOptions: {
6 | project: true,
7 | },
8 | };
9 |
--------------------------------------------------------------------------------
/examples/gas-widget-nextjs/.gitignore:
--------------------------------------------------------------------------------
1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2 |
3 | # dependencies
4 | /node_modules
5 | /.pnp
6 | .pnp.js
7 |
8 | # testing
9 | /coverage
10 |
11 | # next.js
12 | /.next/
13 | /out/
14 |
15 | # production
16 | /build
17 |
18 | # misc
19 | .DS_Store
20 | *.pem
21 |
22 | # debug
23 | npm-debug.log*
24 | yarn-debug.log*
25 | yarn-error.log*
26 | .pnpm-debug.log*
27 |
28 | # local env files
29 | .env*.local
30 |
31 | # vercel
32 | .vercel
33 |
34 | # typescript
35 | *.tsbuildinfo
36 | next-env.d.ts
37 |
--------------------------------------------------------------------------------
/examples/gas-widget-nextjs/README.md:
--------------------------------------------------------------------------------
1 | # Cross-chain Gas Refill using the Swing Widget in Next.js
2 |
3 | MetaWallet is an example template showcasing how to use the [Swing Widget](https://developers.swing.xyz/reference/widget) to integrate cross-chain gas on a wallet portfolio website.
4 |
5 | This example is built with:
6 |
7 | - [@swing.xyz/ui](https://developers.swing.xyz/reference/widget)
8 | - [next.js](https://nextjs.org)
9 | - [tailwind](https://tailwindcss.com)
10 |
11 | ## Demo
12 |
13 | View the live demo https://gas-widget-nextjs.vercel.app/
14 |
15 | ## Getting started
16 |
17 | To get started with this template, first install the npm dependencies:
18 |
19 | ```bash
20 | yarn install
21 | ```
22 |
23 | Next, run the development server:
24 |
25 | ```bash
26 | yarn dev --filter=staking-widget-nextjs
27 | ```
28 |
29 | Finally, open [http://localhost:3000](http://localhost:3000) in your browser to view the website.
30 |
31 | ## Swing integration
32 |
33 | The [@swing.xyz/ui](https://developers.swing.xyz/reference/widget) can be found in [src/app/page.tsx](./src/app/page.tsx).
34 |
35 | It utilizes the `Gas` component to enable a low-code, cross-chain gas refill experience.
36 |
37 | ## Customizing
38 |
39 | You can start editing this template by modifying the files in the `/src` folder. The site will auto-update as you edit these files.
40 |
--------------------------------------------------------------------------------
/examples/gas-widget-nextjs/next.config.mjs:
--------------------------------------------------------------------------------
1 | /** @type {import('next').NextConfig} */
2 | const nextConfig = {
3 | reactStrictMode: true,
4 | };
5 |
6 | export default nextConfig;
7 |
--------------------------------------------------------------------------------
/examples/gas-widget-nextjs/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "gas-widget-nextjs",
3 | "demo": "https://gas-widget-nextjs.vercel.app",
4 | "keywords": [
5 | "@swing.xyz/ui",
6 | "widget",
7 | "gas",
8 | "nextjs"
9 | ],
10 | "license": "MIT",
11 | "private": true,
12 | "version": "0.0.1",
13 | "scripts": {
14 | "dev": "next dev",
15 | "lint": "eslint src",
16 | "build": "next build",
17 | "start": "next start",
18 | "clean": "rm -rf .next node_modules"
19 | },
20 | "dependencies": {
21 | "@fortawesome/fontawesome-svg-core": "^6.5.1",
22 | "@fortawesome/free-brands-svg-icons": "^6.5.1",
23 | "@fortawesome/free-solid-svg-icons": "^6.5.1",
24 | "@fortawesome/react-fontawesome": "^0.2.0",
25 | "@swing.xyz/ui": "^0.53.2",
26 | "clsx": "^2.1.0",
27 | "next": "^14.1.4",
28 | "react": "18.2.0",
29 | "react-dom": "18.2.0"
30 | },
31 | "devDependencies": {
32 | "@types/node": "20.12.4",
33 | "@types/react": "18.2.74",
34 | "@types/react-dom": "18.2.24",
35 | "autoprefixer": "^10.4.19",
36 | "eslint": "^8.57.0",
37 | "eslint-config-examples": "workspace:*",
38 | "pino-pretty": "^10.3.1",
39 | "postcss": "^8.4.38",
40 | "tailwindcss": "^3.4.3",
41 | "typescript": "^5.4.4",
42 | "typescript-config": "workspace:*"
43 | }
44 | }
45 |
--------------------------------------------------------------------------------
/examples/gas-widget-nextjs/postcss.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | plugins: {
3 | tailwindcss: {},
4 | autoprefixer: {},
5 | },
6 | }
7 |
--------------------------------------------------------------------------------
/examples/gas-widget-nextjs/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/swing-xyz/examples/c46e4dd4a47f96050e736f64c4a41c45f3e2d45d/examples/gas-widget-nextjs/public/favicon.ico
--------------------------------------------------------------------------------
/examples/gas-widget-nextjs/public/vercel.svg:
--------------------------------------------------------------------------------
1 |
3 |
4 |
--------------------------------------------------------------------------------
/examples/gas-widget-nextjs/src/app/layout.tsx:
--------------------------------------------------------------------------------
1 | import { faGithub } from "@fortawesome/free-brands-svg-icons";
2 | import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
3 | import { Button } from "../components/Button";
4 | import Sidebar from "../components/Sidebar";
5 |
6 | import "styles/globals.css";
7 | import "@fortawesome/fontawesome-svg-core/styles.css";
8 |
9 | export default function Layout({ children }: { children: React.ReactNode }) {
10 | return (
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
27 |
28 |
29 | {children}
30 |
31 |
32 |
33 | );
34 | }
35 |
--------------------------------------------------------------------------------
/examples/gas-widget-nextjs/src/app/page.tsx:
--------------------------------------------------------------------------------
1 | import { Gas } from "@swing.xyz/ui";
2 | import "@swing.xyz/ui/theme.css";
3 |
4 | export default function SwapPage() {
5 | return (
6 |
7 |
12 |
13 | );
14 | }
15 |
--------------------------------------------------------------------------------
/examples/gas-widget-nextjs/src/styles/globals.css:
--------------------------------------------------------------------------------
1 | @tailwind base;
2 | @tailwind components;
3 | @tailwind utilities;
4 |
--------------------------------------------------------------------------------
/examples/gas-widget-nextjs/tailwind.config.js:
--------------------------------------------------------------------------------
1 | /** @type {import('tailwindcss').Config} */
2 | module.exports = {
3 | content: ["./src/**/*.{ts,tsx}"],
4 | theme: {
5 | extend: {},
6 | },
7 | plugins: [],
8 | };
9 |
--------------------------------------------------------------------------------
/examples/gas-widget-nextjs/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "https://json.schemastore.org/tsconfig",
3 | "extends": "typescript-config/nextjs.json",
4 | "compilerOptions": {
5 | "rootDir": ".",
6 | "baseUrl": "./src",
7 | "plugins": [
8 | {
9 | "name": "next"
10 | }
11 | ]
12 | },
13 | "include": ["next-env.d.ts", "src", ".next/types/**/*.ts"],
14 | "exclude": ["node_modules"]
15 | }
16 |
--------------------------------------------------------------------------------
/examples/staking-api-nextjs/README.md:
--------------------------------------------------------------------------------
1 | # Cross-chain Staking using the Swing API
2 |
--------------------------------------------------------------------------------
/examples/staking-sdk-nextjs/.eslintrc.js:
--------------------------------------------------------------------------------
1 | /** @type {import("eslint").Linter.Config} */
2 | module.exports = {
3 | extends: ["eslint-config-examples/index.js"],
4 | parser: "@typescript-eslint/parser",
5 | parserOptions: {
6 | project: true,
7 | },
8 | };
9 |
--------------------------------------------------------------------------------
/examples/staking-sdk-nextjs/.gitignore:
--------------------------------------------------------------------------------
1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2 |
3 | # dependencies
4 | /node_modules
5 | /.pnp
6 | .pnp.js
7 |
8 | # testing
9 | /coverage
10 |
11 | # next.js
12 | /.next/
13 | /out/
14 |
15 | # production
16 | /build
17 |
18 | # misc
19 | .DS_Store
20 | *.pem
21 |
22 | # debug
23 | npm-debug.log*
24 | yarn-debug.log*
25 | yarn-error.log*
26 | .pnpm-debug.log*
27 |
28 | # local env files
29 | .env*.local
30 |
31 | # vercel
32 | .vercel
33 |
34 | # typescript
35 | *.tsbuildinfo
36 | next-env.d.ts
37 |
--------------------------------------------------------------------------------
/examples/staking-sdk-nextjs/components.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "https://ui.shadcn.com/schema.json",
3 | "style": "default",
4 | "rsc": true,
5 | "tsx": true,
6 | "tailwind": {
7 | "config": "tailwind.config.js",
8 | "css": "src/styles/globals.css",
9 | "baseColor": "slate",
10 | "cssVariables": true
11 | },
12 | "aliases": {
13 | "components": "components",
14 | "utils": "lib/utils"
15 | }
16 | }
--------------------------------------------------------------------------------
/examples/staking-sdk-nextjs/next.config.mjs:
--------------------------------------------------------------------------------
1 | /** @type {import('next').NextConfig} */
2 | const nextConfig = {
3 | reactStrictMode: true,
4 | };
5 |
6 | export default nextConfig;
7 |
--------------------------------------------------------------------------------
/examples/staking-sdk-nextjs/postcss.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | plugins: {
3 | tailwindcss: {},
4 | autoprefixer: {},
5 | },
6 | }
7 |
--------------------------------------------------------------------------------
/examples/staking-sdk-nextjs/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/swing-xyz/examples/c46e4dd4a47f96050e736f64c4a41c45f3e2d45d/examples/staking-sdk-nextjs/public/favicon.ico
--------------------------------------------------------------------------------
/examples/staking-sdk-nextjs/public/vercel.svg:
--------------------------------------------------------------------------------
1 |
3 |
4 |
--------------------------------------------------------------------------------
/examples/staking-sdk-nextjs/src/app/page.tsx:
--------------------------------------------------------------------------------
1 | import { Stake } from "components/Stake";
2 |
3 | export default async function Page() {
4 | return ;
5 | }
6 |
--------------------------------------------------------------------------------
/examples/staking-sdk-nextjs/src/components/ConnectWallet.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import { useAccount, useEnsName } from "wagmi";
4 | import { Button } from "./ui/button";
5 | import { useConnectWallet } from "hooks/useConnectWallet";
6 |
7 | export function ConnectWallet() {
8 | const { address, isConnected } = useAccount();
9 | const { data: ensName } = useEnsName({ address });
10 | const connectWallet = useConnectWallet();
11 |
12 | return (
13 |
22 | );
23 | }
24 |
--------------------------------------------------------------------------------
/examples/staking-sdk-nextjs/src/components/SwingSdkProvider.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import { SwingSDK } from "@swing.xyz/sdk";
4 | import { useContext, useEffect, useState, createContext } from "react";
5 |
6 | const swingSdk = new SwingSDK({
7 | projectId: "example-staking-sdk-nextjs",
8 | debug: true,
9 | // environment: "testnet",
10 | });
11 |
12 | const SwingSdkContext = createContext<[SwingSDK, { isReady: boolean }]>([
13 | swingSdk,
14 | { isReady: false },
15 | ]);
16 |
17 | export function useSwingSdk() {
18 | return useContext(SwingSdkContext);
19 | }
20 |
21 | export function SwingSdkProvider({ children }: { children: React.ReactNode }) {
22 | const [isReady, setIsReady] = useState(false);
23 |
24 | useEffect(() => {
25 | swingSdk
26 | .init()
27 | .then(() => {
28 | setIsReady(true);
29 | })
30 | .catch((error) => {
31 | console.error(error);
32 | });
33 | }, []);
34 |
35 | return (
36 |
37 | {children}
38 |
39 | );
40 | }
41 |
--------------------------------------------------------------------------------
/examples/staking-sdk-nextjs/src/components/WagmiProvider.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import { createConfig, WagmiProvider as WagmiConfig } from "wagmi";
4 | import * as WagmiChains from "wagmi/chains";
5 | import { injected, coinbaseWallet } from "wagmi/connectors";
6 | import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
7 | import { createClient, http } from "viem";
8 |
9 | const queryClient = new QueryClient();
10 |
11 | const config = createConfig({
12 | ssr: true,
13 | chains: Object.values(WagmiChains) as [
14 | WagmiChains.Chain,
15 | ...WagmiChains.Chain[],
16 | ],
17 |
18 | client({ chain }) {
19 | return createClient({ chain, transport: http() });
20 | },
21 |
22 | connectors: [
23 | injected({ shimDisconnect: true, target: "metaMask" }),
24 | coinbaseWallet({
25 | appName: "Swing Staking Widget Example",
26 | }),
27 | ],
28 | });
29 |
30 | export function WagmiProvider({ children }: { children: React.ReactNode }) {
31 | return (
32 |
33 | {children}
34 |
35 | );
36 | }
37 |
--------------------------------------------------------------------------------
/examples/staking-sdk-nextjs/src/hooks/useConnectWallet.tsx:
--------------------------------------------------------------------------------
1 | import { Chain } from "@swing.xyz/sdk";
2 | import { useSwingSdk } from "components/SwingSdkProvider";
3 | import { useCallback } from "react";
4 | import { useAccount, useConnect } from "wagmi";
5 |
6 | export function useConnectWallet() {
7 | const { address, isConnected } = useAccount();
8 | const { connectAsync, connectors } = useConnect();
9 | const [swingSDK] = useSwingSdk();
10 |
11 | async function connectWallet(
12 | chain?: Chain,
13 | ): Promise<`0x${string}` | undefined> {
14 | if (isConnected) {
15 | return address;
16 | }
17 |
18 | const connector = connectors[0];
19 |
20 | const connection = await connectAsync({
21 | chainId: chain?.chainId,
22 | connector,
23 | });
24 |
25 | const provider = await connector.getProvider();
26 | const chainId = await connector.getChainId();
27 |
28 | await swingSDK.wallet.connect(provider, chainId);
29 |
30 | return connection.accounts[0];
31 | }
32 |
33 | return useCallback(connectWallet, [
34 | isConnected,
35 | connectAsync,
36 | connectors,
37 | swingSDK,
38 | address,
39 | ]);
40 | }
41 |
--------------------------------------------------------------------------------
/examples/staking-sdk-nextjs/src/lib/utils.ts:
--------------------------------------------------------------------------------
1 | import { type ClassValue, clsx } from "clsx";
2 | import { twMerge } from "tailwind-merge";
3 |
4 | export function cn(...inputs: ClassValue[]) {
5 | return twMerge(clsx(inputs));
6 | }
7 |
--------------------------------------------------------------------------------
/examples/staking-sdk-nextjs/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "https://json.schemastore.org/tsconfig",
3 | "extends": "typescript-config/nextjs.json",
4 | "compilerOptions": {
5 | "rootDir": ".",
6 | "baseUrl": "./src",
7 | "plugins": [
8 | {
9 | "name": "next"
10 | }
11 | ]
12 | },
13 | "include": ["next-env.d.ts", "src", ".next/types/**/*.ts"],
14 | "exclude": ["node_modules"]
15 | }
16 |
--------------------------------------------------------------------------------
/examples/staking-widget-nextjs/.eslintrc.js:
--------------------------------------------------------------------------------
1 | /** @type {import("eslint").Linter.Config} */
2 | module.exports = {
3 | extends: ["eslint-config-examples/index.js"],
4 | parser: "@typescript-eslint/parser",
5 | parserOptions: {
6 | project: true,
7 | },
8 | };
9 |
--------------------------------------------------------------------------------
/examples/staking-widget-nextjs/.gitignore:
--------------------------------------------------------------------------------
1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2 |
3 | # dependencies
4 | /node_modules
5 | /.pnp
6 | .pnp.js
7 |
8 | # testing
9 | /coverage
10 |
11 | # next.js
12 | /.next/
13 | /out/
14 |
15 | # production
16 | /build
17 |
18 | # misc
19 | .DS_Store
20 | *.pem
21 |
22 | # debug
23 | npm-debug.log*
24 | yarn-debug.log*
25 | yarn-error.log*
26 | .pnpm-debug.log*
27 |
28 | # local env files
29 | .env*.local
30 |
31 | # vercel
32 | .vercel
33 |
34 | # typescript
35 | *.tsbuildinfo
36 | next-env.d.ts
37 |
--------------------------------------------------------------------------------
/examples/staking-widget-nextjs/README.md:
--------------------------------------------------------------------------------
1 | # Cross-chain Staking using the Swing Widget in Next.js
2 |
3 | MetaWallet is an example template showcasing how to use the [Swing Widget](https://developers.swing.xyz/reference/widget) to integrate cross-chain staking on a wallet portfolio website.
4 |
5 | This example is built with:
6 |
7 | - [@swing.xyz/ui](https://developers.swing.xyz/reference/widget)
8 | - [next.js](https://nextjs.org)
9 | - [tailwind](https://tailwindcss.com)
10 |
11 | ## Demo
12 |
13 | View the live demo https://staking-widget-nextjs.vercel.app/
14 |
15 | ## Getting started
16 |
17 | To get started with this template, first install the npm dependencies:
18 |
19 | ```bash
20 | yarn install
21 | ```
22 |
23 | Next, run the development server:
24 |
25 | ```bash
26 | yarn dev --filter=staking-widget-nextjs
27 | ```
28 |
29 | Finally, open [http://localhost:3000](http://localhost:3000) in your browser to view the website.
30 |
31 | ## Swing integration
32 |
33 | The [@swing.xyz/ui](https://developers.swing.xyz/reference/widget) can be found in [src/app/page.tsx](./src/app/page.tsx).
34 |
35 | It utilizes the `Stake` component to enable a low-code, cross-chain staking experience.
36 |
37 | ## Customizing
38 |
39 | You can start editing this template by modifying the files in the `/src` folder. The site will auto-update as you edit these files.
40 |
--------------------------------------------------------------------------------
/examples/staking-widget-nextjs/next.config.mjs:
--------------------------------------------------------------------------------
1 | /** @type {import('next').NextConfig} */
2 | const nextConfig = {
3 | reactStrictMode: true,
4 | };
5 |
6 | export default nextConfig;
7 |
--------------------------------------------------------------------------------
/examples/staking-widget-nextjs/postcss.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | plugins: {
3 | tailwindcss: {},
4 | autoprefixer: {},
5 | },
6 | }
7 |
--------------------------------------------------------------------------------
/examples/staking-widget-nextjs/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/swing-xyz/examples/c46e4dd4a47f96050e736f64c4a41c45f3e2d45d/examples/staking-widget-nextjs/public/favicon.ico
--------------------------------------------------------------------------------
/examples/staking-widget-nextjs/public/vercel.svg:
--------------------------------------------------------------------------------
1 |
3 |
4 |
--------------------------------------------------------------------------------
/examples/staking-widget-nextjs/src/app/layout.tsx:
--------------------------------------------------------------------------------
1 | import "styles/globals.css";
2 | import "@fortawesome/fontawesome-svg-core/styles.css";
3 |
4 | export default function Layout({ children }: { children: React.ReactNode }) {
5 | return (
6 |
7 |
8 |
9 |
10 | {children}
11 |
12 |
13 | );
14 | }
15 |
--------------------------------------------------------------------------------
/examples/staking-widget-nextjs/src/components/ConnectWallet.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import { useAccount, useEnsName, useConnect, useConnectors } from "wagmi";
4 | import { Button } from "./ui/button";
5 |
6 | export function ConnectWallet() {
7 | const { address, isConnected } = useAccount();
8 | const { data: ensName } = useEnsName({ address });
9 | const { connect } = useConnect();
10 | const connectors = useConnectors();
11 |
12 | return (
13 |
22 | );
23 | }
24 |
--------------------------------------------------------------------------------
/examples/staking-widget-nextjs/src/components/WagmiProvider.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import { createConfig, WagmiProvider } from "wagmi";
4 | import * as WagmiChains from "wagmi/chains";
5 | import { injected, coinbaseWallet } from "wagmi/connectors";
6 | import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
7 | import { createClient, http } from "viem";
8 |
9 | const queryClient = new QueryClient();
10 |
11 | const config = createConfig({
12 | ssr: true,
13 | chains: Object.values(WagmiChains) as [
14 | WagmiChains.Chain,
15 | ...WagmiChains.Chain[],
16 | ],
17 |
18 | client({ chain }) {
19 | return createClient({ chain, transport: http() });
20 | },
21 |
22 | connectors: [
23 | injected(),
24 | coinbaseWallet({
25 | appName: "Swing Staking Widget Example",
26 | }),
27 | ],
28 | });
29 |
30 | export function Provider({ children }: { children: React.ReactNode }) {
31 | return (
32 |
33 | {children}
34 |
35 | );
36 | }
37 |
--------------------------------------------------------------------------------
/examples/staking-widget-nextjs/src/lib/utils.ts:
--------------------------------------------------------------------------------
1 | import { type ClassValue, clsx } from "clsx";
2 | import { twMerge } from "tailwind-merge";
3 |
4 | export function cn(...inputs: ClassValue[]) {
5 | return twMerge(clsx(inputs));
6 | }
7 |
--------------------------------------------------------------------------------
/examples/staking-widget-nextjs/src/styles/globals.css:
--------------------------------------------------------------------------------
1 | @tailwind base;
2 | @tailwind components;
3 | @tailwind utilities;
4 |
--------------------------------------------------------------------------------
/examples/staking-widget-nextjs/tailwind.config.js:
--------------------------------------------------------------------------------
1 | /** @type {import('tailwindcss').Config} */
2 | module.exports = {
3 | content: ["./src/**/*.{ts,tsx}"],
4 | theme: {
5 | extend: {},
6 | },
7 | plugins: [],
8 | };
9 |
--------------------------------------------------------------------------------
/examples/staking-widget-nextjs/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "https://json.schemastore.org/tsconfig",
3 | "extends": "typescript-config/nextjs.json",
4 | "compilerOptions": {
5 | "rootDir": ".",
6 | "baseUrl": "./src",
7 | "plugins": [
8 | {
9 | "name": "next"
10 | }
11 | ]
12 | },
13 | "include": ["next-env.d.ts", "src", ".next/types/**/*.ts"],
14 | "exclude": ["node_modules"]
15 | }
16 |
--------------------------------------------------------------------------------
/examples/swaps-api-nextjs-bitcoin/.eslintrc.js:
--------------------------------------------------------------------------------
1 | /** @type {import("eslint").Linter.Config} */
2 | module.exports = {
3 | extends: ["eslint-config-examples/index.js"],
4 | parser: "@typescript-eslint/parser",
5 | parserOptions: {
6 | project: true,
7 | },
8 | };
9 |
--------------------------------------------------------------------------------
/examples/swaps-api-nextjs-bitcoin/.gitignore:
--------------------------------------------------------------------------------
1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2 |
3 | # dependencies
4 | /node_modules
5 | /.pnp
6 | .pnp.js
7 |
8 | # testing
9 | /coverage
10 |
11 | # next.js
12 | /.next/
13 | /out/
14 |
15 | # production
16 | /build
17 |
18 | # misc
19 | .DS_Store
20 | *.pem
21 |
22 | # debug
23 | npm-debug.log*
24 | yarn-debug.log*
25 | yarn-error.log*
26 | .pnpm-debug.log*
27 |
28 | # local env files
29 | .env*.local
30 |
31 | # vercel
32 | .vercel
33 |
--------------------------------------------------------------------------------
/examples/swaps-api-nextjs-bitcoin/components.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "https://ui.shadcn.com/schema.json",
3 | "style": "default",
4 | "rsc": true,
5 | "tsx": true,
6 | "tailwind": {
7 | "config": "tailwind.config.js",
8 | "css": "styles/globals.css",
9 | "baseColor": "zinc",
10 | "cssVariables": false,
11 | "prefix": ""
12 | },
13 | "aliases": {
14 | "components": "components",
15 | "utils": "lib"
16 | }
17 | }
--------------------------------------------------------------------------------
/examples/swaps-api-nextjs-bitcoin/next-env.d.ts:
--------------------------------------------------------------------------------
1 | ///
2 | ///
3 |
4 | // NOTE: This file should not be edited
5 | // see https://nextjs.org/docs/basic-features/typescript for more information.
6 |
--------------------------------------------------------------------------------
/examples/swaps-api-nextjs-bitcoin/next.config.mjs:
--------------------------------------------------------------------------------
1 | /** @type {import('next').NextConfig} */
2 | const nextConfig = {
3 | reactStrictMode: true,
4 | };
5 |
6 | export default nextConfig;
7 |
--------------------------------------------------------------------------------
/examples/swaps-api-nextjs-bitcoin/postcss.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | plugins: {
3 | tailwindcss: {},
4 | autoprefixer: {},
5 | },
6 | };
7 |
--------------------------------------------------------------------------------
/examples/swaps-api-nextjs-bitcoin/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/swing-xyz/examples/c46e4dd4a47f96050e736f64c4a41c45f3e2d45d/examples/swaps-api-nextjs-bitcoin/public/favicon.ico
--------------------------------------------------------------------------------
/examples/swaps-api-nextjs-bitcoin/public/fonts/Inter-italic.var.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/swing-xyz/examples/c46e4dd4a47f96050e736f64c4a41c45f3e2d45d/examples/swaps-api-nextjs-bitcoin/public/fonts/Inter-italic.var.woff2
--------------------------------------------------------------------------------
/examples/swaps-api-nextjs-bitcoin/public/fonts/Inter-roman.var.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/swing-xyz/examples/c46e4dd4a47f96050e736f64c4a41c45f3e2d45d/examples/swaps-api-nextjs-bitcoin/public/fonts/Inter-roman.var.woff2
--------------------------------------------------------------------------------
/examples/swaps-api-nextjs-bitcoin/src/app/layout.tsx:
--------------------------------------------------------------------------------
1 | import "styles/globals.css";
2 | import "@fortawesome/fontawesome-svg-core/styles.css";
3 |
4 | import { Header } from "../components/ui/Header";
5 | import { Footer } from "../components/ui/Footer";
6 |
7 | import { Toaster } from "components/ui/toaster";
8 |
9 | export default function Layout({ children }: { children: React.ReactNode }) {
10 | return (
11 |
12 |
13 |
14 |
15 |
16 |
17 | {children}
18 |
19 |
20 |
21 |
22 | );
23 | }
24 |
--------------------------------------------------------------------------------
/examples/swaps-api-nextjs-bitcoin/src/app/page.tsx:
--------------------------------------------------------------------------------
1 | import { Hero } from "../components/ui/Hero";
2 | import { ThirdwebProvider } from "../components/ThirdwebProvider";
3 |
4 | export default function Home() {
5 | return (
6 |
7 |
8 |
9 | );
10 | }
11 |
--------------------------------------------------------------------------------
/examples/swaps-api-nextjs-bitcoin/src/components/ThirdwebProvider.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | export { ThirdwebProvider } from "@thirdweb-dev/react";
4 |
--------------------------------------------------------------------------------
/examples/swaps-api-nextjs-bitcoin/src/components/ui/Container.tsx:
--------------------------------------------------------------------------------
1 | import clsx from "clsx";
2 |
3 | export function Container({
4 | className,
5 | children,
6 | }: {
7 | className?: string;
8 | children: React.ReactNode;
9 | }) {
10 | return (
11 |
12 | {children}
13 |
14 | );
15 | }
16 |
--------------------------------------------------------------------------------
/examples/swaps-api-nextjs-bitcoin/src/components/ui/Footer.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import { Container } from "./Container";
4 |
5 | export function Footer() {
6 | return (
7 |
16 | );
17 | }
18 |
--------------------------------------------------------------------------------
/examples/swaps-api-nextjs-bitcoin/src/components/ui/input.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react";
2 |
3 | import { cn } from "lib";
4 |
5 | export interface InputProps
6 | extends React.InputHTMLAttributes {}
7 |
8 | const Input = React.forwardRef(
9 | ({ className, type, ...props }, ref) => {
10 | return (
11 |
20 | );
21 | },
22 | );
23 | Input.displayName = "Input";
24 |
25 | export { Input };
26 |
--------------------------------------------------------------------------------
/examples/swaps-api-nextjs-bitcoin/src/components/ui/label.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import * as React from "react";
4 | import * as LabelPrimitive from "@radix-ui/react-label";
5 | import { cva, type VariantProps } from "class-variance-authority";
6 |
7 | import { cn } from "lib";
8 |
9 | const labelVariants = cva(
10 | "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
11 | );
12 |
13 | const Label = React.forwardRef<
14 | React.ElementRef,
15 | React.ComponentPropsWithoutRef &
16 | VariantProps
17 | >(({ className, ...props }, ref) => (
18 |
23 | ));
24 | Label.displayName = LabelPrimitive.Root.displayName;
25 |
26 | export { Label };
27 |
--------------------------------------------------------------------------------
/examples/swaps-api-nextjs-bitcoin/src/components/ui/popover.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import * as React from "react";
4 | import * as PopoverPrimitive from "@radix-ui/react-popover";
5 |
6 | import { cn } from "lib";
7 |
8 | const Popover = PopoverPrimitive.Root;
9 |
10 | const PopoverTrigger = PopoverPrimitive.Trigger;
11 |
12 | const PopoverContent = React.forwardRef<
13 | React.ElementRef,
14 | React.ComponentPropsWithoutRef
15 | >(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
16 |
17 |
27 |
28 | ));
29 | PopoverContent.displayName = PopoverPrimitive.Content.displayName;
30 |
31 | export { Popover, PopoverTrigger, PopoverContent };
32 |
--------------------------------------------------------------------------------
/examples/swaps-api-nextjs-bitcoin/src/components/ui/toaster.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import {
4 | Toast,
5 | ToastClose,
6 | ToastDescription,
7 | ToastProvider,
8 | ToastTitle,
9 | ToastViewport,
10 | } from "components/ui/toast";
11 | import { useToast } from "components/ui/use-toast";
12 |
13 | export function Toaster() {
14 | const { toasts } = useToast();
15 |
16 | return (
17 |
18 | {toasts.map(function ({ id, title, description, action, ...props }) {
19 | return (
20 |
21 |
22 | {title && {title}}
23 | {description && (
24 | {description}
25 | )}
26 |
27 | {action}
28 |
29 |
30 | );
31 | })}
32 |
33 |
34 | );
35 | }
36 |
--------------------------------------------------------------------------------
/examples/swaps-api-nextjs-bitcoin/src/lib.ts:
--------------------------------------------------------------------------------
1 | import { type ClassValue, clsx } from "clsx";
2 | import { twMerge } from "tailwind-merge";
3 |
4 | export function cn(...inputs: ClassValue[]) {
5 | return twMerge(clsx(inputs));
6 | }
7 |
--------------------------------------------------------------------------------
/examples/swaps-api-nextjs-bitcoin/src/styles/globals.css:
--------------------------------------------------------------------------------
1 | @tailwind base;
2 | @tailwind components;
3 | @tailwind utilities;
4 |
5 |
6 | @layer base {
7 | input[type="number"]::-webkit-inner-spin-button,
8 | input[type="number"]::-webkit-outer-spin-button {
9 | -webkit-appearance: none;
10 | margin: 0;
11 | }
12 | }
--------------------------------------------------------------------------------
/examples/swaps-api-nextjs-bitcoin/src/utils/ethToWei.ts:
--------------------------------------------------------------------------------
1 | import { ethers } from "ethers";
2 |
3 | /**
4 | * Converts ETH to Wei.
5 | *
6 | * @param {string | number} ethAmount The amount in ETH to convert.
7 | * @returns {string} The amount in Wei as a string.
8 | */
9 | export const convertEthToWei = (ethAmount: string, decimals = 18) => {
10 | // Convert the amount to a string to handle both string and number inputs
11 | const weiAmount = ethers.utils.parseUnits(ethAmount.toString(), decimals);
12 | return weiAmount.toString();
13 | };
14 |
15 | export const convertWeiToEth = (weiAmount: string, decimals = 18) => {
16 | // Convert the amount to a string to handle both string and number inputs
17 | const ethAmount = ethers.utils.formatUnits(weiAmount.toString(), decimals);
18 | return Number(ethAmount.toString()).toFixed(4);
19 | };
20 |
--------------------------------------------------------------------------------
/examples/swaps-api-nextjs-bitcoin/styles/globals.css:
--------------------------------------------------------------------------------
1 | @tailwind base;
2 | @tailwind components;
3 | @tailwind utilities;
4 |
--------------------------------------------------------------------------------
/examples/swaps-api-nextjs-bitcoin/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "https://json.schemastore.org/tsconfig",
3 | "extends": "typescript-config/nextjs.json",
4 | "compilerOptions": {
5 | "rootDir": ".",
6 | "baseUrl": "./src",
7 | "plugins": [
8 | {
9 | "name": "next"
10 | }
11 | ]
12 | },
13 | "include": ["next-env.d.ts", "src", ".next/types/**/*.ts"],
14 | "exclude": ["node_modules"]
15 | }
16 |
--------------------------------------------------------------------------------
/examples/swaps-api-nextjs-bitcoin/turbo.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": ["//"],
3 | "$schema": "https://turbo.build/schema.json",
4 | "pipeline": {
5 | "build": {
6 | "outputs": [".next/**", "!.next/cache/**"],
7 | "env": ["NEXT_PUBLIC_THIRD_WEB_CLIENT_ID", "THIRD_WEB_SECRET_KEY"],
8 | "outputMode": "new-only"
9 | }
10 | }
11 | }
12 |
--------------------------------------------------------------------------------
/examples/swaps-api-nextjs-solana/.eslintrc.js:
--------------------------------------------------------------------------------
1 | /** @type {import("eslint").Linter.Config} */
2 | module.exports = {
3 | extends: ["eslint-config-examples/index.js"],
4 | parser: "@typescript-eslint/parser",
5 | parserOptions: {
6 | project: true,
7 | },
8 | };
9 |
--------------------------------------------------------------------------------
/examples/swaps-api-nextjs-solana/.gitignore:
--------------------------------------------------------------------------------
1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2 |
3 | # dependencies
4 | /node_modules
5 | /.pnp
6 | .pnp.js
7 |
8 | # testing
9 | /coverage
10 |
11 | # next.js
12 | /.next/
13 | /out/
14 |
15 | # production
16 | /build
17 |
18 | # misc
19 | .DS_Store
20 | *.pem
21 |
22 | # debug
23 | npm-debug.log*
24 | yarn-debug.log*
25 | yarn-error.log*
26 | .pnpm-debug.log*
27 |
28 | # local env files
29 | .env*.local
30 |
31 | # vercel
32 | .vercel
33 |
--------------------------------------------------------------------------------
/examples/swaps-api-nextjs-solana/components.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "https://ui.shadcn.com/schema.json",
3 | "style": "default",
4 | "rsc": true,
5 | "tsx": true,
6 | "tailwind": {
7 | "config": "tailwind.config.js",
8 | "css": "styles/globals.css",
9 | "baseColor": "zinc",
10 | "cssVariables": false,
11 | "prefix": ""
12 | },
13 | "aliases": {
14 | "components": "components",
15 | "utils": "lib"
16 | }
17 | }
--------------------------------------------------------------------------------
/examples/swaps-api-nextjs-solana/next-env.d.ts:
--------------------------------------------------------------------------------
1 | ///
2 | ///
3 |
4 | // NOTE: This file should not be edited
5 | // see https://nextjs.org/docs/basic-features/typescript for more information.
6 |
--------------------------------------------------------------------------------
/examples/swaps-api-nextjs-solana/next.config.mjs:
--------------------------------------------------------------------------------
1 | /** @type {import('next').NextConfig} */
2 | const nextConfig = {
3 | reactStrictMode: true,
4 | };
5 |
6 | export default nextConfig;
7 |
--------------------------------------------------------------------------------
/examples/swaps-api-nextjs-solana/postcss.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | plugins: {
3 | tailwindcss: {},
4 | autoprefixer: {},
5 | },
6 | };
7 |
--------------------------------------------------------------------------------
/examples/swaps-api-nextjs-solana/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/swing-xyz/examples/c46e4dd4a47f96050e736f64c4a41c45f3e2d45d/examples/swaps-api-nextjs-solana/public/favicon.ico
--------------------------------------------------------------------------------
/examples/swaps-api-nextjs-solana/public/fonts/Inter-italic.var.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/swing-xyz/examples/c46e4dd4a47f96050e736f64c4a41c45f3e2d45d/examples/swaps-api-nextjs-solana/public/fonts/Inter-italic.var.woff2
--------------------------------------------------------------------------------
/examples/swaps-api-nextjs-solana/public/fonts/Inter-roman.var.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/swing-xyz/examples/c46e4dd4a47f96050e736f64c4a41c45f3e2d45d/examples/swaps-api-nextjs-solana/public/fonts/Inter-roman.var.woff2
--------------------------------------------------------------------------------
/examples/swaps-api-nextjs-solana/src/app/layout.tsx:
--------------------------------------------------------------------------------
1 | import "styles/globals.css";
2 | import "@fortawesome/fontawesome-svg-core/styles.css";
3 |
4 | import { Header } from "../components/ui/Header";
5 |
6 | import { Toaster } from "components/ui/toaster";
7 |
8 | export default function Layout({ children }: { children: React.ReactNode }) {
9 | return (
10 |
11 |
12 |
13 |
14 |
15 |
16 | {children}
17 |
18 |
19 |
20 | );
21 | }
22 |
--------------------------------------------------------------------------------
/examples/swaps-api-nextjs-solana/src/app/page.tsx:
--------------------------------------------------------------------------------
1 | import { Hero } from "../components/ui/Hero";
2 | import { ThirdwebProvider } from "../components/ThirdwebProvider";
3 | import { Backdrop } from "components/ui/Backdrop";
4 |
5 | export default function Home() {
6 | return (
7 |
8 |
9 |
10 |
11 | );
12 | }
13 |
--------------------------------------------------------------------------------
/examples/swaps-api-nextjs-solana/src/components/ThirdwebProvider.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | export { ThirdwebProvider } from "@thirdweb-dev/react";
4 |
--------------------------------------------------------------------------------
/examples/swaps-api-nextjs-solana/src/components/ui/Backdrop.tsx:
--------------------------------------------------------------------------------
1 | export const Backdrop = () => {
2 | return (
3 |
6 | );
7 | };
8 |
--------------------------------------------------------------------------------
/examples/swaps-api-nextjs-solana/src/components/ui/ChainTokenItem.tsx:
--------------------------------------------------------------------------------
1 | export const ChainTokenItem = ({
2 | logo,
3 | name,
4 | onItemSelect,
5 | }: {
6 | logo: string;
7 | name: string;
8 | onItemSelect?: () => void | undefined;
9 | }) => (
10 | onItemSelect?.()}
13 | >
14 |

15 |
{name}
16 |
17 | );
18 |
--------------------------------------------------------------------------------
/examples/swaps-api-nextjs-solana/src/components/ui/Container.tsx:
--------------------------------------------------------------------------------
1 | import clsx from "clsx";
2 |
3 | export function Container({
4 | className,
5 | children,
6 | }: {
7 | className?: string;
8 | children: React.ReactNode;
9 | }) {
10 | return (
11 |
14 | {children}
15 |
16 | );
17 | }
18 |
--------------------------------------------------------------------------------
/examples/swaps-api-nextjs-solana/src/components/ui/input.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react";
2 |
3 | import { cn } from "lib";
4 |
5 | export interface InputProps
6 | extends React.InputHTMLAttributes {}
7 |
8 | const Input = React.forwardRef(
9 | ({ className, type, ...props }, ref) => {
10 | return (
11 |
20 | );
21 | },
22 | );
23 | Input.displayName = "Input";
24 |
25 | export { Input };
26 |
--------------------------------------------------------------------------------
/examples/swaps-api-nextjs-solana/src/components/ui/label.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import * as React from "react";
4 | import * as LabelPrimitive from "@radix-ui/react-label";
5 | import { cva, type VariantProps } from "class-variance-authority";
6 |
7 | import { cn } from "lib";
8 |
9 | const labelVariants = cva(
10 | "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
11 | );
12 |
13 | const Label = React.forwardRef<
14 | React.ElementRef,
15 | React.ComponentPropsWithoutRef &
16 | VariantProps
17 | >(({ className, ...props }, ref) => (
18 |
23 | ));
24 | Label.displayName = LabelPrimitive.Root.displayName;
25 |
26 | export { Label };
27 |
--------------------------------------------------------------------------------
/examples/swaps-api-nextjs-solana/src/components/ui/popover.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import * as React from "react";
4 | import * as PopoverPrimitive from "@radix-ui/react-popover";
5 |
6 | import { cn } from "lib";
7 |
8 | const Popover = PopoverPrimitive.Root;
9 |
10 | const PopoverTrigger = PopoverPrimitive.Trigger;
11 |
12 | const PopoverContent = React.forwardRef<
13 | React.ElementRef,
14 | React.ComponentPropsWithoutRef
15 | >(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
16 |
17 |
27 |
28 | ));
29 | PopoverContent.displayName = PopoverPrimitive.Content.displayName;
30 |
31 | export { Popover, PopoverTrigger, PopoverContent };
32 |
--------------------------------------------------------------------------------
/examples/swaps-api-nextjs-solana/src/components/ui/toaster.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import {
4 | Toast,
5 | ToastClose,
6 | ToastDescription,
7 | ToastProvider,
8 | ToastTitle,
9 | ToastViewport,
10 | } from "components/ui/toast";
11 | import { useToast } from "components/ui/use-toast";
12 |
13 | export function Toaster() {
14 | const { toasts } = useToast();
15 |
16 | return (
17 |
18 | {toasts.map(function ({ id, title, description, action, ...props }) {
19 | return (
20 |
21 |
22 | {title && {title}}
23 | {description && (
24 | {description}
25 | )}
26 |
27 | {action}
28 |
29 |
30 | );
31 | })}
32 |
33 |
34 | );
35 | }
36 |
--------------------------------------------------------------------------------
/examples/swaps-api-nextjs-solana/src/images/logos/sols.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/swing-xyz/examples/c46e4dd4a47f96050e736f64c4a41c45f3e2d45d/examples/swaps-api-nextjs-solana/src/images/logos/sols.png
--------------------------------------------------------------------------------
/examples/swaps-api-nextjs-solana/src/interfaces/allowance.interface.ts:
--------------------------------------------------------------------------------
1 | export interface AllowanceQueryParams {
2 | bridge: string;
3 | fromAddress: string;
4 | fromChain: string;
5 | toChain: string;
6 | tokenAddress: string;
7 | tokenSymbol: string;
8 | toTokenSymbol: string;
9 | toTokenAddress: string;
10 | contractCall: boolean;
11 | }
12 |
13 | export interface AllowanceAPIResponse {
14 | allowance: string;
15 | }
16 |
--------------------------------------------------------------------------------
/examples/swaps-api-nextjs-solana/src/interfaces/approval.interface.ts:
--------------------------------------------------------------------------------
1 | export interface ApprovalTxDataQueryParams {
2 | bridge: string;
3 | fromAddress: string;
4 | fromChain: string;
5 | toChain: string;
6 | tokenAddress: string;
7 | tokenSymbol: string;
8 | tokenAmount: string;
9 | toTokenSymbol: string;
10 | toTokenAddress: string;
11 | contractCall: boolean;
12 | }
13 |
14 | export interface ApprovalTxDataAPIResponse {
15 | tx?: TransactionData[] | undefined;
16 | fromChain: Chain | undefined;
17 | }
18 |
19 | export interface TransactionData {
20 | data: string;
21 | to: string;
22 | value?: string | undefined;
23 | gas?: string | undefined;
24 | from: string;
25 | nonce?: number | undefined;
26 | }
27 |
28 | interface Chain {
29 | chainId: number;
30 | name?: string | undefined;
31 | slug: string;
32 | protocolType: "evm" | "ibc" | "solana" | "multiversx";
33 | }
34 |
--------------------------------------------------------------------------------
/examples/swaps-api-nextjs-solana/src/interfaces/chain.interface.ts:
--------------------------------------------------------------------------------
1 | export interface Chain {
2 | id: string;
3 | slug: string;
4 | name: string;
5 | logo: string;
6 | type: "solana" | "evm" | "bitcoin" | "ibc" | "multiversx" | "tron" | "ton";
7 | singleChainSwap: boolean;
8 | singleChainStaking: boolean;
9 | txExplorer?: string | undefined;
10 | tokenExplorer?: string | undefined;
11 | rpcUrl?: string | undefined;
12 | nativeToken?: {
13 | symbol: string;
14 | decimals: number;
15 | logo: string;
16 | address: string;
17 | chain: string;
18 | };
19 | }
20 |
21 | export interface ChainsQueryParams {
22 | integration?: string | undefined;
23 | type?: "evm" | "ibc" | "solana" | "multiversx" | "bitcoin" | undefined;
24 | }
25 |
--------------------------------------------------------------------------------
/examples/swaps-api-nextjs-solana/src/interfaces/status.interface.ts:
--------------------------------------------------------------------------------
1 | export interface TransactionStatusAPIResponse {
2 | type?: "swap" | "approve" | "sign" | "claim" | "deposit" | "withdraw";
3 | // eslint-disable-next-line @typescript-eslint/no-explicit-any
4 | status: "Pending" | "Success" | "Failed" | any;
5 | reason?: string;
6 | bridge?: string | undefined;
7 | txId?: string | undefined;
8 | integration?: string;
9 | needClaim?: boolean;
10 | refundReason?: string;
11 | errorReason?: string;
12 | fromTokenAddress?: string;
13 | fromChainId?: number;
14 | fromChainSlug?: string;
15 | fromAmount?: string;
16 | fromAmountUsdValue?: string;
17 | toTokenAddress?: string;
18 | toChainId?: number;
19 | toChainSlug?: string;
20 | toAmount?: string;
21 | toAmountUsdValue?: string;
22 | fromChainTxHash?: string;
23 | toChainTxHash?: string;
24 | fromTokenSymbol?: string;
25 | toTokenSymbol?: string;
26 | fromUserAddress?: string;
27 | toUserAddress?: string;
28 | txStartedTimestamp?: number;
29 | txCompletedTimestamp?: number;
30 | updatedAt?: string;
31 | createdAt?: string;
32 | fallbackTokenAddress?: string;
33 | fallbackAmount?: string;
34 | id?: string;
35 | projectId?: string;
36 | }
37 |
38 | export interface TransactionStatusParams {
39 | id: string;
40 | txHash?: string;
41 | }
42 |
--------------------------------------------------------------------------------
/examples/swaps-api-nextjs-solana/src/interfaces/token.interface.ts:
--------------------------------------------------------------------------------
1 | export interface TokenQueryParams {
2 | chain: string;
3 | }
4 |
5 | export interface Token {
6 | symbol: string;
7 | address: string;
8 | logo: string;
9 | decimals: number;
10 | chain: string;
11 | }
12 |
--------------------------------------------------------------------------------
/examples/swaps-api-nextjs-solana/src/lib.ts:
--------------------------------------------------------------------------------
1 | import { type ClassValue, clsx } from "clsx";
2 | import { twMerge } from "tailwind-merge";
3 |
4 | export function cn(...inputs: ClassValue[]) {
5 | return twMerge(clsx(inputs));
6 | }
7 |
--------------------------------------------------------------------------------
/examples/swaps-api-nextjs-solana/src/styles/globals.css:
--------------------------------------------------------------------------------
1 | @tailwind base;
2 | @tailwind components;
3 | @tailwind utilities;
4 |
5 | body {
6 | --tw-bg-opacity: 1;
7 | background-color: rgb(45 33 61 / var(--tw-bg-opacity));
8 | }
9 |
10 | @layer base {
11 | input[type="number"]::-webkit-inner-spin-button,
12 | input[type="number"]::-webkit-outer-spin-button {
13 | -webkit-appearance: none;
14 | margin: 0;
15 | }
16 | }
--------------------------------------------------------------------------------
/examples/swaps-api-nextjs-solana/src/types/global.d.ts:
--------------------------------------------------------------------------------
1 | interface SolanaProvider {
2 | isPhantom: boolean;
3 | publicKey: {
4 | toString(): string;
5 | };
6 | connect: (args?: {
7 | onlyIfTrusted: boolean;
8 | }) => Promise<{ publicKey: { toString(): string } }>;
9 | disconnect: () => Promise;
10 | // eslint-disable-next-line @typescript-eslint/no-explicit-any
11 | on: (event: string, handler: (args: any) => void) => void;
12 | // eslint-disable-next-line @typescript-eslint/no-explicit-any
13 | request: (method: string, params: any) => Promise;
14 | signTransaction: (transaction: Transaction) => Promise;
15 | signAndSendTransaction: (
16 | transaction: Transaction,
17 | ) => Promise<{ signature: string }>;
18 | }
19 |
20 | interface Window {
21 | solana?: SolanaProvider;
22 | }
23 |
--------------------------------------------------------------------------------
/examples/swaps-api-nextjs-solana/src/types/transfer.types.ts:
--------------------------------------------------------------------------------
1 | import { QuoteQueryParams } from "interfaces/quote.interface";
2 |
3 | interface ChainDecimals {
4 | fromChainDecimal?: number;
5 | toChainDecimal?: number;
6 | }
7 |
8 | interface ChainIcons {
9 | fromChainIconUrl?: string;
10 | toChainIconUrl?: string;
11 | fromTokenIconUrl?: string;
12 | toTokenIconUrl?: string;
13 | }
14 |
15 | interface NativeSourceToken {
16 | fromNativeTokenSymbol?: string;
17 | toNativeTokenSymbol?: string;
18 | }
19 |
20 | interface ChainIds {
21 | fromChainId?: string;
22 | toChainId?: string;
23 | }
24 |
25 | export type TransferParams = QuoteQueryParams &
26 | ChainDecimals &
27 | ChainIcons &
28 | NativeSourceToken &
29 | ChainIds;
30 |
--------------------------------------------------------------------------------
/examples/swaps-api-nextjs-solana/src/utils/ethToWei.ts:
--------------------------------------------------------------------------------
1 | import { ethers } from "ethers";
2 |
3 | /**
4 | * Converts ETH to Wei.
5 | *
6 | * @param {string | number} ethAmount The amount in ETH to convert.
7 | * @returns {string} The amount in Wei as a string.
8 | */
9 | export const convertEthToWei = (ethAmount: string, decimals = 18) => {
10 | // Convert the amount to a string to handle both string and number inputs
11 | const weiAmount = ethers.utils.parseUnits(ethAmount.toString(), decimals);
12 | return weiAmount.toString();
13 | };
14 |
15 | export const convertWeiToEth = (weiAmount: string, decimals = 18) => {
16 | // Convert the amount to a string to handle both string and number inputs
17 | const ethAmount = ethers.utils.formatUnits(weiAmount.toString(), decimals);
18 | return Number(ethAmount.toString()).toFixed(4);
19 | };
20 |
--------------------------------------------------------------------------------
/examples/swaps-api-nextjs-solana/styles/globals.css:
--------------------------------------------------------------------------------
1 | @tailwind base;
2 | @tailwind components;
3 | @tailwind utilities;
4 |
--------------------------------------------------------------------------------
/examples/swaps-api-nextjs-solana/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "https://json.schemastore.org/tsconfig",
3 | "extends": "typescript-config/nextjs.json",
4 | "compilerOptions": {
5 | "rootDir": ".",
6 | "baseUrl": "./src",
7 | "plugins": [
8 | {
9 | "name": "next"
10 | }
11 | ]
12 | },
13 | "include": ["next-env.d.ts", "src", ".next/types/**/*.ts"],
14 | "exclude": ["node_modules"]
15 | }
16 |
--------------------------------------------------------------------------------
/examples/swaps-api-nextjs-solana/turbo.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": ["//"],
3 | "$schema": "https://turbo.build/schema.json",
4 | "pipeline": {
5 | "build": {
6 | "outputs": [".next/**", "!.next/cache/**"],
7 | "env": ["NEXT_PUBLIC_THIRD_WEB_CLIENT_ID", "THIRD_WEB_SECRET_KEY"],
8 | "outputMode": "new-only"
9 | }
10 | }
11 | }
12 |
--------------------------------------------------------------------------------
/examples/swaps-api-nextjs-ton/.eslintrc.js:
--------------------------------------------------------------------------------
1 | /** @type {import("eslint").Linter.Config} */
2 | module.exports = {
3 | extends: ["eslint-config-examples/index.js"],
4 | parser: "@typescript-eslint/parser",
5 | parserOptions: {
6 | project: true,
7 | },
8 | };
9 |
--------------------------------------------------------------------------------
/examples/swaps-api-nextjs-ton/.gitignore:
--------------------------------------------------------------------------------
1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2 |
3 | # dependencies
4 | /node_modules
5 | /.pnp
6 | .pnp.js
7 |
8 | # testing
9 | /coverage
10 |
11 | # next.js
12 | /.next/
13 | /out/
14 |
15 | # production
16 | /build
17 |
18 | # misc
19 | .DS_Store
20 | *.pem
21 |
22 | # debug
23 | npm-debug.log*
24 | yarn-debug.log*
25 | yarn-error.log*
26 | .pnpm-debug.log*
27 |
28 | # local env files
29 | .env*.local
30 |
31 | # vercel
32 | .vercel
33 |
--------------------------------------------------------------------------------
/examples/swaps-api-nextjs-ton/components.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "https://ui.shadcn.com/schema.json",
3 | "style": "default",
4 | "rsc": true,
5 | "tsx": true,
6 | "tailwind": {
7 | "config": "tailwind.config.js",
8 | "css": "styles/globals.css",
9 | "baseColor": "zinc",
10 | "cssVariables": false,
11 | "prefix": ""
12 | },
13 | "aliases": {
14 | "components": "components",
15 | "utils": "lib"
16 | }
17 | }
--------------------------------------------------------------------------------
/examples/swaps-api-nextjs-ton/next-env.d.ts:
--------------------------------------------------------------------------------
1 | ///
2 | ///
3 | ///
4 |
5 | // NOTE: This file should not be edited
6 | // see https://nextjs.org/docs/basic-features/typescript for more information.
7 |
--------------------------------------------------------------------------------
/examples/swaps-api-nextjs-ton/next.config.mjs:
--------------------------------------------------------------------------------
1 | /** @type {import('next').NextConfig} */
2 | const nextConfig = {
3 | reactStrictMode: true,
4 | async headers() {
5 | return [
6 | {
7 | source: "/tonconnect-manifest.json",
8 | headers: [{ key: "Access-Control-Allow-Origin", value: "*" }],
9 | },
10 | ];
11 | },
12 | };
13 |
14 | export default nextConfig;
15 |
--------------------------------------------------------------------------------
/examples/swaps-api-nextjs-ton/postcss.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | plugins: {
3 | tailwindcss: {},
4 | autoprefixer: {},
5 | },
6 | };
7 |
--------------------------------------------------------------------------------
/examples/swaps-api-nextjs-ton/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/swing-xyz/examples/c46e4dd4a47f96050e736f64c4a41c45f3e2d45d/examples/swaps-api-nextjs-ton/public/favicon.ico
--------------------------------------------------------------------------------
/examples/swaps-api-nextjs-ton/public/fonts/Inter-italic.var.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/swing-xyz/examples/c46e4dd4a47f96050e736f64c4a41c45f3e2d45d/examples/swaps-api-nextjs-ton/public/fonts/Inter-italic.var.woff2
--------------------------------------------------------------------------------
/examples/swaps-api-nextjs-ton/public/fonts/Inter-roman.var.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/swing-xyz/examples/c46e4dd4a47f96050e736f64c4a41c45f3e2d45d/examples/swaps-api-nextjs-ton/public/fonts/Inter-roman.var.woff2
--------------------------------------------------------------------------------
/examples/swaps-api-nextjs-ton/src/app/api/ton-connect/route.ts:
--------------------------------------------------------------------------------
1 | import { NextResponse } from "next/server";
2 |
3 | export async function GET() {
4 | const manifest = {
5 | url: "http://localhost:3000",
6 | name: "Ton Bridge",
7 | iconUrl: `"http://localhost:3000/app-icon.png`,
8 | };
9 |
10 | return NextResponse.json(manifest);
11 | }
12 |
--------------------------------------------------------------------------------
/examples/swaps-api-nextjs-ton/src/app/layout.tsx:
--------------------------------------------------------------------------------
1 | import "styles/globals.css";
2 | import "@fortawesome/fontawesome-svg-core/styles.css";
3 |
4 | import { Header } from "../components/ui/Header";
5 |
6 | import { Toaster } from "components/ui/toaster";
7 |
8 | export default function Layout({ children }: { children: React.ReactNode }) {
9 | return (
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 | {children}
19 |
20 |
21 |
22 | );
23 | }
24 |
--------------------------------------------------------------------------------
/examples/swaps-api-nextjs-ton/src/app/page.tsx:
--------------------------------------------------------------------------------
1 | import { Hero } from "../components/ui/Hero";
2 | import { ThirdwebProvider } from "../components/ThirdwebProvider";
3 | import { Backdrop } from "components/ui/Backdrop";
4 | import { DefaultProviders } from "providers/DefaultProviders";
5 |
6 | export default function Home() {
7 | return (
8 |
9 |
10 |
11 |
12 |
13 |
14 | );
15 | }
16 |
--------------------------------------------------------------------------------
/examples/swaps-api-nextjs-ton/src/components/ThirdwebProvider.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | export { ThirdwebProvider } from "@thirdweb-dev/react";
4 |
--------------------------------------------------------------------------------
/examples/swaps-api-nextjs-ton/src/components/ui/Backdrop.tsx:
--------------------------------------------------------------------------------
1 | export const Backdrop = () => {
2 | return (
3 |
6 | );
7 | };
8 |
--------------------------------------------------------------------------------
/examples/swaps-api-nextjs-ton/src/components/ui/ChainTokenItem.tsx:
--------------------------------------------------------------------------------
1 | export const ChainTokenItem = ({
2 | logo,
3 | name,
4 | onItemSelect,
5 | }: {
6 | logo: string;
7 | name: string;
8 | onItemSelect?: () => void | undefined;
9 | }) => (
10 | onItemSelect?.()}
13 | >
14 |

15 |
{name}
16 |
17 | );
18 |
--------------------------------------------------------------------------------
/examples/swaps-api-nextjs-ton/src/components/ui/Container.tsx:
--------------------------------------------------------------------------------
1 | import clsx from "clsx";
2 |
3 | export function Container({
4 | className,
5 | children,
6 | }: {
7 | className?: string;
8 | children: React.ReactNode;
9 | }) {
10 | return (
11 |
14 | {children}
15 |
16 | );
17 | }
18 |
--------------------------------------------------------------------------------
/examples/swaps-api-nextjs-ton/src/components/ui/Hero.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import React from "react";
4 | import { Container } from "./Container";
5 |
6 | import SwapSDK from "../Swap";
7 | import { TronLinkAdapter } from "@tronweb3/tronwallet-adapters";
8 | import { WalletProvider } from "@tronweb3/tronwallet-adapter-react-hooks";
9 |
10 | export function Hero() {
11 | const adapters = [new TronLinkAdapter()];
12 |
13 | return (
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 | );
24 | }
25 |
--------------------------------------------------------------------------------
/examples/swaps-api-nextjs-ton/src/components/ui/NavLinks.tsx:
--------------------------------------------------------------------------------
1 | import { useState } from "react";
2 | import Link from "next/link";
3 | import { AnimatePresence, motion } from "framer-motion";
4 |
5 | export function NavLinks() {
6 | const [hoveredIndex, setHoveredIndex] = useState(null);
7 |
8 | return (
9 | <>
10 | {[].map(([label, href], index) => (
11 | setHoveredIndex(index)}
16 | onMouseLeave={() => setHoveredIndex(null)}
17 | >
18 |
19 | {hoveredIndex === index && (
20 |
30 | )}
31 |
32 | {label}
33 |
34 | ))}
35 | >
36 | );
37 | }
38 |
--------------------------------------------------------------------------------
/examples/swaps-api-nextjs-ton/src/components/ui/input.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react";
2 |
3 | import { cn } from "lib";
4 |
5 | export interface InputProps
6 | extends React.InputHTMLAttributes {}
7 |
8 | const Input = React.forwardRef(
9 | ({ className, type, ...props }, ref) => {
10 | return (
11 |
20 | );
21 | },
22 | );
23 | Input.displayName = "Input";
24 |
25 | export { Input };
26 |
--------------------------------------------------------------------------------
/examples/swaps-api-nextjs-ton/src/components/ui/label.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import * as React from "react";
4 | import * as LabelPrimitive from "@radix-ui/react-label";
5 | import { cva, type VariantProps } from "class-variance-authority";
6 |
7 | import { cn } from "lib";
8 |
9 | const labelVariants = cva(
10 | "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
11 | );
12 |
13 | const Label = React.forwardRef<
14 | React.ElementRef,
15 | React.ComponentPropsWithoutRef &
16 | VariantProps
17 | >(({ className, ...props }, ref) => (
18 |
23 | ));
24 | Label.displayName = LabelPrimitive.Root.displayName;
25 |
26 | export { Label };
27 |
--------------------------------------------------------------------------------
/examples/swaps-api-nextjs-ton/src/components/ui/popover.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import * as React from "react";
4 | import * as PopoverPrimitive from "@radix-ui/react-popover";
5 |
6 | import { cn } from "lib";
7 |
8 | const Popover = PopoverPrimitive.Root;
9 |
10 | const PopoverTrigger = PopoverPrimitive.Trigger;
11 |
12 | const PopoverContent = React.forwardRef<
13 | React.ElementRef,
14 | React.ComponentPropsWithoutRef
15 | >(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
16 |
17 |
27 |
28 | ));
29 | PopoverContent.displayName = PopoverPrimitive.Content.displayName;
30 |
31 | export { Popover, PopoverTrigger, PopoverContent };
32 |
--------------------------------------------------------------------------------
/examples/swaps-api-nextjs-ton/src/components/ui/toaster.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import {
4 | Toast,
5 | ToastClose,
6 | ToastDescription,
7 | ToastProvider,
8 | ToastTitle,
9 | ToastViewport,
10 | } from "components/ui/toast";
11 | import { useToast } from "components/ui/use-toast";
12 |
13 | export function Toaster() {
14 | const { toasts } = useToast();
15 |
16 | return (
17 |
18 | {toasts.map(function ({ id, title, description, action, ...props }) {
19 | return (
20 |
21 |
22 | {title && {title}}
23 | {description && (
24 | {description}
25 | )}
26 |
27 | {action}
28 |
29 |
30 | );
31 | })}
32 |
33 |
34 | );
35 | }
36 |
--------------------------------------------------------------------------------
/examples/swaps-api-nextjs-ton/src/images/logos/sols.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/swing-xyz/examples/c46e4dd4a47f96050e736f64c4a41c45f3e2d45d/examples/swaps-api-nextjs-ton/src/images/logos/sols.png
--------------------------------------------------------------------------------
/examples/swaps-api-nextjs-ton/src/interfaces/allowance.interface.ts:
--------------------------------------------------------------------------------
1 | export interface AllowanceQueryParams {
2 | bridge: string;
3 | fromAddress: string;
4 | fromChain: string;
5 | toChain: string;
6 | tokenAddress: string;
7 | tokenSymbol: string;
8 | toTokenSymbol: string;
9 | toTokenAddress: string;
10 | contractCall: boolean;
11 | }
12 |
13 | export interface AllowanceAPIResponse {
14 | allowance: string;
15 | }
16 |
--------------------------------------------------------------------------------
/examples/swaps-api-nextjs-ton/src/interfaces/approval.interface.ts:
--------------------------------------------------------------------------------
1 | export interface ApprovalTxDataQueryParams {
2 | bridge: string;
3 | fromAddress: string;
4 | fromChain: string;
5 | toChain: string;
6 | tokenAddress: string;
7 | tokenSymbol: string;
8 | tokenAmount: string;
9 | toTokenSymbol: string;
10 | toTokenAddress: string;
11 | contractCall: boolean;
12 | }
13 |
14 | export interface ApprovalTxDataAPIResponse {
15 | tx?: TransactionData[] | undefined;
16 | fromChain: Chain | undefined;
17 | }
18 |
19 | export interface TransactionData {
20 | data: string;
21 | to: string;
22 | value?: string | undefined;
23 | gas?: string | undefined;
24 | from: string;
25 | nonce?: number | undefined;
26 | txId?: string;
27 | meta?: {
28 | msgs: {
29 | address: string;
30 | payload: string;
31 | amount: string;
32 | }[];
33 | };
34 | }
35 |
36 | interface Chain {
37 | chainId: number;
38 | name?: string | undefined;
39 | slug: string;
40 | protocolType: "evm" | "ibc" | "solana" | "multiversx";
41 | }
42 |
--------------------------------------------------------------------------------
/examples/swaps-api-nextjs-ton/src/interfaces/chain.interface.ts:
--------------------------------------------------------------------------------
1 | export interface Chain {
2 | id: string;
3 | slug: string;
4 | name: string;
5 | logo: string;
6 | type: "solana" | "evm" | "bitcoin" | "ibc" | "multiversx" | "tron" | "ton";
7 | singleChainSwap: boolean;
8 | singleChainStaking: boolean;
9 | txExplorer?: string | undefined;
10 | tokenExplorer?: string | undefined;
11 | rpcUrl?: string | undefined;
12 | nativeToken?: {
13 | symbol: string;
14 | decimals: number;
15 | logo: string;
16 | address: string;
17 | chain: string;
18 | };
19 | }
20 |
21 | export interface ChainsQueryParams {
22 | integration?: string | undefined;
23 | type?: "evm" | "ibc" | "solana" | "multiversx" | "bitcoin" | undefined;
24 | }
25 |
--------------------------------------------------------------------------------
/examples/swaps-api-nextjs-ton/src/interfaces/status.interface.ts:
--------------------------------------------------------------------------------
1 | export interface TransactionStatusAPIResponse {
2 | type?: "swap" | "approve" | "sign" | "claim" | "deposit" | "withdraw";
3 | // eslint-disable-next-line @typescript-eslint/no-explicit-any
4 | status: "Pending" | "Success" | "Failed" | any;
5 | reason?: string;
6 | bridge?: string | undefined;
7 | txId?: string | undefined;
8 | integration?: string;
9 | needClaim?: boolean;
10 | refundReason?: string;
11 | errorReason?: string;
12 | fromTokenAddress?: string;
13 | fromChainId?: number;
14 | fromChainSlug?: string;
15 | fromAmount?: string;
16 | fromAmountUsdValue?: string;
17 | toTokenAddress?: string;
18 | toChainId?: number;
19 | toChainSlug?: string;
20 | toAmount?: string;
21 | toAmountUsdValue?: string;
22 | fromChainTxHash?: string;
23 | toChainTxHash?: string;
24 | fromTokenSymbol?: string;
25 | toTokenSymbol?: string;
26 | fromUserAddress?: string;
27 | toUserAddress?: string;
28 | txStartedTimestamp?: number;
29 | txCompletedTimestamp?: number;
30 | updatedAt?: string;
31 | createdAt?: string;
32 | fallbackTokenAddress?: string;
33 | fallbackAmount?: string;
34 | id?: string;
35 | projectId?: string;
36 | }
37 |
38 | export interface TransactionStatusParams {
39 | id: string;
40 | txHash?: string;
41 | }
42 |
--------------------------------------------------------------------------------
/examples/swaps-api-nextjs-ton/src/interfaces/token.interface.ts:
--------------------------------------------------------------------------------
1 | export interface TokenQueryParams {
2 | chain: string;
3 | }
4 |
5 | export interface Token {
6 | symbol: string;
7 | address: string;
8 | logo: string;
9 | decimals: number;
10 | chain: string;
11 | }
12 |
--------------------------------------------------------------------------------
/examples/swaps-api-nextjs-ton/src/lib.ts:
--------------------------------------------------------------------------------
1 | import { type ClassValue, clsx } from "clsx";
2 | import { twMerge } from "tailwind-merge";
3 |
4 | export function cn(...inputs: ClassValue[]) {
5 | return twMerge(clsx(inputs));
6 | }
7 |
--------------------------------------------------------------------------------
/examples/swaps-api-nextjs-ton/src/providers/DefaultProviders.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import { TonConnectUIProvider } from "@tonconnect/ui-react";
4 |
5 | export const DefaultProviders = ({
6 | children,
7 | }: {
8 | children: React.ReactNode;
9 | }) => {
10 | return (
11 |
12 | {children}
13 |
14 | );
15 | };
16 |
--------------------------------------------------------------------------------
/examples/swaps-api-nextjs-ton/src/styles/globals.css:
--------------------------------------------------------------------------------
1 | @tailwind base;
2 | @tailwind components;
3 | @tailwind utilities;
4 |
5 | body {
6 | --tw-bg-opacity: 1;
7 | background-color: rgb(34, 158, 217);
8 | }
9 |
10 | @layer base {
11 | input[type="number"]::-webkit-inner-spin-button,
12 | input[type="number"]::-webkit-outer-spin-button {
13 | -webkit-appearance: none;
14 | margin: 0;
15 | }
16 | }
17 |
--------------------------------------------------------------------------------
/examples/swaps-api-nextjs-ton/src/types/transfer.types.ts:
--------------------------------------------------------------------------------
1 | import { QuoteQueryParams } from "interfaces/quote.interface";
2 |
3 | interface ChainDecimals {
4 | fromChainDecimal?: number;
5 | toChainDecimal?: number;
6 | }
7 |
8 | interface ChainIcons {
9 | fromChainIconUrl?: string;
10 | toChainIconUrl?: string;
11 | fromTokenIconUrl?: string;
12 | toTokenIconUrl?: string;
13 | }
14 |
15 | interface NativeSourceToken {
16 | fromNativeTokenSymbol?: string;
17 | toNativeTokenSymbol?: string;
18 | }
19 |
20 | interface ChainIds {
21 | fromChainId?: string;
22 | toChainId?: string;
23 | }
24 |
25 | export type TransferParams = QuoteQueryParams &
26 | ChainDecimals &
27 | ChainIcons &
28 | NativeSourceToken &
29 | ChainIds;
30 |
--------------------------------------------------------------------------------
/examples/swaps-api-nextjs-ton/src/utils/ethToWei.ts:
--------------------------------------------------------------------------------
1 | import { ethers } from "ethers";
2 |
3 | /**
4 | * Converts ETH to Wei.
5 | *
6 | * @param {string | number} ethAmount The amount in ETH to convert.
7 | * @returns {string} The amount in Wei as a string.
8 | */
9 | export const convertEthToWei = (ethAmount: string, decimals = 18) => {
10 | // Convert the amount to a string to handle both string and number inputs
11 | const weiAmount = ethers.utils.parseUnits(ethAmount.toString(), decimals);
12 | return weiAmount.toString();
13 | };
14 |
15 | export const convertWeiToEth = (weiAmount: string, decimals = 18) => {
16 | // Convert the amount to a string to handle both string and number inputs
17 | const ethAmount = ethers.utils.formatUnits(weiAmount.toString(), decimals);
18 | return Number(ethAmount.toString()).toFixed(2).trim();
19 | };
20 |
--------------------------------------------------------------------------------
/examples/swaps-api-nextjs-ton/styles/globals.css:
--------------------------------------------------------------------------------
1 | @tailwind base;
2 | @tailwind components;
3 | @tailwind utilities;
4 |
--------------------------------------------------------------------------------
/examples/swaps-api-nextjs-ton/tonconnect-manifest.json:
--------------------------------------------------------------------------------
1 | {
2 | "url": "https://swaps-api-nextjs-ton.vercel.app/",
3 | "name": "swaps-api-nextjs-ton"
4 | }
5 |
--------------------------------------------------------------------------------
/examples/swaps-api-nextjs-ton/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "https://json.schemastore.org/tsconfig",
3 | "extends": "typescript-config/nextjs.json",
4 | "compilerOptions": {
5 | "rootDir": ".",
6 | "baseUrl": "./src",
7 | "plugins": [
8 | {
9 | "name": "next"
10 | }
11 | ],
12 | "strictNullChecks": true
13 | },
14 | "include": [
15 | "next-env.d.ts",
16 | "src",
17 | ".next/types/**/*.ts"
18 | ],
19 | "exclude": [
20 | "node_modules"
21 | ]
22 | }
23 |
--------------------------------------------------------------------------------
/examples/swaps-api-nextjs-ton/turbo.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": ["//"],
3 | "$schema": "https://turbo.build/schema.json",
4 | "pipeline": {
5 | "build": {
6 | "outputs": [".next/**", "!.next/cache/**"],
7 | "env": ["NEXT_PUBLIC_THIRD_WEB_CLIENT_ID", "THIRD_WEB_SECRET_KEY"],
8 | "outputMode": "new-only"
9 | }
10 | }
11 | }
12 |
--------------------------------------------------------------------------------
/examples/swaps-api-nextjs-tron/.eslintrc.js:
--------------------------------------------------------------------------------
1 | /** @type {import("eslint").Linter.Config} */
2 | module.exports = {
3 | extends: ["eslint-config-examples/index.js"],
4 | parser: "@typescript-eslint/parser",
5 | parserOptions: {
6 | project: true,
7 | },
8 | };
9 |
--------------------------------------------------------------------------------
/examples/swaps-api-nextjs-tron/.gitignore:
--------------------------------------------------------------------------------
1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2 |
3 | # dependencies
4 | /node_modules
5 | /.pnp
6 | .pnp.js
7 |
8 | # testing
9 | /coverage
10 |
11 | # next.js
12 | /.next/
13 | /out/
14 |
15 | # production
16 | /build
17 |
18 | # misc
19 | .DS_Store
20 | *.pem
21 |
22 | # debug
23 | npm-debug.log*
24 | yarn-debug.log*
25 | yarn-error.log*
26 | .pnpm-debug.log*
27 |
28 | # local env files
29 | .env*.local
30 |
31 | # vercel
32 | .vercel
33 |
--------------------------------------------------------------------------------
/examples/swaps-api-nextjs-tron/components.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "https://ui.shadcn.com/schema.json",
3 | "style": "default",
4 | "rsc": true,
5 | "tsx": true,
6 | "tailwind": {
7 | "config": "tailwind.config.js",
8 | "css": "styles/globals.css",
9 | "baseColor": "zinc",
10 | "cssVariables": false,
11 | "prefix": ""
12 | },
13 | "aliases": {
14 | "components": "components",
15 | "utils": "lib"
16 | }
17 | }
--------------------------------------------------------------------------------
/examples/swaps-api-nextjs-tron/next-env.d.ts:
--------------------------------------------------------------------------------
1 | ///
2 | ///
3 |
4 | // NOTE: This file should not be edited
5 | // see https://nextjs.org/docs/basic-features/typescript for more information.
6 |
--------------------------------------------------------------------------------
/examples/swaps-api-nextjs-tron/next.config.mjs:
--------------------------------------------------------------------------------
1 | /** @type {import('next').NextConfig} */
2 | const nextConfig = {
3 | reactStrictMode: true,
4 | };
5 |
6 | export default nextConfig;
7 |
--------------------------------------------------------------------------------
/examples/swaps-api-nextjs-tron/postcss.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | plugins: {
3 | tailwindcss: {},
4 | autoprefixer: {},
5 | },
6 | };
7 |
--------------------------------------------------------------------------------
/examples/swaps-api-nextjs-tron/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/swing-xyz/examples/c46e4dd4a47f96050e736f64c4a41c45f3e2d45d/examples/swaps-api-nextjs-tron/public/favicon.ico
--------------------------------------------------------------------------------
/examples/swaps-api-nextjs-tron/public/fonts/Inter-italic.var.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/swing-xyz/examples/c46e4dd4a47f96050e736f64c4a41c45f3e2d45d/examples/swaps-api-nextjs-tron/public/fonts/Inter-italic.var.woff2
--------------------------------------------------------------------------------
/examples/swaps-api-nextjs-tron/public/fonts/Inter-roman.var.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/swing-xyz/examples/c46e4dd4a47f96050e736f64c4a41c45f3e2d45d/examples/swaps-api-nextjs-tron/public/fonts/Inter-roman.var.woff2
--------------------------------------------------------------------------------
/examples/swaps-api-nextjs-tron/src/app/layout.tsx:
--------------------------------------------------------------------------------
1 | import "styles/globals.css";
2 | import "@fortawesome/fontawesome-svg-core/styles.css";
3 |
4 | import { Header } from "../components/ui/Header";
5 |
6 | import { Toaster } from "components/ui/toaster";
7 |
8 | export default function Layout({ children }: { children: React.ReactNode }) {
9 | return (
10 |
11 |
12 |
13 |
14 |
15 |
16 | {children}
17 |
18 |
19 |
20 | );
21 | }
22 |
--------------------------------------------------------------------------------
/examples/swaps-api-nextjs-tron/src/app/page.tsx:
--------------------------------------------------------------------------------
1 | import { Hero } from "../components/ui/Hero";
2 | import { ThirdwebProvider } from "../components/ThirdwebProvider";
3 | import { Backdrop } from "components/ui/Backdrop";
4 |
5 | export default function Home() {
6 | return (
7 |
8 |
9 |
10 |
11 | );
12 | }
13 |
--------------------------------------------------------------------------------
/examples/swaps-api-nextjs-tron/src/components/ThirdwebProvider.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | export { ThirdwebProvider } from "@thirdweb-dev/react";
4 |
--------------------------------------------------------------------------------
/examples/swaps-api-nextjs-tron/src/components/ui/Backdrop.tsx:
--------------------------------------------------------------------------------
1 | export const Backdrop = () => {
2 | return (
3 |
6 | );
7 | };
8 |
--------------------------------------------------------------------------------
/examples/swaps-api-nextjs-tron/src/components/ui/ChainTokenItem.tsx:
--------------------------------------------------------------------------------
1 | export const ChainTokenItem = ({
2 | logo,
3 | name,
4 | onItemSelect,
5 | }: {
6 | logo: string;
7 | name: string;
8 | onItemSelect?: () => void | undefined;
9 | }) => (
10 | onItemSelect?.()}
13 | >
14 |

15 |
{name}
16 |
17 | );
18 |
--------------------------------------------------------------------------------
/examples/swaps-api-nextjs-tron/src/components/ui/Container.tsx:
--------------------------------------------------------------------------------
1 | import clsx from "clsx";
2 |
3 | export function Container({
4 | className,
5 | children,
6 | }: {
7 | className?: string;
8 | children: React.ReactNode;
9 | }) {
10 | return (
11 |
14 | {children}
15 |
16 | );
17 | }
18 |
--------------------------------------------------------------------------------
/examples/swaps-api-nextjs-tron/src/components/ui/Hero.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import React from "react";
4 | import { Container } from "./Container";
5 |
6 | import SwapSDK from "../Swap";
7 | import { TronLinkAdapter } from "@tronweb3/tronwallet-adapters";
8 | import { WalletProvider } from "@tronweb3/tronwallet-adapter-react-hooks";
9 |
10 | export function Hero() {
11 | const adapters = [new TronLinkAdapter()];
12 |
13 | return (
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 | );
24 | }
25 |
--------------------------------------------------------------------------------
/examples/swaps-api-nextjs-tron/src/components/ui/NavLinks.tsx:
--------------------------------------------------------------------------------
1 | import { useState } from "react";
2 | import Link from "next/link";
3 | import { AnimatePresence, motion } from "framer-motion";
4 |
5 | export function NavLinks() {
6 | const [hoveredIndex, setHoveredIndex] = useState(null);
7 |
8 | return (
9 | <>
10 | {[
11 | ["Swap", "#"],
12 | ["Documentation", "#"],
13 | ].map(([label, href], index) => (
14 | setHoveredIndex(index)}
19 | onMouseLeave={() => setHoveredIndex(null)}
20 | >
21 |
22 | {hoveredIndex === index && (
23 |
33 | )}
34 |
35 | {label}
36 |
37 | ))}
38 | >
39 | );
40 | }
41 |
--------------------------------------------------------------------------------
/examples/swaps-api-nextjs-tron/src/components/ui/input.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react";
2 |
3 | import { cn } from "lib";
4 |
5 | export interface InputProps
6 | extends React.InputHTMLAttributes {}
7 |
8 | const Input = React.forwardRef(
9 | ({ className, type, ...props }, ref) => {
10 | return (
11 |
20 | );
21 | },
22 | );
23 | Input.displayName = "Input";
24 |
25 | export { Input };
26 |
--------------------------------------------------------------------------------
/examples/swaps-api-nextjs-tron/src/components/ui/label.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import * as React from "react";
4 | import * as LabelPrimitive from "@radix-ui/react-label";
5 | import { cva, type VariantProps } from "class-variance-authority";
6 |
7 | import { cn } from "lib";
8 |
9 | const labelVariants = cva(
10 | "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
11 | );
12 |
13 | const Label = React.forwardRef<
14 | React.ElementRef,
15 | React.ComponentPropsWithoutRef &
16 | VariantProps
17 | >(({ className, ...props }, ref) => (
18 |
23 | ));
24 | Label.displayName = LabelPrimitive.Root.displayName;
25 |
26 | export { Label };
27 |
--------------------------------------------------------------------------------
/examples/swaps-api-nextjs-tron/src/components/ui/popover.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import * as React from "react";
4 | import * as PopoverPrimitive from "@radix-ui/react-popover";
5 |
6 | import { cn } from "lib";
7 |
8 | const Popover = PopoverPrimitive.Root;
9 |
10 | const PopoverTrigger = PopoverPrimitive.Trigger;
11 |
12 | const PopoverContent = React.forwardRef<
13 | React.ElementRef,
14 | React.ComponentPropsWithoutRef
15 | >(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
16 |
17 |
27 |
28 | ));
29 | PopoverContent.displayName = PopoverPrimitive.Content.displayName;
30 |
31 | export { Popover, PopoverTrigger, PopoverContent };
32 |
--------------------------------------------------------------------------------
/examples/swaps-api-nextjs-tron/src/components/ui/toaster.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import {
4 | Toast,
5 | ToastClose,
6 | ToastDescription,
7 | ToastProvider,
8 | ToastTitle,
9 | ToastViewport,
10 | } from "components/ui/toast";
11 | import { useToast } from "components/ui/use-toast";
12 |
13 | export function Toaster() {
14 | const { toasts } = useToast();
15 |
16 | return (
17 |
18 | {toasts.map(function ({ id, title, description, action, ...props }) {
19 | return (
20 |
21 |
22 | {title && {title}}
23 | {description && (
24 | {description}
25 | )}
26 |
27 | {action}
28 |
29 |
30 | );
31 | })}
32 |
33 |
34 | );
35 | }
36 |
--------------------------------------------------------------------------------
/examples/swaps-api-nextjs-tron/src/images/logos/sols.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/swing-xyz/examples/c46e4dd4a47f96050e736f64c4a41c45f3e2d45d/examples/swaps-api-nextjs-tron/src/images/logos/sols.png
--------------------------------------------------------------------------------
/examples/swaps-api-nextjs-tron/src/interfaces/allowance.interface.ts:
--------------------------------------------------------------------------------
1 | export interface AllowanceQueryParams {
2 | bridge: string;
3 | fromAddress: string;
4 | fromChain: string;
5 | toChain: string;
6 | tokenAddress: string;
7 | tokenSymbol: string;
8 | toTokenSymbol: string;
9 | toTokenAddress: string;
10 | contractCall: boolean;
11 | }
12 |
13 | export interface AllowanceAPIResponse {
14 | allowance: string;
15 | }
16 |
--------------------------------------------------------------------------------
/examples/swaps-api-nextjs-tron/src/interfaces/chain.interface.ts:
--------------------------------------------------------------------------------
1 | export interface Chain {
2 | id: string;
3 | slug: string;
4 | name: string;
5 | logo: string;
6 | type: "solana" | "evm" | "bitcoin" | "ibc" | "multiversx" | "tron" | "ton";
7 | singleChainSwap: boolean;
8 | singleChainStaking: boolean;
9 | txExplorer?: string | undefined;
10 | tokenExplorer?: string | undefined;
11 | rpcUrl?: string | undefined;
12 | nativeToken?: {
13 | symbol: string;
14 | decimals: number;
15 | logo: string;
16 | address: string;
17 | chain: string;
18 | };
19 | }
20 |
21 | export interface ChainsQueryParams {
22 | integration?: string | undefined;
23 | type?: "evm" | "ibc" | "solana" | "multiversx" | "bitcoin" | undefined;
24 | }
25 |
--------------------------------------------------------------------------------
/examples/swaps-api-nextjs-tron/src/interfaces/status.interface.ts:
--------------------------------------------------------------------------------
1 | export interface TransactionStatusAPIResponse {
2 | type?: "swap" | "approve" | "sign" | "claim" | "deposit" | "withdraw";
3 | // eslint-disable-next-line @typescript-eslint/no-explicit-any
4 | status: "Pending" | "Success" | "Failed" | any;
5 | reason?: string;
6 | bridge?: string | undefined;
7 | txId?: string | undefined;
8 | integration?: string;
9 | needClaim?: boolean;
10 | refundReason?: string;
11 | errorReason?: string;
12 | fromTokenAddress?: string;
13 | fromChainId?: number;
14 | fromChainSlug?: string;
15 | fromAmount?: string;
16 | fromAmountUsdValue?: string;
17 | toTokenAddress?: string;
18 | toChainId?: number;
19 | toChainSlug?: string;
20 | toAmount?: string;
21 | toAmountUsdValue?: string;
22 | fromChainTxHash?: string;
23 | toChainTxHash?: string;
24 | fromTokenSymbol?: string;
25 | toTokenSymbol?: string;
26 | fromUserAddress?: string;
27 | toUserAddress?: string;
28 | txStartedTimestamp?: number;
29 | txCompletedTimestamp?: number;
30 | updatedAt?: string;
31 | createdAt?: string;
32 | fallbackTokenAddress?: string;
33 | fallbackAmount?: string;
34 | id?: string;
35 | projectId?: string;
36 | }
37 |
38 | export interface TransactionStatusParams {
39 | id: string;
40 | txHash?: string;
41 | }
42 |
--------------------------------------------------------------------------------
/examples/swaps-api-nextjs-tron/src/interfaces/token.interface.ts:
--------------------------------------------------------------------------------
1 | export interface TokenQueryParams {
2 | chain: string;
3 | }
4 |
5 | export interface Token {
6 | symbol: string;
7 | address: string;
8 | logo: string;
9 | decimals: number;
10 | chain: string;
11 | }
12 |
--------------------------------------------------------------------------------
/examples/swaps-api-nextjs-tron/src/lib.ts:
--------------------------------------------------------------------------------
1 | import { type ClassValue, clsx } from "clsx";
2 | import { twMerge } from "tailwind-merge";
3 |
4 | export function cn(...inputs: ClassValue[]) {
5 | return twMerge(clsx(inputs));
6 | }
7 |
--------------------------------------------------------------------------------
/examples/swaps-api-nextjs-tron/src/styles/globals.css:
--------------------------------------------------------------------------------
1 | @tailwind base;
2 | @tailwind components;
3 | @tailwind utilities;
4 |
5 | body {
6 | --tw-bg-opacity: 1;
7 | background-color: rgb(72, 44, 44);
8 | }
9 |
10 | @layer base {
11 | input[type="number"]::-webkit-inner-spin-button,
12 | input[type="number"]::-webkit-outer-spin-button {
13 | -webkit-appearance: none;
14 | margin: 0;
15 | }
16 | }
--------------------------------------------------------------------------------
/examples/swaps-api-nextjs-tron/src/types/transfer.types.ts:
--------------------------------------------------------------------------------
1 | import { QuoteQueryParams } from "interfaces/quote.interface";
2 |
3 | interface ChainDecimals {
4 | fromChainDecimal?: number;
5 | toChainDecimal?: number;
6 | }
7 |
8 | interface ChainIcons {
9 | fromChainIconUrl?: string;
10 | toChainIconUrl?: string;
11 | fromTokenIconUrl?: string;
12 | toTokenIconUrl?: string;
13 | }
14 |
15 | interface NativeSourceToken {
16 | fromNativeTokenSymbol?: string;
17 | toNativeTokenSymbol?: string;
18 | }
19 |
20 | interface ChainIds {
21 | fromChainId?: string;
22 | toChainId?: string;
23 | }
24 |
25 | export type TransferParams = QuoteQueryParams &
26 | ChainDecimals &
27 | ChainIcons &
28 | NativeSourceToken &
29 | ChainIds;
30 |
--------------------------------------------------------------------------------
/examples/swaps-api-nextjs-tron/src/utils/ethToWei.ts:
--------------------------------------------------------------------------------
1 | import { ethers } from "ethers";
2 |
3 | /**
4 | * Converts ETH to Wei.
5 | *
6 | * @param {string | number} ethAmount The amount in ETH to convert.
7 | * @returns {string} The amount in Wei as a string.
8 | */
9 | export const convertEthToWei = (ethAmount: string, decimals = 18) => {
10 | // Convert the amount to a string to handle both string and number inputs
11 | const weiAmount = ethers.utils.parseUnits(ethAmount.toString(), decimals);
12 | return weiAmount.toString();
13 | };
14 |
15 | export const convertWeiToEth = (weiAmount: string, decimals = 18) => {
16 | // Convert the amount to a string to handle both string and number inputs
17 | const ethAmount = ethers.utils.formatUnits(weiAmount.toString(), decimals);
18 | return Number(ethAmount.toString()).toFixed(2).trim();
19 | };
20 |
--------------------------------------------------------------------------------
/examples/swaps-api-nextjs-tron/styles/globals.css:
--------------------------------------------------------------------------------
1 | @tailwind base;
2 | @tailwind components;
3 | @tailwind utilities;
4 |
--------------------------------------------------------------------------------
/examples/swaps-api-nextjs-tron/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "https://json.schemastore.org/tsconfig",
3 | "extends": "typescript-config/nextjs.json",
4 | "compilerOptions": {
5 | "rootDir": ".",
6 | "baseUrl": "./src",
7 | "plugins": [
8 | {
9 | "name": "next"
10 | }
11 | ]
12 | },
13 | "include": ["next-env.d.ts", "src", ".next/types/**/*.ts"],
14 | "exclude": ["node_modules"]
15 | }
16 |
--------------------------------------------------------------------------------
/examples/swaps-api-nextjs-tron/turbo.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": ["//"],
3 | "$schema": "https://turbo.build/schema.json",
4 | "pipeline": {
5 | "build": {
6 | "outputs": [".next/**", "!.next/cache/**"],
7 | "env": ["NEXT_PUBLIC_THIRD_WEB_CLIENT_ID", "THIRD_WEB_SECRET_KEY"],
8 | "outputMode": "new-only"
9 | }
10 | }
11 | }
12 |
--------------------------------------------------------------------------------
/examples/swaps-api-nextjs/README.md:
--------------------------------------------------------------------------------
1 | # Cross-chain Swaps using the Swing API
2 |
--------------------------------------------------------------------------------
/examples/swaps-sdk-nextjs-thirdweb-embedded-wallet/.eslintrc.js:
--------------------------------------------------------------------------------
1 | /** @type {import("eslint").Linter.Config} */
2 | module.exports = {
3 | extends: ["eslint-config-examples/index.js"],
4 | parser: "@typescript-eslint/parser",
5 | parserOptions: {
6 | project: true,
7 | },
8 | };
9 |
--------------------------------------------------------------------------------
/examples/swaps-sdk-nextjs-thirdweb-embedded-wallet/.gitignore:
--------------------------------------------------------------------------------
1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2 |
3 | # dependencies
4 | /node_modules
5 | /.pnp
6 | .pnp.js
7 |
8 | # testing
9 | /coverage
10 |
11 | # next.js
12 | /.next/
13 | /out/
14 |
15 | # production
16 | /build
17 |
18 | # misc
19 | .DS_Store
20 | *.pem
21 |
22 | # debug
23 | npm-debug.log*
24 | yarn-debug.log*
25 | yarn-error.log*
26 | .pnpm-debug.log*
27 |
28 | # local env files
29 | .env*.local
30 |
31 | # vercel
32 | .vercel
33 |
--------------------------------------------------------------------------------
/examples/swaps-sdk-nextjs-thirdweb-embedded-wallet/components.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "https://ui.shadcn.com/schema.json",
3 | "style": "default",
4 | "rsc": true,
5 | "tsx": true,
6 | "tailwind": {
7 | "config": "tailwind.config.js",
8 | "css": "src/app/globals.css",
9 | "baseColor": "zinc",
10 | "cssVariables": true,
11 | "prefix": ""
12 | },
13 | "aliases": {
14 | "components": "src/app/components",
15 | "utils": "src/app/lib/utils"
16 | }
17 | }
18 |
--------------------------------------------------------------------------------
/examples/swaps-sdk-nextjs-thirdweb-embedded-wallet/next-env.d.ts:
--------------------------------------------------------------------------------
1 | ///
2 | ///
3 |
4 | // NOTE: This file should not be edited
5 | // see https://nextjs.org/docs/basic-features/typescript for more information.
6 |
--------------------------------------------------------------------------------
/examples/swaps-sdk-nextjs-thirdweb-embedded-wallet/next.config.mjs:
--------------------------------------------------------------------------------
1 | /** @type {import('next').NextConfig} */
2 | const nextConfig = {
3 | reactStrictMode: true,
4 | };
5 |
6 | export default nextConfig;
7 |
--------------------------------------------------------------------------------
/examples/swaps-sdk-nextjs-thirdweb-embedded-wallet/postcss.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | plugins: {
3 | tailwindcss: {},
4 | autoprefixer: {},
5 | },
6 | };
7 |
--------------------------------------------------------------------------------
/examples/swaps-sdk-nextjs-thirdweb-embedded-wallet/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/swing-xyz/examples/c46e4dd4a47f96050e736f64c4a41c45f3e2d45d/examples/swaps-sdk-nextjs-thirdweb-embedded-wallet/public/favicon.ico
--------------------------------------------------------------------------------
/examples/swaps-sdk-nextjs-thirdweb-embedded-wallet/public/fonts/Inter-italic.var.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/swing-xyz/examples/c46e4dd4a47f96050e736f64c4a41c45f3e2d45d/examples/swaps-sdk-nextjs-thirdweb-embedded-wallet/public/fonts/Inter-italic.var.woff2
--------------------------------------------------------------------------------
/examples/swaps-sdk-nextjs-thirdweb-embedded-wallet/public/fonts/Inter-roman.var.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/swing-xyz/examples/c46e4dd4a47f96050e736f64c4a41c45f3e2d45d/examples/swaps-sdk-nextjs-thirdweb-embedded-wallet/public/fonts/Inter-roman.var.woff2
--------------------------------------------------------------------------------
/examples/swaps-sdk-nextjs-thirdweb-embedded-wallet/src/app/interfaces/IChainSelector.tsx:
--------------------------------------------------------------------------------
1 | import { Chain, Token } from "@swing.xyz/sdk";
2 | import { ReactNode } from "react";
3 |
4 | export interface ISelectChain {
5 | title?: string;
6 | chains: Chain[];
7 | // eslint-disable-next-line no-unused-vars
8 | onChainAndTokenSelected: (selectedChain: ISelectedChain) => void;
9 | toChain?: Chain | null;
10 | }
11 |
12 | export interface ISelectedChain {
13 | chain?: Chain | null;
14 | token?: Token | null;
15 | }
16 |
17 | export interface ISelectChainContext {
18 | selectedChain?: ISelectedChain;
19 | // eslint-disable-next-line no-unused-vars
20 | setChainAndToken: (chain: ISelectedChain) => void;
21 | clearChainAndToken: () => void;
22 | }
23 |
24 | export interface ISelectChainProvider {
25 | children: ReactNode;
26 | }
27 |
--------------------------------------------------------------------------------
/examples/swaps-sdk-nextjs-thirdweb-embedded-wallet/src/app/interfaces/IModal.tsx:
--------------------------------------------------------------------------------
1 | import { ReactNode } from "react";
2 |
3 | export interface IModalProvider {
4 | children: ReactNode;
5 | }
6 |
7 | export interface IModalContext {
8 | isOpen: boolean;
9 | // eslint-disable-next-line no-unused-vars
10 | openModal: (content: IModalContent) => void;
11 | closeModal: () => void;
12 | modelContent: IModalContent;
13 | }
14 |
15 | export interface IModalContent {
16 | content: ReactNode;
17 | title: string;
18 | }
19 |
--------------------------------------------------------------------------------
/examples/swaps-sdk-nextjs-thirdweb-embedded-wallet/src/app/interfaces/IRouteSelector.tsx:
--------------------------------------------------------------------------------
1 | import { TransferRoute } from "@swing.xyz/sdk";
2 |
3 | export interface ISelectRoute {
4 | routes: TransferRoute[];
5 | title?: string;
6 | // eslint-disable-next-line no-unused-vars
7 | onRouteSelected: (route: TransferRoute) => void;
8 | }
9 |
10 | export interface IRoute {
11 | route: TransferRoute;
12 | // eslint-disable-next-line no-unused-vars
13 | onRouteSelected: (route: TransferRoute) => void;
14 | }
15 |
--------------------------------------------------------------------------------
/examples/swaps-sdk-nextjs-thirdweb-embedded-wallet/src/app/layout.tsx:
--------------------------------------------------------------------------------
1 | import "styles/globals.css";
2 | import "@fortawesome/fontawesome-svg-core/styles.css";
3 |
4 | import { Footer } from "../components/ui/Footer";
5 | import { Backdrop } from "components/ui/Backdrop";
6 | import { Toaster } from "@/ui/toaster";
7 |
8 | export default function Layout({ children }: { children: React.ReactNode }) {
9 | return (
10 |
11 |
12 |
13 |
14 |
15 | {children}
16 |
17 |
18 |
19 |
20 |
21 | );
22 | }
23 |
--------------------------------------------------------------------------------
/examples/swaps-sdk-nextjs-thirdweb-embedded-wallet/src/app/page.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import { Hero } from "../components/ui/Hero";
4 | import {
5 | ThirdwebProvider,
6 | embeddedWallet,
7 | } from "../components/ThirdwebProvider";
8 | import { CustomSwingSdkProvider } from "../components/hooks/useSwingSDK";
9 | import { Header } from "components/ui/Header";
10 | import { ModalProvider } from "components/hooks/useModal";
11 | import { Modal } from "components/ui/Modal";
12 | import { SelectChainProvider } from "components/hooks/useSelectChain";
13 |
14 | export default function Home() {
15 | return (
16 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 | );
31 | }
32 |
--------------------------------------------------------------------------------
/examples/swaps-sdk-nextjs-thirdweb-embedded-wallet/src/components/ThirdwebProvider.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | export {
4 | ThirdwebProvider,
5 | embeddedWallet,
6 | ConnectWallet,
7 | useEmbeddedWallet,
8 | } from "@thirdweb-dev/react";
9 |
--------------------------------------------------------------------------------
/examples/swaps-sdk-nextjs-thirdweb-embedded-wallet/src/components/lib/utils.ts:
--------------------------------------------------------------------------------
1 | import { type ClassValue, clsx } from "clsx";
2 | import { twMerge } from "tailwind-merge";
3 |
4 | export function cn(...inputs: ClassValue[]) {
5 | return twMerge(clsx(inputs));
6 | }
7 |
--------------------------------------------------------------------------------
/examples/swaps-sdk-nextjs-thirdweb-embedded-wallet/src/components/ui/Backdrop.tsx:
--------------------------------------------------------------------------------
1 | export const Backdrop = () => {
2 | return (
3 |
6 | );
7 | };
8 |
--------------------------------------------------------------------------------
/examples/swaps-sdk-nextjs-thirdweb-embedded-wallet/src/components/ui/Chain.tsx:
--------------------------------------------------------------------------------
1 | import { Chain } from "@swing.xyz/sdk";
2 | import { ISelectedChain } from "app/interfaces/IChainSelector";
3 | import { FC } from "react";
4 |
5 | export const SingleChain: FC = ({ chain, onSelectChain }) => {
6 | return (
7 | onSelectChain({ chain, token: null })}
11 | >
12 |
13 |

18 |
{chain.name}
19 |
20 |
21 | );
22 | };
23 |
24 | export interface IChain {
25 | chain: Chain;
26 | onSelectChain: (selectedChain: ISelectedChain) => void;
27 | }
28 |
--------------------------------------------------------------------------------
/examples/swaps-sdk-nextjs-thirdweb-embedded-wallet/src/components/ui/Container.tsx:
--------------------------------------------------------------------------------
1 | import clsx from "clsx";
2 |
3 | export function Container({
4 | className,
5 | children,
6 | }: {
7 | className?: string;
8 | children: React.ReactNode;
9 | }) {
10 | return (
11 |
14 | {children}
15 |
16 | );
17 | }
18 |
--------------------------------------------------------------------------------
/examples/swaps-sdk-nextjs-thirdweb-embedded-wallet/src/components/ui/Hero.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import React from "react";
4 | import dynamic from "next/dynamic";
5 |
6 | import { AppScreen } from "./AppScreen";
7 | import { Container } from "./Container";
8 |
9 | const SwapSDK = dynamic(() => import("../Swap"), {
10 | ssr: false,
11 | });
12 |
13 | function AppDemo() {
14 | return (
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 | );
23 | }
24 |
25 | export function Hero() {
26 | return (
27 |
34 | );
35 | }
36 |
--------------------------------------------------------------------------------
/examples/swaps-sdk-nextjs-thirdweb-embedded-wallet/src/components/ui/SelectRoute.tsx:
--------------------------------------------------------------------------------
1 | import { TransferRoute } from "@swing.xyz/sdk";
2 | import { FC } from "react";
3 | import { ISelectRoute } from "app/interfaces/IRouteSelector";
4 | import { Route } from "./Route";
5 |
6 | export const SelectRoute: FC = ({
7 | routes,
8 | onRouteSelected,
9 | }: ISelectRoute) => {
10 | const groupedRoutes = routes.sort(
11 | (a, b) => Number(a.quote.amount) - Number(b.quote.amount),
12 | ) as TransferRoute[];
13 | // @ts-expect-error ignore
14 | groupedRoutes[0]["isBest"] = true;
15 |
16 | return (
17 |
18 |
19 | {groupedRoutes?.map((route: TransferRoute, index: number) => (
20 |
21 | ))}
22 |
23 |
24 | );
25 | };
26 |
--------------------------------------------------------------------------------
/examples/swaps-sdk-nextjs-thirdweb-embedded-wallet/src/components/ui/modals/SelectChainModal.tsx:
--------------------------------------------------------------------------------
1 | import { SelectChain } from "../SelectChain";
2 | import { ISelectChain } from "app/interfaces/IChainSelector";
3 | import { IModalContext } from "app/interfaces/IModal";
4 |
5 | export const openSelectChainModal = (
6 | { openModal }: IModalContext,
7 | { title, chains, toChain, onChainAndTokenSelected }: ISelectChain,
8 | ) => {
9 | openModal({
10 | content: (
11 |
16 | ),
17 | title: title ?? "",
18 | });
19 | };
20 |
--------------------------------------------------------------------------------
/examples/swaps-sdk-nextjs-thirdweb-embedded-wallet/src/components/ui/modals/SelectRouteModal.tsx:
--------------------------------------------------------------------------------
1 | import { ISelectRoute } from "app/interfaces/IRouteSelector";
2 | import { SelectRoute } from "../SelectRoute";
3 | import { IModalContext } from "app/interfaces/IModal";
4 |
5 | export const openSelectRouteModal = (
6 | { openModal }: IModalContext,
7 | { title, routes, onRouteSelected }: ISelectRoute,
8 | ) => {
9 | openModal({
10 | content: ,
11 | title: title ?? "",
12 | });
13 | };
14 |
--------------------------------------------------------------------------------
/examples/swaps-sdk-nextjs-thirdweb-embedded-wallet/src/components/ui/toaster.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import {
4 | Toast,
5 | ToastClose,
6 | ToastDescription,
7 | ToastProvider,
8 | ToastTitle,
9 | ToastViewport,
10 | } from "@/ui/toast";
11 | import { useToast } from "@/ui/use-toast";
12 |
13 | export function Toaster() {
14 | const { toasts } = useToast();
15 |
16 | return (
17 |
18 | {toasts.map(function ({ id, title, description, action, ...props }) {
19 | return (
20 |
21 |
22 | {title && {title}}
23 | {description && (
24 | {description}
25 | )}
26 |
27 | {action}
28 |
29 |
30 | );
31 | })}
32 |
33 |
34 | );
35 | }
36 |
--------------------------------------------------------------------------------
/examples/swaps-sdk-nextjs-thirdweb-embedded-wallet/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "https://json.schemastore.org/tsconfig",
3 | "extends": "typescript-config/nextjs.json",
4 | "compilerOptions": {
5 | "rootDir": ".",
6 | "baseUrl": "./src",
7 | "paths": {
8 | "@/*": ["components/*"],
9 | },
10 | "plugins": [
11 | {
12 | "name": "next",
13 | },
14 | ],
15 | },
16 | "include": ["next-env.d.ts", "src", ".next/types/**/*.ts"],
17 | "exclude": ["node_modules"],
18 | }
19 |
--------------------------------------------------------------------------------
/examples/swaps-sdk-nextjs-thirdweb-embedded-wallet/turbo.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": ["//"],
3 | "$schema": "https://turbo.build/schema.json",
4 | "pipeline": {
5 | "build": {
6 | "outputs": [".next/**", "!.next/cache/**"],
7 | "env": ["NEXT_PUBLIC_THIRD_WEB_CLIENT_ID", "THIRD_WEB_SECRET_KEY"],
8 | "outputMode": "new-only"
9 | }
10 | }
11 | }
12 |
--------------------------------------------------------------------------------
/examples/swaps-sdk-nextjs-web3-react/.eslintrc.js:
--------------------------------------------------------------------------------
1 | /** @type {import("eslint").Linter.Config} */
2 | module.exports = {
3 | extends: ["eslint-config-examples/index.js"],
4 | parser: "@typescript-eslint/parser",
5 | parserOptions: {
6 | project: true,
7 | },
8 | };
9 |
--------------------------------------------------------------------------------
/examples/swaps-sdk-nextjs-web3-react/.gitignore:
--------------------------------------------------------------------------------
1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2 |
3 | # dependencies
4 | /node_modules
5 | /.pnp
6 | .pnp.js
7 |
8 | # testing
9 | /coverage
10 |
11 | # next.js
12 | /.next/
13 | /out/
14 |
15 | # production
16 | /build
17 |
18 | # misc
19 | .DS_Store
20 | *.pem
21 |
22 | # debug
23 | npm-debug.log*
24 | yarn-debug.log*
25 | yarn-error.log*
26 | .pnpm-debug.log*
27 |
28 | # local env files
29 | .env*.local
30 |
31 | # vercel
32 | .vercel
33 |
--------------------------------------------------------------------------------
/examples/swaps-sdk-nextjs-web3-react/components.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "https://ui.shadcn.com/schema.json",
3 | "style": "default",
4 | "rsc": true,
5 | "tsx": true,
6 | "tailwind": {
7 | "config": "tailwind.config.js",
8 | "css": "app/globals.css",
9 | "baseColor": "zinc",
10 | "cssVariables": false,
11 | "prefix": ""
12 | },
13 | "aliases": {
14 | "components": "/components/",
15 | "utils": "/components/lib/utils"
16 | }
17 | }
--------------------------------------------------------------------------------
/examples/swaps-sdk-nextjs-web3-react/next-env.d.ts:
--------------------------------------------------------------------------------
1 | ///
2 | ///
3 |
4 | // NOTE: This file should not be edited
5 | // see https://nextjs.org/docs/basic-features/typescript for more information.
6 |
--------------------------------------------------------------------------------
/examples/swaps-sdk-nextjs-web3-react/next.config.mjs:
--------------------------------------------------------------------------------
1 | /** @type {import('next').NextConfig} */
2 | const nextConfig = {
3 | reactStrictMode: true,
4 | };
5 |
6 | export default nextConfig;
7 |
--------------------------------------------------------------------------------
/examples/swaps-sdk-nextjs-web3-react/postcss.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | plugins: {
3 | tailwindcss: {},
4 | autoprefixer: {},
5 | },
6 | };
7 |
--------------------------------------------------------------------------------
/examples/swaps-sdk-nextjs-web3-react/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/swing-xyz/examples/c46e4dd4a47f96050e736f64c4a41c45f3e2d45d/examples/swaps-sdk-nextjs-web3-react/public/favicon.ico
--------------------------------------------------------------------------------
/examples/swaps-sdk-nextjs-web3-react/public/fonts/Inter-italic.var.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/swing-xyz/examples/c46e4dd4a47f96050e736f64c4a41c45f3e2d45d/examples/swaps-sdk-nextjs-web3-react/public/fonts/Inter-italic.var.woff2
--------------------------------------------------------------------------------
/examples/swaps-sdk-nextjs-web3-react/public/fonts/Inter-roman.var.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/swing-xyz/examples/c46e4dd4a47f96050e736f64c4a41c45f3e2d45d/examples/swaps-sdk-nextjs-web3-react/public/fonts/Inter-roman.var.woff2
--------------------------------------------------------------------------------
/examples/swaps-sdk-nextjs-web3-react/src/app/layout.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import "styles/globals.css";
4 | import "@fortawesome/fontawesome-svg-core/styles.css";
5 |
6 | import { Header } from "../components/ui/Header";
7 | import { Footer } from "../components/ui/Footer";
8 |
9 | import {
10 | Web3ReactHooks,
11 | Web3ReactProvider,
12 | initializeConnector,
13 | } from "@web3-react/core";
14 | import { MetaMask } from "@web3-react/metamask";
15 |
16 | import { Toaster } from "../components/ui/toaster";
17 |
18 | export const [metaMask, hooks] = initializeConnector(
19 | (actions) => new MetaMask({ actions }),
20 | );
21 |
22 | const connectors: [MetaMask, Web3ReactHooks][] = [[metaMask, hooks]];
23 |
24 | export default function Layout({ children }: { children: React.ReactNode }) {
25 | return (
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 | {children}
34 |
35 |
36 |
37 |
38 |
39 |
40 | );
41 | }
42 |
--------------------------------------------------------------------------------
/examples/swaps-sdk-nextjs-web3-react/src/app/page.tsx:
--------------------------------------------------------------------------------
1 | import { Hero } from "../components/ui/Hero";
2 |
3 | export default function Home() {
4 | return (
5 | <>
6 |
7 | >
8 | );
9 | }
10 |
--------------------------------------------------------------------------------
/examples/swaps-sdk-nextjs-web3-react/src/components/Web3ReactProvider.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | export { Web3ReactProvider } from "@web3-react/core";
4 |
--------------------------------------------------------------------------------
/examples/swaps-sdk-nextjs-web3-react/src/components/lib/utils.ts:
--------------------------------------------------------------------------------
1 | import { type ClassValue, clsx } from "clsx";
2 | import { twMerge } from "tailwind-merge";
3 |
4 | export function cn(...inputs: ClassValue[]) {
5 | return twMerge(clsx(inputs));
6 | }
7 |
--------------------------------------------------------------------------------
/examples/swaps-sdk-nextjs-web3-react/src/components/ui/CircleBackground.tsx:
--------------------------------------------------------------------------------
1 | import { useId, type SVGProps } from "react";
2 |
3 | export function CircleBackground({
4 | color,
5 | width = 800,
6 | height = 800,
7 | ...props
8 | }: SVGProps) {
9 | const id = useId();
10 |
11 | return (
12 |
20 |
21 |
29 |
30 |
31 |
32 |
33 |
38 |
43 |
44 | );
45 | }
46 |
--------------------------------------------------------------------------------
/examples/swaps-sdk-nextjs-web3-react/src/components/ui/Container.tsx:
--------------------------------------------------------------------------------
1 | import clsx from "clsx";
2 |
3 | export function Container({
4 | className,
5 | children,
6 | }: {
7 | className?: string;
8 | children: React.ReactNode;
9 | }) {
10 | return (
11 |
12 | {children}
13 |
14 | );
15 | }
16 |
--------------------------------------------------------------------------------
/examples/swaps-sdk-nextjs-web3-react/src/components/ui/NavLinks.tsx:
--------------------------------------------------------------------------------
1 | import { useState } from "react";
2 | import Link from "next/link";
3 | import { AnimatePresence, motion } from "framer-motion";
4 |
5 | export function NavLinks() {
6 | const [hoveredIndex, setHoveredIndex] = useState(null);
7 |
8 | return (
9 | <>
10 | {[
11 | ["Governance", "#gov"],
12 | ["Docs", "#docs"],
13 | ].map(([label, href], index) => (
14 | setHoveredIndex(index)}
19 | onMouseLeave={() => setHoveredIndex(null)}
20 | >
21 |
22 | {hoveredIndex === index && (
23 |
33 | )}
34 |
35 | {label}
36 |
37 | ))}
38 | >
39 | );
40 | }
41 |
--------------------------------------------------------------------------------
/examples/swaps-sdk-nextjs-web3-react/src/components/ui/toaster.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import {
4 | Toast,
5 | ToastClose,
6 | ToastDescription,
7 | ToastProvider,
8 | ToastTitle,
9 | ToastViewport,
10 | } from "@/ui/toast";
11 |
12 | import { useToast } from "@/ui/use-toast";
13 |
14 | export function Toaster() {
15 | const { toasts } = useToast();
16 |
17 | return (
18 |
19 | {toasts.map(function ({ id, title, description, action, ...props }) {
20 | return (
21 |
22 |
23 | {title && {title}}
24 | {description && (
25 | {description}
26 | )}
27 |
28 | {action}
29 |
30 |
31 | );
32 | })}
33 |
34 |
35 | );
36 | }
37 |
--------------------------------------------------------------------------------
/examples/swaps-sdk-nextjs-web3-react/src/styles/globals.css:
--------------------------------------------------------------------------------
1 | @tailwind base;
2 | @tailwind components;
3 | @tailwind utilities;
--------------------------------------------------------------------------------
/examples/swaps-sdk-nextjs-web3-react/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "https://json.schemastore.org/tsconfig",
3 | "extends": "typescript-config/nextjs.json",
4 | "compilerOptions": {
5 | "rootDir": ".",
6 | "baseUrl": "./src",
7 | "paths": {
8 | "@/*": ["components/*"],
9 | },
10 | "plugins": [
11 | {
12 | "name": "next",
13 | },
14 | ],
15 | },
16 | "include": ["next-env.d.ts", "src", ".next/types/**/*.ts"],
17 | "exclude": ["node_modules"],
18 | }
19 |
--------------------------------------------------------------------------------
/examples/swaps-sdk-nextjs-web3-react/turbo.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": ["//"],
3 | "$schema": "https://turbo.build/schema.json",
4 | "pipeline": {
5 | "build": {
6 | "outputs": [".next/**", "!.next/cache/**"],
7 | "env": ["NEXT_PUBLIC_THIRD_WEB_CLIENT_ID", "THIRD_WEB_SECRET_KEY"],
8 | "outputMode": "new-only"
9 | }
10 | }
11 | }
12 |
--------------------------------------------------------------------------------
/examples/swaps-sdk-nextjs/.eslintrc.js:
--------------------------------------------------------------------------------
1 | /** @type {import("eslint").Linter.Config} */
2 | module.exports = {
3 | extends: ["eslint-config-examples/index.js"],
4 | parser: "@typescript-eslint/parser",
5 | parserOptions: {
6 | project: true,
7 | },
8 | };
9 |
--------------------------------------------------------------------------------
/examples/swaps-sdk-nextjs/.gitignore:
--------------------------------------------------------------------------------
1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2 |
3 | # dependencies
4 | /node_modules
5 | /.pnp
6 | .pnp.js
7 |
8 | # testing
9 | /coverage
10 |
11 | # next.js
12 | /.next/
13 | /out/
14 |
15 | # production
16 | /build
17 |
18 | # misc
19 | .DS_Store
20 | *.pem
21 |
22 | # debug
23 | npm-debug.log*
24 | yarn-debug.log*
25 | yarn-error.log*
26 | .pnpm-debug.log*
27 |
28 | # local env files
29 | .env*.local
30 |
31 | # vercel
32 | .vercel
33 |
--------------------------------------------------------------------------------
/examples/swaps-sdk-nextjs/next-env.d.ts:
--------------------------------------------------------------------------------
1 | ///
2 | ///
3 |
4 | // NOTE: This file should not be edited
5 | // see https://nextjs.org/docs/basic-features/typescript for more information.
6 |
--------------------------------------------------------------------------------
/examples/swaps-sdk-nextjs/next.config.mjs:
--------------------------------------------------------------------------------
1 | /** @type {import('next').NextConfig} */
2 | const nextConfig = {
3 | reactStrictMode: true,
4 | };
5 |
6 | export default nextConfig;
7 |
--------------------------------------------------------------------------------
/examples/swaps-sdk-nextjs/postcss.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | plugins: {
3 | tailwindcss: {},
4 | autoprefixer: {},
5 | },
6 | };
7 |
--------------------------------------------------------------------------------
/examples/swaps-sdk-nextjs/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/swing-xyz/examples/c46e4dd4a47f96050e736f64c4a41c45f3e2d45d/examples/swaps-sdk-nextjs/public/favicon.ico
--------------------------------------------------------------------------------
/examples/swaps-sdk-nextjs/public/fonts/Inter-italic.var.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/swing-xyz/examples/c46e4dd4a47f96050e736f64c4a41c45f3e2d45d/examples/swaps-sdk-nextjs/public/fonts/Inter-italic.var.woff2
--------------------------------------------------------------------------------
/examples/swaps-sdk-nextjs/public/fonts/Inter-roman.var.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/swing-xyz/examples/c46e4dd4a47f96050e736f64c4a41c45f3e2d45d/examples/swaps-sdk-nextjs/public/fonts/Inter-roman.var.woff2
--------------------------------------------------------------------------------
/examples/swaps-sdk-nextjs/src/app/layout.tsx:
--------------------------------------------------------------------------------
1 | import "styles/globals.css";
2 | import "@fortawesome/fontawesome-svg-core/styles.css";
3 |
4 | import { Header } from "../components/ui/Header";
5 | import { Footer } from "../components/ui/Footer";
6 |
7 | export default function Layout({ children }: { children: React.ReactNode }) {
8 | return (
9 |
10 |
11 |
12 |
13 |
14 |
15 | {children}
16 |
17 |
18 |
19 |
20 | );
21 | }
22 |
--------------------------------------------------------------------------------
/examples/swaps-sdk-nextjs/src/app/page.tsx:
--------------------------------------------------------------------------------
1 | import { CallToAction } from "../components/ui/CallToAction";
2 | import { Hero } from "../components/ui/Hero";
3 | import { PrimaryFeatures } from "../components/ui/PrimaryFeatures";
4 | import { Reviews } from "../components/ui/Reviews";
5 | import { SecondaryFeatures } from "../components/ui/SecondaryFeatures";
6 | import { ThirdwebProvider } from "../components/ThirdwebProvider";
7 |
8 | export default function Home() {
9 | return (
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 | );
18 | }
19 |
--------------------------------------------------------------------------------
/examples/swaps-sdk-nextjs/src/components/ThirdwebProvider.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | export { ThirdwebProvider } from "@thirdweb-dev/react";
4 |
--------------------------------------------------------------------------------
/examples/swaps-sdk-nextjs/src/components/ui/AppScreen.tsx:
--------------------------------------------------------------------------------
1 | import clsx from "clsx";
2 | import { forwardRef } from "react";
3 |
4 | export function AppScreen({
5 | children,
6 | className,
7 | }: {
8 | children: React.ReactNode;
9 | className?: string;
10 | }) {
11 | return {children}
;
12 | }
13 |
14 | AppScreen.Header = forwardRef(function AppScreenHeader(
15 | {
16 | children,
17 | }: {
18 | children: React.ReactNode;
19 | },
20 | ref: React.ForwardedRef,
21 | ) {
22 | return (
23 |
24 | {children}
25 |
26 | );
27 | });
28 |
29 | AppScreen.Title = function AppScreenTitle({
30 | children,
31 | }: {
32 | children: React.ReactNode;
33 | }) {
34 | return {children}
;
35 | };
36 |
37 | AppScreen.Subtitle = function AppScreenSubtitle({
38 | children,
39 | }: {
40 | children: React.ReactNode;
41 | }) {
42 | return {children}
;
43 | };
44 |
45 | AppScreen.Body = forwardRef(function AppScreenBody(
46 | {
47 | children,
48 | className,
49 | }: {
50 | children: React.ReactNode;
51 | className?: string;
52 | },
53 | ref: React.ForwardedRef,
54 | ) {
55 | return (
56 |
57 | {children}
58 |
59 | );
60 | });
61 |
--------------------------------------------------------------------------------
/examples/swaps-sdk-nextjs/src/components/ui/CallToAction.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import { Button } from "./Button";
4 | import { CircleBackground } from "./CircleBackground";
5 | import { Container } from "./Container";
6 |
7 | export function CallToAction() {
8 | return (
9 |
13 |
14 |
15 |
16 |
17 |
18 |
19 | Get your first Altcoin today
20 |
21 |
22 | It takes minutes to buy. Use app.swing.xyz to bridge and swap
23 | your assets into $Altcoin.
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 | );
32 | }
33 |
--------------------------------------------------------------------------------
/examples/swaps-sdk-nextjs/src/components/ui/CircleBackground.tsx:
--------------------------------------------------------------------------------
1 | import { useId, type SVGProps } from "react";
2 |
3 | export function CircleBackground({
4 | color,
5 | width = 558,
6 | height = 558,
7 | ...props
8 | }: SVGProps) {
9 | const id = useId();
10 |
11 | return (
12 |
20 |
21 |
29 |
30 |
31 |
32 |
33 |
38 |
43 |
44 | );
45 | }
46 |
--------------------------------------------------------------------------------
/examples/swaps-sdk-nextjs/src/components/ui/Container.tsx:
--------------------------------------------------------------------------------
1 | import clsx from "clsx";
2 |
3 | export function Container({
4 | className,
5 | children,
6 | }: {
7 | className?: string;
8 | children: React.ReactNode;
9 | }) {
10 | return (
11 |
12 | {children}
13 |
14 | );
15 | }
16 |
--------------------------------------------------------------------------------
/examples/swaps-sdk-nextjs/src/components/ui/Logo.tsx:
--------------------------------------------------------------------------------
1 | import clsx from "clsx";
2 | import { SVGProps } from "react";
3 |
4 | export function Logomark({
5 | className,
6 | ...props
7 | }: { className?: string } & SVGProps) {
8 | return (
9 |
15 |
20 |
21 | );
22 | }
23 |
24 | export function Logo({ className }: { className?: string }) {
25 | return (
26 |
30 | );
31 | }
32 |
--------------------------------------------------------------------------------
/examples/swaps-sdk-nextjs/src/styles/globals.css:
--------------------------------------------------------------------------------
1 | @tailwind base;
2 | @tailwind components;
3 | @tailwind utilities;
--------------------------------------------------------------------------------
/examples/swaps-sdk-nextjs/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "https://json.schemastore.org/tsconfig",
3 | "extends": "typescript-config/nextjs.json",
4 | "compilerOptions": {
5 | "rootDir": ".",
6 | "baseUrl": "./src",
7 | "plugins": [
8 | {
9 | "name": "next"
10 | }
11 | ]
12 | },
13 | "include": ["next-env.d.ts", "src", ".next/types/**/*.ts"],
14 | "exclude": ["node_modules"]
15 | }
16 |
--------------------------------------------------------------------------------
/examples/swaps-sdk-nextjs/turbo.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": ["//"],
3 | "$schema": "https://turbo.build/schema.json",
4 | "pipeline": {
5 | "build": {
6 | "outputs": [".next/**", "!.next/cache/**"],
7 | "env": ["NEXT_PUBLIC_THIRD_WEB_CLIENT_ID", "THIRD_WEB_SECRET_KEY"],
8 | "outputMode": "new-only"
9 | }
10 | }
11 | }
12 |
--------------------------------------------------------------------------------
/examples/swaps-widget-angular/README.md:
--------------------------------------------------------------------------------
1 | # Cross-chain Swaps using the Swing Widget in Angular
2 |
3 | ```bash
4 | yarn dev --filter=swaps-widget-angular
5 | ```
6 |
--------------------------------------------------------------------------------
/examples/swaps-widget-angular/src/app/app.component.html:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/examples/swaps-widget-angular/src/app/app.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from "@angular/core";
2 |
3 | import "@swing.xyz/ui/web-components";
4 |
5 | @Component({
6 | selector: "app-root",
7 | templateUrl: "./app.component.html",
8 | })
9 | export class AppComponent {}
10 |
--------------------------------------------------------------------------------
/examples/swaps-widget-angular/src/app/app.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from "@angular/core";
2 | import { BrowserModule } from "@angular/platform-browser";
3 |
4 | import { AppComponent } from "./app.component";
5 |
6 | @NgModule({
7 | imports: [BrowserModule],
8 | declarations: [AppComponent],
9 | bootstrap: [AppComponent],
10 | schemas: [CUSTOM_ELEMENTS_SCHEMA],
11 | })
12 | export class AppModule {}
13 |
--------------------------------------------------------------------------------
/examples/swaps-widget-angular/src/favicon.ico:
--------------------------------------------------------------------------------
1 | �PNG
2 |
3 |
IHDR ?�~� pHYs ��~� fIDATH��WKLQ���̔�uG�� e�n�.6qcb�l?���D`�F#�
Ku�F
1Qc�
4 | ��!���� ��C�P�|B?$���ܱ3����I&}��}�̽s�[*�ɀU�A� �K��yx�gY�Ajq��3L Š� ��˫�OD�4��3Ϗ:X�3��o�PJ�ğo#IH�a����,{>1/�2$�R AR]�)w��?�sZw^��q�Y�m_��e���r[8�^�
5 | �&p��-���A}c��- ������!����2_)E�)㊪j���v�m� �ZOi�g�nW�{�n.|�e2�a&�0aŸ����be�̀��C�fˤE%-{�ֺ��C��N��jXi�~c�C,t��T�����r �{� �L)s��V��6%�(�#ᤙ!�]��H�ҐH$R���^R�A�61(?Y舚�>���(Z����Qm�L2�K�ZIc��
6 | ���̧�C��2!⅄ �(����" �Go��>�q��=��$%�z`ѯ��T�&����PHh�Z!=� ��z��O��������,*VVV�1�f*CJ�]EE��K�k��d�#5���`2yT!�}7���߈~�,���zs�����y�T��V������D��C2�G��@%̑72Y�{oJ�"@��^h�~��fĬ�!a�D��6���Ha|�3��� [>�����]7U2п���] �ė
7 | ��PU��.Wejq�in�g��+ p<ߺQH����總j[������.��� Q���p _�K��1(��+��bB8�\ra
8 | �́�v.l���(���ǽ�w���L��w�8�C�� IEND�B`�
--------------------------------------------------------------------------------
/examples/swaps-widget-angular/src/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Angular Getting Started
6 |
7 |
8 |
9 |
10 |
14 |
15 |
16 |
17 |
18 |
19 |
--------------------------------------------------------------------------------
/examples/swaps-widget-angular/src/main.ts:
--------------------------------------------------------------------------------
1 | import { platformBrowserDynamic } from "@angular/platform-browser-dynamic";
2 |
3 | import { AppModule } from "./app/app.module";
4 |
5 | platformBrowserDynamic()
6 | .bootstrapModule(AppModule)
7 | .catch((err) => console.error(err));
8 |
--------------------------------------------------------------------------------
/examples/swaps-widget-angular/src/polyfills.ts:
--------------------------------------------------------------------------------
1 | (window as any).global = window;
2 | (window as any).process = {
3 | env: { DEBUG: undefined },
4 | };
5 |
--------------------------------------------------------------------------------
/examples/swaps-widget-angular/tsconfig.app.json:
--------------------------------------------------------------------------------
1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */
2 | {
3 | "extends": "./tsconfig.json",
4 | "compilerOptions": {
5 | "outDir": "./out-tsc/app",
6 | "types": []
7 | },
8 | "files": [
9 | "src/main.ts",
10 | "src/polyfills.ts"
11 | ],
12 | "include": [
13 | "src/**/*.d.ts"
14 | ],
15 | "exclude": []
16 | }
17 |
--------------------------------------------------------------------------------
/examples/swaps-widget-angular/tsconfig.json:
--------------------------------------------------------------------------------
1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */
2 | {
3 | "compileOnSave": false,
4 | "compilerOptions": {
5 | "baseUrl": "./",
6 | "outDir": "./dist/out-tsc",
7 | "forceConsistentCasingInFileNames": true,
8 | "strict": true,
9 | "noImplicitOverride": true,
10 | "noPropertyAccessFromIndexSignature": true,
11 | "noImplicitReturns": true,
12 | "noFallthroughCasesInSwitch": true,
13 | "sourceMap": true,
14 | "declaration": false,
15 | "downlevelIteration": true,
16 | "experimentalDecorators": true,
17 | "moduleResolution": "node",
18 | "importHelpers": true,
19 | "useDefineForClassFields": false,
20 | "target": "ES2022",
21 | "module": "ES2022",
22 | "lib": [
23 | "ES2022",
24 | "dom"
25 | ]
26 | },
27 | "angularCompilerOptions": {
28 | "enableI18nLegacyMessageIdFormat": false,
29 | "strictInjectionParameters": true,
30 | "strictInputAccessModifiers": true,
31 | "strictTemplates": true
32 | }
33 | }
34 |
--------------------------------------------------------------------------------
/examples/swaps-widget-angular/turbo.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": ["//"],
3 | "$schema": "https://turbo.build/schema.json",
4 | "pipeline": {
5 | "build": {
6 | "outputs": [".angular/**", "dist/**"],
7 | "outputMode": "new-only"
8 | }
9 | }
10 | }
11 |
--------------------------------------------------------------------------------
/examples/swaps-widget-html/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "swaps-widget-html",
3 | "demo": "https://swaps-widget-html.vercel.app/",
4 | "keywords": [
5 | "@swing.xyz/ui",
6 | "widget",
7 | "swaps",
8 | "html"
9 | ],
10 | "license": "MIT",
11 | "version": "0.0.1",
12 | "private": true
13 | }
14 |
--------------------------------------------------------------------------------
/examples/swaps-widget-nextjs-pages/.eslintrc.js:
--------------------------------------------------------------------------------
1 | /** @type {import("eslint").Linter.Config} */
2 | module.exports = {
3 | extends: ["eslint-config-examples/index.js"],
4 | parser: "@typescript-eslint/parser",
5 | parserOptions: {
6 | project: true,
7 | },
8 | };
9 |
--------------------------------------------------------------------------------
/examples/swaps-widget-nextjs-pages/.gitignore:
--------------------------------------------------------------------------------
1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2 |
3 | # dependencies
4 | /node_modules
5 | /.pnp
6 | .pnp.js
7 | .yarn/install-state.gz
8 |
9 | # testing
10 | /coverage
11 |
12 | # next.js
13 | /.next/
14 | /out/
15 |
16 | # production
17 | /build
18 |
19 | # misc
20 | .DS_Store
21 | *.pem
22 |
23 | # debug
24 | npm-debug.log*
25 | yarn-debug.log*
26 | yarn-error.log*
27 |
28 | # local env files
29 | .env*.local
30 |
31 | # vercel
32 | .vercel
33 |
34 | # typescript
35 | *.tsbuildinfo
36 | next-env.d.ts
37 |
--------------------------------------------------------------------------------
/examples/swaps-widget-nextjs-pages/README.md:
--------------------------------------------------------------------------------
1 | # Cross-chain Swaps using the Swing Widget in Next.js Pages
2 |
3 | This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
4 |
5 | ## Built with
6 |
7 | - [@swing.xyz/ui](https://developers.swing.xyz/reference/widget)
8 | - [next.js](https://nextjs.org)
9 | - [tailwind](https://tailwindcss.com)
10 |
11 | ## Getting started
12 |
13 | To get started with this template, first install the npm dependencies:
14 |
15 | ```bash
16 | yarn install
17 | ```
18 |
19 | Next, run the development server:
20 |
21 | ```bash
22 | yarn dev --filter=swaps-widget-nextjs-pages
23 | ```
24 |
25 | Finally, open [http://localhost:3000](http://localhost:3000) in your browser to view the website.
26 |
27 | ## Swing integration
28 |
29 | The [@swing.xyz/ui](https://developers.swing.xyz/reference/widget) can be found in [src/pages/index.tsx](./src/pages/index.tsx).
30 |
31 | It utilizes the `Swap` component to enable a low-code, cross-chain swapping experience.
32 |
33 | ## Customizing
34 |
35 | You can start editing this template by modifying the files in the `/src` folder. The site will auto-update as you edit these files.
36 |
--------------------------------------------------------------------------------
/examples/swaps-widget-nextjs-pages/next.config.js:
--------------------------------------------------------------------------------
1 | /** @type {import('next').NextConfig} */
2 | const nextConfig = {
3 | reactStrictMode: true,
4 | }
5 |
6 | module.exports = nextConfig
7 |
--------------------------------------------------------------------------------
/examples/swaps-widget-nextjs-pages/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "swaps-widget-nextjs-pages",
3 | "keywords": [
4 | "@swing.xyz/ui",
5 | "widget",
6 | "swaps",
7 | "nextjs"
8 | ],
9 | "license": "MIT",
10 | "version": "0.0.1",
11 | "private": true,
12 | "scripts": {
13 | "dev": "next dev",
14 | "build": "next build",
15 | "start": "next start",
16 | "lint": "eslint src",
17 | "clean": "rm -rf .next node_modules"
18 | },
19 | "dependencies": {
20 | "@swing.xyz/ui": "^0.53.2",
21 | "next": "14.1.4",
22 | "react": "^18.2.0",
23 | "react-dom": "^18.2.0"
24 | },
25 | "devDependencies": {
26 | "@types/node": "^20.12.4",
27 | "@types/react": "^18.2.74",
28 | "@types/react-dom": "^18.2.24",
29 | "autoprefixer": "^10.4.19",
30 | "eslint": "^8.57.0",
31 | "eslint-config-examples": "workspace:*",
32 | "pino-pretty": "^10.3.1",
33 | "postcss": "^8.4.38",
34 | "tailwindcss": "^3.4.3",
35 | "typescript": "^5.4.4",
36 | "typescript-config": "workspace:*"
37 | }
38 | }
39 |
--------------------------------------------------------------------------------
/examples/swaps-widget-nextjs-pages/postcss.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | plugins: {
3 | tailwindcss: {},
4 | autoprefixer: {},
5 | },
6 | }
7 |
--------------------------------------------------------------------------------
/examples/swaps-widget-nextjs-pages/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/swing-xyz/examples/c46e4dd4a47f96050e736f64c4a41c45f3e2d45d/examples/swaps-widget-nextjs-pages/public/favicon.ico
--------------------------------------------------------------------------------
/examples/swaps-widget-nextjs-pages/public/next.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/examples/swaps-widget-nextjs-pages/public/vercel.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/examples/swaps-widget-nextjs-pages/src/pages/_app.tsx:
--------------------------------------------------------------------------------
1 | import "@/styles/globals.css";
2 | import type { AppProps } from "next/app";
3 |
4 | export default function App({ Component, pageProps }: AppProps) {
5 | return ;
6 | }
7 |
--------------------------------------------------------------------------------
/examples/swaps-widget-nextjs-pages/src/pages/_document.tsx:
--------------------------------------------------------------------------------
1 | import { Html, Head, Main, NextScript } from "next/document";
2 |
3 | export default function Document() {
4 | return (
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 | );
13 | }
14 |
--------------------------------------------------------------------------------
/examples/swaps-widget-nextjs-pages/src/pages/index.tsx:
--------------------------------------------------------------------------------
1 | import { Swap } from "@swing.xyz/ui";
2 | import "@swing.xyz/ui/theme.css";
3 |
4 | export default function SwapPage() {
5 | return (
6 |
7 |
8 |
13 |
14 |
15 | );
16 | }
17 |
--------------------------------------------------------------------------------
/examples/swaps-widget-nextjs-pages/src/styles/globals.css:
--------------------------------------------------------------------------------
1 | @tailwind base;
2 | @tailwind components;
3 | @tailwind utilities;
4 |
5 | :root {
6 | --foreground-rgb: 0, 0, 0;
7 | --background-start-rgb: 214, 219, 220;
8 | --background-end-rgb: 255, 255, 255;
9 | }
10 |
11 | @media (prefers-color-scheme: dark) {
12 | :root {
13 | --foreground-rgb: 255, 255, 255;
14 | --background-start-rgb: 0, 0, 0;
15 | --background-end-rgb: 0, 0, 0;
16 | }
17 | }
18 |
19 | body {
20 | color: rgb(var(--foreground-rgb));
21 | background: linear-gradient(
22 | to bottom,
23 | transparent,
24 | rgb(var(--background-end-rgb))
25 | )
26 | rgb(var(--background-start-rgb));
27 | }
28 |
--------------------------------------------------------------------------------
/examples/swaps-widget-nextjs-pages/tailwind.config.ts:
--------------------------------------------------------------------------------
1 | import type { Config } from "tailwindcss";
2 |
3 | const config: Config = {
4 | content: [
5 | "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
6 | "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
7 | "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
8 | ],
9 | theme: {
10 | extend: {
11 | backgroundImage: {
12 | "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
13 | "gradient-conic":
14 | "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
15 | },
16 | },
17 | },
18 | plugins: [],
19 | };
20 | export default config;
21 |
--------------------------------------------------------------------------------
/examples/swaps-widget-nextjs-pages/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "https://json.schemastore.org/tsconfig",
3 | "extends": "typescript-config/nextjs.json",
4 | "compilerOptions": {
5 | "rootDir": ".",
6 | "paths": {
7 | "@/*": ["./src/*"]
8 | },
9 | "plugins": [
10 | {
11 | "name": "next"
12 | }
13 | ]
14 | },
15 | "include": ["next-env.d.ts", "src", ".next/types/**/*.ts"],
16 | "exclude": ["node_modules"]
17 | }
18 |
--------------------------------------------------------------------------------
/examples/swaps-widget-nextjs/.eslintrc.js:
--------------------------------------------------------------------------------
1 | /** @type {import("eslint").Linter.Config} */
2 | module.exports = {
3 | extends: ["eslint-config-examples/index.js"],
4 | parser: "@typescript-eslint/parser",
5 | parserOptions: {
6 | project: true,
7 | },
8 | };
9 |
--------------------------------------------------------------------------------
/examples/swaps-widget-nextjs/.gitignore:
--------------------------------------------------------------------------------
1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2 |
3 | # dependencies
4 | /node_modules
5 | /.pnp
6 | .pnp.js
7 |
8 | # testing
9 | /coverage
10 |
11 | # next.js
12 | /.next/
13 | /out/
14 |
15 | # production
16 | /build
17 |
18 | # misc
19 | .DS_Store
20 | *.pem
21 |
22 | # debug
23 | npm-debug.log*
24 | yarn-debug.log*
25 | yarn-error.log*
26 | .pnpm-debug.log*
27 |
28 | # local env files
29 | .env*.local
30 |
31 | # vercel
32 | .vercel
33 |
34 | # typescript
35 | *.tsbuildinfo
36 | next-env.d.ts
37 |
--------------------------------------------------------------------------------
/examples/swaps-widget-nextjs/README.md:
--------------------------------------------------------------------------------
1 | # Cross-chain Swaps using the Swing Widget in Next.js App Router
2 |
3 | MetaWallet is an example template showcasing how to use the [Swing Widget](https://developers.swing.xyz/reference/widget) to integrate cross-chain swaps on a wallet portfolio website.
4 |
5 | This example is built with:
6 |
7 | - [@swing.xyz/ui](https://developers.swing.xyz/reference/widget)
8 | - [next.js](https://nextjs.org)
9 | - [tailwind](https://tailwindcss.com)
10 |
11 | ## Demo
12 |
13 | View the live demo https://swaps-widget-nextjs.vercel.app/
14 |
15 | ## Getting started
16 |
17 | To get started with this template, first install the npm dependencies:
18 |
19 | ```bash
20 | yarn install
21 | ```
22 |
23 | Next, run the development server:
24 |
25 | ```bash
26 | yarn dev --filter=swaps-widget-nextjs
27 | ```
28 |
29 | Finally, open [http://localhost:3000](http://localhost:3000) in your browser to view the website.
30 |
31 | ## Swing integration
32 |
33 | The [@swing.xyz/ui](https://developers.swing.xyz/reference/widget) can be found in [src/app/page.tsx](./src/app/page.tsx).
34 |
35 | It utilizes the `Swap` component to enable a low-code, cross-chain swapping experience.
36 |
37 | ## Customizing
38 |
39 | You can start editing this template by modifying the files in the `/src` folder. The site will auto-update as you edit these files.
40 |
--------------------------------------------------------------------------------
/examples/swaps-widget-nextjs/next.config.mjs:
--------------------------------------------------------------------------------
1 | /** @type {import('next').NextConfig} */
2 | const nextConfig = {
3 | reactStrictMode: true,
4 | };
5 |
6 | export default nextConfig;
7 |
--------------------------------------------------------------------------------
/examples/swaps-widget-nextjs/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "swaps-widget-nextjs",
3 | "demo": "https://swaps-widget-nextjs.vercel.app/",
4 | "keywords": [
5 | "@swing.xyz/ui",
6 | "widget",
7 | "swaps",
8 | "nextjs"
9 | ],
10 | "license": "MIT",
11 | "version": "0.0.1",
12 | "private": true,
13 | "scripts": {
14 | "dev": "next dev",
15 | "lint": "eslint src",
16 | "build": "next build",
17 | "start": "next start",
18 | "clean": "rm -rf .next node_modules"
19 | },
20 | "dependencies": {
21 | "@fortawesome/fontawesome-svg-core": "^6.5.1",
22 | "@fortawesome/free-brands-svg-icons": "^6.5.1",
23 | "@fortawesome/free-solid-svg-icons": "^6.5.1",
24 | "@fortawesome/react-fontawesome": "^0.2.0",
25 | "@swing.xyz/ui": "^0.53.2",
26 | "clsx": "^2.1.0",
27 | "next": "^14.1.4",
28 | "react": "18.2.0",
29 | "react-dom": "18.2.0"
30 | },
31 | "devDependencies": {
32 | "@types/node": "20.12.4",
33 | "@types/react": "18.2.74",
34 | "@types/react-dom": "18.2.24",
35 | "autoprefixer": "^10.4.19",
36 | "eslint": "^8.57.0",
37 | "eslint-config-examples": "workspace:*",
38 | "pino-pretty": "^10.3.1",
39 | "postcss": "^8.4.38",
40 | "tailwindcss": "^3.4.3",
41 | "typescript": "^5.4.4",
42 | "typescript-config": "workspace:*"
43 | }
44 | }
45 |
--------------------------------------------------------------------------------
/examples/swaps-widget-nextjs/postcss.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | plugins: {
3 | tailwindcss: {},
4 | autoprefixer: {},
5 | },
6 | }
7 |
--------------------------------------------------------------------------------
/examples/swaps-widget-nextjs/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/swing-xyz/examples/c46e4dd4a47f96050e736f64c4a41c45f3e2d45d/examples/swaps-widget-nextjs/public/favicon.ico
--------------------------------------------------------------------------------
/examples/swaps-widget-nextjs/public/vercel.svg:
--------------------------------------------------------------------------------
1 |
3 |
4 |
--------------------------------------------------------------------------------
/examples/swaps-widget-nextjs/src/app/layout.tsx:
--------------------------------------------------------------------------------
1 | import { faGithub } from "@fortawesome/free-brands-svg-icons";
2 | import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
3 | import { Button } from "../components/Button";
4 | import Sidebar from "../components/Sidebar";
5 |
6 | import "styles/globals.css";
7 | import "@fortawesome/fontawesome-svg-core/styles.css";
8 |
9 | export default function Layout({ children }: { children: React.ReactNode }) {
10 | return (
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
27 |
28 |
29 | {children}
30 |
31 |
32 |
33 | );
34 | }
35 |
--------------------------------------------------------------------------------
/examples/swaps-widget-nextjs/src/app/page.tsx:
--------------------------------------------------------------------------------
1 | import { Swap } from "@swing.xyz/ui";
2 | import "@swing.xyz/ui/theme.css";
3 |
4 | export default function SwapPage() {
5 | return (
6 |
7 |
12 |
13 | );
14 | }
15 |
--------------------------------------------------------------------------------
/examples/swaps-widget-nextjs/src/styles/globals.css:
--------------------------------------------------------------------------------
1 | @tailwind base;
2 | @tailwind components;
3 | @tailwind utilities;
4 |
--------------------------------------------------------------------------------
/examples/swaps-widget-nextjs/tailwind.config.js:
--------------------------------------------------------------------------------
1 | /** @type {import('tailwindcss').Config} */
2 | module.exports = {
3 | content: ["./src/**/*.{ts,tsx}"],
4 | theme: {
5 | extend: {},
6 | },
7 | plugins: [],
8 | };
9 |
--------------------------------------------------------------------------------
/examples/swaps-widget-nextjs/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "https://json.schemastore.org/tsconfig",
3 | "extends": "typescript-config/nextjs.json",
4 | "compilerOptions": {
5 | "rootDir": ".",
6 | "baseUrl": "./src",
7 | "plugins": [
8 | {
9 | "name": "next"
10 | }
11 | ]
12 | },
13 | "include": ["next-env.d.ts", "src", ".next/types/**/*.ts"],
14 | "exclude": ["node_modules"]
15 | }
16 |
--------------------------------------------------------------------------------
/examples/swaps-widget-webpack/.eslintrc.js:
--------------------------------------------------------------------------------
1 | /** @type {import("eslint").Linter.Config} */
2 | module.exports = {
3 | extends: ["eslint-config-examples/index.js"],
4 | parser: "@typescript-eslint/parser",
5 | parserOptions: {
6 | project: true,
7 | },
8 | };
9 |
--------------------------------------------------------------------------------
/examples/swaps-widget-webpack/.gitignore:
--------------------------------------------------------------------------------
1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2 |
3 | # dependencies
4 | /node_modules
5 | /.pnp
6 | .pnp.js
7 |
8 | # testing
9 | /coverage
10 |
11 | # production
12 | /build
13 |
14 | # misc
15 | .DS_Store
16 | .env.local
17 | .env.development.local
18 | .env.test.local
19 | .env.production.local
20 |
21 | npm-debug.log*
22 | yarn-debug.log*
23 | yarn-error.log*
24 |
--------------------------------------------------------------------------------
/examples/swaps-widget-webpack/README.md:
--------------------------------------------------------------------------------
1 | # Cross-chain Swaps using the Swing Widget with Webpack
2 |
3 | This is an example template showcasing how to use the [Swing Widget](https://developers.swing.xyz/reference/widget) to integrate the cross-chain swaps into your React application using Webpack.
4 |
5 | This example is built with:
6 |
7 | - [@swing.xyz/ui](https://developers.swing.xyz/reference/widget)
8 | - [webpack](https://webpack.js.org/)
9 |
10 | ## Demo
11 |
12 | View the live demo https://swaps-widget-webpack.vercel.app/
13 |
14 | ## Getting started
15 |
16 | To get started with this template, first install the npm dependencies:
17 |
18 | ```bash
19 | yarn install
20 | ```
21 |
22 | Next, run the development server:
23 |
24 | ```bash
25 | yarn dev --filter=swaps-widget-webpack
26 | ```
27 |
28 | Finally, open [http://localhost:3000](http://localhost:3000) in your browser to view the website.
29 |
30 | ## Swing integration
31 |
32 | The [@swing.xyz/ui](https://developers.swing.xyz/reference/widget) can be found in [src/App.tsx](./src/App.tsx).
33 |
34 | It utilizes the `Swap` component to enable a low-code, cross-chain swapping experience.
35 |
36 | ## Customizing
37 |
38 | You can start editing this template by modifying the files in the `/src` folder. The site will auto-update as you edit these files.
39 |
--------------------------------------------------------------------------------
/examples/swaps-widget-webpack/config/webpack/persistentCache/createEnvironmentHash.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 | const { createHash } = require('crypto');
3 |
4 | module.exports = env => {
5 | const hash = createHash('md5');
6 | hash.update(JSON.stringify(env));
7 |
8 | return hash.digest('hex');
9 | };
10 |
--------------------------------------------------------------------------------
/examples/swaps-widget-webpack/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/swing-xyz/examples/c46e4dd4a47f96050e736f64c4a41c45f3e2d45d/examples/swaps-widget-webpack/public/favicon.ico
--------------------------------------------------------------------------------
/examples/swaps-widget-webpack/public/logo192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/swing-xyz/examples/c46e4dd4a47f96050e736f64c4a41c45f3e2d45d/examples/swaps-widget-webpack/public/logo192.png
--------------------------------------------------------------------------------
/examples/swaps-widget-webpack/public/logo512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/swing-xyz/examples/c46e4dd4a47f96050e736f64c4a41c45f3e2d45d/examples/swaps-widget-webpack/public/logo512.png
--------------------------------------------------------------------------------
/examples/swaps-widget-webpack/public/manifest.json:
--------------------------------------------------------------------------------
1 | {
2 | "short_name": "React App",
3 | "name": "Create React App Sample",
4 | "icons": [
5 | {
6 | "src": "favicon.ico",
7 | "sizes": "64x64 32x32 24x24 16x16",
8 | "type": "image/x-icon"
9 | },
10 | {
11 | "src": "logo192.png",
12 | "type": "image/png",
13 | "sizes": "192x192"
14 | },
15 | {
16 | "src": "logo512.png",
17 | "type": "image/png",
18 | "sizes": "512x512"
19 | }
20 | ],
21 | "start_url": ".",
22 | "display": "standalone",
23 | "theme_color": "#000000",
24 | "background_color": "#ffffff"
25 | }
26 |
--------------------------------------------------------------------------------
/examples/swaps-widget-webpack/public/robots.txt:
--------------------------------------------------------------------------------
1 | # https://www.robotstxt.org/robotstxt.html
2 | User-agent: *
3 | Disallow:
4 |
--------------------------------------------------------------------------------
/examples/swaps-widget-webpack/src/App.tsx:
--------------------------------------------------------------------------------
1 | import { Swap } from "@swing.xyz/ui";
2 | import "@swing.xyz/ui/theme.css";
3 |
4 | function App() {
5 | return (
6 |
11 | );
12 | }
13 |
14 | export default App;
15 |
--------------------------------------------------------------------------------
/examples/swaps-widget-webpack/src/index.tsx:
--------------------------------------------------------------------------------
1 | import { StrictMode } from "react";
2 | import { createRoot } from "react-dom/client";
3 | import App from "./App";
4 |
5 | const root = createRoot(document.getElementById("root")!);
6 | root.render(
7 |
8 |
9 | ,
10 | );
11 |
--------------------------------------------------------------------------------
/examples/swaps-widget-webpack/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "https://json.schemastore.org/tsconfig",
3 | "extends": "typescript-config/react-app.json",
4 | "compilerOptions": {
5 | "rootDir": ".",
6 | "target": "es6",
7 | "lib": ["dom", "dom.iterable", "esnext"],
8 | "allowJs": true,
9 | "allowSyntheticDefaultImports": true,
10 | "resolveJsonModule": true,
11 | "jsx": "react-jsx",
12 | "incremental": true,
13 | "noFallthroughCasesInSwitch": true
14 | },
15 | "include": ["react-app-env.d.ts", "**/*.ts", "**/*.tsx", "**/*.js"],
16 | "exclude": ["node_modules", "build"]
17 | }
18 |
--------------------------------------------------------------------------------
/examples/swaps-widget-webpack/turbo.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": ["//"],
3 | "$schema": "https://turbo.build/schema.json",
4 | "pipeline": {
5 | "build": {
6 | "outputs": ["build/**"],
7 | "env": [
8 | "BABEL_ENV",
9 | "BUILD_PATH",
10 | "CI",
11 | "DANGEROUSLY_DISABLE_HOST_CHECK",
12 | "DISABLE_ESLINT_PLUGIN",
13 | "DISABLE_NEW_JSX_TRANSFORM",
14 | "ESLINT_NO_DEV_ERRORS",
15 | "FAST_REFRESH",
16 | "GENERATE_SOURCEMAP",
17 | "HOST",
18 | "HTTPS",
19 | "IMAGE_INLINE_SIZE_LIMIT",
20 | "INLINE_RUNTIME_CHUNK",
21 | "NODE_ENV",
22 | "NODE_PATH",
23 | "PORT",
24 | "PUBLIC_URL",
25 | "SSL_CRT_FILE",
26 | "SSL_KEY_FILE",
27 | "TSC_COMPILE_ON_ERROR",
28 | "WDS_SOCKET_HOST",
29 | "WDS_SOCKET_PATH",
30 | "WDS_SOCKET_PORT"
31 | ],
32 | "outputMode": "new-only"
33 | }
34 | }
35 | }
36 |
--------------------------------------------------------------------------------
/examples/withdraw-widget-nextjs/.eslintrc.js:
--------------------------------------------------------------------------------
1 | /** @type {import("eslint").Linter.Config} */
2 | module.exports = {
3 | extends: ["eslint-config-examples/index.js"],
4 | parser: "@typescript-eslint/parser",
5 | parserOptions: {
6 | project: true,
7 | },
8 | };
9 |
--------------------------------------------------------------------------------
/examples/withdraw-widget-nextjs/.gitignore:
--------------------------------------------------------------------------------
1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2 |
3 | # dependencies
4 | /node_modules
5 | /.pnp
6 | .pnp.js
7 |
8 | # testing
9 | /coverage
10 |
11 | # next.js
12 | /.next/
13 | /out/
14 |
15 | # production
16 | /build
17 |
18 | # misc
19 | .DS_Store
20 | *.pem
21 |
22 | # debug
23 | npm-debug.log*
24 | yarn-debug.log*
25 | yarn-error.log*
26 | .pnpm-debug.log*
27 |
28 | # local env files
29 | .env*.local
30 |
31 | # vercel
32 | .vercel
33 |
34 | # typescript
35 | *.tsbuildinfo
36 | next-env.d.ts
37 |
--------------------------------------------------------------------------------
/examples/withdraw-widget-nextjs/README.md:
--------------------------------------------------------------------------------
1 | # Withdraw using the Swing Widget in Next.js
2 |
3 | MetaWallet is an example template showcasing how to use the [Swing Widget](https://developers.swing.xyz/reference/widget) to integrate cross-chain withdraw on a wallet portfolio website.
4 |
5 | This example is built with:
6 |
7 | - [@swing.xyz/ui](https://developers.swing.xyz/reference/widget)
8 | - [next.js](https://nextjs.org)
9 | - [tailwind](https://tailwindcss.com)
10 |
11 | ## Demo
12 |
13 | View the live demo https://withdraw-widget-nextjs.vercel.app/
14 |
15 | ## Getting started
16 |
17 | To get started with this template, first install the npm dependencies:
18 |
19 | ```bash
20 | yarn install
21 | ```
22 |
23 | Next, run the development server:
24 |
25 | ```bash
26 | yarn dev --filter=staking-widget-nextjs
27 | ```
28 |
29 | Finally, open [http://localhost:3000](http://localhost:3000) in your browser to view the website.
30 |
31 | ## Swing integration
32 |
33 | The [@swing.xyz/ui](https://developers.swing.xyz/reference/widget) can be found in [src/app/page.tsx](./src/app/page.tsx).
34 |
35 | It utilizes the `Withdraw` component to enable a low-code, cross-chain withdraw experience.
36 |
37 | ## Customizing
38 |
39 | You can start editing this template by modifying the files in the `/src` folder. The site will auto-update as you edit these files.
40 |
--------------------------------------------------------------------------------
/examples/withdraw-widget-nextjs/next.config.mjs:
--------------------------------------------------------------------------------
1 | /** @type {import('next').NextConfig} */
2 | const nextConfig = {
3 | reactStrictMode: true,
4 | };
5 |
6 | export default nextConfig;
7 |
--------------------------------------------------------------------------------
/examples/withdraw-widget-nextjs/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "withdraw-widget-nextjs",
3 | "demo": "https://withdraw-widget-nextjs.vercel.app/",
4 | "keywords": [
5 | "@swing.xyz/ui",
6 | "widget",
7 | "withdraw",
8 | "nextjs"
9 | ],
10 | "license": "MIT",
11 | "private": true,
12 | "version": "0.0.1",
13 | "scripts": {
14 | "dev": "next dev",
15 | "lint": "eslint src",
16 | "build": "next build",
17 | "start": "next start",
18 | "clean": "rm -rf .next node_modules"
19 | },
20 | "dependencies": {
21 | "@fortawesome/fontawesome-svg-core": "^6.5.1",
22 | "@fortawesome/free-brands-svg-icons": "^6.5.1",
23 | "@fortawesome/free-solid-svg-icons": "^6.5.1",
24 | "@fortawesome/react-fontawesome": "^0.2.0",
25 | "@swing.xyz/ui": "^0.53.2",
26 | "clsx": "^2.1.0",
27 | "next": "^14.1.4",
28 | "react": "18.2.0",
29 | "react-dom": "18.2.0"
30 | },
31 | "devDependencies": {
32 | "@types/node": "20.12.4",
33 | "@types/react": "18.2.74",
34 | "@types/react-dom": "18.2.24",
35 | "autoprefixer": "^10.4.19",
36 | "eslint": "^8.57.0",
37 | "eslint-config-examples": "workspace:*",
38 | "pino-pretty": "^10.3.1",
39 | "postcss": "^8.4.38",
40 | "tailwindcss": "^3.4.3",
41 | "typescript": "^5.4.4",
42 | "typescript-config": "workspace:*"
43 | }
44 | }
45 |
--------------------------------------------------------------------------------
/examples/withdraw-widget-nextjs/postcss.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | plugins: {
3 | tailwindcss: {},
4 | autoprefixer: {},
5 | },
6 | }
7 |
--------------------------------------------------------------------------------
/examples/withdraw-widget-nextjs/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/swing-xyz/examples/c46e4dd4a47f96050e736f64c4a41c45f3e2d45d/examples/withdraw-widget-nextjs/public/favicon.ico
--------------------------------------------------------------------------------
/examples/withdraw-widget-nextjs/public/vercel.svg:
--------------------------------------------------------------------------------
1 |
3 |
4 |
--------------------------------------------------------------------------------
/examples/withdraw-widget-nextjs/src/app/layout.tsx:
--------------------------------------------------------------------------------
1 | import { faGithub } from "@fortawesome/free-brands-svg-icons";
2 | import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
3 | import { Button } from "../components/Button";
4 | import Sidebar from "../components/Sidebar";
5 |
6 | import "styles/globals.css";
7 | import "@fortawesome/fontawesome-svg-core/styles.css";
8 |
9 | export default function Layout({ children }: { children: React.ReactNode }) {
10 | return (
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
27 |
28 |
29 | {children}
30 |
31 |
32 |
33 | );
34 | }
35 |
--------------------------------------------------------------------------------
/examples/withdraw-widget-nextjs/src/app/page.tsx:
--------------------------------------------------------------------------------
1 | import { Withdraw } from "@swing.xyz/ui";
2 | import "@swing.xyz/ui/theme.css";
3 |
4 | export default function SwapPage() {
5 | return (
6 |
7 |
12 |
13 | );
14 | }
15 |
--------------------------------------------------------------------------------
/examples/withdraw-widget-nextjs/src/styles/globals.css:
--------------------------------------------------------------------------------
1 | @tailwind base;
2 | @tailwind components;
3 | @tailwind utilities;
4 |
--------------------------------------------------------------------------------
/examples/withdraw-widget-nextjs/tailwind.config.js:
--------------------------------------------------------------------------------
1 | /** @type {import('tailwindcss').Config} */
2 | module.exports = {
3 | content: ["./src/**/*.{ts,tsx}"],
4 | theme: {
5 | extend: {},
6 | },
7 | plugins: [],
8 | };
9 |
--------------------------------------------------------------------------------
/examples/withdraw-widget-nextjs/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "https://json.schemastore.org/tsconfig",
3 | "extends": "typescript-config/nextjs.json",
4 | "compilerOptions": {
5 | "rootDir": ".",
6 | "baseUrl": "./src",
7 | "plugins": [
8 | {
9 | "name": "next"
10 | }
11 | ]
12 | },
13 | "include": ["next-env.d.ts", "src", ".next/types/**/*.ts"],
14 | "exclude": ["node_modules"]
15 | }
16 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@swing.xyz/examples",
3 | "version": "0.0.0",
4 | "private": true,
5 | "workspaces": [
6 | "examples/*",
7 | "apps/*",
8 | "packages/*"
9 | ],
10 | "scripts": {
11 | "build": "turbo run build",
12 | "start": "turbo run start",
13 | "dev": "turbo run dev --parallel",
14 | "test": "turbo run test",
15 | "lint": "turbo run lint",
16 | "lint.fix": "turbo run lint -- --fix && yarn format",
17 | "clean": "turbo run clean && rm -rf node_modules",
18 | "format": "prettier --write \"**/*.{ts,tsx,md}\""
19 | },
20 | "devDependencies": {
21 | "prettier": "^3.2.5",
22 | "prettier-plugin-tailwindcss": "^0.5.14",
23 | "turbo": "^1.13.2"
24 | },
25 | "engines": {
26 | "node": ">=18.0.0"
27 | },
28 | "packageManager": "yarn@4.1.1"
29 | }
30 |
--------------------------------------------------------------------------------
/packages/config-eslint/index.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | extends: [
3 | "eslint:recommended",
4 | "next/core-web-vitals",
5 | "eslint-config-turbo",
6 | "prettier",
7 | ],
8 |
9 | rules: {
10 | "@next/next/no-html-link-for-pages": "off",
11 | "react/jsx-key": "off",
12 | },
13 | ignorePatterns: [
14 | "node_modules/",
15 | ".next/",
16 | "dist/",
17 | "build/",
18 | ".eslintrc.js",
19 | "**/*.css",
20 | "react-app-env.d.ts",
21 | ],
22 | globals: {
23 | React: true,
24 | JSX: true,
25 | },
26 |
27 | env: { browser: true, es6: true, node: true },
28 |
29 | overrides: [
30 | {
31 | files: ["*.ts", "*.tsx"],
32 | parser: "@typescript-eslint/parser",
33 |
34 | extends: ["plugin:@typescript-eslint/recommended"],
35 | plugins: ["unused-imports"],
36 |
37 | rules: {
38 | "@typescript-eslint/no-non-null-asserted-optional-chain": "warn",
39 |
40 | // Remove unused imports
41 | "no-unused-vars": "off",
42 | "@typescript-eslint/no-unused-vars": "off",
43 | "unused-imports/no-unused-imports": "error",
44 | "unused-imports/no-unused-vars": [
45 | "error",
46 | {
47 | vars: "all",
48 | varsIgnorePattern: "^_",
49 | argsIgnorePattern: "^_",
50 | args: "after-used",
51 | ignoreRestSiblings: true,
52 | },
53 | ],
54 | },
55 | },
56 | ],
57 | };
58 |
--------------------------------------------------------------------------------
/packages/config-eslint/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "eslint-config-examples",
3 | "version": "0.0.0",
4 | "license": "MIT",
5 | "main": "./index.js",
6 | "module": "./index.js",
7 | "types": "./index.js",
8 | "exports": {
9 | ".": "./index.js",
10 | "./index.js": "./index.js",
11 | "./package.json": "./package.json"
12 | },
13 | "dependencies": {
14 | "@typescript-eslint/eslint-plugin": "^6.21.0",
15 | "@typescript-eslint/parser": "^6.21.0",
16 | "eslint": "^8.57.0",
17 | "eslint-config-next": "14.1.4",
18 | "eslint-config-prettier": "^9.1.0",
19 | "eslint-config-turbo": "^1.13.2",
20 | "eslint-plugin-react": "7.34.1",
21 | "eslint-plugin-unused-imports": "^3.1.0",
22 | "prettier": "^3.2.5"
23 | },
24 | "devDependencies": {
25 | "typescript": "^5.4.4"
26 | },
27 | "publishConfig": {
28 | "access": "public"
29 | }
30 | }
31 |
--------------------------------------------------------------------------------
/packages/config-typescript/base.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "https://json.schemastore.org/tsconfig",
3 | "display": "Default",
4 | "compilerOptions": {
5 | "composite": false,
6 | "declaration": true,
7 | "declarationMap": true,
8 | "esModuleInterop": true,
9 | "forceConsistentCasingInFileNames": true,
10 | "allowImportingTsExtensions": true,
11 | "inlineSources": false,
12 | "isolatedModules": true,
13 | "module": "ESNext",
14 | "moduleResolution": "Bundler",
15 | "noUnusedLocals": false,
16 | "noUnusedParameters": false,
17 | "preserveWatchOutput": true,
18 | "skipLibCheck": true,
19 | "strict": true,
20 | "noEmit": true,
21 | "strictNullChecks": true
22 | },
23 | "exclude": ["node_modules", "build", "dist"]
24 | }
25 |
--------------------------------------------------------------------------------
/packages/config-typescript/nextjs.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "https://json.schemastore.org/tsconfig",
3 | "display": "Next.js",
4 | "extends": "./base.json",
5 | "compilerOptions": {
6 | "plugins": [{ "name": "next" }],
7 | "allowJs": true,
8 | "declaration": false,
9 | "declarationMap": false,
10 | "incremental": true,
11 | "jsx": "preserve",
12 | "lib": ["dom", "dom.iterable", "esnext"],
13 | "module": "esnext",
14 | "noEmit": true,
15 | "resolveJsonModule": true,
16 | "target": "es5"
17 | }
18 | }
--------------------------------------------------------------------------------
/packages/config-typescript/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "typescript-config",
3 | "version": "0.0.0",
4 | "private": true,
5 | "license": "MIT",
6 | "publishConfig": {
7 | "access": "public"
8 | }
9 | }
10 |
--------------------------------------------------------------------------------
/packages/config-typescript/react-app.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "https://json.schemastore.org/tsconfig",
3 | "display": "React App",
4 | "extends": "./base.json",
5 | "compilerOptions": {
6 | "allowJs": true,
7 | "declaration": false,
8 | "declarationMap": false,
9 | "incremental": true,
10 | "jsx": "preserve",
11 | "lib": ["dom", "dom.iterable", "esnext"],
12 | "module": "esnext",
13 | "noEmit": true,
14 | "resolveJsonModule": true,
15 | "target": "ES6"
16 | }
17 | }
18 |
19 |
--------------------------------------------------------------------------------
/prettier.config.mjs:
--------------------------------------------------------------------------------
1 | const prettierConfig = {
2 | singleQuote: false,
3 | semi: true,
4 | plugins: ["prettier-plugin-tailwindcss"],
5 | tailwindFunctions: ["clsx"],
6 | };
7 |
8 | export default prettierConfig;
9 |
--------------------------------------------------------------------------------
/turbo.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "https://turbo.build/schema.json",
3 | "pipeline": {
4 | "build": {
5 | "dependsOn": ["^build"],
6 | "outputMode": "new-only",
7 | "env": ["NODE_ENV"],
8 | "outputs": [
9 | ".next/**",
10 | "!.next/cache/**",
11 | "dist/**",
12 | ".angular/**",
13 | "build/**"
14 | ]
15 | },
16 | "lint": {
17 | "outputMode": "new-only",
18 | "outputs": []
19 | },
20 | "test": {},
21 | "start": {
22 | "dependsOn": ["build"]
23 | },
24 | "dev": {
25 | "cache": false,
26 | "persistent": true
27 | },
28 | "clean": {
29 | "cache": false
30 | }
31 | }
32 | }
33 |
--------------------------------------------------------------------------------