Query issue: Amount does not show on pending page

[ChippuArt]

http://localhost:3000/pending?recipient=54LnyoDbFvSXG4doBpfrZUoytQcJECWqkvDAjjh7sny7&amount=1&label=stark&message=great

The amount is set to 1 but, on the pending page it shows me 0. I have not used the new page to create an QR Code directly, I wanted to use it similar to other pay systems like paypal.

Any idea, what to change? I also saw the getServerSideProps, does this have to do anything with my issue?

export function getServerSideProps() { // Required so getInitialProps re-runs on the server-side // If it runs on client-side then there's no req and the URL reading doesn't work // See https://nextjs.org/docs/api-reference/data-fetching/get-initial-props return { props: {}, }; }

Any help strongly appreciated. 🙌😎😎😎

[mcintyre94]

This is a little bit fiddly with the architecture of the app, but you can do it with relatively little change by updating PaymentProvider

Taking a step back, the reason this doesn't work currently is because recipient, label and message all come from ConfigProvider, which gets its initial values by parsing the URL. This is because in this simple example app we don't have UI for setting those values. Whereas amount is set in the UI, and it comes from PaymentProvider, a different context provider. Currently this does not read the URL for values, it's just client side state that's passed between pages by sharing the context provider.

So if we want to make this work we need to read the amount from the URL in PaymentProvider. Here's one way to do it:

In PaymentProvider.tsx Replace the line const [amount, setAmount] = useState<BigNumber>();

With this:

    const router = useRouter(); // import { useRouter } from 'next/router';
    const { amount: queryAmount } = router.query;

    const initialAmount = useMemo(() => {
        if (!queryAmount) return undefined;
        if (Array.isArray(queryAmount)) return new BigNumber(queryAmount[0]);
        return new BigNumber(queryAmount)
    }, [queryAmount])

    const [amount, setAmount] = useState<BigNumber | undefined>(initialAmount);

Now the amount set on page load is read from the query param if there's one present, otherwise it defaults to undefined as it currently does. Your example URL should then work :)

Example commit making this change: https://github.com/solana-labs/solana-pay/compare/master...mcintyre94:solana-pay:cm-url-amount

[ChippuArt]

Thank you very much. Did you commited this line to the main brunch? Cool. I am looking forward to use this tool. Perfect for so many use cases.