diff --git a/package.json b/package.json index c1682d3..025e204 100644 --- a/package.json +++ b/package.json @@ -40,7 +40,7 @@ "@cosmjs/tendermint-rpc": "^0.31.0", "@dydxprotocol/v4-abacus": "^0.7.2", "@dydxprotocol/v4-client-js": "^0.40.3", - "@dydxprotocol/v4-localization": "^0.1.30", + "@dydxprotocol/v4-localization": "^0.1.31", "@ethersproject/providers": "^5.7.2", "@js-joda/core": "^5.5.3", "@radix-ui/react-collapsible": "^1.0.3", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 7a386c0..a33ab5f 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -33,8 +33,8 @@ dependencies: specifier: ^0.40.3 version: 0.40.3 '@dydxprotocol/v4-localization': - specifier: ^0.1.30 - version: 0.1.30 + specifier: ^0.1.31 + version: 0.1.31 '@ethersproject/providers': specifier: ^5.7.2 version: 5.7.2 @@ -1011,8 +1011,8 @@ packages: - utf-8-validate dev: false - /@dydxprotocol/v4-localization@0.1.30: - resolution: {integrity: sha512-xTlQuQmPz7wfGkjd07giYMAxRrolDbJE3DryJSIMB6R1MBq1wLzAcwp/iR/nELRwilRX9c44Tap0gGt+oAajiQ==} + /@dydxprotocol/v4-localization@0.1.31: + resolution: {integrity: sha512-hjWul8SazSneK37v9qM1gMkO37MncaObtvLzVQuaJDKjb0ojdHVWiIPETwQy/lV5ufR1isxYKMefVPVYQg0fAA==} dev: false /@dydxprotocol/v4-proto@0.4.1: diff --git a/src/views/dialogs/OnboardingDialog.tsx b/src/views/dialogs/OnboardingDialog.tsx index 11593f3..d7132ad 100644 --- a/src/views/dialogs/OnboardingDialog.tsx +++ b/src/views/dialogs/OnboardingDialog.tsx @@ -87,10 +87,10 @@ export const OnboardingDialog = ({ setIsOpen }: ElementProps) => { title: stringGetter({ key: STRING_KEYS.ACKNOWLEDGE_TERMS }), children: ( - + setIsOpen?.(false)} /> ), - width: '20rem', + width: '30rem', }, [OnboardingSteps.DepositFunds]: { title: stringGetter({ key: STRING_KEYS.DEPOSIT }), diff --git a/src/views/dialogs/OnboardingDialog/AcknowledgeTerms.tsx b/src/views/dialogs/OnboardingDialog/AcknowledgeTerms.tsx index e578798..41783e4 100644 --- a/src/views/dialogs/OnboardingDialog/AcknowledgeTerms.tsx +++ b/src/views/dialogs/OnboardingDialog/AcknowledgeTerms.tsx @@ -6,45 +6,67 @@ import { AppRoute } from '@/constants/routes'; import { STRING_KEYS } from '@/constants/localization'; import { ButtonAction } from '@/constants/buttons'; +import { layoutMixins } from '@/styles/layoutMixins'; + import { Button } from '@/components/Button'; import { Link } from '@/components/Link'; type ElementProps = { + onClose?: () => void; onContinue?: () => void; }; -export const AcknowledgeTerms = ({ onContinue }: ElementProps) => { +export const AcknowledgeTerms = ({ onClose, onContinue }: ElementProps) => { const stringGetter = useStringGetter(); - const { saveHasAcknowledgedTerms } = useAccounts(); + const { disconnect, saveHasAcknowledgedTerms } = useAccounts(); const onAcknowledgement = () => { saveHasAcknowledgedTerms(true); onContinue?.(); }; + const onDecline = () => { + disconnect(); + onClose?.(); + } + return ( <> - +

{stringGetter({ - key: STRING_KEYS.LEGAL_UPDATES_DESCRIPTION, + key: STRING_KEYS.TOS_TITLE, params: { - TOU: ( + TERMS_LINK: ( {stringGetter({ key: STRING_KEYS.TERMS_OF_USE })} ), - PRIVACY_POLICY: ( + PRIVACY_POLICY_LINK: ( {stringGetter({ key: STRING_KEYS.PRIVACY_POLICY })} ), }, })} - - +

+ + + + + + {stringGetter({ key: STRING_KEYS.CLOSE })} + + + {stringGetter({ key: STRING_KEYS.I_AGREE })} + + ); }; @@ -59,3 +81,23 @@ Styled.Link = styled(Link)` color: var(--color-accent); } `; + +Styled.TOS = styled.section` + background-color: var(--color-layer-4); + padding: 1rem 1rem 1rem 2rem; + border-radius: 0.875rem; + > ul { + ${layoutMixins.column}; + gap: 1rem; + } +`; + +Styled.Row = styled.div` + ${layoutMixins.row}; + + gap: 1rem; +`; + +Styled.Button = styled(Button)` + flex-grow: 1; +`;