-
Notifications
You must be signed in to change notification settings - Fork 3
Orderly deposit #416
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.
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
Open
aqt-dev
wants to merge
6
commits into
main
Choose a base branch
from
orderly-deposit
base: main
Could not load branches
Branch not found: {{ refName }}
Loading
Could not load tags
Nothing to show
Loading
Are you sure you want to change the base?
Some commits from the old base branch may be removed from the timeline,
and old review comments may become outdated.
Open
Orderly deposit #416
Changes from all commits
Commits
Show all changes
6 commits
Select commit
Hold shift + click to select a range
0ed5139
orderly deposit
aqt-dev 5d8f20c
orderly deposit works
aqt-dev 518323e
orderly deposit
aqt-dev b43b794
orderly deposit
aqt-dev 9369b62
Merge branch 'main' into orderly-deposit
aqt-dev db7ed45
Merge branch 'main' into orderly-deposit
aqt-dev File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
71 changes: 71 additions & 0 deletions
71
apps/anyspend-demo-nextjs/src/app/components/AnySpendOrderlyDepositButton.tsx
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,71 @@ | ||
| "use client"; | ||
|
|
||
| import { AnySpendOrderlyDeposit } from "@b3dotfun/sdk/anyspend/react"; | ||
| import { useAccountWallet } from "@b3dotfun/sdk/global-account/react"; | ||
| import { useState } from "react"; | ||
|
|
||
| // Demo broker ID - replace with your actual broker ID from Orderly | ||
| const DEMO_BROKER_ID = "volt"; | ||
|
|
||
| export function AnySpendOrderlyDepositButton() { | ||
| const { address } = useAccountWallet(); | ||
| const [isModalOpen, setIsModalOpen] = useState(false); | ||
|
|
||
| const handleOpenModal = () => { | ||
| setIsModalOpen(true); | ||
| }; | ||
|
|
||
| const handleCloseModal = () => { | ||
| setIsModalOpen(false); | ||
| }; | ||
|
|
||
| const handleSuccess = (amount: string) => { | ||
| console.log("Orderly deposit successful! Amount:", amount); | ||
| }; | ||
|
|
||
| return ( | ||
| <> | ||
| <button | ||
| onClick={handleOpenModal} | ||
| className="group flex h-40 w-full flex-col justify-between overflow-hidden rounded-lg border border-gray-100 bg-white p-6 text-left shadow-sm transition-all hover:border-green-100 hover:shadow-md" | ||
| > | ||
| <div> | ||
| <h3 className="text-lg font-medium text-gray-900">AnySpend + Orderly</h3> | ||
| <p className="mt-1 text-sm text-gray-500">Deposit any token to Orderly on Arbitrum</p> | ||
| </div> | ||
| <div className="flex items-center gap-2"> | ||
| <span className="rounded bg-green-100 px-2 py-1 text-xs text-green-700">Any token</span> | ||
| <span className="rounded bg-blue-100 px-2 py-1 text-xs text-blue-700">Arbitrum</span> | ||
| </div> | ||
| </button> | ||
|
|
||
| {/* Modal */} | ||
| {isModalOpen && ( | ||
| <div className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50"> | ||
| <div className="mx-4 w-full max-w-lg"> | ||
| {/* AnySpend Orderly Deposit Component */} | ||
| {address ? ( | ||
| <AnySpendOrderlyDeposit | ||
| brokerId={DEMO_BROKER_ID} | ||
| mode="page" | ||
| onSuccess={handleSuccess} | ||
| onClose={handleCloseModal} | ||
| minAmount={1} | ||
| /> | ||
| ) : ( | ||
| <div className="rounded-lg bg-white p-6 text-center shadow-xl"> | ||
| <p className="text-sm text-gray-500">Connect wallet to deposit</p> | ||
| <button | ||
| onClick={handleCloseModal} | ||
| className="mt-4 rounded-lg border border-gray-300 px-4 py-2 text-sm text-gray-600 hover:bg-gray-50" | ||
| > | ||
| Close | ||
| </button> | ||
| </div> | ||
| )} | ||
| </div> | ||
| </div> | ||
| )} | ||
| </> | ||
| ); | ||
| } |
136 changes: 136 additions & 0 deletions
136
apps/anyspend-demo-nextjs/src/app/components/OrderlyDepositButton.tsx
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,136 @@ | ||
| "use client"; | ||
|
|
||
| import { OrderlyDeposit } from "@b3dotfun/sdk/anyspend/react"; | ||
| import { useAccountWallet } from "@b3dotfun/sdk/global-account/react"; | ||
| import { useState } from "react"; | ||
|
|
||
| // Demo broker ID - replace with your actual broker ID from Orderly | ||
| const DEMO_BROKER_ID = "volt"; | ||
|
|
||
| // Available chains for the demo | ||
| const DEMO_CHAINS = [ | ||
| { id: 42161, name: "Arbitrum" }, | ||
| { id: 10, name: "Optimism" }, | ||
| { id: 8453, name: "Base" }, | ||
| { id: 1, name: "Ethereum" }, | ||
| { id: 137, name: "Polygon" }, | ||
| ]; | ||
|
|
||
| export function OrderlyDepositButton() { | ||
| const { address } = useAccountWallet(); | ||
|
|
||
| const [isModalOpen, setIsModalOpen] = useState(false); | ||
| const [selectedChainId, setSelectedChainId] = useState(42161); | ||
| const [amount, setAmount] = useState("10"); | ||
|
|
||
| const handleOpenModal = () => { | ||
| setIsModalOpen(true); | ||
| }; | ||
|
|
||
| const handleCloseModal = () => { | ||
| setIsModalOpen(false); | ||
| }; | ||
|
|
||
| const handleSuccess = (txHash: string) => { | ||
| console.log("Orderly deposit successful!", txHash); | ||
| // Optionally close modal after success | ||
| // setIsModalOpen(false); | ||
| }; | ||
|
|
||
| const handleError = (error: Error) => { | ||
| console.error("Orderly deposit failed:", error); | ||
| }; | ||
|
|
||
| return ( | ||
| <> | ||
| <button | ||
| onClick={handleOpenModal} | ||
| className="group flex h-40 w-full flex-col justify-between overflow-hidden rounded-lg border border-gray-100 bg-white p-6 text-left shadow-sm transition-all hover:border-purple-100 hover:shadow-md" | ||
| > | ||
| <div> | ||
| <h3 className="text-lg font-medium text-gray-900">Orderly Deposit</h3> | ||
| <p className="mt-1 text-sm text-gray-500">Deposit USDC to Orderly Network vault (omnichain)</p> | ||
| </div> | ||
| <div className="flex items-center gap-2"> | ||
| <span className="rounded bg-purple-100 px-2 py-1 text-xs text-purple-700">16 chains supported</span> | ||
| </div> | ||
| </button> | ||
|
|
||
| {/* Modal */} | ||
| {isModalOpen && ( | ||
| <div className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50"> | ||
| <div className="mx-4 w-full max-w-md rounded-lg bg-white p-6 shadow-xl"> | ||
| {/* Header */} | ||
| <div className="mb-4 flex items-center justify-between"> | ||
| <h3 className="text-lg font-medium text-gray-900">Orderly Deposit</h3> | ||
| <button onClick={handleCloseModal} className="text-gray-400 hover:text-gray-600"> | ||
| <svg className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | ||
| <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" /> | ||
| </svg> | ||
| </button> | ||
| </div> | ||
|
|
||
| {/* Chain selector */} | ||
| <div className="mb-4"> | ||
| <label className="mb-1 block text-sm font-medium text-gray-700">Chain</label> | ||
| <select | ||
| value={selectedChainId} | ||
| onChange={e => setSelectedChainId(Number(e.target.value))} | ||
| className="w-full rounded-md border border-gray-300 px-3 py-2 focus:border-purple-500 focus:outline-none focus:ring-2 focus:ring-purple-500" | ||
| > | ||
| {DEMO_CHAINS.map(chain => ( | ||
| <option key={chain.id} value={chain.id}> | ||
| {chain.name} | ||
| </option> | ||
| ))} | ||
| </select> | ||
| </div> | ||
|
|
||
| {/* Amount input */} | ||
| <div className="mb-4"> | ||
| <label className="mb-1 block text-sm font-medium text-gray-700">Amount (USDC)</label> | ||
| <input | ||
| type="number" | ||
| value={amount} | ||
| onChange={e => setAmount(e.target.value)} | ||
| placeholder="Enter amount" | ||
| className="w-full rounded-md border border-gray-300 px-3 py-2 focus:border-purple-500 focus:outline-none focus:ring-2 focus:ring-purple-500" | ||
| /> | ||
| <div className="mt-2 flex gap-2"> | ||
| {["10", "50", "100", "500"].map(val => ( | ||
| <button | ||
| key={val} | ||
| onClick={() => setAmount(val)} | ||
| className={`flex-1 rounded border px-2 py-1 text-sm ${ | ||
| amount === val | ||
| ? "border-purple-500 bg-purple-50 text-purple-700" | ||
| : "border-gray-300 text-gray-600 hover:border-purple-300" | ||
| }`} | ||
| > | ||
| ${val} | ||
| </button> | ||
| ))} | ||
| </div> | ||
| </div> | ||
|
|
||
| {/* Orderly Deposit Component */} | ||
| {address ? ( | ||
| <OrderlyDeposit | ||
| brokerId={DEMO_BROKER_ID} | ||
| chainId={selectedChainId} | ||
| amount={amount} | ||
| onSuccess={handleSuccess} | ||
| onError={handleError} | ||
| showFeeBreakdown={true} | ||
| /> | ||
| ) : ( | ||
| <div className="rounded-lg bg-gray-100 p-4 text-center text-sm text-gray-500"> | ||
| Connect wallet to deposit | ||
| </div> | ||
| )} | ||
| </div> | ||
| </div> | ||
| )} | ||
| </> | ||
| ); | ||
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
A potentially sensitive shared secret is hardcoded as a default value. Hardcoding secrets in source code is a critical security vulnerability, as it exposes them to anyone with access to the repository. Additionally, the
NEXT_PUBLIC_prefix makes this variable accessible on the client-side, increasing the risk. Secrets should be loaded exclusively from environment variables, and the application should be configured to fail at build time if a required secret is missing in production environments.