cant use Solana web3.js v1 and Solana react assets. waiting for commu…

…nity v2 adopting.
elsoul · Nov 10, 2024 · 199c0bf · 199c0bf
1 parent 2ea1709
commit 199c0bf
Show file tree

Hide file tree

Showing 8 changed files with 322 additions and 552 deletions.
diff --git a/.env.sample b/.env.sample
@@ -0,0 +1,2 @@
+SOLANA_ENDPOINT=https://rpc.validators.solutions/rpc?api-key=<your-api-key>
+# SOLANA_PRICE_ENDPOINT=
diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
@@ -25,6 +25,11 @@ jobs:
         with:
           deno-version: v2.x
 
+      - name: Create .env file
+        run: |
+          echo "SOLANA_ENDPOINT=${{ secrets.SOLANA_ENDPOINT }}" > .env
+          echo "SOLANA_PRICE_ENDPOINT=${{ secrets.SOLANA_PRICE_ENDPOINT }}" >> .env
+
       - name: Build step
         run: "deno task build"
 

diff --git a/README.md b/README.md
@@ -43,7 +43,7 @@ Demo: https://fresh-solana.skeeter.dev/
 - [Fresh](https://fresh.deno.dev/)
 - [TypeScript](https://www.typescriptlang.org/)
 - [Tailwind CSS](https://tailwindcss.com/)
-- [Solana Web3.js (v2)](https://github.com/solana-labs/solana-web3.js/)
+- [Solana Web3.js](https://github.com/solana-labs/solana-web3.js/)
 
 ## Getting Started
 

diff --git a/deno.json b/deno.json
@@ -29,6 +29,7 @@
   ],
   "imports": {
     "@/": "./",
+    "@std/dotenv": "jsr:@std/[email protected]",
     "fresh": "jsr:@fresh/[email protected]",
     "@fresh/plugin-tailwind": "jsr:@fresh/[email protected]",
     "fresh-atom": "jsr:@elsoul/[email protected]",
@@ -40,6 +41,7 @@
     "preact/jsx-runtime": "npm:[email protected]/jsx-runtime",
     "react": "npm:[email protected]/compat",
     "react-dom": "npm:[email protected]/compat",
+    "@types/react": "npm:[email protected]/compat",
     "@preact/signals": "npm:@preact/[email protected]",
     "@preact/signals-core": "npm:@preact/[email protected]",
     "tailwindcss": "npm:[email protected]",

diff --git a/deno.lock b/deno.lock
diff --git a/routes/[locale]/(default)/blinks/(_rows)/BlinksHeroRow.tsx b/routes/[locale]/(default)/blinks/(_rows)/BlinksHeroRow.tsx
@@ -34,7 +34,6 @@ export default function BlinksHeroRow(
   { state }: Props,
 ) {
   const t = createTranslator(state.translationData)
-  console.log('BlinksHeroRow', state)
 
   return (
     <>

diff --git a/routes/_app.tsx b/routes/_app.tsx
@@ -125,6 +125,9 @@ export default define.page(function App({ Component, state, url }) {
         />
         <link rel='stylesheet' href={asset('/styles.css')} />
         <link rel='stylesheet' href={asset('/prism.css')} />
+        {url.href.includes('blinks') && (
+          <link rel='stylesheet' href={asset('/wallet-adapter.css')} />
+        )}
       </head>
       <body>
         <Component />

diff --git a/static/wallet-adapter.css b/static/wallet-adapter.css
@@ -0,0 +1,295 @@
+@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&display=swap');
+
+.wallet-adapter-button {
+    background-color: transparent;
+    border: none;
+    color: #fff;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    font-family: 'DM Sans', 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+    font-size: 16px;
+    font-weight: 600;
+    height: 48px;
+    line-height: 48px;
+    padding: 0 24px;
+    border-radius: 4px;
+}
+
+.wallet-adapter-button-trigger {
+    background-color: #512da8;
+}
+
+.wallet-adapter-button:not([disabled]):focus-visible {
+    outline-color: white;
+}
+
+.wallet-adapter-button:not([disabled]):hover {
+    background-color: #1a1f2e;
+}
+
+.wallet-adapter-button[disabled] {
+    background: #404144;
+    color: #999;
+    cursor: not-allowed;
+}
+
+.wallet-adapter-button-end-icon,
+.wallet-adapter-button-start-icon,
+.wallet-adapter-button-end-icon img,
+.wallet-adapter-button-start-icon img {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 24px;
+    height: 24px;
+}
+
+.wallet-adapter-button-end-icon {
+    margin-left: 12px;
+}
+
+.wallet-adapter-button-start-icon {
+    margin-right: 12px;
+}
+
+.wallet-adapter-collapse {
+    width: 100%;
+}
+
+.wallet-adapter-dropdown {
+    position: relative;
+    display: inline-block;
+}
+
+.wallet-adapter-dropdown-list {
+    position: absolute;
+    z-index: 99;
+    display: grid;
+    grid-template-rows: 1fr;
+    grid-row-gap: 10px;
+    padding: 10px;
+    top: 100%;
+    right: 0;
+    margin: 0;
+    list-style: none;
+    background: #2c2d30;
+    border-radius: 10px;
+    box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.6);
+    opacity: 0;
+    visibility: hidden;
+    transition: opacity 200ms ease, transform 200ms ease, visibility 200ms;
+    font-family: 'DM Sans', 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+}
+
+.wallet-adapter-dropdown-list-active {
+    opacity: 1;
+    visibility: visible;
+    transform: translateY(10px);
+}
+
+.wallet-adapter-dropdown-list-item {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    border: none;
+    outline: none;
+    cursor: pointer;
+    white-space: nowrap;
+    box-sizing: border-box;
+    padding: 0 20px;
+    width: 100%;
+    border-radius: 6px;
+    font-size: 14px;
+    font-weight: 600;
+    height: 37px;
+    color: #fff;
+}
+
+.wallet-adapter-dropdown-list-item:not([disabled]):hover {
+    background-color: #1a1f2e;
+}
+
+.wallet-adapter-modal-collapse-button svg {
+    align-self: center;
+    fill: #999;
+}
+
+.wallet-adapter-modal-collapse-button.wallet-adapter-modal-collapse-button-active svg {
+    transform: rotate(180deg);
+    transition: transform ease-in 150ms;
+}
+
+.wallet-adapter-modal {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    opacity: 0;
+    transition: opacity linear 150ms;
+    background: rgba(0, 0, 0, 0.5);
+    z-index: 1040;
+    overflow-y: auto;
+}
+
+.wallet-adapter-modal.wallet-adapter-modal-fade-in {
+    opacity: 1;
+}
+
+.wallet-adapter-modal-button-close {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: absolute;
+    top: 18px;
+    right: 18px;
+    padding: 12px;
+    cursor: pointer;
+    background: #1a1f2e;
+    border: none;
+    border-radius: 50%;
+}
+
+.wallet-adapter-modal-button-close:focus-visible {
+    outline-color: white;
+}
+
+.wallet-adapter-modal-button-close svg {
+    fill: #777;
+    transition: fill 200ms ease 0s;
+}
+
+.wallet-adapter-modal-button-close:hover svg {
+    fill: #fff;
+}
+
+.wallet-adapter-modal-overlay {
+    background: rgba(0, 0, 0, 0.5);
+    position: fixed;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+}
+
+.wallet-adapter-modal-container {
+    display: flex;
+    margin: 3rem;
+    min-height: calc(100vh - 6rem); /* 100vh - 2 * margin */
+    align-items: center;
+    justify-content: center;
+}
+
+@media (max-width: 480px) {
+    .wallet-adapter-modal-container {
+        margin: 1rem;
+        min-height: calc(100vh - 2rem); /* 100vh - 2 * margin */
+    }
+}
+
+.wallet-adapter-modal-wrapper {
+    box-sizing: border-box;
+    position: relative;
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    z-index: 1050;
+    max-width: 400px;
+    border-radius: 10px;
+    background: #10141f;
+    box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.6);
+    font-family: 'DM Sans', 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+    flex: 1;
+}
+
+.wallet-adapter-modal-wrapper .wallet-adapter-button {
+    width: 100%;
+}
+
+.wallet-adapter-modal-title {
+    font-weight: 500;
+    font-size: 24px;
+    line-height: 36px;
+    margin: 0;
+    padding: 64px 48px 48px 48px;
+    text-align: center;
+    color: #fff;
+}
+
+@media (max-width: 374px) {
+    .wallet-adapter-modal-title {
+        font-size: 18px;
+    }
+}
+
+.wallet-adapter-modal-list {
+    margin: 0 0 12px 0;
+    padding: 0;
+    width: 100%;
+    list-style: none;
+}
+
+.wallet-adapter-modal-list .wallet-adapter-button {
+    font-weight: 400;
+    border-radius: 0;
+    font-size: 18px;
+}
+
+.wallet-adapter-modal-list .wallet-adapter-button-end-icon,
+.wallet-adapter-modal-list .wallet-adapter-button-start-icon,
+.wallet-adapter-modal-list .wallet-adapter-button-end-icon img,
+.wallet-adapter-modal-list .wallet-adapter-button-start-icon img {
+    width: 28px;
+    height: 28px;
+}
+
+.wallet-adapter-modal-list .wallet-adapter-button span {
+    margin-left: auto;
+    font-size: 14px;
+    opacity: .6;
+}
+
+.wallet-adapter-modal-list-more {
+    cursor: pointer;
+    border: none;
+    padding: 12px 24px 24px 12px;
+    align-self: flex-end;
+    display: flex;
+    align-items: center;
+    background-color: transparent;
+    color: #fff;
+}
+
+.wallet-adapter-modal-list-more svg {
+    transition: all 0.1s ease;
+    fill: rgba(255, 255, 255, 1);
+    margin-left: 0.5rem;
+}
+
+.wallet-adapter-modal-list-more-icon-rotate {
+    transform: rotate(180deg);
+}
+
+.wallet-adapter-modal-middle {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 0 24px 24px 24px;
+    box-sizing: border-box;
+}
+
+.wallet-adapter-modal-middle-button {
+    display: block;
+    cursor: pointer;
+    margin-top: 48px;
+    width: 100%;
+    background-color: #512da8;
+    padding: 12px;
+    font-size: 18px;
+    border: none;
+    border-radius: 8px;
+    color: #fff;
+}
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		SOLANA_ENDPOINT=https://rpc.validators.solutions/rpc?api-key=<your-api-key>
		# SOLANA_PRICE_ENDPOINT=