Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

docs: Add Transaction component to the landing page #979

Merged
merged 8 commits into from
Aug 5, 2024
Merged

docs: Add Transaction component to the landing page #979

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
1b44823
docs: Add Transaction component to landing page
cpcramer Aug 5, 2024
6e28233
update text
cpcramer Aug 5, 2024
7798348
bump @coinbase/onchainkit version to 0.27.1
cpcramer Aug 5, 2024
9f21ce3
Add titles to all <a> tags to improve SEO
cpcramer Aug 5, 2024
75ef8dc
Refactor to use base.id instead of hardcoding the id
cpcramer Aug 5, 2024
7b7ae34
lowercase SVG folder
cpcramer Aug 5, 2024
0aa4a70
test
cpcramer Aug 5, 2024
d7fb32b
udpate
cpcramer Aug 5, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
27 changes: 27 additions & 0 deletions site/docs/components/landing/NavigationList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -81,6 +81,28 @@ const swapSvg = (
</svg>
);

const transactionSvg = (
cpcramer marked this conversation as resolved.
Show resolved Hide resolved
<svg
width="31"
height="30"
viewBox="0 0 31 30"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<title>Transaction SVG</title>
<path
className="fill-gray-50 group-hover:fill-gray-800"
d="M0.5 20V16.875H30.5L20.5 27.5L21.125 20H0.5Z"
fill="#F9FAFB"
/>
<path
className="fill-gray-50 group-hover:fill-gray-800"
d="M30.5 10V13.125L0.5 13.125L10.5 2.5L9.875 10L30.5 10Z"
fill="#F9FAFB"
/>
</svg>
);

const frameSvg = (
<svg
width="34"
Expand Down Expand Up @@ -129,6 +151,11 @@ const navItems = [
svg: swapSvg,
label: 'Swap',
},
{
href: '#transaction',
svg: transactionSvg,
label: 'Transaction',
},
{
href: '#frame',
svg: frameSvg,
Expand Down
99 changes: 94 additions & 5 deletions site/docs/pages/index.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,15 @@ import NavigationList from '../components/landing/NavigationList';
import SwapWrapper from '../components/SwapWrapper';
import TokenSelector from '../components/TokenSelector';
import WalletComponents from '../components/WalletComponents';
import TransactionWrapper from '../components/TransactionWrapper';
import {
Transaction,
TransactionButton,
TransactionSponsor,
TransactionStatus,
TransactionStatusAction,
TransactionStatusLabel,
} from '@coinbase/onchainkit/transaction';

<div id="blobs">
<div
Expand Down Expand Up @@ -117,7 +126,7 @@ bun add @coinbase/onchainkit
<p className="text-base md:text-base pb-[24px] md:text-left text-center">
Display ENS [avatars](/identity/avatar), Attestation [badges](/identity/badge), ENS [names](/identity/name) and account [addresses](/identity/address).
</p>
<a href="/identity/identity" className="mx-auto md:m-0 flex justify-center items-center border border-indigo-400 text-indigo-400 font-bold leading-6 px-4 py-3 rounded-xl border-solid w-[180px]">
<a href="/identity/identity" className="mx-auto md:m-0 flex justify-center items-center border border-indigo-400 text-indigo-400 font-bold leading-6 px-4 py-3 rounded-xl border-solid w-[210px]">
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Had to increase the width of all Start with * buttons otherwise Start with Transaction would not fit on one line.

Start with Identity
</a>
<div className="flex grow md:flex-row pt-[44px] flex-col">
Expand Down Expand Up @@ -165,7 +174,7 @@ bun add @coinbase/onchainkit
<p className="text-base md:text-base pb-[24px] md:text-left text-center">
Create or connect your wallet with [Connect Wallet](/wallet/wallet), powered by [Smart Wallet](https://www.smartwallet.dev/why).
</p>
<a href="/wallet/wallet" className="mx-auto md:m-0 flex justify-center items-center border border-indigo-400 text-indigo-400 font-bold leading-6 px-4 py-3 rounded-xl border-solid w-[180px]">
<a href="/wallet/wallet" className="mx-auto md:m-0 flex justify-center items-center border border-indigo-400 text-indigo-400 font-bold leading-6 px-4 py-3 rounded-xl border-solid w-[210px]">
Start with Wallet
</a>
<div className="flex grow md:flex-row pt-[44px] flex-col">
Expand Down Expand Up @@ -231,7 +240,7 @@ bun add @coinbase/onchainkit
<p className="text-base md:text-base pb-[24px] md:text-left text-center">
Search [Tokens](/token/types#token) using [getTokens](/token/get-tokens) and display them with [TokenSearch](/token/token-search), [TokenChip](/token/token-chip), and [TokenRow](/token/token-row).
</p>
<a href="/token/token-chip" className="mx-auto md:m-0 flex justify-center items-center border border-indigo-400 text-indigo-400 font-bold leading-6 px-4 py-3 rounded-xl border-solid w-[180px]">
<a href="/token/token-chip" className="mx-auto md:m-0 flex justify-center items-center border border-indigo-400 text-indigo-400 font-bold leading-6 px-4 py-3 rounded-xl border-solid w-[210px]">
Start with Tokens
</a>
<div className="flex grow md:flex-row pt-[44px] flex-col">
Expand Down Expand Up @@ -286,7 +295,7 @@ setFilteredTokens(filteredTokens);
<p className="text-base md:text-base pb-[24px] md:text-left text-center">
Swap [Tokens](/token/types#token) using the [Swap](/swap/swap) components.
</p>
<a href="/swap/swap" className="mx-auto md:m-0 flex justify-center items-center border border-indigo-400 text-indigo-400 font-bold leading-6 px-4 py-3 rounded-xl border-solid w-[180px]">
<a href="/swap/swap" className="mx-auto md:m-0 flex justify-center items-center border border-indigo-400 text-indigo-400 font-bold leading-6 px-4 py-3 rounded-xl border-solid w-[210px]">
Start with Swap
</a>
<div className="flex grow flex-col items-center md:flex-row pt-[44px] md:pt-[20px]">
Expand Down Expand Up @@ -351,6 +360,86 @@ setFilteredTokens(filteredTokens);
</div>
</aside>

<main id="transaction" className="pt-[56px] flex flex-col gap-4 md:flex-row md:text-left text-center">
<a href="#transaction">
cpcramer marked this conversation as resolved.
Show resolved Hide resolved
<h3 className="basis-1/2 py-[15px] text-4xl md:text-4xl">Transaction</h3>
</a>
</main>
<aside className="pb-6">
<p className="text-base md:text-base pb-[24px] md:text-left text-center">
Trigger onchain operations and sponsor them with [Paymaster](https://www.coinbase.com/developer-platform/products/paymaster).
</p>
<a href="/transaction/transaction" className="mx-auto md:m-0 flex justify-center items-center border border-indigo-400 text-indigo-400 font-bold leading-6 px-4 py-3 rounded-xl border-solid w-[210px]">
cpcramer marked this conversation as resolved.
Show resolved Hide resolved
Start with Transaction
</a>
<div className="flex grow md:flex-row pt-[44px] flex-col">
<div className="w-[664px] max-w-full">
```tsx
<Transaction // [!code focus]
address={address}
chainId={84532}
cpcramer marked this conversation as resolved.
Show resolved Hide resolved
contracts={[
{
address: clickContractAddress,
cpcramer marked this conversation as resolved.
Show resolved Hide resolved
abi: clickContractAbi,
cpcramer marked this conversation as resolved.
Show resolved Hide resolved
functionName: 'click',
cpcramer marked this conversation as resolved.
Show resolved Hide resolved
args: [],
},
]}
> // [!code focus]
<TransactionButton /> // [!code focus]
<TransactionSponsor /> // [!code focus]
<TransactionStatus> // [!code focus]
<TransactionStatusLabel /> // [!code focus]
<TransactionStatusAction /> // [!code focus]
</TransactionStatus> // [!code focus]
</Transaction> // [!code focus]
```
</div>
<div className='flex grow items-center justify-center h-24 mt-[50px] md:mt-0 md:h-auto'>
<App>
<TransactionWrapper>
{({ address, contracts, onError, onSuccess }) => {
const capabilities = {
paymasterService: {
url: import.meta.env.VITE_CDP_PAYMASTER_AND_BUNDLER_ENDPOINT,
},
}
if (address) {
return (
<Transaction
address={address}
capabilities={capabilities}
chainId={84532}
contracts={contracts}
onError={onError}
onSuccess={onSuccess}
>
<TransactionButton className="w-full md:w-[240px] px-4 py-2 text-white bg-indigo-600 rounded-lg hover:bg-indigo-700 transition-colors" />
<TransactionSponsor />
<TransactionStatus>
<TransactionStatusLabel />
<TransactionStatusAction />
</TransactionStatus>
</Transaction>
)
} else {
return (
<Wallet>
<ConnectWallet>
<Avatar className="h-6 w-6" />
<Name />
</ConnectWallet>
</Wallet>
)
}
}}
</TransactionWrapper>
</App>
</div>
</div>
</aside>

<main id="frame" className="pt-[56px] flex flex-col gap-4 md:flex-row md:text-left text-center">
<a href="#frame">
<h3 className="basis-1/2 py-[15px] text-4xl md:text-4xl">Frame</h3>
Expand All @@ -360,7 +449,7 @@ setFilteredTokens(filteredTokens);
<p className="text-base md:text-base pb-[24px] md:text-left text-center">
Test, build, and ship your Farcaster frames with [FrameMetadata](/frame/frame-metadata).
</p>
<a href="/frame/frame-metadata" className="mx-auto md:m-0 flex justify-center items-center border border-indigo-400 text-indigo-400 font-bold leading-6 px-4 py-3 rounded-xl border-solid w-[180px]">
<a href="/frame/frame-metadata" className="mx-auto md:m-0 flex justify-center items-center border border-indigo-400 text-indigo-400 font-bold leading-6 px-4 py-3 rounded-xl border-solid w-[210px]">
Start with Frame
</a>
<div className="flex grow flex-col items-center md:flex-row pt-[44px]">
Expand Down
2 changes: 1 addition & 1 deletion site/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
"preview": "vocs preview"
},
"dependencies": {
"@coinbase/onchainkit": "0.26.14",
"@coinbase/onchainkit": "0.27.1",
"@types/react": "latest",
"@vercel/edge": "^1.1.1",
"permissionless": "^0.1.29",
Expand Down
10 changes: 5 additions & 5 deletions site/yarn.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -479,9 +479,9 @@ __metadata:
languageName: node
linkType: hard

"@coinbase/onchainkit@npm:0.26.14":
version: 0.26.14
resolution: "@coinbase/onchainkit@npm:0.26.14"
"@coinbase/onchainkit@npm:0.27.1":
version: 0.27.1
resolution: "@coinbase/onchainkit@npm:0.27.1"
dependencies:
"@rainbow-me/rainbowkit": "npm:^2.1.3"
"@tanstack/react-query": "npm:^5"
Expand All @@ -496,7 +496,7 @@ __metadata:
"@xmtp/frames-validator": ^0.6.0
react: ^18
react-dom: ^18
checksum: f877c575bf4e83182c909a85ad55101b5539b51e1150e8c2905151409b5b52242a23dc12a147621e5705c1df5a94b453e2c592bb3abbbcbdc0eb08df65a916b2
checksum: b36180658913b9285a8591d6316c968db4a412c9d30cfaca7a2194794337347105a5a3e8d408842fd1322c27bf5b79473b59a458c9b71b771dea93f5f11789b5
languageName: node
linkType: hard

Expand Down Expand Up @@ -7836,7 +7836,7 @@ __metadata:
version: 0.0.0-use.local
resolution: "onchainkit@workspace:."
dependencies:
"@coinbase/onchainkit": "npm:0.26.14"
"@coinbase/onchainkit": "npm:0.27.1"
"@types/react": "npm:latest"
"@vercel/edge": "npm:^1.1.1"
permissionless: "npm:^0.1.29"
Expand Down