{"version":3,"file":"SetupNewWallet.mjs","sources":["../../../../../../../../../../web/src/ui/b2c/screens/Crypto/SetupNewWallet.tsx"],"sourcesContent":["import { useLingui } from '@lingui/react/macro';\nimport { Wallets } from '@stytch/core/public';\nimport React from 'react';\n\nimport { useCryptoButtonProps, WalletToText } from '../../../../utils/crypto';\nimport Button, { ButtonAnchor } from '../../../components/atoms/Button';\nimport Column from '../../../components/atoms/Column';\nimport ButtonColumn from '../../../components/molecules/ButtonColumn';\nimport TextColumn from '../../../components/molecules/TextColumn';\nimport { AppScreens, useGlobalReducer } from '../../GlobalContextProvider';\n\nexport const SetupNewWallet = () => {\n  const { t } = useLingui();\n  const [, dispatch] = useGlobalReducer();\n\n  const { getIcon, getId } = useCryptoButtonProps();\n  const walletsToRender = [Wallets.Metamask, Wallets.Phantom, Wallets.Coinbase, Wallets.Binance];\n\n  return (\n    <Column gap={6}>\n      <TextColumn\n        header={t({ id: 'crypto.setupNewWallet.title', message: 'Set up a new crypto wallet' })}\n        body={t({\n          id: 'crypto.setupNewWallet.content',\n          message: 'Get started by downloading any Ethereum or Solana wallet.',\n        })}\n        helper={t({\n          id: 'crypto.setupNewWallet.instruction',\n          message:\n            'We’ve included a few examples of wallet extensions you can find below. Once you’ve set up your wallet, click “Go back” to use it and sign in.',\n        })}\n      />\n\n      <ButtonColumn>\n        {walletsToRender.map((wallet) => {\n          const Icon = getIcon(wallet);\n          return (\n            <ButtonAnchor\n              key={wallet}\n              variant=\"outline\"\n              target=\"_blank\"\n              rel=\"noreferrer\"\n              icon={<Icon />}\n              href=\"https://metamask.io/\"\n              id={getId(wallet)}\n            >\n              {t(WalletToText[wallet])}\n            </ButtonAnchor>\n          );\n        })}\n\n        <Button variant=\"primary\" onClick={() => dispatch({ type: 'transition', screen: AppScreens.Main })}>\n          {t({ id: 'button.goBack', message: 'Go back' })}\n        </Button>\n      </ButtonColumn>\n    </Column>\n  );\n};\n"],"names":["SetupNewWallet","useLingui","dispatch","useGlobalReducer","getIcon","getId","useCryptoButtonProps","walletsToRender","Wallets","Metamask","Phantom","Coinbase","Binance","React","Column","gap","TextColumn","header","body","helper","ButtonColumn","map","wallet","Icon","ButtonAnchor","key","variant","target","rel","icon","href","id","WalletToText","Button","onClick","type","screen","AppScreens","Main"],"mappings":";;;;;;;;;;MAWaA,cAAAA,GAAiB,IAAA;AAC5B,IAAA,MAAM,EAAA,IAAA,EAAA,OAAA,EAAA,CAAA,EAAA,GAAA,EAAA,GAAQC,SAAAA,EAAAA;IACd,MAAM,GAAGC,SAAS,GAAGC,gBAAAA,EAAAA;AAErB,IAAA,MAAM,EAAEC,OAAO,EAAEC,KAAK,EAAE,GAAGC,oBAAAA,EAAAA;AAC3B,IAAA,MAAMC,eAAAA,GAAkB;AAACC,QAAAA,OAAAA,CAAQC,QAAQ;AAAED,QAAAA,OAAAA,CAAQE,OAAO;AAAEF,QAAAA,OAAAA,CAAQG,QAAQ;AAAEH,QAAAA,OAAAA,CAAQI;AAAQ,KAAA;AAE9F,IAAA,qBACEC,EAAA,CAAA,aAAA,CAACC,MAAAA,EAAAA;QAAOC,GAAAA,EAAK;qBACXF,EAAA,CAAA,aAAA,CAACG,UAAAA,EAAAA;QACCC,MAAM,EAAA,OAAA,CAAA,CAAA,CAAA;;;;QACNC,IAAI,EAAA,OAAA,CAAA,CAAA,CAAA;;;;QAIJC,MAAM,EAAA,OAAA,CAAA,CAAA,CAAA;;;;AAOR,KAAA,CAAA,gBAAAN,EAAA,CAAA,aAAA,CAACO,YAAAA,EAAAA,IAAAA,EACEb,eAAAA,CAAgBc,GAAG,CAAC,CAACC,MAAAA,GAAAA;AACpB,QAAA,MAAMC,OAAOnB,OAAAA,CAAQkB,MAAAA,CAAAA;AACrB,QAAA,qBACET,EAAA,CAAA,aAAA,CAACW,YAAAA,EAAAA;YACCC,GAAAA,EAAKH,MAAAA;YACLI,OAAAA,EAAQ,SAAA;YACRC,MAAAA,EAAO,QAAA;YACPC,GAAAA,EAAI,YAAA;AACJC,YAAAA,IAAAA,gBAAMhB,EAAA,CAAA,aAAA,CAACU,IAAAA,EAAAA,IAAAA,CAAAA;YACPO,IAAAA,EAAK,sBAAA;AACLC,YAAAA,EAAAA,EAAI1B,KAAAA,CAAMiB,MAAAA;AAEPU,SAAAA,EAAAA,OAAAA,CAAAA,CAAAA,CAAAA,YAAY,CAACV,MAAAA,CAAO,CAAA,CAAA;AAG7B,IAAA,CAAA,CAAA,gBAEAT,EAAA,CAAA,aAAA,CAACoB,MAAAA,EAAAA;QAAOP,OAAAA,EAAQ,SAAA;AAAUQ,QAAAA,OAAAA,EAAS,IAAMhC,QAAAA,CAAS;gBAAEiC,IAAAA,EAAM,YAAA;AAAcC,gBAAAA,MAAAA,EAAQC,WAAWC;AAAK,aAAA;;;;;AAMxG;;;;"}