Kin tools

content/docs/100-essentials/index.mdx

@@ -48,14 +48,7 @@ That's exactly right! The [Kin Rewards Engine](/essentials/kin-rewards-engine/)
 
 Great question! Why not check out some common use cases?
 
-<div className="mt-8 grid gap-6 md:grid-cols-2">
-  <NavCard
-    title="Use Cases"
-    subtitle="See some of the common ways Kin is used in our partner apps."
-    svgFile="diagram-project-solid"
-    link={{ url: '/docs/use-cases', label: 'Learn more' }}
-  />
-</div>
+<UseCases />
 
 ## How can I start building my app?
 

content/tools/100-demos/100-create.mdx

@@ -0,0 +1,57 @@
+---
+title: Creating A Kin Account
+nav_title: Creating A Kin Account
+excerpt: Kin Kinetic Demo - Creating A Kin Account
+---
+
+Whatever kind of app you're making, your users will need a keypair and an account created on the Solana blockchain as this will allow them to spend and receive Kin and allow you to increase your earnings via the KRE.
+
+<div className="mt-9 grid gap-6 md:grid-cols-3">
+  <NavCard
+    title="Use Cases"
+    subtitle="Check out some of the many ways you can use Kin in your apps"
+    svgFile="diagram-project-solid"
+    link={{ url: '/docs/use-cases', label: 'Learn more' }}
+  />
+  <NavCard
+    title="Kin Rewards Engine"
+    subtitle="Earn Kin by using it in your App"
+    svgFile="money-bill-trend-up-solid"
+    link={{ url: '/docs/essentials/kin-rewards-engine', label: 'See more' }}
+  />
+</div>
+<br />
+
+Go through the steps required to create an account on the blockchain capable of receiving Kin via the Kinetic SDKs:
+
+<DemoContainer
+  stages={[
+    {
+      title: 'Connect To Kinetic',
+      subtitle:
+        "Connect your app or server to an active Kinetic instance. Once you're connected, you'll be able to carry out all of the various actions the Kinetic SDK is capable of.",
+      link: { url: '/docs/developers/typescript#instantiate-the-kinetic-client', label: 'See the code...' },
+      component: (props) => <DemoKineticConnect {...props} />,
+    },
+    {
+      title: 'Create A Keypair',
+      subtitle:
+        'Use Kinetic to create a keypair. This will act as your wallet on the blockchain and be used to sign transactions. The mnemonic code for the keypair can be imported into any Solana wallet such as Phantom or Solflare. Remember to keep your mnemonics safe!',
+      link: { url: '/docs/developers/typescript#create-account', label: 'See the code...' },
+      component: (props) => <DemoKineticKeypair {...props} />,
+    },
+    {
+      title: 'Create An Account',
+      subtitle:
+        "Use Kinetic to create your account on the Solana blockchain with the keypair we made in the previous step. Once this is done, you'll be able to transact with Kin on Solana via the Kinetic SDK.",
+      link: { url: '/docs/developers/typescript#create-account', label: 'See the code...' },
+      component: (props) => <DemoKineticCreateAccount {...props} />,
+    },
+    {
+      title: 'Close Your Account',
+      subtitle: "Use Kinetic to close your Kin account. It's good practice to tidy up any unneeded accounts.",
+      link: { url: '/docs/developers/typescript#close-account', label: 'See the code...' },
+      component: (props) => <DemoKineticCloseAccount {...props} />,
+    },
+  ]}
+/>

content/tools/100-demos/200-spend.mdx

@@ -0,0 +1,76 @@
+---
+title: Spending Kin
+nav_title: Spending Kin
+excerpt: Kin Kinetic Demo - Spending Kin
+---
+
+This is what it's all about! You want your users doing 'Spends' of Kin in your app as that's what'll help to drive up your KRE payments.
+
+<div className="mt-9 grid gap-6 md:grid-cols-3">
+  <NavCard
+    title="Use Cases"
+    subtitle="Check out some of the ways you can use incorporate 'Spends' in your app"
+    svgFile="diagram-project-solid"
+    link={{ url: '/docs/use-cases', label: 'Learn more about Spends' }}
+  />
+  <NavCard
+    title="Kin Rewards Engine"
+    subtitle="Earn Kin by using it in your App"
+    svgFile="money-bill-trend-up-solid"
+    link={{ url: '/docs/essentials/kin-rewards-engine', label: 'See more' }}
+  />
+</div>
+<br />
+
+Go through the steps required to transfer Kin from a user created wallet to an external account (e.g. your app wallet):
+
+<DemoContainer
+  stages={[
+    {
+      title: 'Connect To Kinetic',
+      subtitle:
+        "Connect your app or server to an active Kinetic instance. Once you're connected, you'll be able to carry out all of the various actions the Kinetic SDK is capable of.",
+      link: { url: '/docs/developers/typescript#instantiate-the-kinetic-client', label: 'See the code...' },
+      component: (props) => <DemoKineticConnect {...props} />,
+    },
+    {
+      title: 'Create A Keypair',
+      subtitle:
+        'Use Kinetic to create a keypair. This will act as a users wallet on the blockchain and be used to sign transactions. The mnemonic code for the keypair can be imported into any Solana wallet such as Phantom or Solflare. Remember to keep your mnemonics safe!',
+      link: { url: '/docs/developers/typescript#create-account', label: 'See the code...' },
+      component: (props) => <DemoKineticKeypair {...props} />,
+    },
+    {
+      title: 'Create An Account',
+      subtitle:
+        "Use Kinetic to create an account on the Solana blockchain with the keypair we made in the previous step. Once this is done, you'll be able to transact with Kin on Solana via the Kinetic SDK.",
+      link: { url: '/docs/developers/typescript#create-account', label: 'See the code...' },
+      component: (props) => <DemoKineticCreateAccount {...props} />,
+    },
+    {
+      title: 'Check Your Balance',
+      subtitle: 'Use Kinetic to check the balance of the account.',
+      link: { url: '/docs/developers/typescript#check-balance', label: 'See the code...' },
+      component: (props) => <DemoKineticGetBalance {...props} />,
+    },
+    {
+      title: 'Airdrop Kin',
+      subtitle: 'Use Kinetic to send some test Kin to the account.',
+      link: { url: '/docs/developers/typescript#airdrop-funds-devnet', label: 'See the code...' },
+      component: (props) => <DemoKineticAirdrop {...props} />,
+    },
+    {
+      title: 'Transfer Kin',
+      subtitle:
+        "Use Kinetic to allow a user to 'Spend' Kin in your app. In this case, we are going to send all of the Kin from the user's wallet to our 'app wallet'",
+      link: { url: '/docs/developers/typescript#transfer-kin', label: 'See the code...' },
+      component: (props) => <DemoKineticMakeTransfer {...props} />,
+    },
+    {
+      title: 'Close The Account',
+      subtitle: "Use Kinetic to close the empty Kin account. It's good practice to tidy up any unneeded accounts.",
+      link: { url: '/docs/developers/typescript#close-account', label: 'See the code...' },
+      component: (props) => <DemoKineticCloseAccount {...props} />,
+    },
+  ]}
+/>

content/tools/100-demos/300-earn.mdx

@@ -0,0 +1,69 @@
+---
+title: Earning Kin
+nav_title: Earning Kin
+excerpt: Kin Kinetic Demo - Transfer Kin in Batch to App Users
+---
+
+Using the batch transfer method on the Kinetic SDK is a great way to deliver 'Earn' rewards to app users. Remember, the more Kin you transact with, the greater your rewards from the KRE.
+
+<div className="mt-9 grid gap-6 md:grid-cols-3">
+  <NavCard
+    title="Use Cases"
+    subtitle="Check out some of the ways you can use 'Earns' in your apps"
+    svgFile="diagram-project-solid"
+    link={{ url: '/docs/use-cases', label: 'Learn more about Earns' }}
+  />
+  <NavCard
+    title="Kin Rewards Engine"
+    subtitle="Earn Kin by using it in your App"
+    svgFile="money-bill-trend-up-solid"
+    link={{ url: '/docs/essentials/kin-rewards-engine', label: 'See more' }}
+  />
+</div>
+<br />
+
+Go through the steps required to transfer Kin from an app wallet in a batch to multiple user addresses:
+
+<DemoContainer
+  stages={[
+    {
+      title: 'Connect To Kinetic',
+      subtitle:
+        "Connect your app or server to an active Kinetic instance. Once you're connected, you'll be able to carry out all of the various actions the Kinetic SDK is capable of.",
+      link: { url: '/docs/developers/typescript#instantiate-the-kinetic-client', label: 'See the code...' },
+      component: (props) => <DemoKineticConnect {...props} />,
+    },
+    {
+      title: 'Setup Your Keypair',
+      subtitle:
+        'Use Kinetic to create a keypair. In this case we are going to use a mnemonic to connect to an existing account on Solana. The mnemonic for the keypair we want to connect to is "tube weapon very sudden moon version budget control arrest gift gallery toast". Of course, in real life you would never share your secrets!',
+      link: { url: '/docs/developers/typescript#create-account', label: 'See the code...' },
+      component: (props) => (
+        <DemoKineticKeypair
+          mnemonic="tube weapon very sudden moon version budget control arrest gift gallery toast"
+          {...props}
+        />
+      ),
+    },
+    {
+      title: 'Airdrop Kin',
+      subtitle:
+        "Let's make sure we've got some extra Kin in the account so we can make the payment we want to complete",
+      link: { url: '/docs/developers/typescript#airdrop-funds-devnet', label: 'See the code...' },
+      component: (props) => <DemoKineticAirdrop {...props} />,
+    },
+    {
+      title: "Prepare Your 'Earns'",
+      subtitle: 'We are going to simulate getting a list of reward payments for your app users',
+      link: { url: '/docs/use-cases', label: 'Learn more about Earns' },
+      component: (props) => <DemoGetEarns {...props} />,
+    },
+    {
+      title: 'Transfer Kin In A Batch',
+      subtitle:
+        'Use Kinetic to send some Kin a number of users at the same time. This is a great way to deliver rewards to app users. We are going to send to the accounts we got from our database in the last step.',
+      link: { url: '/docs/developers/typescript#transfer-kin-batch', label: 'See the code...' },
+      component: (props) => <DemoKineticMakeBatchTransfer {...props} />,
+    },
+  ]}
+/>

content/tools/100-demos/index.mdx

@@ -0,0 +1,30 @@
+---
+title: Kinetic Demos
+nav_title: Kinetic Demos
+excerpt: Kin Kinetic Demos
+---
+
+For those new to the Kin ecosytem, what Kin is and what the Kinetic SDKs can do can seem a bit confusing.
+
+Check out these simple walkthrough demos, showing just how easy it is to get started transacting with Kin.
+
+<div className="mt-9 grid gap-6 md:grid-cols-3">
+  <NavCard
+    title="Create A Kin Account"
+    svgFile="kin"
+    subtitle="See all the steps required to create an account on the blockchain capable of receiving Kin via the Kinetic SDKs"
+    link={{ url: '/tools/demos/create', label: 'See for yourself!' }}
+  />
+  <NavCard
+    title="Transfer Kin"
+    svgFile="kin"
+    subtitle="Go through all the steps required to transfer Kin from a user created wallet to an external address"
+    link={{ url: '/tools/demos/spend', label: 'Check it out here' }}
+  />
+  <NavCard
+    title="Bulk Transfer Kin"
+    svgFile="kin"
+    subtitle="Sometimes you'll want to send Kin out in bulk as a reward for app users. Go through all the steps required to do that here."
+    link={{ url: '/tools/demos/earn', label: 'Check it out here' }}
+  />
+</div>

content/tools/index.mdx

@@ -0,0 +1,16 @@
+---
+title: Kin Tools
+nav_title: Kin Tools
+excerpt: Kin Tools
+---
+
+Kin Tools is where we'll be adding handy kin-related tools and demos to make everyone's lives that little bit better!
+
+<div className="w-full">
+  <NavCard title="Kin Kinetic Demos" svgFile="kin" useCase link={{ url: '/tools/demos', label: 'Check them out!' }}>
+    **Kin Kinetic Demos and Walkthroughs** <br /> For those new to the Kin ecosytem, what Kin is and what the Kinetic
+    SDKs can do can seem a bit confusing. Check out these simple walkthrough demos, showing just how easy it is to get
+    started transacting with Kin.
+  </NavCard>
+</div>
+<br />

package.json

@@ -11,6 +11,7 @@
     "postinstall": "husky install"
   },
   "dependencies": {
+    "@kin-kinetic/sdk": "^1.0.0-rc.16",
     "@radix-ui/react-dropdown-menu": "^0.1.6",
     "@radix-ui/react-scroll-area": "^0.1.4",
     "@radix-ui/react-tabs": "^0.1.5",
@@ -27,6 +28,7 @@
     "react": "18.0.0",
     "react-dom": "18.0.0",
     "react-helmet": "^6.1.0",
+    "react-loader-spinner": "^5.3.4",
     "shiki-twoslash": "^3.1.0",
     "tailwindcss-radix": "^1.6.0"
   },

src/components/common/Button.tsx

@@ -0,0 +1,62 @@
+import { FC } from 'react'
+import classnames from 'classnames'
+import { Icon, IconName } from './Icon'
+import Link from 'next/link'
+import { isExternalUrl } from '../../utils/helpers'
+
+const themeClasses = {
+  primary:
+    'bg-violet-600 text-violet-50 border-violet-800 hover:bg-violet-500 dark:bg-violet-600 dark:border-violet-700 dark:hover:bg-violet-500 dark:hover:border-violet-600',
+  secondary:
+    'bg-violet-100 text-violet-800 border-violet-200 hover:bg-violet-50 dark:text-violet-300 dark:border-violet-500/30 dark:hover:bg-violet-500/30 dark:bg-violet-500/20',
+}
+
+export const Button: FC<{
+  label: string
+  action?: () => void
+  theme?: 'primary' | 'secondary'
+  href?: string
+  icon?: IconName
+  disabled?: boolean
+}> = ({ label, action, href, theme = 'primary', icon, disabled }) => {
+  const sharedClasses = `px-6 py-2 flex justify-center items-center space-x-3 rounded-md border font-medium focus:outline-none focus:ring-2 focus:ring-violet-300 dark:focus:ring-violet-900 ${
+    disabled ? 'disabled:opacity-75 disabled:pointer-events-none' : ''
+  }`
+
+  if (href) {
+    return (
+      <Link href={href}>
+        <a
+          className={classnames(sharedClasses, themeClasses[theme])}
+          onClick={action}
+          aria-label={label}
+          target={isExternalUrl(href) ? '_blank' : undefined}
+          rel={isExternalUrl(href) ? 'noreferrer' : undefined}
+        >
+          <span>{label}</span>
+          {icon && (
+            <span className="w-5">
+              <Icon name={icon} />
+            </span>
+          )}
+        </a>
+      </Link>
+    )
+  } else {
+    return (
+      <button
+        className={classnames(sharedClasses, themeClasses[theme])}
+        disabled={disabled}
+        onClick={action}
+        aria-label={label}
+      >
+        <span>{label}</span>
+        {icon && (
+          <span className="w-5">
+            <Icon name={icon} />
+          </span>
+        )}
+      </button>
+    )
+  }
+}

src/components/common/MainNavigation.tsx

@@ -15,6 +15,7 @@ const navLinks: Array<{ label: string; url: string; hideLg?: boolean }> = [
   { label: 'Non-Developers', url: '/docs/non-developers' },
   { label: 'Kinetic', url: '/docs/kinetic', hideLg: true },
   { label: 'Integrations', url: '/docs/integrations', hideLg: true },
+  { label: 'Kin Tools', url: '/tools', hideLg: true },
 ]
 
 const iconLinks: Array<{ label: string; icon: IconName; url: string }> = [