Skip to content

Commit

Permalink
chore: update examples and deps updates
Browse files Browse the repository at this point in the history
  • Loading branch information
hugomrdias committed Sep 3, 2024
1 parent 94f8792 commit 19d35a2
Show file tree
Hide file tree
Showing 17 changed files with 2,963 additions and 2,835 deletions.
24 changes: 12 additions & 12 deletions examples/demo/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -52,32 +52,32 @@
},
"dependencies": {
"@acab/reset.css": "^0.10.0",
"@preact/signals": "^1.2.2",
"@tanstack/react-query": "^5.49.2",
"@preact/signals": "^1.3.0",
"@tanstack/react-query": "^5.52.2",
"clsx": "^2.1.0",
"dns-over-http-resolver": "^3.0.2",
"dns-over-http-resolver": "^3.0.3",
"filsnap-adapter": "workspace:*",
"filsnap-adapter-react": "workspace:*",
"iso-base": "^4.0.0",
"iso-filecoin": "^4.1.0",
"preact": "^10.22.1",
"react-hook-form": "^7.52.1",
"react-hook-form": "^7.53.0",
"react-toastify": "^10.0.5",
"viem": "^2.17.0",
"wagmi": "^2.10.9",
"viem": "^2.20.1",
"wagmi": "^2.12.7",
"water.css": "^2.1.1"
},
"devDependencies": {
"@babel/core": "^7.24.7",
"@babel/core": "^7.25.2",
"@biomejs/biome": "^1.8.3",
"@hugomrdias/configs": "^0.1.8",
"@preact/preset-vite": "^2.8.3",
"@types/node": "^20.14.9",
"@preact/preset-vite": "^2.9.0",
"@types/node": "^22.5.2",
"react": "^18.2.0",
"tiny-git-rev-sync": "^0.1.0",
"typescript": "5.5.3",
"vite": "^5.3.3",
"wireit": "^0.14.4"
"typescript": "5.5.4",
"vite": "^5.4.2",
"wireit": "^0.14.8"
},
"depcheck": {
"specials": [
Expand Down
148 changes: 33 additions & 115 deletions examples/demo/src/app.jsx
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
import Resolver from 'dns-over-http-resolver'
import { clsx } from 'clsx'
import { useFilsnap } from 'filsnap-adapter-react'
import { useEffect, useState } from 'preact/hooks'
import { ToastContainer } from 'react-toastify'
import { ToastContainer, toast } from 'react-toastify'

import ConnectFEVM from './components/connect-fevm.jsx'
import Connect from './components/connect.jsx'
import ConnectAll from './components/connect-all.jsx'
import Forward from './components/forward.tsx'
import InstallMetamask from './components/install-mm.jsx'
import Links from './components/links.jsx'
import Network from './components/network.jsx'
import Account from './components/rpc.jsx'
import Send from './components/send.tsx'
Expand All @@ -15,130 +15,48 @@ import SignMessage from './components/sign-message.jsx'
* App component.
*/
export function App() {
const { isConnected, snap } = useFilsnap()
const [cid, setCid] = /** @type {typeof useState<string>} */ (useState)()
useEffect(() => {
/**
*
*/
async function main() {
try {
if (window.location.host.includes('ipfs.dweb.link')) {
const cid = window.location.host.split('.')[0]
setCid(cid)
return
}
const dnsRecord = await new Resolver().resolve(
`_dnslink.${window.location.host}`,
'TXT'
)
setCid(dnsRecord[0][0].replace('dnslink=/ipfs/', ''))
} catch {
// noop
}
}
const { isLoading, isConnected, snap, provider, error } = useFilsnap()

main()
}, [setCid])
if (error) {
console.error(error)
toast.error(error.message, { toastId: error.message })
}

return (
<main class="App">
<h1>⨎ Filecoin Wallet</h1>
<div class="Grid">
<Connect />
<Network />
{isConnected && (
{isLoading && (
<div
class={clsx(
'Cell100',
'Box',

'u-AlignCenter'
)}
>
<div>Loading...</div>
</div>
)}
{!provider && !isLoading && <InstallMetamask />}
{provider && !isLoading && (
<>
<Network />
<ConnectAll />
</>
)}
{isConnected && <Send />}
{isConnected && <Forward />}
{snap && (
<>
<Send />
<ConnectFEVM />
<Forward />
<details class="Cell100">
<summary>Advanced</summary>
<Account />
<SignMessage />
</details>
</>
)}
<div class="Cell100 Box">
<h3>Links</h3>
<ul>
<li>
{' '}
Docs:{' '}
<a
target="_blank"
href="https://filecoin-project.github.io/filsnap/"
rel="noreferrer"
>
filecoin-project.github.io/filsnap
</a>
</li>
<li>
{' '}
Github:{' '}
<a
target="_blank"
href="https://github.com/filecoin-project/filsnap"
rel="noreferrer"
>
github.com/filecoin-project/filsnap
</a>
</li>
<li>
{' '}
CID:{' '}
<a
target="_blank"
href={`https://${cid}.ipfs.dweb.link/`}
rel="noreferrer"
>
{cid || 'unknown'}
</a>
</li>
<li>
{' '}
Release Job:{' '}
<a
target="_blank"
href={`https://github.com/filecoin-project/filsnap/actions/runs/${
import.meta.env.GITHUB_WORKFLOW_ID
}`}
rel="noreferrer"
>
{import.meta.env.GITHUB_WORKFLOW_ID || 'unknown'}
</a>
</li>
<li>
{' '}
Git:{' '}
<code>
{import.meta.env.GIT_BRANCH}{' '}
<a
title="Commit hash"
target="_blank"
href={`https://github.com/filecoin-project/filsnap/commit/${
import.meta.env.GIT_COMMIT_HASH
}`}
rel="noreferrer"
>
{import.meta.env.GIT_COMMIT_HASH.slice(0, 7)}
</a>{' '}
{import.meta.env.GIT_DATE}
</code>
</li>
<li>
{' '}
Snap:{' '}
<a
target="_blank"
href={`https://www.npmjs.com/package/filsnap/v/${snap?.snapVersion}#user-content-provenance`}
rel="noreferrer"
>
{snap?.snapVersion || 'unknown'}
</a>
</li>
</ul>
</div>
<Links />
</div>
<ToastContainer theme="dark" position="bottom-right" />
</main>
Expand Down
88 changes: 88 additions & 0 deletions examples/demo/src/components/connect-all.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,88 @@
import { clsx } from 'clsx'
import { useFilsnap } from 'filsnap-adapter-react'
import { Token } from 'iso-filecoin/token'
import { useAccount, useBalance } from 'wagmi'
import ExplorerLink from './explorer-link.jsx'

/**
* @typedef {import('filsnap-adapter-react').} FilsnapContext
*/

/**
* Connect to the network.
*/
export default function ConnectAll() {
const {
isConnected: isConnectedSnap,
account,
connect,
disconnect,
config,
} = useFilsnap()
const { isConnected: isConnectedWagmi, address } = useAccount()
const { data } = useBalance({
address,
})

const isConnected = isConnectedWagmi && isConnectedSnap

let out = null

if (!isConnected) {
out = (
<button
type="button"
data-testid="connect-snap"
onClick={() => {
connect()
}}
>
Connect
</button>
)
}

if (isConnected) {
out = (
<>
<h3>Native Account</h3>
<div>
<b>
{account
? Token.fromAttoFIL(account.balance).toFIL().toFormat()
: 'unknown'}{' '}
{config.unit.symbol}
</b>
</div>
<span data-testid="account-info">
<ExplorerLink address={account.address} chain="filecoin" />
</span>
<br />
<h3>FEVM Account</h3>
<div>
<b>
{data?.formatted} {data?.symbol}
</b>
</div>
<ExplorerLink address={address} chain="ethereum" />
<ExplorerLink address={address} chain="filecoin" />
<br />
<button
type="button"
data-testid="connect-snap"
onClick={() => {
disconnect()
}}
>
Disconnect
</button>
</>
)
}

return (
<div class={clsx('Cell100', 'Box', !isConnected && 'u-AlignCenter')}>
{out}
</div>
)
}
58 changes: 0 additions & 58 deletions examples/demo/src/components/connect-fevm.jsx

This file was deleted.

Loading

0 comments on commit 19d35a2

Please sign in to comment.