A small web frontend

npm install @near-wallet-selector/core @near-wallet-selector/modal-ui \
  @near-wallet-selector/my-near-wallet @near-js/providers @near-js/utils

import { setupWalletSelector, actionCreators, type WalletSelector } from '@near-wallet-selector/core'
import { setupModal, type WalletSelectorModal } from '@near-wallet-selector/modal-ui'
import { setupMyNearWallet } from '@near-wallet-selector/my-near-wallet'
import { JsonRpcProvider } from '@near-js/providers'
import { parseNearAmount } from '@near-js/utils'
import '@near-wallet-selector/modal-ui/styles.css'

export const CONTRACT_ID = 'crowdfund.you.testnet'
const provider = new JsonRpcProvider({ url: 'https://rpc.testnet.near.org' })

let selector: WalletSelector
let modal: WalletSelectorModal

export async function initNear() {
  selector = await setupWalletSelector({
    network: 'testnet',
    modules: [setupMyNearWallet()], // add more wallet modules here
  })
  modal = setupModal(selector, { contractId: CONTRACT_ID })
}

export const signIn = () => modal.show()
export const signOut = async () => (await selector.wallet()).signOut()

export function accountId(): string | null {
  const active = selector.store.getState().accounts.find((a) => a.active)
  return active?.accountId ?? null
}

// ---- views: free, no wallet needed ----

export type CampaignView = {
  id: number
  creator: string
  title: string
  goal: string   // U128: yoctoNEAR (or token units) as a string
  raised: string
  deadline_ms: number
  token: string | null
  claimed: boolean
  backer_count: number
  status: 'Open' | 'Succeeded' | 'Failed'
}

export async function getCampaigns(fromIndex = 0, limit = 20): Promise<CampaignView[]> {
  const page = await provider.callFunction(CONTRACT_ID, 'get_campaigns', {
    from_index: fromIndex,
    limit,
  })
  return (page ?? []) as CampaignView[]
}

// ---- change calls: signed by the user's wallet ----

const GAS = BigInt('30000000000000')        // 30 Tgas
const PAYOUT_GAS = BigInt('50000000000000') // 50 Tgas: transfer + callback

export async function pledge(campaignId: number, amountNear: string) {
  const deposit = parseNearAmount(amountNear) // "2.5" -> "2500000000000000000000000"
  if (!deposit) throw new Error('invalid amount')
  const wallet = await selector.wallet()
  return wallet.signAndSendTransaction({
    receiverId: CONTRACT_ID,
    actions: [
      actionCreators.functionCall('pledge', { campaign_id: campaignId }, GAS, BigInt(deposit)),
    ],
  })
}

export async function refund(campaignId: number) {
  const wallet = await selector.wallet()
  return wallet.signAndSendTransaction({
    receiverId: CONTRACT_ID,
    actions: [
      actionCreators.functionCall('refund', { campaign_id: campaignId }, PAYOUT_GAS, BigInt(0)),
    ],
  })
}

import { formatNearAmount } from '@near-js/utils'
import { initNear, signIn, accountId, getCampaigns, pledge, type CampaignView } from './near'

function card(c: CampaignView): string {
  const raised = formatNearAmount(c.raised, 2)
  const goal = formatNearAmount(c.goal, 2)
  const ends = new Date(c.deadline_ms).toLocaleString()
  return `<li>
    <h3>${c.title}</h3>
    <p>${raised} / ${goal} NEAR · ${c.backer_count} backers · ${c.status} · ends ${ends}</p>
    ${c.status === 'Open' && !c.token ? `<button data-pledge="${c.id}">Pledge 1 NEAR</button>` : ''}
  </li>`
}

async function render() {
  const list = document.querySelector('#campaigns')!
  const campaigns = await getCampaigns()
  list.innerHTML = campaigns.map(card).join('')
}

document.addEventListener('click', async (e) => {
  const id = (e.target as HTMLElement).dataset.pledge
  if (id === undefined) return
  if (!accountId()) return signIn()
  await pledge(Number(id), '1')
  await render()
})

await initNear()
document.querySelector('#who')!.textContent = accountId() ?? 'not signed in'
await render()