create-bch-dapp 0.2.0

package/dist/index.js

@@ -0,0 +1,14 @@
+#!/usr/bin/env node
+import d from"fs";import m from"fs/promises";import c from"path";import{spawn as _}from"child_process";import s from"kleur";import g from"ora";import{input as j,select as p}from"@inquirer/prompts";import{fileURLToPath as k}from"url";var T="2684b13f5add72d95b5cf00ddea3dd4f",f={reactVite:{label:"React + Vite",path:"../templates/react-ts-vite"},nextjs:{label:"Next.js",path:"../templates/nextjs"}},C=k(import.meta.url),x=c.dirname(C);function N(e){return d.existsSync(e)?d.readdirSync(e).length===0:!0}function R(e){return e.trim().toLowerCase().replace(/\s+/g,"-").replace(/[^a-z0-9._-]/g,"-").replace(/-+/g,"-").replace(/^-|-$/g,"")}async function v(e,a){await m.mkdir(a,{recursive:!0});let t=await m.readdir(e,{withFileTypes:!0});for(let r of t){let n=c.join(e,r.name),o=c.join(a,r.name);new Set(["node_modules",".next","dist",".git",".DS_Store","bun.lockb","package-lock.json","pnpm-lock.yaml","yarn.lock"]).has(r.name)||(r.isDirectory()?await v(n,o):r.isFile()&&(r.name==="_gitignore"?await m.copyFile(n,c.join(a,".gitignore")):await m.copyFile(n,o)))}}async function S(e,a,t){let r=t==="nextjs"?".env.local":".env",n=c.join(e,r),o=`# BCH Connect starter
+VITE_BCH_NETWORK=${a.network}
+VITE_REOWN_PROJECT_ID=${a.projectId}
+`,i=`# BCH Connect starter
+NEXT_PUBLIC_BCH_NETWORK=${a.network}
+NEXT_PUBLIC_REOWN_PROJECT_ID=${a.projectId}
+`,u=t==="reactVite"?o:i;await m.writeFile(n,u,"utf8")}async function D(e,a){let t=c.join(e,"package.json"),r=await m.readFile(t,"utf8"),n=JSON.parse(r);n.name=R(a),n.dependencies&&typeof n.dependencies=="object"&&"bch-connect"in n.dependencies&&(n.dependencies["bch-connect"]="latest"),await m.writeFile(t,JSON.stringify(n,null,2)+`
+`,"utf8")}async function h(e,a,t,{silent:r=!1}={}){return new Promise(n=>{_(a,t,{cwd:e,stdio:r?"ignore":"inherit",shell:process.platform==="win32"}).on("close",i=>n(i??1))})}function O(e){switch(e){case"bun":return{cmd:"bun",args:["install"]};case"pnpm":return{cmd:"pnpm",args:["install"]};case"yarn":return{cmd:"yarn",args:["install"]};case"npm":default:return{cmd:"npm",args:["install"]}}}function F(e){switch(e){case"bun":return{cmd:"bun",args:["run","dev"]};case"pnpm":return{cmd:"pnpm",args:["dev"]};case"yarn":return{cmd:"yarn",args:["dev"]};case"npm":default:return{cmd:"npm",args:["run","dev"]}}}async function $(){let a=process.argv[2]?.trim()||await j({message:"Your project name",default:"my-bch-dapp"}),t=c.resolve(process.cwd(),a);d.existsSync(t)&&!N(t)&&(console.error(s.red(`\u2716 Target directory already exists and is not empty: ${t}`)),process.exit(1));let r=await p({message:"Choose a template",default:"reactVite",choices:[{name:f.reactVite.label,value:"reactVite"},{name:f.nextjs.label,value:"nextjs"}]}),n=c.resolve(x,f[r].path);d.existsSync(n)||(console.error(s.red(`Template not found at: ${n}`)),process.exit(1));let o=await p({message:"Package manager",default:"bun",choices:[{name:"bun",value:"bun"},{name:"npm",value:"npm"},{name:"pnpm",value:"pnpm"},{name:"yarn",value:"yarn"}]}),i=await p({message:"Reown Project ID",default:"default",choices:[{name:"Use public ID (localhost only)",value:"default"},{name:"Enter my own ID (required for production)",value:"custom"}]}),u=i==="custom"?await j({message:"Paste your Reown Project ID",validate(l){return l.trim()?l.trim().length<16?"That does not look like a valid Project ID.":!0:"Project ID is required."}}):T,P=await p({message:"Network",default:"mainnet",choices:[{name:"Mainnet",value:"mainnet"},{name:"Testnet",value:"testnet"}]}),w=g("Creating project\u2026").start();try{await v(n,t),await D(t,a),await S(t,{projectId:u,network:P},r),w.succeed("Project created")}catch(l){w.fail("Failed to create project"),console.error(l),process.exit(1)}{let{cmd:l,args:y}=O(o);g(`Installing dependencies (${o})\u2026`).start().stop(),await h(t,l,y)!==0&&(console.error(s.red(`
+\u2716 Install failed. Run it manually:
+  cd ${a}
+  ${l} ${y.join(" ")}
+`)),process.exit(1)),g().succeed("Dependencies installed")}console.log(""),console.log(s.green().bold("\u2713 Starting dev server\u2026")),console.log(s.dim(`  (running in ${t})`)),console.log(s.dim(`  Press Ctrl+C to stop.
+`)),i==="default"&&(console.log(s.yellow("Note:")+" Using a public localhost-only Reown Project ID. Replace it before production."),console.log(s.dim("      Update `.env` and create your own Project ID at: https://dashboard.reown.com/\n")));let{cmd:b,args:I}=F(o),E=await h(t,b,I);process.exit(E)}$().catch(e=>{console.error(s.red(String(e))),process.exit(1)});

package/package.json

@@ -0,0 +1,33 @@
+{
+  "name": "create-bch-dapp",
+  "version": "0.2.0",
+  "private": false,
+  "type": "module",
+  "bin": {
+    "create-bch-dapp": "dist/index.js"
+  },
+  "files": [
+    "dist",
+    "templates"
+  ],
+  "scripts": {
+    "dev": "bun run src/index.ts",
+    "build": "tsup",
+    "build:prod": "tsup --minify",
+    "lint": "eslint .",
+    "test": "vitest"
+  },
+  "dependencies": {
+    "@inquirer/prompts": "^8.1.0",
+    "kleur": "^4.1.5",
+    "ora": "^9.0.0"
+  },
+  "devDependencies": {
+    "@types/node": "^25.0.3",
+    "tsup": "^8.5.1",
+    "typescript": "^5.0.0"
+  },
+  "engines": {
+    "node": ">=18"
+  }
+}

package/templates/nextjs/README.md

@@ -0,0 +1,36 @@
+This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+
+This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.

package/templates/nextjs/_gitignore

@@ -0,0 +1,41 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/versions
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# env files (can opt-in for committing if needed)
+.env*
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

package/templates/nextjs/app/BCHConnectWrapper.tsx

@@ -0,0 +1,35 @@
+"use client";
+
+import type { ReactNode } from "react";
+import { useEffect, useState } from "react";
+import { BCHConnectProvider, createConfig, CreatedConfig } from "bch-connect";
+
+export function BCHConnectWrapper({ children }: { children: ReactNode }) {
+  const [config, setConfig] = useState<CreatedConfig | null>(null);
+
+  useEffect(() => {
+    if (config) return;
+    const network =
+      process.env.NEXT_PUBLIC_BCH_NETWORK === "testnet" ? "testnet" : "mainnet";
+
+    const projectId = process.env.NEXT_PUBLIC_REOWN_PROJECT_ID || "";
+
+    const cfg = createConfig({
+      projectId,
+      network,
+      metadata: {
+        name: "BCH Connect Starter",
+        description:
+          "You can change this metadata in the app/BCHConnectWrapper.tsx file.",
+        url: "http://localhost:3000",
+        icons: ["http://localhost:3000/bch.svg"],
+      },
+    });
+
+    setConfig(cfg);
+  }, []);
+
+  if (!config) return null;
+
+  return <BCHConnectProvider config={config}>{children}</BCHConnectProvider>;
+}

package/templates/nextjs/app/globals.css

@@ -0,0 +1,220 @@
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+:root {
+  font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+
+  color-scheme: light dark;
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #242424;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+a {
+  font-weight: 500;
+  color: #646cff;
+  text-decoration: inherit;
+}
+a:hover {
+  color: #535bf2;
+}
+
+body {
+  margin: 0;
+  display: flex;
+  place-items: center;
+  min-width: 320px;
+  min-height: 100vh;
+}
+
+h1 {
+  font-size: 3.2em;
+  line-height: 1.1;
+}
+
+.container {
+  margin: 0 auto;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+button {
+  border-radius: 8px;
+  border: 1px solid transparent;
+  padding: 0.6em 1.2em;
+  font-size: 1em;
+  font-weight: 500;
+  font-family: inherit;
+  background-color: #1a1a1a;
+  cursor: pointer;
+  transition: border-color 0.25s;
+}
+button:hover {
+  border-color: #646cff;
+}
+button:focus,
+button:focus-visible {
+  outline: 4px auto -webkit-focus-ring-color;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    color: #213547;
+    background-color: #ffffff;
+  }
+  a:hover {
+    color: #747bff;
+  }
+  button {
+    background-color: #f9f9f9;
+  }
+}
+
+#root {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+  text-align: center;
+}
+
+.title {
+  font-size: 2.5rem;
+  line-height: 1.1;
+  margin-top: 0.25rem;
+}
+
+.brand-logos {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 0.25rem;
+}
+
+.brand-logos .logo {
+  width: 7.5rem;
+  height: auto;
+  padding: 1.1rem;
+  will-change: filter;
+  transition: filter 300ms;
+}
+
+.brand-logos .logo:hover {
+  filter: drop-shadow(0 0 2em #ffffffac);
+}
+
+.brand-logos .logo.react:hover {
+  filter: drop-shadow(0 0 2em #61dafbaa);
+}
+
+.brand-logos .logo.bch:hover {
+  filter: drop-shadow(0 0 2em #2ecc71aa);
+}
+
+@keyframes logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  a:nth-of-type(2) .logo {
+    animation: logo-spin infinite 20s linear;
+  }
+}
+
+.card {
+  padding: 2em;
+}
+
+.bchc-card {
+  display: grid;
+  gap: 0.9rem;
+  justify-items: center;
+}
+
+.bchc-primary {
+  min-width: 250px;
+}
+
+.bchc-actions {
+  display: flex;
+  gap: 0.75rem;
+  flex-wrap: wrap;
+  justify-content: center;
+}
+
+.bchc-actions > button {
+  min-width: 250px;
+}
+
+.bchc-status {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.6rem;
+  padding: 0.35rem 0.7rem;
+  border-radius: 999px;
+  border: 1px solid rgba(255, 255, 255, 0.12);
+  background: rgba(255, 255, 255, 0.04);
+}
+
+.bchc-dot {
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  background: #888;
+  display: inline-block;
+}
+
+.bchc-status[data-connected="true"] .bchc-dot {
+  background: #2ecc71;
+}
+
+.bchc-statusText {
+  font-size: 0.95rem;
+  opacity: 0.9;
+}
+
+.bchc-panel {
+  width: min(680px, 92vw);
+  text-align: left;
+  padding: 0.75rem;
+  border-radius: 12px;
+  border: 1px solid rgba(255, 255, 255, 0.12);
+  background: rgba(255, 255, 255, 0.04);
+}
+
+.bchc-panel--error {
+  border-color: rgba(255, 255, 255, 0.14);
+  background: rgba(255, 80, 80, 0.08);
+}
+
+.bchc-panelTitle {
+  font-weight: 600;
+  margin-bottom: 6px;
+}
+
+.bchc-panelBody {
+  opacity: 0.9;
+}
+
+.bchc-code {
+  word-break: break-word;
+}
+
+.bchc-footer {
+  margin: 0.15rem 0 0;
+  opacity: 0.75;
+}

package/templates/nextjs/app/layout.tsx

@@ -0,0 +1,33 @@
+import type { Metadata } from "next";
+import { Geist, Geist_Mono } from "next/font/google";
+import "./globals.css";
+import { BCHConnectWrapper } from "./BCHConnectWrapper";
+
+const geistSans = Geist({
+  variable: "--font-geist-sans",
+  subsets: ["latin"],
+});
+
+const geistMono = Geist_Mono({
+  variable: "--font-geist-mono",
+  subsets: ["latin"],
+});
+
+export const metadata: Metadata = {
+  title: "BCH Connect Starter",
+  description: "BCH Connect starter powered by Next.js",
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en">
+      <body className={`${geistSans.variable} ${geistMono.variable}`}>
+        <BCHConnectWrapper>{children}</BCHConnectWrapper>
+      </body>
+    </html>
+  );
+}

package/templates/nextjs/app/page.tsx

@@ -0,0 +1,174 @@
+"use client";
+// REMOVE ALL THIS STUFF TO START BUILDING YOUR DAPP
+import { useState } from "react";
+import Image from "next/image";
+import { useSignMessage, useWallet } from "bch-connect";
+
+function shortAddress(address: string): string {
+  const addr = address.replace(/^bitcoincash:/, "");
+  if (addr.length <= 18) return addr;
+  return `${addr.slice(0, 8)}…${addr.slice(-8)}`;
+}
+
+export default function Home() {
+  const {
+    connect,
+    disconnect,
+    isConnected,
+    address,
+    isError,
+    connectError,
+    disconnectError,
+    addressError,
+    tokenAddressError,
+  } = useWallet();
+
+  const { signMessage } = useSignMessage();
+
+  const [signature, setSignature] = useState<string | null>(null);
+  const [isSigning, setIsSigning] = useState(false);
+  const [signError, setSignError] = useState<string | null>(null);
+
+  const statusText =
+    isConnected && address ? shortAddress(address) : "Not connected";
+
+  const walletError =
+    connectError?.message ??
+    disconnectError?.message ??
+    addressError?.message ??
+    tokenAddressError?.message;
+
+  function handleConnect() {
+    setSignError(null);
+    setSignature(null);
+    void connect();
+  }
+
+  function handleDisconnect() {
+    setSignError(null);
+    setSignature(null);
+    void disconnect();
+  }
+
+  async function handleSignMessage() {
+    setIsSigning(true);
+    setSignError(null);
+    setSignature(null);
+
+    try {
+      const sig = await signMessage({
+        message: "Bitcoin is cash!",
+        userPrompt: "Sign demo message",
+      });
+
+      if (!sig) throw new Error("No signature returned.");
+      setSignature(sig);
+    } catch (e) {
+      const details = e instanceof Error ? e.message : JSON.stringify(e);
+      setSignError(`Failed to sign: ${details}`);
+    } finally {
+      setIsSigning(false);
+    }
+  }
+
+  return (
+    <div className="container">
+      <div className="brand-logos">
+        <a href="https://nextjs.org" target="_blank" rel="noreferrer">
+          <Image
+            className="logo"
+            src="/next.svg"
+            alt="Next.js logo"
+            width={96}
+            height={20}
+            priority
+          />
+        </a>
+
+        <a href="https://react.dev" target="_blank" rel="noreferrer">
+          <Image
+            className="logo react"
+            src="/react.svg"
+            alt="React logo"
+            width={56}
+            height={56}
+            priority
+          />
+        </a>
+
+        <a href="https://bchconnect.dev" target="_blank" rel="noreferrer">
+          <Image
+            className="logo bch"
+            src="/bch.svg"
+            alt="BCH Connect logo"
+            width={56}
+            height={56}
+            priority
+          />
+        </a>
+      </div>
+
+      <h1 className="title">BCH Connect Starter</h1>
+
+      <div className="card">
+        <div className="bchc-card">
+          {!isConnected ? (
+            <button
+              className="bchc-primary"
+              onClick={handleConnect}
+              disabled={isSigning}
+            >
+              Connect wallet
+            </button>
+          ) : (
+            <div className="bchc-actions">
+              <button onClick={handleSignMessage} disabled={isSigning}>
+                {isSigning ? "Sign in your wallet…" : "Sign a message"}
+              </button>
+
+              <button onClick={handleDisconnect} disabled={isSigning}>
+                Disconnect
+              </button>
+            </div>
+          )}
+
+          <div
+            className="bchc-status"
+            data-connected={isConnected ? "true" : "false"}
+          >
+            <span className="bchc-dot" aria-hidden="true" />
+            <span className="bchc-statusText">{statusText}</span>
+          </div>
+
+          {signError ? (
+            <div className="bchc-panel bchc-panel--error">
+              <div className="bchc-panelTitle">Error</div>
+              <div className="bchc-panelBody">{signError}</div>
+            </div>
+          ) : null}
+
+          {isError && walletError ? (
+            <div className="bchc-panel bchc-panel--error">
+              <div className="bchc-panelTitle">Wallet error</div>
+              <div className="bchc-panelBody">{walletError}</div>
+            </div>
+          ) : null}
+
+          {signature ? (
+            <div className="bchc-panel">
+              <div className="bchc-panelTitle">Message signature</div>
+              <code className="bchc-code">{signature}</code>
+            </div>
+          ) : null}
+
+          <p className="bchc-footer">
+            Edit <code>app/page.tsx</code>.{" "}
+            <a href="https://bchconnect.dev" target="_blank" rel="noreferrer">
+              BCH Connect Docs
+            </a>
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+}

package/templates/nextjs/next-env.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+import "./.next/dev/types/routes.d.ts";
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

package/templates/nextjs/next.config.ts

@@ -0,0 +1,7 @@
+import type { NextConfig } from "next";
+
+const nextConfig: NextConfig = {
+  transpilePackages: ["bch-connect"],
+};
+
+export default nextConfig;

package/templates/nextjs/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "nextjs",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start"
+  },
+  "dependencies": {
+    "bch-connect": "^0.2.0",
+    "next": "16.1.1",
+    "react": "19.2.3",
+    "react-dom": "19.2.3"
+  },
+  "devDependencies": {
+    "@types/node": "^20",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "babel-plugin-react-compiler": "1.0.0",
+    "typescript": "^5"
+  },
+  "ignoreScripts": [
+    "sharp",
+    "unrs-resolver"
+  ],
+  "trustedDependencies": [
+    "sharp",
+    "unrs-resolver"
+  ]
+}

package/templates/nextjs/public/bch.svg

@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.1.3, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 788 788" style="enable-background:new 0 0 788 788;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#0AC18E;}
+	.st1{fill:#FFFFFF;}
+</style>
+<circle class="st0" cx="394" cy="394" r="394"/>
+<path id="symbol_1_" class="st1" d="M516.9,261.7c-19.8-44.9-65.3-54.5-121-45.2L378,147.1l-42.2,10.9l17.6,69.2
+	c-11.1,2.8-22.5,5.2-33.8,8.4L302,166.8l-42.2,10.9l17.9,69.4c-9.1,2.6-85.2,22.1-85.2,22.1l11.6,45.2c0,0,31-8.7,30.7-8
+	c17.2-4.5,25.3,4.1,29.1,12.2l49.2,190.2c0.6,5.5-0.4,14.9-12.2,18.1c0.7,0.4-30.7,7.9-30.7,7.9l4.6,52.7c0,0,75.4-19.3,85.3-21.8
+	l18.1,70.2l42.2-10.9l-18.1-70.7c11.6-2.7,22.9-5.5,33.9-8.4l18,70.3l42.2-10.9l-18.1-70.1c65-15.8,110.9-56.8,101.5-119.5
+	c-6-37.8-47.3-68.8-81.6-72.3C519.3,324.7,530,297.4,516.9,261.7L516.9,261.7z M496.6,427.2c8.4,62.1-77.9,69.7-106.4,77.2
+	l-24.8-92.9C394,404,482.4,372.5,496.6,427.2z M444.6,300.7c8.9,55.2-64.9,61.6-88.7,67.7l-22.6-84.3
+	C357.2,278.2,426.5,249.6,444.6,300.7z"/>
+</svg>

package/templates/nextjs/public/next.svg

@@ -0,0 +1,20 @@
+<svg xmlns="http://www.w3.org/2000/svg" data-testid="geist-icon" height="16" stroke-linejoin="round" style="color:currentColor" viewBox="0 0 16 16" width="16"><g clip-path="url(#clip0_53_108)">
+  <circle cx="8" cy="8" r="7.375" fill="black" stroke="var(--ds-gray-1000)" strokewidth="1.25" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M10.63 11V5" stroke="url(#paint0_linear_53_108vsxrmxu21)" strokewidth="1.25" stroke-miterlimit="1.41421"/>
+  <path fill-rule="evenodd" cliprule="evenodd" d="M5.995 5.00087V5H4.745V11H5.995V6.96798L12.3615 14.7076C12.712 14.4793 13.0434 14.2242 13.353 13.9453L5.99527 5.00065L5.995 5.00087Z" fill="url(#paint1_linear_53_108vsxrmxu21)"/>
+  </g>
+  <defs>
+  <linearGradient id="paint0_linear_53_108vsxrmxu21" x1="11.13" y1="5" x2="11.13" y2="11" gradientUnits="userSpaceOnUse">
+  <stop stop-color="white"/>
+  <stop offset="0.609375" stop-color="white" stop-opacity="0.57"/>
+  <stop offset="0.796875" stop-color="white" stop-opacity="0"/>
+  <stop offset="1" stop-color="white" stop-opacity="0"/>
+  </linearGradient>
+  <linearGradient id="paint1_linear_53_108vsxrmxu21" x1="9.9375" y1="9.0625" x2="13.5574" y2="13.3992" gradientUnits="userSpaceOnUse">
+  <stop stop-color="white"/>
+  <stop offset="1" stop-color="white" stop-opacity="0"/>
+  </linearGradient>
+  <clipPath id="clip0_53_108">
+  <rect width="16" height="16" fill="red"/>
+  </clipPath>
+  </defs></svg>