solana tools

examples/solana-tools/.gitignore

@@ -0,0 +1,39 @@
+
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+#cache
+.turbo
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# local env files
+.env*
+
+out/
+build/
+dist/
+
+# plasmo - https://www.plasmo.com
+.plasmo
+
+# bpp - http://bpp.browser.market/
+keys.json
+
+# typescript
+.tsbuildinfo

examples/solana-tools/.prettierrc.mjs

@@ -0,0 +1,26 @@
+/**
+ * @type {import('prettier').Options}
+ */
+export default {
+  printWidth: 80,
+  tabWidth: 2,
+  useTabs: false,
+  semi: false,
+  singleQuote: false,
+  trailingComma: "none",
+  bracketSpacing: true,
+  bracketSameLine: true,
+  plugins: ["@ianvs/prettier-plugin-sort-imports"],
+  importOrder: [
+    "<BUILTIN_MODULES>", // Node.js built-in modules
+    "<THIRD_PARTY_MODULES>", // Imports not matched by other special words or groups.
+    "", // Empty line
+    "^@plasmo/(.*)$",
+    "",
+    "^@plasmohq/(.*)$",
+    "",
+    "^~(.*)$",
+    "",
+    "^[./]"
+  ]
+}

examples/solana-tools/README.md

@@ -0,0 +1,33 @@
+This is a [Plasmo extension](https://docs.plasmo.com/) project bootstrapped with [`plasmo init`](https://www.npmjs.com/package/plasmo).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+pnpm dev
+# or
+npm run dev
+```
+
+Open your browser and load the appropriate development build. For example, if you are developing for the chrome browser, using manifest v3, use: `build/chrome-mv3-dev`.
+
+You can start editing the popup by modifying `popup.tsx`. It should auto-update as you make changes. To add an options page, simply add a `options.tsx` file to the root of the project, with a react component default exported. Likewise to add a content page, add a `content.ts` file to the root of the project, importing some module and do some logic, then reload the extension on your browser.
+
+For further guidance, [visit our Documentation](https://docs.plasmo.com/)
+
+## Making production build
+
+Run the following:
+
+```bash
+pnpm build
+# or
+npm run build
+```
+
+This should create a production bundle for your extension, ready to be zipped and published to the stores.
+
+## Submit to the webstores
+
+The easiest way to deploy your Plasmo extension is to use the built-in [bpp](https://bpp.browser.market) GitHub action. Prior to using this action however, make sure to build your extension and upload the first version to the store to establish the basic credentials. Then, simply follow [this setup instruction](https://docs.plasmo.com/framework/workflows/submit) and you should be on your way for automated submission!

examples/solana-tools/package.json

@@ -0,0 +1,33 @@
+{
+  "name": "solana-tools",
+  "displayName": "Solana tools",
+  "version": "0.0.1",
+  "description": "A chrome extension commuinicate with solana.",
+  "author": "v1xingyue<[email protected]>",
+  "scripts": {
+    "dev": "plasmo dev",
+    "build": "plasmo build",
+    "package": "plasmo package"
+  },
+  "dependencies": {
+    "plasmo": "0.84.0",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "tailwindcss": "3.3.5"
+  },
+  "devDependencies": {
+    "@ianvs/prettier-plugin-sort-imports": "4.1.1",
+    "@types/chrome": "0.0.251",
+    "@types/node": "20.9.0",
+    "@types/react": "18.2.37",
+    "@types/react-dom": "18.2.15",
+    "postcss": "8.4.31",
+    "prettier": "3.0.3",
+    "typescript": "5.2.2"
+  },
+  "manifest": {
+    "host_permissions": [
+      "https://*/*"
+    ]
+  }
+}

examples/solana-tools/postcss.config.js

@@ -0,0 +1,8 @@
+/**
+ * @type {import('postcss').ProcessOptions}
+ */
+module.exports = {
+  plugins: {
+    tailwindcss: {}
+  }
+}

examples/solana-tools/src/content.tsx

@@ -0,0 +1,24 @@
+import cssText from "data-text:~style.css"
+import type { PlasmoCSConfig } from "plasmo"
+
+import { CountButton } from "~features/count-button"
+
+export const config: PlasmoCSConfig = {
+  matches: ["https://www.plasmo.com/*"]
+}
+
+export const getStyle = () => {
+  const style = document.createElement("style")
+  style.textContent = cssText
+  return style
+}
+
+const PlasmoOverlay = () => {
+  return (
+    <div className="plasmo-z-50 plasmo-flex plasmo-fixed plasmo-top-32 plasmo-right-8">
+      <CountButton />
+    </div>
+  )
+}
+
+export default PlasmoOverlay

examples/solana-tools/src/features/count-button.tsx

@@ -0,0 +1,19 @@
+import { useReducer } from "react"
+
+export const CountButton = () => {
+  const [count, increase] = useReducer((c) => c + 1, 0)
+
+  return (
+    <button
+      onClick={() => increase()}
+      type="button"
+      className="plasmo-flex plasmo-flex-row plasmo-items-center plasmo-px-4 plasmo-py-2 plasmo-text-sm plasmo-rounded-lg plasmo-transition-all plasmo-border-none
+      plasmo-shadow-lg hover:plasmo-shadow-md
+      active:plasmo-scale-105 plasmo-bg-slate-50 hover:plasmo-bg-slate-100 plasmo-text-slate-800 hover:plasmo-text-slate-900">
+      Count:
+      <span className="plasmo-inline-flex plasmo-items-center plasmo-justify-center plasmo-w-8 plasmo-h-4 plasmo-ml-2 plasmo-text-xs plasmo-font-semibold plasmo-rounded-full">
+        {count}
+      </span>
+    </button>
+  )
+}

examples/solana-tools/src/popup.tsx

@@ -0,0 +1,13 @@
+import { CountButton } from "~features/count-button"
+
+import "~style.css"
+
+function IndexPopup() {
+  return (
+    <div className="plasmo-flex plasmo-items-center plasmo-justify-center plasmo-h-16 plasmo-w-40">
+      <CountButton />
+    </div>
+  )
+}
+
+export default IndexPopup

examples/solana-tools/src/style.css

@@ -0,0 +1,5 @@
+@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap");
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

examples/solana-tools/tailwind.config.js

@@ -0,0 +1,6 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: ["./src/**/*.{tsx,html}"],
+  darkMode: "media",
+  prefix: "plasmo-"
+}

examples/solana-tools/tsconfig.json

@@ -0,0 +1,19 @@
+{
+  "extends": "plasmo/templates/tsconfig.base",
+  "exclude": [
+    "node_modules"
+  ],
+  "include": [
+    ".plasmo/index.d.ts",
+    "./**/*.ts",
+    "./**/*.tsx"
+  ],
+  "compilerOptions": {
+    "paths": {
+      "~*": [
+        "./src/*"
+      ]
+    },
+    "baseUrl": "."
+  }
+}