feat: add erc20 sponsorship card #1631
Conversation
blakecduncan
requested review from
moldy530,
rthomare,
dancoombs,
dphilipson,
linnall,
adamegyed,
howydev,
Zer0dot,
jaypaik,
Blu-J,
jakehobbs,
avarobinson and
florrdv
as code owners
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
How to use the Graphite Merge QueueAdd the label graphite-merge-queue to this PR to add it to the merge queue. You must have a Graphite account in order to use the merge queue. Sign up using this link. An organization admin has enabled the Graphite Merge Queue in this repository. Please do not merge from GitHub as this will restart CI on PRs being processed by the merge queue. |
blakecduncan
changed the title
🌿 Documentation Preview
|
|
|
||
| const queryKey = useMemo( | ||
| () => ["erc20Balance", tokenAddress, accountAddress, chain?.id, rpcUrl], | ||
| [tokenAddress, accountAddress, chain, rpcUrl, params.accountMode] |
There was a problem hiding this comment.
React Hook useMemo has an unnecessary dependency: 'params.accountMode'. Either exclude it or remove the dependency array.
| constructor(string memory name, string memory symbol) | ||
| ERC20(name, symbol) | ||
| { | ||
| _decimals = 6; |
There was a problem hiding this comment.
Added this because I need an erc20 token that has 6 decimals so that our policy can accurately price the token with the priceReferenceTokenAddress set to usdc on mainnet
There was a problem hiding this comment.
Also, I didn't just edit the other erc20 contract we have to accept a decimal parameter because I didn't want to mess up the deployment address of that contract. Not sure if that matters but did that just in case
| } | ||
|
|
||
| function mintTo(address recipient) public returns (uint256) { | ||
| if (!usdcToken.transferFrom(msg.sender, address(this), mintPrice)) { |
There was a problem hiding this comment.
charging 1 of our test token to mint the nft
| @@ -45,7 +45,7 @@ export default function Home() { | |||
| <PreviewNav showCode={showCode} setShowCode={setShowCode} /> | |||
| <PreviewWrapper showCode={showCode} /> | |||
| {/* Toast viewport */} | |||
| <Viewport className="absolute lg:bottom-10 lg:right-10 bottom-10 right-1/2 translate-x-1/2 lg:translate-x-0 z-50 outline-none" /> | |||
| <Viewport className="fixed lg:bottom-10 lg:right-10 bottom-10 right-1/2 translate-x-1/2 lg:translate-x-0 z-[1000000] outline-none" /> | |||
There was a problem hiding this comment.
I don't like the high z index but I needed to do this so the toast shows up above the modal overlay
| {/* 1) Warning */} | ||
| <div className="flex flex-col gap-4 pb-2"> | ||
| <div className="h-12"> | ||
| <Transition |
There was a problem hiding this comment.
Added Transtion from headless ui to help with the animation. Let me know if we don't want to use this but it definitely cleaned up some of the code
| }, | ||
| }); | ||
|
|
||
| const estimateFee = async (userOperations: UserOperationCall[]) => { |
There was a problem hiding this comment.
I think we would like to have a function like this in the sdk. I'd like to get some feedback on this. The gas estimates are pretty accurate but I kinda figured this out from looking through other code and chatgpt. So would like another set of eyes
Here is the asana ticket
Fun fact: 7702 mode is significantly cheaper for the nft mint
There was a problem hiding this comment.
Also, this reverts if the account isn't funded with enough erc20 tokens for the txn. I'm not sure if there is a way around that
| >({ | ||
| queryKey: ["ethUsdPrice", ETH_USD_PRICE_FEED_ADDRESS, mainnet.id], | ||
| queryFn: async () => { | ||
| const [roundData, feedDecimals] = await Promise.all([ |
There was a problem hiding this comment.
getting the price from chainlink so that I can show an accurate fee in usd terms
| @@ -52,6 +65,11 @@ export const useModularAccountV2Client = ({ | |||
| // Must destructure the inner fields to use as dependencies in the useEffect hook, otherwise the object reference will be compared and cause an infinite render loop | |||
| const { key, entityId, accountAddress } = localKeyOverride ?? {}; | |||
|
|
|||
| useEffect(() => { | |||
There was a problem hiding this comment.
I needed this because when I switched between modes from 7702 to default, the client wouldn't update when trying to use the erc20 modal
Pull Request Checklist
yarn test)sitefolder, and guidelines for updating/adding docs can be found in the contribution guide)feat!: breaking change)yarn lint:check) and fix any issues? (yarn lint:write)PR-Codex overview
This PR focuses on enhancing the
Erc20modal functionality, including new ERC20 minting features and improved UI components across the application.Detailed summary
Erc20Modalexport inexamples/ui-demo/src/components/modals/Erc20/index.ts.examples/ui-demo/src/components/modals/index.ts.examples/ui-demo/src/utils/constants.ts.MintCardandBadgecomponents with additional properties.Viewportstyling inexamples/ui-demo/src/app/page.tsx.examples/ui-demo/package.json.BagIconcomponent inexamples/ui-demo/src/components/modals/Erc20/BagIcon.tsx.examples/ui-demo/src/hooks/useMintErc20.ts.examples/ui-demo/src/components/modals/Erc20/utils.ts.Erc20SponsorshipCardto include NFT minting features.examples/ui-demo/src/components/modals/Erc20/Erc20Modal.tsx.